/* =====================================================================
   Brigade (HACCP et pointage) – interface de l'application
   Charte 3.1 « Material 3 Expressive » (niveau expressif) :
     – couleur tonale : une couleur source par application (vert HACCP, orange Pointage, voir
       pointage.css), déclinée en rôles (primary, containers) et en surfaces de ton ; aucun verre,
       aucun flou, aucune ombre portée hors des éléments flottants (FAB, feuille, message) ;
     – formes : pilule au repos et coins 12 à l'appui pour les boutons, cartes 28, tuiles 16,
       champs 4 (remplis, ligne en bas), formes expressives (cookie, sunny) pour les pastilles
       d'icône, les avatars et le décor des bandeaux ;
     – typographie : Roboto Flex, titres et grands chiffres en 800 élargis (axe de largeur),
       libellés en 700, chiffres tabulaires ;
     – mouvement : ressort (la forme rebondit, la couleur non), pastille de navigation qui
       s'étire vers la destination, entrées en cascade, anneau de progression ondulé.
   ===================================================================== */

/* Police de l'interface : Roboto Flex (licence OFL, public/fonts/LICENSE-roboto-flex.txt), variable en graisse (100 à 1000)
   et en largeur (25 à 151 %), sous-ensemble latin avec les accents français. Aucune ressource chargée depuis un autre site. */
@font-face {
  font-family: 'Roboto Flex'; font-style: normal; font-weight: 100 1000; font-stretch: 25% 151%; font-display: swap;
  src: url('/fonts/roboto-flex-latin.woff2') format('woff2');
}

:root {
  /* Rôles de couleur (schéma HACCP, source #006A60) */
  --primary: #006A60;
  --primary-hover: #005048;
  --on-primary: #ffffff;
  --primary-container: #9EF2E4;
  --on-primary-container: #00201C;
  --secondary: #4A635F;
  --secondary-container: #CCE8E2;
  --on-secondary-container: #06201C;
  --tertiary: #8A5100;
  --tertiary-container: #FFDCBE;
  --on-tertiary-container: #2C1600;

  /* Surfaces de ton : la hiérarchie se lit au ton, pas à l'ombre */
  --surface: #F4FBF8;
  --surface-lowest: #ffffff;
  --surface-low: #EEF5F2;
  --surface-container: #E8EFEC;
  --surface-high: #E2E9E6;
  --surface-highest: #DCE4E1;
  --on-surface: #161D1B;
  --on-surface-variant: #3F4946;
  --outline: #6F7977;
  --outline-variant: #BEC9C5;
  --inverse-surface: #2B3230;
  --inverse-on-surface: #ECF2EF;
  --inverse-primary: #82D5C8;
  --scrim: rgba(0, 0, 0, .32);
  --shadow-float: 0 3px 8px rgba(0, 0, 0, .22);

  /* Couleurs étendues : réservées au verdict (conforme, attention, hors norme, info, congé) */
  --ok: #1B6B3A;   --ok-container: #B7F1C5;   --on-ok-container: #00210F;
  --warn: #7A5900; --warn-container: #FFDEA3; --on-warn-container: #261900;
  --bad: #BA1A1A;  --bad-container: #FFDAD6;  --on-bad-container: #410002;
  --info: #3B5BA9; --info-container: #D9E2FF; --on-info-container: #001A42;
  --leave: #6750A4; --leave-container: #E9DDFF; --on-leave-container: #22005D;

  /* Formes : 4 (champs) · 8 (chips, groupes) · 12 (bouton appuyé) · 16 (tuiles, FAB) · 28 (cartes, feuilles) · pleine */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 28px;
  --r-xxl: 28px;
  --r-sheet: 28px;

  /* Mouvement : ressorts du schéma expressif */
  --spring: cubic-bezier(.3, 1.5, .5, 1);
  --spring-soft: cubic-bezier(.3, 1.2, .5, 1);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --nav-h: 64px;
  --rail-w: 96px;
  color-scheme: light;

  /* Formes expressives (masques) : cookie pour les équipements et les personnes, sunny pour la production et le décor */
  --shape-cookie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 4.5Q30.1 1.3 33.8 7.1Q40.6 7.4 40.9 14.3Q46.7 17.9 43.5 24Q46.7 30.1 40.9 33.8Q40.6 40.6 33.8 40.9Q30.1 46.7 24 43.5Q17.9 46.7 14.2 40.9Q7.4 40.6 7.1 33.8Q1.3 30.1 4.5 24Q1.3 17.9 7.1 14.2Q7.4 7.4 14.2 7.1Q17.9 1.3 24 4.5Z'/%3E%3C/svg%3E");
  --shape-sunny: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M20.6 3.7Q24 0 27.4 3.7Q30.9 7.4 35.9 7.2Q41 7 40.8 12.1Q40.6 17.1 44.3 20.6Q48 24 44.3 27.4Q40.6 30.9 40.8 35.9Q41 41 35.9 40.8Q30.9 40.6 27.4 44.3Q24 48 20.6 44.3Q17.1 40.6 12.1 40.8Q7 41 7.2 35.9Q7.4 30.9 3.7 27.4Q0 24 3.7 20.6Q7.4 17.1 7.2 12.1Q7 7 12.1 7.2Q17.1 7.4 20.6 3.7Z'/%3E%3C/svg%3E");

  /* Alias historiques (pages anciennes, styles en ligne, pointage.css) */
  --bg: var(--surface);
  --tint: var(--primary);
  --tint-2: var(--primary-hover);
  --on-tint: var(--on-primary);
  --tint-soft: var(--secondary-container);
  --tint-soft-2: var(--primary-container);
  --on-tint-soft: var(--on-secondary-container);
  --tint-shadow: transparent;
  --tint-ring: var(--primary);
  --ink: var(--on-surface);
  --ink-2: var(--on-surface-variant);
  --ink-3: var(--on-surface-variant);
  --line: var(--outline-variant);
  --line-strong: var(--outline);
  --neutral-soft: var(--surface-highest);
  --neutral-soft-2: var(--surface-high);
  --glass: var(--surface-low);
  --glass-2: var(--surface-container);
  --glass-3: var(--surface-high);
  --glass-edge: transparent;
  --glass-hi: transparent;
  --glass-dark: var(--inverse-surface);
  --field: var(--surface-highest);
  --paper: var(--surface-lowest);
  --shadow: none;
  --ok-soft: var(--ok-container);     --on-ok-soft: var(--on-ok-container);
  --warn-soft: var(--warn-container); --on-warn-soft: var(--on-warn-container);
  --bad-soft: var(--bad-container);   --on-bad-soft: var(--on-bad-container);
  --info-soft: var(--info-container); --on-info-soft: var(--on-info-container);
  --leave-soft: var(--leave-container); --on-leave-soft: var(--on-leave-container);
  --error: var(--bad);
  --on-error: #ffffff;
  --error-container: var(--bad-container);
  --on-error-container: var(--on-bad-container);
  --success: var(--ok);
  --success-container: var(--ok-container);
  --on-success-container: var(--on-ok-container);
  --warning: var(--warn);
  --warning-container: var(--warn-container);
  --on-warning-container: var(--on-warn-container);
  --text: var(--on-surface);
  --muted: var(--on-surface-variant);
  --border: var(--outline-variant);

  /* Pictogrammes utilisés en CSS (case à cocher, liste déroulante, pastille de sélection) */
  --ico-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='black'%3E%3Cpath d='m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z'/%3E%3C/svg%3E");
  --ico-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='white'%3E%3Cpath d='m378-332 363-363q9-9 21.5-9t21.5 9q9 9 9 21.5t-9 21.5L399-267q-9 9-21 9t-21-9L175-449q-9-9-8.5-21.5T176-492q9-9 21.5-9t21.5 9l159 160Z'/%3E%3C/svg%3E");
  --ico-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%233F4946'%3E%3Cpath transform='rotate(90 480 -480)' d='M530-481 353-658q-9-9-8.5-21t9.5-21q9-9 21.5-9t21.5 9l198 198q5 5 7 10t2 11q0 6-2 11t-7 10L396-261q-9 9-21 8.5t-21-9.5q-9-9-9-21.5t9-21.5l176-176Z'/%3E%3C/svg%3E");
}

/* Mode sombre : les mêmes tons, pris plus haut dans la palette (primary 80, container 30).
   L'attribut data-theme est posé par core.js (réglage de l'appareil : automatique, clair ou sombre). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --primary: #82D5C8;
  --primary-hover: #9EF2E4;
  --on-primary: #00382F;
  --primary-container: #005048;
  --on-primary-container: #9EF2E4;
  --secondary: #B1CCC6;
  --secondary-container: #324B47;
  --on-secondary-container: #CCE8E2;
  --tertiary: #FFB77C;
  --tertiary-container: #6B3A00;
  --on-tertiary-container: #FFDCBE;
  --surface: #0E1513;
  --surface-lowest: #090F0D;
  --surface-low: #161D1B;
  --surface-container: #1A2220;
  --surface-high: #252C2A;
  --surface-highest: #303735;
  --on-surface: #DEE4E1;
  --on-surface-variant: #BEC9C5;
  --outline: #89938F;
  --outline-variant: #3F4946;
  --inverse-surface: #DEE4E1;
  --inverse-on-surface: #2B3230;
  --inverse-primary: #006A60;
  --scrim: rgba(0, 0, 0, .5);
  --shadow-float: 0 3px 10px rgba(0, 0, 0, .5);
  --ok: #9CD6AF;   --ok-container: #005322;   --on-ok-container: #B7F1C5;
  --warn: #F2BF4A; --warn-container: #5B4200; --on-warn-container: #FFDEA3;
  --bad: #FFB4AB;  --bad-container: #93000A;  --on-bad-container: #FFDAD6;
  --info: #B1C5FF; --info-container: #22418F; --on-info-container: #D9E2FF;
  --leave: #D0BCFF; --leave-container: #4F378B; --on-leave-container: #E9DDFF;
  --on-error: #690005;
  --ico-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23BEC9C5'%3E%3Cpath transform='rotate(90 480 -480)' d='M530-481 353-658q-9-9-8.5-21t9.5-21q9-9 21.5-9t21.5 9l198 198q5 5 7 10t2 11q0 6-2 11t-7 10L396-261q-9 9-21 8.5t-21-9.5q-9-9-9-21.5t9-21.5l176-176Z'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--surface); }
body {
  margin: 0; background: var(--surface); color: var(--on-surface);
  font: 400 16px/24px 'Roboto Flex', Roboto, system-ui, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; min-height: 100vh;
  overflow-wrap: break-word; /* une adresse longue (lien d'installation, e-mail) passe à la ligne au lieu de sortir de l'écran */
}
a { color: var(--primary); }
h1 { font-size: 1.75rem; line-height: 2.125rem; font-weight: 800; font-stretch: 112%; letter-spacing: -.02em; margin: 8px 0 8px; }
h2 { font-size: 1.375rem; line-height: 1.75rem; font-weight: 700; font-stretch: 105%; letter-spacing: -.01em; margin: 0 0 12px; }
h3 { font-size: 1.0625rem; line-height: 1.5rem; font-weight: 700; }
.lead { color: var(--on-surface-variant); margin: 0 0 20px; }
.muted { color: var(--on-surface-variant); }
.center { text-align: center; }
.ico { width: 24px; height: 24px; fill: currentColor; flex: none; display: inline-block; vertical-align: middle; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
b, strong { font-weight: 700; }

/* Surfaces : une carte posée sur la page est en « low », un élément dans la carte en « container » */
.card, .seg, .watch, .week-card, .first-steps, .feed, .note, .empty, .enroll-box, .dish, .alert-item, .table-wrap,
.punch-row, .audit-item, .auth .card, .enroll-results button, details.block > summary { position: relative; background: var(--surface-low); }
.task, .kpi, .pick-tile, .kiosk-users button, .quick { position: relative; background: var(--surface-container); }

/* ---------- Structure : barre du haut, contenu, navigation ---------- */
.shell { min-height: 100vh; }
.appbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 8px 16px; background: var(--surface); }
.appbar .brand { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; min-width: 0; }
.appbar .brand img { border-radius: 10px; width: 32px; height: 32px; }
.appbar .brand b { font-size: 1.125rem; font-weight: 800; font-stretch: 105%; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appbar .back, .appbar .who {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 10px; border-radius: 999px; min-width: 0;
  background: var(--surface-container); color: var(--on-surface); text-decoration: none; font-size: .9375rem; font-weight: 700; cursor: pointer; border: 0;
  transition: background .2s, border-radius .4s var(--spring), transform .4s var(--spring);
}
.appbar .back:hover, .appbar .who:hover { background: var(--surface-high); }
.appbar .back:active, .appbar .who:active { border-radius: 12px; transform: scale(.96); }
.appbar .who { background: var(--secondary-container); color: var(--on-secondary-container); }
.appbar .back > span, .appbar .who > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appbar .who { flex-shrink: 0; max-width: 50%; }
/* Nom de l'établissement : bouton de changement quand la personne en a plusieurs (gérant multi-établissement, extra). */
.appbar .brand-switch {
  background: none; color: var(--on-surface); font: inherit; padding: 0 12px 0 0; min-height: 48px; border-radius: 999px;
  white-space: nowrap; max-width: 100%; justify-content: flex-start;
}
.appbar .brand-switch:hover { background: var(--surface-container); }
.appbar .brand-switch:active { transform: scale(.97); border-radius: 16px; }
.appbar .brand-switch > .ico { width: 20px; height: 20px; color: var(--on-surface-variant); }
@media (max-width: 599px) { .appbar .brand-switch { white-space: nowrap; padding-block: 0; } }
/* Équipe : rappel de ce que fait chaque rôle */
.role-help { margin: 0 0 8px; padding-left: 20px; color: var(--on-surface-variant); font-size: .9375rem; }
.role-help li { margin: 2px 0; }
.role-help b { color: var(--on-surface); }
/* Aujourd'hui, Températures, Nettoyage : « Mon poste » ou tout l'établissement */
.post-filter { display: flex; margin: 0 0 16px; }
.post-filter > button { flex: 1 1 0; }
@media (max-width: 599px) { .post-filter .pf-more { display: none; } }
/* Vue du groupe (gérant multi-établissement) */
.group-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.group-card { display: grid; gap: 12px; align-content: start; margin: 0; }
.group-card h2 { margin: 0; }
.group-card .kpis { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.group-card > p { margin: 0; }
/* Accueil : changer d'établissement */
.apps-orgs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0 0; } /* le prénom reste lisible : c'est le nom de l'établissement qui se raccourcit */
@media (max-width: 599px) { .appbar .who .who-more { display: none; } }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; text-decoration: none;
  background: var(--secondary-container); color: var(--on-secondary-container); font-weight: 800; font-size: 1rem;
}
.content {
  width: 100%; min-width: 0; max-width: 1040px; margin: 0 auto;
  padding: 8px 16px calc(var(--nav-h) + 96px + env(safe-area-inset-bottom));
}
/* Nouvelle page : le contenu apparaît en fondu, avec une légère montée (courte, sans rebond). La coque, elle, ne bouge pas. */
[data-main] > * { animation: rise .3s var(--ease) backwards; }
[data-main] > :nth-child(2) { animation-delay: .03s; }
[data-main] > :nth-child(3) { animation-delay: .06s; }
[data-main] > :nth-child(n+4) { animation-delay: .09s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* Même page redessinée (après un enregistrement) : pas d'animation d'entrée, rien ne « clignote ». Attribut posé par core.js (markView). */
[data-main][data-still] > * { animation: none; }

/* Indicateur de chargement (Material 3 Expressive) : une forme qui change (soleil, cookie, pentagone, rond) en tournant.
   Il n'apparaît qu'après 0,4 s : un chargement rapide ne montre rien. */
.loading { display: grid; place-items: center; min-height: 160px; margin: 0; font-size: 0; color: transparent; }
[data-main] > .loading { animation: none; }
.loading::before {
  content: ''; width: 48px; height: 48px; background: var(--primary);
  animation: loading-morph 2.4s var(--spring-soft) infinite, loading-spin 4.8s linear infinite, loading-show .25s var(--ease) .4s backwards;
}
@keyframes loading-morph {
  0%, 100% { clip-path: polygon(50.0% 0.0%,56.1% 3.4%,60.6% 10.4%,64.5% 14.9%,70.5% 14.5%,78.6% 12.7%,85.4% 14.6%,87.3% 21.4%,85.5% 29.5%,85.1% 35.5%,89.6% 39.4%,96.6% 43.9%,100.0% 50.0%,96.6% 56.1%,89.6% 60.6%,85.1% 64.5%,85.5% 70.5%,87.3% 78.6%,85.4% 85.4%,78.6% 87.3%,70.5% 85.5%,64.5% 85.1%,60.6% 89.6%,56.1% 96.6%,50.0% 100.0%,43.9% 96.6%,39.4% 89.6%,35.5% 85.1%,29.5% 85.5%,21.4% 87.3%,14.6% 85.4%,12.7% 78.6%,14.5% 70.5%,14.9% 64.5%,10.4% 60.6%,3.4% 56.1%,0.0% 50.0%,3.4% 43.9%,10.4% 39.4%,14.9% 35.5%,14.5% 29.5%,12.7% 21.4%,14.6% 14.6%,21.4% 12.7%,29.5% 14.5%,35.5% 14.9%,39.4% 10.4%,43.9% 3.4%); }
  25% { clip-path: polygon(50.0% 1.0%,55.9% 5.4%,60.6% 10.4%,67.2% 8.4%,74.5% 7.6%,77.4% 14.3%,79.0% 21.0%,85.7% 22.6%,92.4% 25.5%,91.6% 32.8%,89.6% 39.4%,94.6% 44.1%,99.0% 50.0%,94.6% 55.9%,89.6% 60.6%,91.6% 67.2%,92.4% 74.5%,85.7% 77.4%,79.0% 79.0%,77.4% 85.7%,74.5% 92.4%,67.2% 91.6%,60.6% 89.6%,55.9% 94.6%,50.0% 99.0%,44.1% 94.6%,39.4% 89.6%,32.8% 91.6%,25.5% 92.4%,22.6% 85.7%,21.0% 79.0%,14.3% 77.4%,7.6% 74.5%,8.4% 67.2%,10.4% 60.6%,5.4% 55.9%,1.0% 50.0%,5.4% 44.1%,10.4% 39.4%,8.4% 32.8%,7.6% 25.5%,14.3% 22.6%,21.0% 21.0%,22.6% 14.3%,25.5% 7.6%,32.8% 8.4%,39.4% 10.4%,44.1% 5.4%); }
  50% { clip-path: polygon(50.0% 7.0%,55.2% 10.8%,59.6% 14.0%,63.7% 16.9%,67.5% 19.7%,71.2% 22.4%,74.9% 25.1%,78.8% 27.9%,83.0% 31.0%,87.7% 34.4%,90.1% 39.3%,88.2% 45.0%,86.6% 50.0%,85.1% 54.6%,83.6% 59.0%,82.2% 63.4%,80.8% 67.8%,79.3% 72.5%,77.6% 77.6%,75.7% 83.5%,70.1% 84.8%,64.4% 84.8%,59.3% 84.8%,54.6% 84.8%,50.0% 84.8%,45.4% 84.8%,40.7% 84.8%,35.6% 84.8%,29.9% 84.8%,24.3% 83.5%,22.4% 77.6%,20.7% 72.5%,19.2% 67.8%,17.8% 63.4%,16.4% 59.0%,14.9% 54.6%,13.4% 50.0%,11.8% 45.0%,9.9% 39.3%,12.3% 34.4%,17.0% 31.0%,21.2% 27.9%,25.1% 25.1%,28.8% 22.4%,32.5% 19.7%,36.3% 16.9%,40.4% 14.0%,44.8% 10.8%); }
  75% { clip-path: polygon(50.0% 5.0%,55.9% 5.4%,61.6% 6.5%,67.2% 8.4%,72.5% 11.0%,77.4% 14.3%,81.8% 18.2%,85.7% 22.6%,89.0% 27.5%,91.6% 32.8%,93.5% 38.4%,94.6% 44.1%,95.0% 50.0%,94.6% 55.9%,93.5% 61.6%,91.6% 67.2%,89.0% 72.5%,85.7% 77.4%,81.8% 81.8%,77.4% 85.7%,72.5% 89.0%,67.2% 91.6%,61.6% 93.5%,55.9% 94.6%,50.0% 95.0%,44.1% 94.6%,38.4% 93.5%,32.8% 91.6%,27.5% 89.0%,22.6% 85.7%,18.2% 81.8%,14.3% 77.4%,11.0% 72.5%,8.4% 67.2%,6.5% 61.6%,5.4% 55.9%,5.0% 50.0%,5.4% 44.1%,6.5% 38.4%,8.4% 32.8%,11.0% 27.5%,14.3% 22.6%,18.2% 18.2%,22.6% 14.3%,27.5% 11.0%,32.8% 8.4%,38.4% 6.5%,44.1% 5.4%); }
}
@keyframes loading-spin { to { rotate: 360deg; } }
@keyframes loading-show { from { opacity: 0; scale: .4; } }

/* Barre de navigation (téléphone) : trois destinations, pastille 56 × 32 qui s'étire vers la destination touchée ;
   « Saisir » est le FAB étendu, au-dessus de la barre. */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; --n: 3; --i: 0;
  background: var(--surface-container); padding-bottom: env(safe-area-inset-bottom);
}
/* La coque (barre de navigation, rail, bouton Saisir, barre du haut) ne s'anime jamais à l'arrivée sur une page :
   elle reste en place d'une page à l'autre, seul le contenu change. */
.tabs { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); height: var(--nav-h); }
.tabs .lens {
  position: absolute; top: 6px; left: calc(var(--i) * (100% / var(--n)) + (100% / var(--n)) / 2 - 28px); width: 56px; height: 32px;
  border-radius: 999px; background: var(--secondary-container); transition: left .5s var(--spring), opacity .25s;
}
.tabs .lens.stretch { animation: lens-stretch .5s var(--spring); }
@keyframes lens-stretch { 40% { transform: scaleX(1.5); } }
.tabbar.no-lens .lens { opacity: 0; }
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding-top: 6px; min-width: 0; text-decoration: none;
  color: var(--on-surface-variant); font-size: .75rem; line-height: 1rem; font-weight: 500; -webkit-tap-highlight-color: transparent; transition: color .25s;
}
.tab-ind { position: relative; width: 56px; height: 32px; display: grid; place-items: center; }
.tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.tab.active { color: var(--on-surface); font-weight: 700; }
.tab.active .tab-ind { color: var(--on-secondary-container); }
.badge {
  position: absolute; top: 2px; left: calc(50% + 6px); display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--bad); color: var(--on-error); font-size: .6875rem; line-height: 1; font-weight: 700;
}
.badge[hidden] { display: none; }
.fab {
  position: fixed; right: 16px; bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); z-index: 31;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 20px 0 16px; border-radius: var(--r-lg); text-decoration: none;
  background: var(--primary); color: var(--on-primary); font-size: 1rem; line-height: 1.5rem; font-weight: 800; box-shadow: var(--shadow-float);
  transition: transform .4s var(--spring), border-radius .4s var(--spring), background .2s, color .2s;
}
.fab .ico { width: 24px; height: 24px; }
.fab.active { background: var(--primary-container); color: var(--on-primary-container); }
.fab:active { transform: scale(.96); border-radius: var(--r-xl); }

/* Tablette et ordinateur : rail de navigation à gauche (pastille sous l'icône), FAB en tête du rail */
@media (min-width: 840px) {
  .shell { margin-left: var(--rail-w); }
  .tabbar {
    top: 0; left: 0; right: auto; bottom: 0; width: var(--rail-w); display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 16px 8px;
    background: var(--surface);
  }
  .tabs { grid-template-columns: none; grid-auto-rows: 64px; height: auto; gap: 4px; }
  .tabs .lens { top: calc(var(--i) * 68px + 4px); left: 50%; margin-left: -28px; width: 56px; height: 32px; transition: top .5s var(--spring), opacity .25s; }
  .tabs .lens.stretch { animation: lens-stretch-y .5s var(--spring); }
  .tab { padding-top: 4px; }
  .badge { left: auto; right: 12px; top: 2px; }
  .fab { position: static; order: -1; margin: 0 auto 8px; width: 56px; min-height: 56px; padding: 0; background: var(--primary-container); color: var(--on-primary-container); box-shadow: none; }
  .fab span { display: none; }
  .content { padding: 8px 24px 48px; }
  .appbar { padding-left: 24px; padding-right: 24px; }
}
@keyframes lens-stretch-y { 40% { transform: scaleY(1.5); } }
/* Entrées de « Plus » dans le rail : seulement quand il est étendu (grand écran) */
.rail-more { display: none; }
@media (min-width: 1240px) {
  :root { --rail-w: 256px; }
  .tabbar { padding: 16px 12px; }
  .rail-more { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--outline-variant); min-height: 0; overflow-y: auto; scrollbar-width: none; }
  .rail-more .rail-title { margin: 0 16px 6px; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-variant); }
  .rail-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px; border-radius: 999px; color: var(--on-surface-variant); font-size: .875rem; font-weight: 600; text-decoration: none; transition: background .2s; }
  .rail-item .ico { width: 22px; height: 22px; }
  .rail-item:hover { background: var(--surface-container); color: var(--on-surface); }
  .rail-item.active { background: var(--secondary-container); color: var(--on-secondary-container); font-weight: 700; }
  .tabs { grid-auto-rows: 56px; }
  .tabs .lens { top: calc(var(--i) * 60px); left: 0; margin: 0; width: 100%; height: 56px; }
  .tabs .lens.stretch { animation: none; }
  .tab { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 16px; font-size: .9375rem; line-height: 1.25rem; }
  .tab-ind { width: 24px; height: 24px; }
  .badge { position: static; margin-left: auto; }
  .fab { width: auto; justify-content: flex-start; gap: 12px; padding: 0 20px; margin: 0 0 12px; }
  .fab span { display: inline; }
  /* Une seule destination sélectionnée : quand la page est une entrée du rail (Équipements…), « Plus » n'est pas surligné en plus. */
  .tabbar:has(.rail-item.active) .lens { opacity: 0; }
  .tabbar:has(.rail-item.active) .tab.active { color: var(--on-surface-variant); font-weight: 500; }
}

/* ---------- Boutons : pilule au repos, coins 12 et 96 % à l'appui, un seul bouton plein par écran ---------- */
button, .btn {
  font: inherit; font-size: .9375rem; font-weight: 700; letter-spacing: 0; border: 0; border-radius: 999px;
  background: var(--primary); color: var(--on-primary);
  min-height: 48px; padding: 0 22px; cursor: pointer; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: border-radius .4s var(--spring), transform .4s var(--spring), background .2s, color .2s; -webkit-tap-highlight-color: transparent;
}
button:hover, .btn:hover { background: var(--primary-hover); }
button:active, .btn:active { border-radius: 12px; transform: scale(.96); }
button:disabled { opacity: .38; cursor: default; transform: none; }
button.secondary, .btn.secondary, button.tonal, .btn.tonal { background: var(--secondary-container); color: var(--on-secondary-container); }
button.secondary:hover, .btn.secondary:hover, button.tonal:hover, .btn.tonal:hover { background: var(--primary-container); color: var(--on-primary-container); }
button.danger, button.soft-bad { background: var(--bad-container); color: var(--on-bad-container); }
button.danger:hover, button.soft-bad:hover { background: var(--bad-container); filter: brightness(.96); }
button.danger.solid { background: var(--bad); color: var(--on-error); }
button.small { min-height: 40px; padding: 0 16px; font-size: .875rem; }
button.big { min-height: 56px; padding: 0 28px; font-size: 1rem; font-weight: 800; }
button.link { background: none; color: var(--primary); min-height: 48px; padding: 0 12px; }
button.link:hover { background: var(--surface-container); }
@media (max-width: 599px) {
  button, .btn { max-width: 100%; white-space: normal; text-wrap: balance; text-align: center; padding-block: 6px; }
}
.icon-btn { width: 44px; min-height: 44px; padding: 0; background: var(--surface-highest); color: var(--on-surface); }
.icon-btn:hover { background: var(--surface-high); }
.wide { width: 100%; }

/* ---------- Champs : remplis, coins 4 en haut, ligne d'activation ---------- */
label { display: grid; gap: 6px; font-size: .75rem; line-height: 1rem; font-weight: 700; color: var(--on-surface-variant); }
label.check { display: flex; align-items: center; gap: 12px; color: var(--on-surface); font-size: 1rem; line-height: 1.5rem; font-weight: 500; min-height: 48px; }
input, select, textarea {
  font: inherit; font-weight: 400; color: var(--on-surface); min-height: 56px; width: 100%; max-width: 100%; padding: 0 16px;
  border: 0; border-bottom: 1px solid var(--on-surface-variant); border-radius: var(--r-xs) var(--r-xs) 0 0; background: var(--surface-highest);
  transition: box-shadow .2s, background .2s, border-color .2s;
}
textarea { padding: 14px 16px; min-height: 96px; resize: vertical; line-height: 1.5; }
select { appearance: none; padding-right: 48px; background: var(--surface-highest) var(--ico-chevron-down) no-repeat right 12px center / 24px; }
input::placeholder, textarea::placeholder { color: var(--on-surface-variant); opacity: .8; }
input:hover, select:hover, textarea:hover { background: var(--surface-high); }
input:focus, select:focus, textarea:focus { outline: none; border-bottom-color: var(--primary); box-shadow: inset 0 -1px 0 var(--primary); }
input[type=checkbox] {
  appearance: none; width: 24px; height: 24px; min-height: 0; padding: 0; margin: 1px; flex: none; border: 2px solid var(--on-surface-variant);
  border-radius: 4px; background: transparent; display: inline-grid; place-items: center; transition: background .2s, border-color .2s, transform .4s var(--spring);
}
input[type=checkbox]:checked { background: var(--primary) var(--ico-check-white) center / 20px no-repeat; border-color: var(--primary); }
input[type=checkbox]:active { transform: scale(.9); }
input[type=checkbox]:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; box-shadow: none; }
input[type=search] { border-radius: 999px; border-bottom: 0; background: var(--surface-container); }
input[type=search]:focus { box-shadow: inset 0 0 0 2px var(--primary); }
input[type=color] { padding: 4px; }

.form { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: end; }
.form .full, .form .submit { grid-column: 1 / -1; }
.submit button { width: 100%; min-height: 56px; font-size: 1rem; font-weight: 800; }

/* Interrupteur M3 (mode cuisine) et groupe de boutons connectés (thème) */
.switch { position: relative; display: inline-block; width: 52px; height: 32px; flex: none; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; border: 0; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-highest); box-shadow: inset 0 0 0 2px var(--outline); transition: background .25s, box-shadow .25s; pointer-events: none; }
.switch i::after { content: ''; position: absolute; top: 50%; left: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--outline); transform: translateY(-50%); transition: left .4s var(--spring), width .3s, height .3s, background .25s; }
.switch input:checked + i { background: var(--primary); box-shadow: none; }
.switch input:checked + i::after { left: 24px; width: 24px; height: 24px; background: var(--on-primary); }
.switch input:focus-visible + i { outline: 3px solid var(--primary); outline-offset: 2px; }
.switch-row { display: flex; align-items: flex-start; gap: 16px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--secondary-container); color: var(--on-secondary-container); font-size: 1rem; line-height: 1.5rem; font-weight: 500; cursor: pointer; }
.switch-row .switch { margin-top: 4px; }
.switch-row b { display: block; font-weight: 800; }
.switch-row small { display: block; font-weight: 400; font-size: .875rem; line-height: 1.25rem; }
.pref-row { display: grid; gap: 8px; margin-bottom: 12px; }
.pref-label { font-size: .8125rem; line-height: 1rem; font-weight: 700; color: var(--on-surface-variant); }
.seg-group { display: flex; gap: 2px; max-width: 420px; }
.seg-group button {
  flex: 1 1 0; min-height: 40px; padding: 0 12px; border-radius: var(--r-sm); background: var(--surface-highest); color: var(--on-surface-variant); font-size: .875rem; font-weight: 600;
  transition: flex-grow .5s var(--spring), border-radius .4s var(--spring), background .2s, color .2s, transform .4s var(--spring);
}
.seg-group button:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.seg-group button:last-child { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
.seg-group button:hover { background: var(--surface-high); }
.seg-group button[aria-pressed=true] { background: var(--primary); color: var(--on-primary); border-radius: var(--r-lg); font-weight: 800; flex-grow: 1.6; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details.more { border-top: 1px solid var(--outline-variant); padding-top: 4px; }
details.more > summary { color: var(--primary); font-weight: 700; min-height: 48px; display: flex; align-items: center; gap: 8px; }
details.more > summary::after {
  content: ''; margin-left: auto; width: 24px; height: 24px; background: currentColor; mask: var(--ico-chevron-down) center / contain no-repeat;
  transition: transform .4s var(--spring);
}
details.more[open] > summary::after { transform: rotate(180deg); }
details.more[open] > summary { margin-bottom: 8px; }

/* ---------- Cartes, blocs, tableaux ---------- */
.card { border-radius: var(--r-xl); padding: 20px; margin-bottom: 16px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 16px; }
.kpi { border-radius: var(--r-lg); padding: 16px 20px; }
.kpi .v { font-size: 2.25rem; line-height: 2.75rem; font-weight: 800; font-stretch: 108%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .l { color: var(--on-surface-variant); font-size: .875rem; line-height: 1.25rem; font-weight: 500; }
.kpi .v.txt { font-size: 1.5rem; line-height: 2rem; padding: 4px 0; letter-spacing: -.01em; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

.block { margin-bottom: 24px; }
.block > h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 1.375rem; margin: 0 0 12px; }
.block > h2 small { color: var(--on-surface-variant); font-weight: 700; font-size: .875rem; font-variant-numeric: tabular-nums; }
details.block > summary { display: flex; align-items: center; gap: 12px; border-radius: var(--r-lg); padding: 0 16px; min-height: 56px; font-weight: 700; transition: background .2s; }
details.block > summary:hover { background: var(--surface-container); }
details.block > summary > .ico:first-child { color: var(--primary); }
details.block > summary::after {
  content: ''; margin-left: auto; width: 24px; height: 24px; background: var(--on-surface-variant); mask: var(--ico-chevron-down) center / contain no-repeat;
  transition: transform .4s var(--spring);
}
details.block[open] > summary { margin-bottom: 12px; }
details.block[open] > summary::after { transform: rotate(180deg); }
details.block ul { list-style: none; margin: 0; padding: 0; }
details.block li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 4px; border-bottom: 1px solid var(--outline-variant); }
details.block li span { color: var(--on-surface-variant); }
.history .filters { margin-bottom: 12px; }
.history .filters label { display: flex; align-items: center; gap: 8px; }
.history .filters input { width: auto; min-height: 48px; }

.table-wrap { overflow-x: auto; border-radius: var(--r-lg); }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.25rem; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--outline-variant); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
.nw { white-space: nowrap; }
/* Tablette et petit écran : cellules plus serrées, le tableau tient sans défilement horizontal. */
@media (max-width: 1399px) { th, td { padding: 10px 12px; } }
/* Tablette : dans un tableau, le bouton « Ajouter » une photo se réduit à l'appareil photo (libellé lu par le lecteur d'écran). */
@media (max-width: 1100px) { td .lbl-add { display: none; } td button.small:has(.lbl-add) { padding: 0 12px; } }
@media (max-width: 900px) { table { font-size: .875rem; } th, td { padding: 10px; } }
th { color: var(--on-surface-variant); font-weight: 700; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; background: var(--surface-container); white-space: nowrap; }
tr.nc td { background: var(--bad-container); }
tr.nc td, tr.nc td a { color: var(--on-bad-container); }

.pill { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--r-sm); padding: 2px 10px; font-size: .75rem; line-height: 1.25rem; font-weight: 700; white-space: nowrap; }
.pill.ok { background: var(--ok-container); color: var(--on-ok-container); }
.pill.bad { background: var(--bad-container); color: var(--on-bad-container); }
.pill.warn { background: var(--warn-container); color: var(--on-warn-container); }
.pill.info { background: var(--info-container); color: var(--on-info-container); }

.list-item { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--outline-variant); }
.list-item:last-child { border-bottom: 0; }
.empty { text-align: center; padding: 32px 16px; border-radius: var(--r-xl); margin-bottom: 16px; display: grid; justify-items: center; gap: 4px; }
.empty-ico { width: 72px; height: 72px; display: grid; place-items: center; background: var(--primary-container); color: var(--on-primary-container); margin-bottom: 8px; mask: var(--shape-sunny) center / 100% 100% no-repeat; -webkit-mask: var(--shape-sunny) center / 100% 100% no-repeat; }
.empty-ico .ico { width: 32px; height: 32px; }
.empty h2 { margin: 0; }
.empty p { color: var(--on-surface-variant); margin: 0 0 12px; max-width: 36ch; }
.empty > :last-child { margin-bottom: 0; }
.all-done { display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px; background: var(--ok-container); color: var(--on-ok-container); font-weight: 700; border-radius: var(--r-lg); }

/* ---------- Aujourd'hui ---------- */
.today-page { max-width: 640px; margin: 0 auto; }
/* Créneau en retard, sur une colonne : le bandeau, puis les relevés ; raccourcis et semaine passent derrière. */
@media (max-width: 999px) {
  .today-page.urgent { display: flex; flex-direction: column; }
  .today-page.urgent .today-side { display: contents; }
  .today-page.urgent .today-main { order: 1; margin-top: 20px; }
  .today-page.urgent .quick-actions { order: 2; margin-top: 16px; }
  .today-page.urgent .week-card { order: 3; }
  .today-page.urgent .first-steps { order: 4; }
}
@media (min-width: 1000px) {
  .today-page { max-width: 1000px; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 32px; align-items: start; }
  .today-side { position: sticky; top: 80px; }
}
/* Bandeau du jour : couleur primary pleine, forme sunny en décor, anneau ondulé */
.hero {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-radius: var(--r-xl);
  background: var(--primary); color: var(--on-primary); --ring-bar: var(--primary-container); --ring-track: rgba(255, 255, 255, .28); transition: background .4s var(--ease);
}
.hero::before { content: ''; position: absolute; right: -44px; top: -46px; width: 180px; height: 180px; background: var(--primary-container); opacity: .3; pointer-events: none; mask: var(--shape-sunny) center / contain no-repeat; -webkit-mask: var(--shape-sunny) center / contain no-repeat; }
.hero > * { position: relative; }
.hero.complete { --ring-bar: var(--ok-container); }
.hero .date { margin: 0; font-size: .8125rem; line-height: 1.125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.hero h1 { font-size: 1.75rem; line-height: 2.125rem; font-weight: 800; font-stretch: 112%; margin: 4px 0 6px; letter-spacing: -.02em; }
@media (min-width: 640px) { .hero h1 { font-size: 2rem; line-height: 2.375rem; } }
.hero .status { margin: 0; font-weight: 600; opacity: .92; }
.today-page.urgent .hero .status { color: var(--warn-container); opacity: 1; font-weight: 700; }

.ring { position: relative; width: 112px; height: 112px; flex: none; }
.ring > svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle, .ring path { fill: none; stroke-width: 10; }
.ring .track { stroke: var(--ring-track); }
.ring .bar { stroke: var(--ring-bar); stroke-linecap: round; stroke-linejoin: round; transition: stroke-dashoffset .9s var(--spring-soft); }
/* « 3/11 » sur une seule ligne, chiffre et total alignés sur la même base */
.ring-num { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center; align-items: baseline; justify-content: center; gap: 1px; text-align: center; line-height: 1; }
.ring-num b { font-size: 2.25rem; font-weight: 800; font-stretch: 110%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ring-num span { font-size: .875rem; opacity: .85; font-weight: 700; font-variant-numeric: tabular-nums; }
.ring-num .ico { width: 44px; height: 44px; color: var(--ok-container); }

.week-card { border-radius: var(--r-xl); padding: 16px 20px; margin: 12px 0; }
.week-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.week-head .ico { color: var(--primary); }
.week-head strong { display: block; font-weight: 800; }
.week-head small { color: var(--on-surface-variant); }
.week { display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; }
.day { display: grid; justify-items: center; gap: 4px; }
.day small { font-size: .6875rem; color: var(--on-surface-variant); font-weight: 700; letter-spacing: .04em; }
.dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-highest); color: var(--on-surface-variant); }
.dot .ico { width: 18px; height: 18px; }
.day.done .dot { background: var(--primary); color: var(--on-primary); }
.day.missed .dot { background: var(--bad-container); color: var(--on-bad-container); }
.day.today .dot, .day.partial .dot { background: transparent; box-shadow: inset 0 0 0 2px var(--primary); color: var(--primary); }
.day.none .dot { background: transparent; box-shadow: inset 0 0 0 1px var(--outline-variant); }
.day.off .dot { background: var(--surface-highest); }

.alert-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; margin: 12px 0; text-decoration: none; background: var(--bad-container); color: var(--on-bad-container); border-radius: var(--r-xl); }
.alert-card .ico:first-child { color: var(--bad); width: 28px; height: 28px; }
.alert-card strong { display: block; font-weight: 800; }
.alert-card p { margin: 0; font-size: .875rem; line-height: 1.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.alert-card .ico:last-child { margin-left: auto; }

.task { border-radius: 24px; padding: 16px; margin-bottom: 12px; display: grid; gap: 12px; }
.task.is-done { background: var(--surface-low); }
.task-head { display: flex; gap: 16px; align-items: center; }
.ico-box { flex: none; width: 48px; height: 48px; display: grid; place-items: center; background: var(--secondary-container); color: var(--on-secondary-container); mask: var(--shape-cookie) center / 100% 100% no-repeat; -webkit-mask: var(--shape-cookie) center / 100% 100% no-repeat; }
.task-head strong { display: block; font-size: 1.0625rem; line-height: 1.5rem; font-weight: 700; }
.task-head small { color: var(--on-surface-variant); font-size: .875rem; line-height: 1.25rem; display: block; font-variant-numeric: tabular-nums; }
.chip-done { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border-radius: var(--r-sm); background: var(--ok-container); color: var(--on-ok-container); font-size: .75rem; line-height: 1.25rem; font-weight: 700; }
.chip-done .ico { width: 14px; height: 14px; }
.task-head small.missed { display: flex; align-items: center; gap: 4px; color: var(--warn); font-weight: 700; }
.task-head small.missed .ico { width: 16px; height: 16px; }

/* Relevé : le champ et le chiffre prennent la couleur du verdict pendant la frappe */
.temp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.temp-input { font-size: 1.75rem; line-height: 2rem; font-weight: 800; font-stretch: 108%; letter-spacing: -.02em; text-align: center; min-height: 56px; font-variant-numeric: tabular-nums; padding: 0 8px; }
.temp-field { position: relative; display: block; }
.temp-field .unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: .9375rem; }
.temp-field .temp-input { padding-right: 40px; padding-left: 40px; }
.task.ok .temp-input, .task.ok .temp-input:focus { background: var(--ok-container); color: var(--on-ok-container); border-bottom-color: var(--ok); box-shadow: inset 0 -1px 0 var(--ok); }
.task.bad .temp-input, .task.bad .temp-input:focus { background: var(--bad-container); color: var(--on-bad-container); border-bottom-color: var(--bad); box-shadow: inset 0 -1px 0 var(--bad); animation: nudge .32s ease; }
.task.bad .go { background: var(--bad); color: var(--on-error); }
@keyframes nudge { 0% { transform: none; } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } 100% { transform: none; } }
.sign { width: 56px; min-height: 56px; padding: 0; font-size: 1.5rem; font-weight: 700; background: var(--surface-highest); color: var(--on-surface-variant); border-radius: 50%; }
.sign:hover { background: var(--surface-high); }
.sign.on { background: var(--secondary-container); color: var(--on-secondary-container); box-shadow: inset 0 0 0 2px var(--primary); }
.unit { font-weight: 700; color: var(--on-surface-variant); }
.go { min-height: 56px; padding: 0 24px; font-size: 1rem; font-weight: 800; }
.go.wide { width: 100%; }
.hint:empty { display: none; }
.hint { display: flex; align-items: center; gap: 8px; min-height: 20px; margin: 0; font-size: .9375rem; line-height: 1.25rem; font-weight: 700; color: var(--on-surface-variant); transition: color .25s; }
.hint .ico { width: 18px; height: 18px; }
.hint.ok { color: var(--ok); }
.hint.bad { color: var(--bad); }
.how > summary { color: var(--primary); font-weight: 700; min-height: 36px; display: flex; align-items: center; }
.how p { margin: 4px 0; font-size: .9375rem; color: var(--on-surface-variant); }

.watch { list-style: none; margin: 0; padding: 0; border-radius: var(--r-lg); overflow: hidden; }
.watch li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--outline-variant); }
.watch li:last-child { border-bottom: 0; }
.first-steps { border-radius: var(--r-lg); padding: 16px 20px 8px; }
.first-steps ul { list-style: none; margin: 0 0 4px; padding: 0; }
.first-steps li { display: flex; align-items: center; gap: 12px; min-height: 40px; font-weight: 700; }
.first-steps li .ico { color: var(--on-surface-variant); }
.first-steps li.ok { color: var(--on-surface-variant); font-weight: 400; }
.first-steps li.ok .ico { color: var(--ok); }

/* ---------- Saisir et Plus : listes (un bloc, lignes séparées d'un filet, pastille en forme de cookie) ---------- */
.group-title { margin: 24px 6px 8px; font-size: .75rem; line-height: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); }
.group-title:first-of-type { margin-top: 8px; }
.seg { display: grid; gap: 0; max-width: 720px; border-radius: var(--r-lg); overflow: hidden; }
.seg-item {
  appearance: none; border: 0; border-top: 1px solid var(--outline-variant); width: 100%; font: inherit; text-align: left; text-decoration: none; cursor: pointer; color: var(--on-surface);
  display: flex; align-items: center; justify-content: flex-start; gap: 16px; min-height: 72px; padding: 12px 14px 12px 16px; border-radius: 0; background: transparent;
  transition: background .15s;
}
.seg-item:first-child { border-top: 0; }
.seg-item:hover { background: var(--surface-container); }
.seg-item:active { transform: none; border-radius: 0; background: var(--primary-container); }
.seg-item.static { cursor: default; }
.seg-item.static:hover, .seg-item.static:active { background: transparent; }
.seg-lead { flex: none; width: 48px; height: 48px; display: grid; place-items: center; background: var(--secondary-container); color: var(--on-secondary-container); mask: var(--shape-cookie) center / 100% 100% no-repeat; -webkit-mask: var(--shape-cookie) center / 100% 100% no-repeat; }
.seg-text { display: grid; min-width: 0; flex: 1; }
.seg-text strong { font-size: 1.0625rem; line-height: 1.5rem; font-weight: 700; white-space: normal; }
.seg-text small { color: var(--on-surface-variant); font-size: .875rem; line-height: 1.25rem; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.seg-item > .ico:last-child { color: var(--on-surface-variant); }
.seg-item.alarm .seg-lead { background: var(--bad-container); color: var(--on-bad-container); }

/* ---------- Alertes et action corrective ---------- */
.actions-top { margin: 0 0 16px; }
.alert-item { border-radius: var(--r-lg); padding: 16px; margin-bottom: 12px; display: grid; gap: 12px; }
.alert-item::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 0 4px 4px 0; background: var(--bad); }
.alert-top { display: flex; gap: 16px; }
.alert-top .ico-box { background: var(--bad-container); color: var(--bad); mask: var(--shape-sunny) center / 100% 100% no-repeat; -webkit-mask: var(--shape-sunny) center / 100% 100% no-repeat; }
.alert-top strong { display: block; font-weight: 800; }
.alert-top small { display: block; color: var(--on-surface-variant); }
.noted { margin: 0; padding: 12px 16px; background: var(--warn-container); color: var(--on-warn-container); border-radius: var(--r-md); font-size: .9375rem; line-height: 1.25rem; }
.alert-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.alert-actions .big { flex: 1 1 100%; }
.alert-actions .secondary { flex: 1; }
.sheet-alert { display: flex; gap: 16px; padding: 16px; background: var(--bad-container); color: var(--on-bad-container); border-radius: var(--r-lg); margin-bottom: 16px; }
.sheet-alert .ico { color: var(--bad); width: 28px; height: 28px; }
.sheet-alert p { margin: 2px 0 0; font-size: .9375rem; line-height: 1.25rem; color: inherit; }
.sheet-q { font-weight: 800; font-size: 1.125rem; margin: 16px 0 4px; }
.sheet-actions { display: grid; gap: 8px; margin-top: 20px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: var(--r-sm); background: transparent; color: var(--on-surface);
  box-shadow: inset 0 0 0 1px var(--outline); font-size: .9375rem; font-weight: 600; white-space: normal; text-align: left; line-height: 1.25rem;
}
.chip:hover { background: var(--surface-container); }
.chip:active { border-radius: var(--r-sm); }
.chip[aria-pressed=true] { background: var(--secondary-container); color: var(--on-secondary-container); box-shadow: none; padding-left: 10px; }
.chip[aria-pressed=true]::before { content: ''; width: 18px; height: 18px; background: currentColor; mask: var(--ico-check-mask) center / contain no-repeat; }
[data-pick] .chip[aria-pressed=true] { background: var(--bad-container); color: var(--on-bad-container); }

/* ---------- Allergènes ---------- */
.search { margin: 4px 0 16px; }
.dish { border-radius: var(--r-lg); padding: 16px; margin-bottom: 12px; display: grid; gap: 8px; }
.dish.has { background: var(--bad-container); color: var(--on-bad-container); }
.dish-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.dish small { display: block; color: var(--on-surface-variant); font-weight: 400; }
.dish.has small { color: inherit; opacity: .8; }
.algs { display: flex; flex-wrap: wrap; gap: 6px; }
.alg { background: var(--surface-highest); color: var(--on-surface-variant); border-radius: var(--r-sm); padding: 2px 10px; font-size: .8125rem; line-height: 1.25rem; font-weight: 700; }
.dish.has .alg { background: rgba(255, 255, 255, .55); color: var(--on-bad-container); }
.alg.hit { background: var(--bad); color: var(--on-error); }
.verdict { margin: 0; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.verdict.ok { color: var(--ok); }
.verdict.bad { color: var(--bad); }
.verdict.warn { color: var(--warn); }
.dish.maybe { background: var(--warn-container); color: var(--on-warn-container); }
.dish.maybe small { color: inherit; opacity: .8; }
.traces { margin: 0; font-size: .8125rem; color: var(--on-surface-variant); }
.dish.has .traces, .dish.maybe .traces { color: inherit; }
.allergen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 8px; }
.matrix th.rot { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: .75rem; text-transform: none; }
.matrix td.x { text-align: center; font-weight: 700; color: var(--bad); }
.print-only { display: none; }

/* ---------- Photos ---------- */
.photo-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; cursor: pointer; border-radius: 999px; background: var(--secondary-container); color: var(--on-secondary-container); font-size: .9375rem; font-weight: 700; }
.photo-btn:hover { background: var(--primary-container); }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-md); }
.gallery { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: 160px; object-fit: cover; border-radius: var(--r-md); background: var(--surface-highest); display: block; }
.gallery figcaption { font-size: .8125rem; color: var(--on-surface-variant); margin-top: 4px; display: grid; gap: 4px; }
label.btn { display: inline-flex; font-size: .9375rem; }

/* ---------- Fenêtres : boîte de dialogue, feuille du bas sur téléphone ---------- */
dialog { border: 0; border-radius: var(--r-xl); padding: 24px; width: min(560px, 92vw); max-height: 92vh; color: var(--on-surface); background: var(--surface-high); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
dialog::backdrop { background: var(--scrim); }
dialog[open] { animation: sheet-up .45s var(--spring-soft); }
dialog h2 { font-size: 1.5rem; line-height: 2rem; font-weight: 800; font-stretch: 105%; letter-spacing: -.01em; margin: 0; }
dialog .row:first-child { margin-bottom: 16px; flex-wrap: nowrap; }
@media (max-width: 640px) {
  dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); }
  dialog::before { content: ''; display: block; width: 32px; height: 4px; border-radius: 2px; background: var(--outline); opacity: .6; margin: 0 auto 14px; }
  dialog[open] { animation: sheet-rise .5s var(--spring-soft); }
}
@keyframes sheet-up { from { transform: translateY(24px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheet-rise { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- Message de confirmation (snackbar : surface inverse, coins 8, action en primary inverse) ---------- */
#toast {
  position: fixed; bottom: calc(var(--nav-h) + 8px + env(safe-area-inset-bottom)); left: 50%; transform: translate(-50%, 12px); display: flex; align-items: center; gap: 12px;
  background: var(--inverse-surface); color: var(--inverse-on-surface); padding: 12px 16px; border-radius: var(--r-sm); opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease), transform .45s var(--spring); z-index: 60; width: max-content; max-width: min(560px, calc(100vw - 32px)); font-size: .9375rem; line-height: 1.5rem; font-weight: 500;
  box-shadow: var(--shadow-float);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#toast .ico { color: var(--inverse-primary); }
#toast button { min-height: 40px; padding: 0 12px; margin: -4px -8px -4px 0; border: 0; border-radius: 999px; background: transparent; color: var(--inverse-primary); font: inherit; font-weight: 800; }
#toast button:hover { background: rgba(255, 255, 255, .12); }
#toast.error .ico { color: #FFB4AB; }
@media (min-width: 840px) { #toast { bottom: 24px; } }
/* Téléphone : le message s'affiche au-dessus du bouton Saisir, jamais par-dessus. */
@media (max-width: 839px) { body:has(.fab) #toast { bottom: calc(var(--nav-h) + 88px + env(safe-area-inset-bottom)); } }

@keyframes ind-in { from { transform: scaleX(.5); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Connexion : carte sur la surface, formes expressives en décor ---------- */
.auth { position: relative; overflow: hidden; isolation: isolate; min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px 16px; }
.auth::before, .auth::after { z-index: -1; }
.auth::before { content: ''; position: absolute; right: -70px; top: -60px; width: 240px; height: 240px; background: var(--primary-container); pointer-events: none; mask: var(--shape-cookie) center / contain no-repeat; -webkit-mask: var(--shape-cookie) center / contain no-repeat; animation: pop-in .8s var(--spring-soft) backwards; }
.auth::after { content: ''; position: absolute; right: 110px; top: 120px; width: 110px; height: 110px; background: var(--tertiary-container); pointer-events: none; mask: var(--shape-sunny) center / contain no-repeat; -webkit-mask: var(--shape-sunny) center / contain no-repeat; animation: pop-in .8s var(--spring-soft) .15s backwards; }
@keyframes pop-in { from { opacity: 0; transform: scale(.6) rotate(-20deg); } }
.auth .card { width: min(440px, 100%); border-radius: var(--r-xl); padding: 32px 28px; margin: 0; animation: rise .55s var(--spring-soft) backwards; }
.auth h1 { display: flex; gap: 12px; align-items: center; font-size: 1.75rem; line-height: 2.125rem; margin-top: 0; }
.auth h1 img { border-radius: 12px; }
.auth .legal-links { position: relative; }
@media (max-width: 640px) { .auth::after { right: auto; left: -40px; top: 64px; width: 96px; height: 96px; } }

/* ---------- Bandeaux, abonnement ---------- */
.banner { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: var(--r-lg); margin-bottom: 16px; font-size: .9375rem; line-height: 1.375rem; }
.banner .ico { margin-top: 1px; }
.banner.bad { background: var(--bad-container); color: var(--on-bad-container); }
.banner.warn { background: var(--warn-container); color: var(--on-warn-container); }
.banner.info { background: var(--info-container); color: var(--on-info-container); }
.banner .link { padding: 0; min-height: 0; color: inherit; font-weight: 700; text-decoration: underline; }
.banner a { color: inherit; font-weight: 700; }
.presets { margin-bottom: 8px; }
.presets > .muted { font-size: .875rem; }

/* ---------- Pages légales ---------- */
.legal { max-width: 820px; margin: 24px auto; padding: 32px 28px 40px; border-radius: var(--r-xl); background: var(--surface-low); }
@media (max-width: 640px) { .legal { margin: 0; border-radius: 0; padding: 24px 16px 48px; } }
.legal h2 { margin-top: 28px; }
.legal table { margin: 8px 0; }
@media (max-width: 640px) {
  .legal table, .legal tbody, .legal tr, .legal td { display: block; width: 100%; }
  .legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .legal tbody tr { padding: 12px 0; border-bottom: 1px solid var(--outline-variant); }
  .legal tbody tr:last-child { border-bottom: 0; }
  .legal td { border: 0; padding: 4px 0; }
  .legal td[data-label]::before {
    content: attr(data-label); display: block; color: var(--on-surface-variant);
    font-size: .75rem; line-height: 1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  }
}
.legal mark { background: var(--warn-container); color: var(--on-warn-container); padding: 0 4px; border-radius: 4px; }
.legal-links { text-align: center; font-size: .8125rem; margin-top: 16px; }
.legal-links a { color: var(--on-surface-variant); }

/* ---------- Tablette de cuisine (code PIN) : en-tête en primary plein, grandes tuiles, pavé en pilules ---------- */
.kiosk { min-height: 100vh; color: var(--on-surface); padding: 16px 24px 32px; }
.kiosk header {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; font-size: .9375rem; min-height: 72px; padding: 12px 20px; border-radius: var(--r-xl);
  background: var(--primary); color: var(--on-primary);
}
.kiosk header::before { content: ''; position: absolute; right: -50px; top: -110px; width: 250px; height: 250px; background: var(--primary-container); opacity: .16; pointer-events: none; mask: var(--shape-sunny) center / contain no-repeat; -webkit-mask: var(--shape-sunny) center / contain no-repeat; }
.kiosk header > * { position: relative; }
.kiosk header img { border-radius: 10px; }
.kiosk header strong { font-size: 1.125rem; font-weight: 800; font-stretch: 105%; }
.kiosk header span { color: inherit; opacity: .85; }
.kiosk header .clock { font-weight: 800; font-stretch: 110%; font-size: 1.375rem; line-height: 1.75rem; letter-spacing: -.02em; opacity: 1; color: var(--primary-container); font-variant-numeric: tabular-nums; }
.kiosk header .secondary { background: var(--primary-container); color: var(--on-primary-container); }
.kiosk header .app-switch { margin-right: 0; }
.kiosk header .app-switch span { color: inherit; opacity: 1; }
.kiosk header .clock span { opacity: 1; color: inherit; }
/* Tablette en portrait étroit ou téléphone : l'heure seule, l'en-tête passe sur deux lignes si besoin. */
@media (max-width: 600px) {
  .kiosk { padding: 12px 14px 24px; }
  .kiosk header { flex-wrap: wrap; padding: 10px 14px; }
  .kiosk header .clock { font-size: 1.25rem; }
  .kiosk header .clock .clock-date { display: none; }
}
.kiosk h1 { text-align: center; font-size: 2.25rem; line-height: 2.75rem; margin: 32px 0 24px; }
.kiosk-todo {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; max-width: 100%; margin: -8px auto 24px; padding: 10px 20px 10px 16px; border-radius: 999px;
  background: var(--warn-container); color: var(--on-warn-container); font-size: 1rem; font-weight: 700;
}
.kiosk-todo.ok { background: var(--ok-container); color: var(--on-ok-container); }
.kiosk .muted, .kiosk .center { text-align: center; }
.kiosk-users { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); max-width: 1000px; margin: 0 auto; }
.kiosk-users button {
  color: var(--on-surface); border-radius: 20px; min-height: 156px; font-size: 1.25rem; line-height: 1.5rem; font-weight: 800; font-stretch: 105%;
  display: grid; place-items: center; align-content: center; gap: 10px; padding: 16px; white-space: normal;
  transition: background .25s, color .25s, border-radius .5s var(--spring), transform .4s var(--spring);
}
.kiosk-users button:hover { background: var(--surface-high); }
.kiosk-users button:active { background: var(--primary-container); color: var(--on-primary-container); border-radius: var(--r-xl); transform: scale(.97); }
.kiosk-users .avatar { width: 72px; height: 72px; font-size: 1.75rem; font-weight: 800; border-radius: 0; mask: var(--shape-cookie) center / 100% 100% no-repeat; -webkit-mask: var(--shape-cookie) center / 100% 100% no-repeat; transition: transform .6s var(--spring); }
.kiosk-users button:active .avatar { background: var(--primary); color: var(--on-primary); transform: rotate(30deg) scale(1.1); }
.kiosk-foot { text-align: center; margin-top: 40px; }
.pin-dots { display: flex; justify-content: center; gap: 18px; margin: 24px 0 8px; min-height: 20px; }
.pin-dots span { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--outline); transition: background .15s, box-shadow .15s, transform .4s var(--spring); }
.pin-dots span.on { background: var(--primary); box-shadow: none; transform: scale(1.25); }
.pin-error { text-align: center; min-height: 1.5em; color: var(--bad); font-weight: 700; }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 336px; margin: 0 auto; }
.pinpad button { min-height: 72px; font-size: 1.75rem; font-weight: 700; border-radius: 999px; background: var(--surface-highest); color: var(--on-surface); font-variant-numeric: tabular-nums; }
.pinpad button:hover { background: var(--surface-high); }
.pinpad button:active { border-radius: var(--r-lg); background: var(--secondary-container); color: var(--on-secondary-container); transform: scale(.95); }
.pinpad button.ok { background: var(--primary); color: var(--on-primary); border-radius: var(--r-lg); }
.pinpad button.ok:hover { background: var(--primary-hover); }
.pinpad .ico { width: 28px; height: 28px; }
/* Installation d'une tablette (nom de l'établissement + code tablette) */
.enroll-search, .enroll-results { max-width: 560px; margin: 0 auto; }
.enroll-results { display: grid; gap: 8px; margin-top: 16px; }
.enroll-results button { display: flex; align-items: center; gap: 16px; justify-content: stretch; text-align: left; white-space: normal; min-height: 72px; padding: 12px 20px; color: var(--on-surface); border-radius: var(--r-lg); font-weight: 400; }
.enroll-results button:hover { background: var(--surface-container); }
.enroll-results button > span { flex: 1; min-width: 0; display: grid; }
.enroll-results strong { font-size: 1.0625rem; font-weight: 700; }
.enroll-results small { color: var(--on-surface-variant); }
.enroll-results .muted { text-align: center; }
.enroll-box { border-radius: var(--r-lg); padding: 16px 20px; margin-bottom: 16px; }
.enroll-box h3 { margin: 0; }
.enroll-box p:last-child { margin-bottom: 0; }
.enroll-code { font-size: 2.5rem; line-height: 3rem; font-weight: 800; font-stretch: 110%; letter-spacing: .2em; font-variant-numeric: tabular-nums; margin: 4px 0 8px; }

/* ---------- Portail prestataire ---------- */
.kpis.compact { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
@media (max-width: 640px) { .kpis.compact { gap: 8px; } .kpis.compact .kpi { padding: 10px 14px; border-radius: 16px; } .kpis.compact .kpi .v { font-size: 1.5rem; line-height: 2rem; } .kpis.compact .kpi .l { font-size: .8125rem; line-height: 1.125rem; } }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.page-head h1 { margin: 8px 0; }
.seg.wide { max-width: none; }
.seg-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.seg-item .seg-text > .seg-meta { display: flex; }
/* Sous-onglets : groupe de boutons connectés, le sélectionné devient plein et s'élargit */
.subtabs { display: flex; gap: 2px; overflow-x: auto; padding: 0; margin: 8px 0 20px; scrollbar-width: none; width: fit-content; max-width: 100%; }
.subtab {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 1 0 auto; min-height: 40px; padding: 0 16px; white-space: nowrap; color: var(--on-surface-variant); text-decoration: none; font-weight: 600; font-size: .9375rem;
  border-radius: var(--r-sm); background: var(--surface-highest); transition: flex-grow .5s var(--spring), border-radius .4s var(--spring), background .25s, color .25s;
}
.subtab:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.subtab:last-child { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
.subtab:hover { background: var(--surface-high); }
.subtab.active { color: var(--on-primary); background: var(--primary); border-radius: var(--r-lg); font-weight: 800; flex-grow: 1.4; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 24px; margin: 0; }
.kv dt { color: var(--on-surface-variant); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.invite-box { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-lg); background: var(--secondary-container); color: var(--on-secondary-container); }
.invite-box p { margin: 0; }
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; min-width: 0; font-size: .875rem; }
.feed { list-style: none; margin: 0; padding: 0; border-radius: var(--r-lg); overflow: hidden; }
.feed li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 4px 16px; padding: 12px 16px; border-bottom: 1px solid var(--outline-variant); }
.feed li:last-child { border-bottom: 0; }
.feed time { color: var(--on-surface-variant); font-size: .875rem; font-variant-numeric: tabular-nums; }
.notes { display: grid; gap: 8px; margin-top: 16px; }
.note { border-radius: var(--r-lg); padding: 14px 16px; }
.note header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.note time { color: var(--on-surface-variant); font-size: .875rem; }
.note p { margin: 0; white-space: pre-wrap; }
.danger-zone { box-shadow: inset 0 0 0 1px var(--bad-container); }
@media (max-width: 640px) { .feed li { grid-template-columns: 1fr; } .kv { grid-template-columns: 1fr; gap: 0; } .kv dd { margin-bottom: 8px; } }

/* ---------- Étiquette imprimable ---------- */
.label-preview { display: block; max-width: 100%; width: 360px; height: auto; border: 1px dashed var(--outline); border-radius: 6px; background: #fff; image-rendering: pixelated; }
.label-sheet img { display: block; }
/* Étiquette imprimée depuis la page elle-même (pas de fenêtre pop-up, bloquée sur tablette en mode application). */
.label-sheet { display: none; }

@media print {
  html, body { background: #fff; }
  body.printing-label > :not(.label-sheet) { display: none !important; }
  body.printing-label .label-sheet { display: block; }
  .tabbar, .appbar, .no-print, #toast, .fab { display: none !important; }
  .shell { margin: 0; }
  .content { padding: 0; max-width: none; }
  .card, .table-wrap, .seg, .legal { background: none; }
  .print-only { display: block; }
  [data-pick], .search, [data-dishes], .lead { display: none !important; }
  [data-main] > * { animation: none; }
}

/* ---------- Gestes rapides : étiquettes, réceptions, catalogue (public/quick.js) ---------- */
.search-box { position: relative; margin: 8px 0 16px; }
.search-box > .ico { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--on-surface-variant); pointer-events: none; }
.big-search { min-height: 60px; padding-left: 52px; font-size: 1.125rem; border-radius: 999px; border-bottom: 0; background: var(--surface-container); }
.pick-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); margin-bottom: 20px; }
.pick-tile {
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; justify-content: stretch; justify-items: start; gap: 4px; min-height: 96px; padding: 14px 16px; border-radius: var(--r-lg);
  color: var(--on-surface); text-align: left; white-space: normal; font-weight: 400; transition: background .2s, color .2s, border-radius .4s var(--spring), transform .4s var(--spring);
}
.pick-tile:hover { background: var(--surface-high); }
.pick-tile:active { background: var(--primary-container); color: var(--on-primary-container); border-radius: var(--r-xl); transform: scale(.97); }
.pick-tile strong { font-size: 1rem; line-height: 1.375rem; font-weight: 800; }
.pick-tile small { color: var(--on-surface-variant); font-size: .8125rem; line-height: 1.125rem; }
.pick-tile:active small { color: inherit; opacity: .85; }
.pick-tile > .ico { color: var(--primary); }
.pick-tile.new { background: transparent; box-shadow: inset 0 0 0 2px var(--outline-variant); }
.tile-algs { font-size: .9375rem; letter-spacing: 2px; }
.lsheet { display: grid; gap: 10px; }
.lsheet .q, .cat-editor .q { margin: 8px 0 0; font-weight: 800; color: var(--on-surface); }
.cat-editor .q small { font-weight: 400; color: var(--on-surface-variant); margin-left: 6px; }
.seg-choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.seg-choice button { min-height: 64px; flex-direction: column; gap: 2px; border-radius: var(--r-sm); background: var(--surface-highest); color: var(--on-surface-variant); padding: 6px; white-space: normal; transition: border-radius .4s var(--spring), background .2s, color .2s, transform .4s var(--spring); }
.seg-choice button:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.seg-choice button:last-child { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
.seg-choice button:hover { background: var(--surface-high); }
.seg-choice button span { font-size: 1.375rem; line-height: 1.5rem; }
.seg-choice button[aria-pressed=true] { background: var(--primary); color: var(--on-primary); border-radius: var(--r-lg); font-weight: 800; }
.seg-choice.small button { min-height: 52px; }
.stepper { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 8px; }
.stepper button { min-height: 56px; padding: 0; font-size: 1.75rem; background: var(--surface-highest); color: var(--on-surface); border-radius: 50%; width: 56px; margin: 0 auto; }
.stepper button:hover { background: var(--surface-high); }
.stepper output { text-align: center; font-size: 2.25rem; line-height: 2.75rem; font-weight: 800; font-stretch: 110%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stepper.small { grid-template-columns: 48px 56px 48px; }
.stepper.small button { min-height: 44px; width: 44px; font-size: 1.375rem; }
.stepper.small output { font-size: 1.375rem; }
.chips.center { justify-content: center; margin: 0; }
.dlc-big { margin: 4px 0; text-align: center; font-size: 1.125rem; color: var(--on-surface-variant); }
.dlc-big b { display: inline-block; margin-left: 6px; padding: 4px 14px; border-radius: var(--r-sm); background: var(--primary); color: var(--on-primary); font-size: 1.375rem; font-weight: 800; font-stretch: 105%; font-variant-numeric: tabular-nums; }
.qty-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.big-chips .chip { min-height: 48px; font-size: .9375rem; }
.chip.new { box-shadow: inset 0 0 0 2px var(--primary); color: var(--primary); }
.task.recv .task-head > div { flex: 1; min-width: 0; }
.cat-chips { margin: 0; gap: 6px; }
.cat-chips .chip { min-height: 34px; padding: 4px 12px; font-size: .8125rem; }
.recv-more { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.recv-more .chip { min-height: 44px; }
.recv-more .chip[data-pack][aria-pressed=false] { background: var(--bad-container); color: var(--on-bad-container); box-shadow: none; }
.recv-more label.mini { flex: 1 1 140px; }
.recv-more label.mini input { min-height: 44px; }
.photo-btn.small { min-height: 44px; padding: 0 16px; }
.finish-row { justify-content: center; margin: 8px 0 24px; }
.quick-add { display: flex; gap: 8px; margin: 0 0 12px; }
.quick-add input { flex: 1; min-width: 0; }
.quick-add button { min-height: 56px; }
.alg-chip > span { font-size: 1.0625rem; }
.cat-editor { display: grid; gap: 8px; }
.cat-editor .chips { margin: 0; }
.cat-editor .alg-chip[aria-pressed=true] { background: var(--warn-container); color: var(--on-warn-container); }
.dish.editing { box-shadow: inset 0 0 0 2px var(--primary); }
.saved { color: var(--ok); font-weight: 700; font-size: .875rem; }
/* Raccourcis d'Aujourd'hui : tuiles tonales, icône dans une forme cookie en primary */
.quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.quick {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 76px; border-radius: var(--r-lg); text-decoration: none; color: var(--on-surface);
  transition: transform .4s var(--spring), border-radius .4s var(--spring), background .2s;
}
.quick:hover { background: var(--surface-high); }
.quick:active { transform: scale(.97); border-radius: var(--r-xl); }
.quick > .ico { width: 48px; height: 48px; flex: none; padding: 12px; background: var(--primary); color: var(--on-primary); mask: var(--shape-cookie) center / 100% 100% no-repeat; -webkit-mask: var(--shape-cookie) center / 100% 100% no-repeat; }
.quick strong { display: block; font-size: 1.0625rem; line-height: 1.375rem; font-weight: 800; }
.quick small { display: block; font-size: .8125rem; line-height: 1.125rem; color: var(--on-surface-variant); font-weight: 500; }
.quick > span { min-width: 0; }
/* Tuile étroite (très petit écran, ou colonne de gauche d'Aujourd'hui sur tablette et ordinateur) : icône au-dessus du texte, les mots ne se coupent pas. */
@media (max-width: 380px) { .quick { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; } }
@media (min-width: 1000px) { .today-side .quick { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; } }
.quick strong { overflow-wrap: normal; }

/* ---------- En-tête commun HACCP / Pointage : nom de l'application, bascule rapide (couleur tertiaire : celle de l'autre application) ---------- */
.app-badge { margin-left: 4px; padding: 2px 10px; border-radius: var(--r-sm); background: var(--secondary-container); color: var(--on-secondary-container); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.app-switch {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 10px; margin-right: 8px; border-radius: 999px;
  font-weight: 800; font-size: .875rem; text-decoration: none; white-space: nowrap;
  transition: transform .4s var(--spring), border-radius .4s var(--spring), filter .15s;
}
.app-switch .ico { width: 22px; height: 22px; }
.app-switch:hover { filter: brightness(.96); }
.app-switch:active { transform: scale(.96); border-radius: 12px; }
.app-switch.to-pointage { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.app-switch.to-haccp { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.apps-brand { margin: 4px 0 0 !important; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .8125rem; color: var(--primary) !important; }
@media (max-width: 420px) { .app-switch span { display: none; } .app-switch { padding: 0 9px; } .appbar .app-badge { display: none; } }

/* Un élément masqué (attribut hidden) le reste, quel que soit son affichage (flex, grid...). */
[hidden] { display: none !important; }

/* ---------- Scan des codes-barres, lots reçus ---------- */
.scan-btn { min-height: 64px; margin: 8px 0 4px; font-size: 1.0625rem; font-weight: 800; }
.scan-btn .ico { width: 28px; height: 28px; }
.scan-view { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.scan-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame { position: absolute; inset: 22% 12%; border: 3px solid #fff; border-radius: 16px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.row.center { justify-content: center; }
.lot-chips { margin: 0; }
.lot-chip { text-align: left; }
.lot-chip span { display: grid; }
.lot-chip small { font-weight: 400; font-size: .75rem; opacity: .85; }
.lot-chip:disabled { opacity: .5; text-decoration: line-through; }
.hint.warn { color: var(--warn); }
.hint.center { justify-content: center; }
.push-box { display: grid; gap: 10px; margin-top: 8px; }
.push-box .row { gap: 8px; }

/* ---------- Paramètres : un seul bouton plein par écran, les « Enregistrer » de chaque carte sont tonals ---------- */
.settings .card button:not(.secondary):not(.danger):not(.link):not(.icon-btn):not(.chip):not([data-theme-opt]) { background: var(--secondary-container); color: var(--on-secondary-container); }
.settings .card button:not(.secondary):not(.danger):not(.link):not(.icon-btn):not(.chip):not([data-theme-opt]):hover { background: var(--primary-container); color: var(--on-primary-container); }

/* ---------- Mode cuisine (Paramètres → Affichage de cet appareil) ----------
   Éclairage cru, mains mouillées, tablette allumée toute la journée : surfaces blanches cernées d'un contour,
   pas d'animation, textes et cibles plus grands. Les couleurs et la structure ne changent pas. */
:root[data-kitchen] {
  --surface-low: var(--surface-lowest); --surface-container: var(--surface-lowest); --surface-high: var(--surface-highest);
  --outline-variant: var(--outline); --shadow-float: 0 2px 6px rgba(0, 0, 0, .3);
}
:root[data-kitchen] .card, :root[data-kitchen] .task, :root[data-kitchen] .seg, :root[data-kitchen] .kpi, :root[data-kitchen] .quick, :root[data-kitchen] .week-card,
:root[data-kitchen] .pick-tile, :root[data-kitchen] .kiosk-users button, :root[data-kitchen] .table-wrap, :root[data-kitchen] .dish, :root[data-kitchen] .alert-item,
:root[data-kitchen] .auth .card { box-shadow: inset 0 0 0 1px var(--outline); }
:root[data-kitchen] .task.ok .temp-input { box-shadow: inset 0 0 0 1px var(--ok); }
:root[data-kitchen] .task.bad .temp-input { box-shadow: inset 0 0 0 1px var(--bad); }
:root[data-kitchen] *, :root[data-kitchen] *::before, :root[data-kitchen] *::after { animation: none !important; transition: none !important; }
:root[data-kitchen] body { font-size: 18px; line-height: 26px; }
:root[data-kitchen] button, :root[data-kitchen] .btn { min-height: 54px; }
:root[data-kitchen] button.small { min-height: 44px; }
:root[data-kitchen] input, :root[data-kitchen] select { min-height: 60px; }
:root[data-kitchen] input[type=checkbox] { min-height: 0; width: 28px; height: 28px; }
:root[data-kitchen] .switch input { min-height: 0; }
:root[data-kitchen] .temp-input { min-height: 64px; font-size: 1.875rem; }
:root[data-kitchen] .seg-item { min-height: 80px; }
:root[data-kitchen] .task-head strong { font-size: 1.125rem; }
:root[data-kitchen] .tab { font-size: .8125rem; }
:root[data-kitchen] .kiosk-users button { min-height: 170px; font-size: 1.375rem; }
:root[data-kitchen] .pinpad button { min-height: 84px; }
:root[data-kitchen] .kiosk-actions button { min-height: 108px; }