/* =============================================================================
   Application « Relevés HACCP » (/app/) — mobile d'abord
   =============================================================================

   Même direction que la refonte « Dossier » du site (fond papier, vert
   sanitaire, filets 1px, pas d'ombre), adaptée au terrain : cibles tactiles de
   48 px au moins, chiffres lisibles en plein soleil, navigation au pouce.
   Feuille autonome : l'app ne charge ni style.css ni dossier.css.
   ============================================================================= */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(/assets/fonts/archivo-latin-ext.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;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(/assets/fonts/archivo-latin.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;
}

:root {
    --paper: #F6F5F1;
    --surface: #FFFFFF;
    --ink: #14181C;
    --ink-2: #2E3438;
    --text: #4A5157;
    --text-3: #6B7278;
    --green: #0F6B4F;
    --green-dark: #0B4F3A;
    --green-bg: #EEF2EC;
    --green-line: #C9CFC9;
    --line: #E0DED6;
    --line-soft: #F0EEE8;
    --red: #B4453A;
    --red-bg: #F8ECEA;
    --amber: #9A6A12;
    --amber-bg: #FBF3E2;
    --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    --radius: 10px;
    --nav-h: 64px;
    --tap: 48px;
    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 17px/1.45 var(--font);
    padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}
a { color: var(--green); }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.app-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Barre du haut ---------------------------------------------------- */
.app-top {
    position: sticky; top: 0; z-index: 20;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding-top: env(safe-area-inset-top);
}
.app-top__inner {
    max-width: 720px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 56px; padding: 0 16px;
}
.app-top__site {
    font-weight: 700; color: var(--ink); text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
    flex: 1 1 0; /* base nulle : le nom se tronque au lieu de pousser l'opérateur à la ligne */
    display: block; line-height: 44px; /* toute la hauteur de la barre est touchable */
}
.app-top__switch { flex: 1 1 0; min-width: 0; }
.app-top__switch select {
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
    font-weight: 700; min-height: 40px; padding: 0 8px; max-width: 58vw;
}
.app-who {
    display: inline-flex; align-items: center; gap: 6px; flex: none; min-width: 0; max-width: 65%;
    min-height: 40px; padding: 0 12px; border-radius: 999px;
    background: var(--green-bg); color: var(--green-dark); font-weight: 600; text-decoration: none;
}
.app-who__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.app-who__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-who__hint { font-weight: 400; font-size: 13px; color: var(--text); }
@media (max-width: 400px) { .app-who__hint { display: none; } }
.app-who--none { background: var(--amber-bg); color: var(--amber); }
/* Aide : point d'interrogation toujours à portée, dans la barre du haut. */
.app-help-link {
    flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--line); color: var(--ink); font: 700 18px/1 var(--font); text-decoration: none;
}
.app-help-link.is-active { background: var(--green-bg); border-color: var(--green-line); color: var(--green-dark); }

/* ---- Contenu ----------------------------------------------------------- */
.app-main { max-width: 720px; margin: 0 auto; padding: 16px 16px 32px; }
.app-page--center { text-align: center; padding-top: 24px; }
.app-page--center .app-form { text-align: left; }
.app-eyebrow {
    margin: 0 0 4px; font-family: var(--mono); font-size: 12px;
    letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
}
.app-title { margin: 0 0 16px; font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
.app-h2 {
    margin: 28px 0 10px; font-size: 18px; font-weight: 700;
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.app-h3 { margin: 18px 0 8px; font-size: 15px; color: var(--text); }
/* Ancres (#appareils, #equipe…) : le titre ne passe pas sous la barre collante. */
.app-h2[id] { scroll-margin-top: calc(72px + env(safe-area-inset-top)); }
.app-count { font-family: var(--mono); font-size: 13px; color: var(--text-3); font-weight: 400; }
.app-muted { color: var(--text-3); font-size: 14px; }
.app-small { font-size: 13px; }
.app-muted code, .app-small code { font-family: var(--mono); font-size: 12px; word-break: break-all; }
.app-link { display: inline-flex; align-items: center; margin-top: 8px; font-weight: 600; min-height: 40px; }
.app-note { margin: 6px 0 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--text); font-size: 15px; }
.app-footer-links { margin-top: 32px; text-align: center; }
.app-footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.app-stack { display: grid; gap: 12px; margin: 24px 0 12px; }

/* Message du serveur après une redirection : même pastille que le bandeau flottant. */
.app-flash {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 16px; padding: 12px 14px 12px 12px; border-radius: var(--radius);
    background: var(--green-bg); color: var(--green-dark); font-weight: 600; line-height: 1.35;
    border: 1px solid var(--green-line);
    animation: app-flash-in .32s ease-out;
}
.app-flash::before {
    content: '✓'; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: var(--green); color: #fff; font-size: 17px; font-weight: 800; line-height: 1;
}
.app-flash--warn { background: var(--amber-bg); color: var(--amber); border-color: #EAD7AE; }
.app-flash--warn::before { content: '!'; background: var(--amber); }
.app-flash--error { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.app-flash--error::before { content: '×'; background: var(--red); }
@keyframes app-flash-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .app-flash { animation: none; } }
.app-banner { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--radius); font-size: 15px; }
.app-banner--readonly { background: var(--amber-bg); color: var(--amber); }
.app-banner--trial { background: var(--green-bg); color: var(--green-dark); }
.app-banner a { font-weight: 700; color: inherit; }
.app-alert { padding: 12px 14px; border-radius: var(--radius); background: var(--amber-bg); color: var(--amber); }
.app-alert--late, .app-alert--error { background: var(--red-bg); color: var(--red); }
.app-alert[hidden] { display: none; }
.app-alert ul { margin: 6px 0 0; padding-left: 20px; }
.app-alert p { margin: 0; }

/* ---- Cartes, listes ---------------------------------------------------- */
.app-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 14px; margin: 0 0 10px;
}
.app-card p { margin: 0 0 6px; }
.app-card p:last-child { margin-bottom: 0; }
.app-card--quiet { background: var(--line-soft); border-color: transparent; }
.app-card--welcome { border-color: var(--green-line); background: var(--green-bg); }
.app-card--nc { border-left: 4px solid var(--red); }
.app-card--code { text-align: center; border-color: var(--green); }
.app-card--notice { border-color: #EAD7AE; background: var(--amber-bg); }
.app-card[hidden] { display: none; }
.app-card .app-btn + .app-btn { margin-top: 8px; }
.app-plans { display: grid; gap: 10px; }
@media (min-width: 560px) { .app-plans { grid-template-columns: 1fr 1fr; } }
.app-plan { display: flex; flex-direction: column; gap: 6px; }
.app-plan .app-btn { margin-top: auto; }
.app-plan__price { font-size: 20px; font-weight: 700; color: var(--ink); }
.app-card--notice .app-btn { margin-top: 8px; }
.app-input--mono { font-family: var(--mono); font-size: 15px; word-break: break-all; }
.app-code { font-family: var(--mono); font-size: 34px; font-weight: 700; letter-spacing: .12em; margin: 8px 0; color: var(--ink); }
.app-steps { margin: 8px 0 0; padding-left: 22px; }
.app-steps li { margin: 6px 0; }
.app-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.app-list--compact { gap: 4px; }
.app-list--compact > li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 8px 8px 12px; }

.app-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 64px; padding: 12px 14px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    color: inherit; text-decoration: none;
}
.app-row--due { border-left: 4px solid var(--amber); }
.app-row--late { border-left: 4px solid var(--red); }
.app-row__main { display: grid; gap: 6px; min-width: 0; }
.app-row__title { font-weight: 700; color: var(--ink); }
.app-row__side { display: grid; justify-items: end; gap: 2px; text-align: right; flex: none; }
.app-chevron { font-size: 26px; color: var(--text-3); }
.app-value { font-family: var(--mono); font-weight: 700; font-size: 18px; color: var(--green-dark); }
.app-value--bad { color: var(--red); }

.app-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.app-slot {
    font-family: var(--mono); font-size: 13px; padding: 2px 8px; border-radius: 999px;
    border: 1px solid var(--line); color: var(--text);
}
.app-slot--done { background: var(--green-bg); border-color: var(--green-line); color: var(--green-dark); }
.app-slot--done::before { content: '✓ '; }
.app-slot--due { background: var(--amber-bg); border-color: #EAD7AE; color: var(--amber); font-weight: 700; }
.app-slot--late { background: var(--red-bg); border-color: #E7C4BF; color: var(--red); font-weight: 700; }
.app-slot--late::before { content: '! '; }

.app-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.app-tile {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 64px; padding: 10px; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--line);
    color: var(--ink); font-weight: 700; text-decoration: none;
}
.app-tile:active { background: var(--green-bg); }
.app-tile { flex-direction: column; gap: 6px; min-height: 84px; }
.app-tile svg { flex: none; color: var(--green); }
.app-row__detail { font-size: 15px; font-weight: 600; color: var(--amber); }
.app-row__detail.is-late { color: var(--red); }
.app-row--quiet { background: var(--line-soft); border-color: transparent; }
/* Réglages : sommaire, puis une section par page. */
.app-back { display: inline-flex; align-items: center; min-height: 40px; margin: -8px 0 4px; font-weight: 600; text-decoration: none; }
.app-row__sub { font-size: 14px; color: var(--text-3); }
.app-row__sub.is-bad { color: var(--red); font-weight: 600; }
@media (max-width: 719px) {
    /* Nombre impair de tuiles : la dernière prend toute la largeur. */
    .app-tiles > .app-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.app-score { font-family: var(--mono); font-size: 40px; font-weight: 700; color: var(--green-dark); margin: 0; }

.app-badge {
    display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    background: var(--line-soft); color: var(--text); vertical-align: middle;
}
.app-badge--ok { background: var(--green-bg); color: var(--green-dark); }
.app-badge--bad { background: var(--red-bg); color: var(--red); }

.app-entry { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.app-entry p { margin: 4px 0 0; }
.app-entry__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.app-fix { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--amber-bg); font-size: 15px; }
.app-fix p { margin: 0; }
.app-photo img { border-radius: 6px; margin-top: 8px; object-fit: cover; }

/* ---- Onglets, filtres -------------------------------------------------- */
.app-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.app-tabs--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.app-tabs__item {
    flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
    border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
    color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.app-tabs__item.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.app-periods { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.app-chip-link {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px;
    font-size: 14px; color: var(--text); text-decoration: none; border: 1px solid var(--line); background: var(--surface);
}
.app-chip-link.is-active { border-color: var(--green); color: var(--green-dark); font-weight: 700; }
.app-toc { display: flex; flex-wrap: wrap; gap: 0 14px; font-size: 14px; margin-bottom: 8px; }
.app-toc a { display: inline-flex; align-items: center; min-height: 40px; }

/* ---- Formulaires ------------------------------------------------------- */
.app-form { display: grid; gap: 8px; margin: 0 0 16px; }
.app-label { font-weight: 600; margin-top: 8px; }
.app-hint { margin: 0; font-size: 14px; color: var(--text-3); }
.app-input {
    width: 100%; min-height: var(--tap); padding: 10px 12px;
    border: 1px solid var(--green-line); border-radius: var(--radius); background: var(--surface);
    font-size: 17px;
}
textarea.app-input { min-height: 72px; resize: vertical; }
.app-input:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(15, 107, 79, .18); }
.app-input--big { font-family: var(--mono); font-size: 32px; font-weight: 700; min-height: 64px; text-align: center; }
/* Exemple, pas une valeur : plus petit et plus pâle que la saisie (un « 2,5 »
   en gras passait pour une température déjà relevée). */
.app-input--big::placeholder { font-family: var(--font); font-size: 18px; font-weight: 400; color: var(--text-3); opacity: 1; }
.app-input--pin { font-family: var(--mono); letter-spacing: .5em; text-align: center; max-width: 220px; }
.app-input--code { letter-spacing: .15em; text-transform: uppercase; }
.app-input--file { padding: 10px; font-size: 15px; }
.app-measure { position: relative; }
.app-measure__unit { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-weight: 700; pointer-events: none; }
/* Bouton ± (app.js, bindSign) : le clavier numérique de l'iPhone n'a pas de « − ». */
.app-sign {
    position: absolute; left: 6px; top: 6px; bottom: 6px; width: 48px;
    border: 1px solid var(--green-line); border-radius: 8px; background: var(--line-soft);
    color: var(--ink); font: 700 26px/1 var(--mono); cursor: pointer; padding: 0;
}
.app-sign:active { transform: scale(.96); }
/* Suggestions du champ Fournisseur (app.js, bindSuggest) : la <datalist> s'affiche mal sur iPhone. */
.app-suggest { position: relative; }
.app-suggest__list {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 25;
    margin: 0; padding: 0; list-style: none; max-height: calc(var(--tap) * 5.5); overflow-y: auto;
    background: var(--surface); border: 1px solid var(--green-line); border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(20, 24, 28, .12);
}
.app-suggest__list[hidden] { display: none; }
.app-suggest__item { display: flex; align-items: center; min-height: var(--tap); padding: 0 14px; font-size: 17px; cursor: pointer; }
.app-suggest__item + .app-suggest__item { border-top: 1px solid var(--line-soft); }
.app-suggest__item:hover, .app-suggest__item.is-active { background: var(--green-bg); color: var(--green-dark); }
.app-measure.has-sign .app-input { padding-left: 64px; }
.app-measure.has-sign .app-input--big { padding-right: 56px; }

/* Réception express : un geste quand tout est conforme. */
.app-quick { display: grid; gap: 6px; margin: 4px 0 8px; }
.app-quick[hidden] { display: none; }
.app-quick .app-btn { width: 100%; flex-direction: column; gap: 2px; min-height: 64px; padding: 8px 16px; }
.app-quick .app-btn small { font-weight: 400; font-size: 14px; opacity: .9; }
.app-quick .app-hint { text-align: center; }
.app-verdict { margin: 0; min-height: 1.4em; font-weight: 700; }
.app-verdict.is-ok { color: var(--green-dark); }
.app-verdict.is-bad { color: var(--red); }
.app-field-error { margin: 0; color: var(--red); font-weight: 600; font-size: 15px; }
.app-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.app-grid-2 .app-label { display: block; margin-bottom: 4px; font-size: 15px; }
.app-grid-2[hidden] { display: none; }

.app-fieldset, .app-identity, .app-corrective { border: 0; margin: 8px 0 0; padding: 0; min-width: 0; }
.app-fieldset legend, .app-identity legend, .app-corrective legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.app-corrective { padding: 12px; border-radius: var(--radius); background: var(--red-bg); }
.app-corrective legend { float: left; width: 100%; color: var(--red); }
.app-corrective[hidden] { display: none; }
.app-identity { padding: 12px; border-radius: var(--radius); background: var(--line-soft); }
.app-identity legend { float: left; width: 100%; }
.app-signer { margin: 8px 0 0; font-size: 15px; color: var(--text); }
/* « changer » : zone de toucher agrandie sans décaler la ligne. */
.app-signer a { display: inline-block; padding: 12px 6px; margin: -12px -6px; }

.app-segments { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 6px; }
.app-segments--2 { grid-template-columns: 1fr 1fr; }
.app-segments--3 { grid-template-columns: repeat(3, 1fr); }
.app-segment, .app-option, .app-chip, .app-person { position: relative; display: block; cursor: pointer; }
.app-segment input, .app-chip input, .app-person input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.app-segment span {
    display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
    min-height: var(--tap); padding: 8px 10px; border: 1px solid var(--green-line); border-radius: var(--radius);
    background: var(--surface); font-weight: 600; line-height: 1.2;
}
.app-segment small { font-weight: 400; font-size: 13px; color: var(--text-3); margin-top: 2px; }
.app-segment input:checked + span { border-color: var(--green); background: var(--green-bg); color: var(--green-dark); box-shadow: inset 0 0 0 1px var(--green); }
.app-segment--bad input:checked + span { border-color: var(--red); background: var(--red-bg); color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.app-segment input:focus-visible + span, .app-chip input:focus-visible + span, .app-person input:focus-visible ~ span { outline: 3px solid var(--green); outline-offset: 2px; }

.app-option {
    display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 6px 4px;
}
.app-option input { width: 22px; height: 22px; accent-color: var(--green); flex: none; margin: 0; }
.app-option small { display: block; color: var(--text-3); font-size: 13px; }

.app-chips { display: flex; flex-wrap: wrap; gap: 6px; clear: both; }
.app-chip span {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--green-line); background: var(--surface); font-weight: 600;
}
.app-chip input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }

.app-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.app-person { display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-weight: 600; text-align: center; }
.app-person__initial { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--line-soft); font-size: 20px; font-weight: 700; }
.app-person:has(input:checked) { border-color: var(--green); background: var(--green-bg); }
.app-person input:checked ~ .app-person__initial { background: var(--green); color: #fff; }

.app-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--tap); padding: 0 18px; border-radius: var(--radius);
    border: 1px solid var(--ink); background: var(--surface); color: var(--ink);
    font-weight: 700; text-decoration: none; cursor: pointer; text-align: center;
}
.app-btn--primary { background: var(--green); border-color: var(--green); color: #fff; min-height: 56px; font-size: 18px; }
.app-btn[hidden] { display: none; }
.app-btn--primary:active { background: var(--green-dark); }
.app-btn--ghost { border-color: var(--line); background: transparent; color: var(--text); font-weight: 600; }
.app-btn--danger { color: var(--red); }
.app-btn--small { min-height: 40px; padding: 0 12px; font-size: 15px; }
.app-btn[disabled] { opacity: .45; cursor: not-allowed; }
.app-form > .app-btn--primary { margin-top: 12px; width: 100%; }
.app-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.app-inline { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.app-inline .app-input { flex: 1 1 160px; width: auto; }
details > summary { list-style: none; margin-top: 8px; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary { display: none; }

/* ---- Nettoyage --------------------------------------------------------- */
.app-task { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 72px; }
.app-task.is-late { border-left: 4px solid var(--red); }
.app-task.is-done { background: var(--green-bg); border-color: var(--green-line); }
.app-task__form { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.app-task__text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.app-task__by { font-size: 13px; color: var(--green-dark); font-weight: 600; }
.app-task.is-late .app-task__by { color: var(--red); }
.app-check {
    flex: none; width: 52px; height: 52px; border-radius: 12px;
    border: 2px solid var(--green-line); background: var(--surface); color: #fff;
    display: grid; place-items: center; cursor: pointer;
}
.app-check.is-checked { background: var(--green); border-color: var(--green); }
.app-check[disabled] { opacity: .5; }

/* ---- Navigation basse -------------------------------------------------- */
.app-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--surface); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
}
.app-nav__item {
    display: grid; justify-items: center; align-content: center; gap: 2px;
    height: var(--nav-h); color: var(--text-3); text-decoration: none; font-size: 12px; font-weight: 600;
}
.app-nav__item.is-active { color: var(--green); }
.app-nav__item.is-active svg { stroke-width: 2.3; }

@media (min-width: 720px) {
    .app-tiles { grid-template-columns: repeat(3, 1fr); }
    .app-nav { max-width: 720px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; transition: none !important; }
}

/* ---- PWA (lot 3) : file hors ligne, messages, installation ---------------- */
/* État de la file : bandeau pleine largeur sous la barre, pour ne jamais
   tronquer le nom de l'établissement sur un petit écran. */
.app-top__inner { flex-wrap: wrap; }
.app-queue {
    order: 10; flex: 1 0 100%; display: flex; align-items: center; justify-content: center;
    min-height: 32px; margin: 0 0 8px; padding: 0 12px; border-radius: 999px;
    background: var(--amber-bg); color: var(--amber);
    font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
}
.app-queue.is-bad { background: var(--red-bg); color: var(--red); }
.app-queue[hidden] { display: none; }
/* Message après une saisie (app.js, toast) : bandeau flottant sous l'en-tête,
   pastille ✓ / ! / ×, entrée animée, refermé au toucher ou au bout de 5 s. */
.app-toast {
    position: fixed; z-index: 45; top: calc(72px + env(safe-area-inset-top)); left: 50%;
    width: min(520px, calc(100% - 32px)); transform: translateX(-50%);
    display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 16px 12px 12px;
    border-radius: 14px; background: var(--ink); color: #fff; font-weight: 600; line-height: 1.35;
    box-shadow: 0 12px 32px rgba(20, 24, 28, .22); cursor: pointer;
}
.app-toast--ok { background: var(--green-dark); }
.app-top:has(.app-queue:not([hidden])) + .app-main .app-toast { top: calc(112px + env(safe-area-inset-top)); }
.app-toast--warn { background: var(--amber); }
.app-toast--bad { background: var(--red); }
.app-toast[hidden] { display: none; }
.app-toast.is-in { animation: app-toast-in .32s cubic-bezier(.2, .9, .3, 1.2); }
.app-toast__icon {
    flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, .18); font-size: 20px; font-weight: 800; line-height: 1;
}
.app-toast--ok .app-toast__icon::before { content: '✓'; }
.app-toast--warn .app-toast__icon::before { content: '!'; }
.app-toast--bad .app-toast__icon::before { content: '×'; }
.app-toast.is-in .app-toast__icon { animation: app-toast-pop .45s .12s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes app-toast-in { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes app-toast-pop { from { transform: scale(.4); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .app-toast.is-in, .app-toast.is-in .app-toast__icon { animation: none; }
}
/* Saisie partie sans rechargement (app.js, ajaxSubmit) : le geste se voit tout de suite. */
.app-form.is-sending, .app-task__form.is-sending { opacity: .6; pointer-events: none; }
.app-task__form.is-sending .app-check { animation: app-pulse .8s ease-in-out infinite alternate; }
@keyframes app-pulse { from { transform: scale(1); } to { transform: scale(.88); } }
.app-pending-mark {
    display: inline-block; width: fit-content; margin-top: 2px; padding: 1px 8px; border-radius: 999px;
    background: var(--amber-bg); color: var(--amber); font-size: 12px; font-weight: 700;
}
.app-install {
    position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
    background: rgba(20, 24, 28, .55);
}
.app-install[hidden] { display: none; }
.app-install__card {
    width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto;
    background: var(--surface); border-radius: 16px; padding: 24px 20px; text-align: center; display: grid; gap: 12px;
}
.app-install__card img { justify-self: center; border-radius: 16px; }
.app-install__card h2 { margin: 0; font-size: 22px; }
.app-install__card p { margin: 0; }
.app-install__card .app-steps { text-align: left; }
[data-identity-fallback][hidden], [data-install-first][hidden], [data-cleaning-login][hidden] { display: none; }

/* ---- Mobile : retours au toucher, installation (2026-10) --------------------
   Le surlignage gris d'iOS au toucher est retiré (html) : chaque élément
   touchable a donc son propre retour :active. */
.app-row:active, .app-entry a:active { background: var(--green-bg); }
.app-nav__item:active { background: var(--line-soft); }
.app-btn:not(.app-btn--primary):active { background: var(--line-soft); }
.app-segment input:active + span, .app-chip input:active + span { background: var(--green-bg); }

/* Navigation basse sur téléphone (app des stores et navigateur) : fond vert
   foncé pour la détacher du contenu, page en cours en blanc sur une pastille.
   Le menu latéral de l'ordinateur (≥ 1024 px) garde son fond clair. */
@media (max-width: 1023.98px) {
    .app-nav { background: var(--green-dark); border-top-color: var(--green-dark); box-shadow: 0 -4px 16px rgba(11, 79, 58, .18); }
    .app-nav__item { color: rgba(255, 255, 255, .78); }
    .app-nav__item svg { box-sizing: content-box; padding: 3px 16px; border-radius: 999px; }
    .app-nav__item.is-active { color: #FFFFFF; }
    .app-nav__item.is-active svg { background: rgba(255, 255, 255, .2); }
    .app-nav__item:active { background: rgba(255, 255, 255, .1); }
}
@media (min-width: 720px) and (max-width: 1023.98px) {
    .app-nav { border-left-color: var(--green-dark); border-right-color: var(--green-dark); }
}

/* Carte « Installer l'application » de l'accueil (affichée par le script). */
.app-install-card {
    position: relative; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px;
    padding-right: 44px; border-color: var(--green-line);
}
.app-install-card[hidden] { display: none; }
.app-install-card img { border-radius: 10px; }
.app-card .app-install-card__text { margin: 0; line-height: 1.3; }
.app-install-card__text .app-muted { font-size: 14px; }
.app-install-card form { margin: 0; }
.app-install-card__close {
    position: absolute; top: 2px; right: 2px; width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: transparent; color: var(--text-3); font-size: 24px; line-height: 1; cursor: pointer;
}

/* Page /app/installer. */
.app-installer__icon { display: block; margin: 0 auto 12px; border-radius: 16px; }
.app-installer__how { margin: 20px 0 12px; text-align: left; }
.app-installer__how .app-btn--primary { width: 100%; }
.app-installer .app-alert, .app-installer .app-flash { text-align: left; margin: 16px 0; }
.app-install-steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.app-install-steps li {
    display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center;
    padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.app-install-steps__icon {
    width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
    background: var(--green-bg); color: var(--green-dark);
}
.app-install-steps__icon img { border-radius: 5px; }

/* QR code d'appairage (Réglages › Appareils). */
.app-qr { display: flex; justify-content: center; margin: 12px 0 4px; }
.app-qr svg { width: 200px; height: 200px; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; }

/* ---- Aide (/app/aide) ----------------------------------------------------- */
.app-help-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.app-help-section, .app-faq { scroll-margin-top: calc(72px + env(safe-area-inset-top)); }
.app-faq { margin: 0 0 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
/* Plus fort que « details[open] > summary { display: none } » (boutons « Voir plus » ailleurs). */
.app-faq > summary, .app-faq[open] > summary {
    display: block; position: relative; margin: 0; min-height: 48px; padding: 13px 48px 13px 14px;
    font-weight: 600; cursor: pointer;
}
.app-faq > summary::after {
    content: '+'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    font: 700 22px/1 var(--mono); color: var(--green);
}
.app-faq[open] > summary::after { content: '\2212'; }
.app-faq[open] > summary { border-bottom: 1px solid var(--line-soft); }
.app-faq__answer { padding: 12px 14px 14px; }
.app-faq__answer p, .app-faq__answer ol { margin: 0 0 8px; }
.app-faq__answer > :last-child { margin-bottom: 0; }
.app-faq__answer ol { padding-left: 20px; }
.app-help-more { margin-top: 24px; }

/* ---- Ordinateur (2026-10) ------------------------------------------------------
   Sur téléphone : une colonne, barre du bas. À partir de 1024 px : menu sur le
   côté (avec Non-conformités, Exporter, Réglages, Aide), contenu large, accueil
   en deux colonnes, formulaires avec un panneau de repères. Les blocs
   .app-desk-only n'existent qu'à l'écran large (rendus, mais masqués ailleurs). */
.app-nav__brand, .app-nav__item--desk { display: none; }
.app-progress { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.app-progress li { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
.app-progress__bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.app-progress__bar > span { display: block; height: 100%; background: var(--green); border-radius: inherit; }
.app-mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.app-mini-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: 15px; }
.app-mini-list li:first-child { border-top: 0; padding-top: 0; }
.app-mini-list__time { font-family: var(--mono); font-size: 13px; color: var(--text-3); }
.app-mini-list__main { min-width: 0; display: grid; }
.app-mini-list__main .app-muted { font-size: 13px; }
.app-mini-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 8px; }
.app-mini-table td { padding: 6px 0; border-top: 1px solid var(--line-soft); }
.app-mini-table tr:first-child td { border-top: 0; }
.app-mini-table td:last-child { text-align: right; font-family: var(--mono); font-weight: 700; color: var(--green-dark); white-space: nowrap; }
.app-aside__title { margin: 0 0 8px; font-weight: 700; }

@media (min-width: 1024px) {
    body { padding-bottom: 0; padding-left: 232px; }

    /* Menu latéral. */
    .app-nav {
        top: 0; bottom: 0; left: 0; right: auto; width: 232px; max-width: none; margin: 0;
        display: flex; flex-direction: column; gap: 2px; padding: 16px 12px calc(16px + env(safe-area-inset-bottom));
        border-top: 0; border-left: 0; border-right: 1px solid var(--line); overflow-y: auto;
    }
    .app-nav__brand {
        display: flex; align-items: center; gap: 10px; margin: 0 4px 18px; padding: 4px 0;
        font-weight: 700; color: var(--ink); text-decoration: none;
    }
    .app-nav__brand img { border-radius: 8px; }
    .app-nav__item, .app-nav__item--desk {
        display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px;
        height: auto; min-height: 44px; padding: 0 12px; border-radius: 8px; font-size: 15px;
    }
    .app-nav__item--desk:first-of-type { margin-top: 0; }
    .app-nav__item:hover { background: var(--line-soft); color: var(--ink); }
    .app-nav__item.is-active { background: var(--green-bg); color: var(--green-dark); }
    .app-nav__item svg { width: 22px; height: 22px; flex: none; }
    /* Séparation entre la saisie du jour et les pages du titulaire. */
    .app-nav__item:not(.app-nav__item--desk) + .app-nav__item--desk { margin-top: 14px; position: relative; }
    .app-nav__item:not(.app-nav__item--desk) + .app-nav__item--desk::before {
        content: ''; position: absolute; left: 12px; right: 12px; top: -8px; border-top: 1px solid var(--line);
    }

    /* Contenu plus large ; les pages simples gardent une colonne lisible. */
    .app-top__inner { max-width: 1200px; padding: 0 32px; }
    .app-main { max-width: 1200px; padding: 24px 32px 56px; }
    .app-page { max-width: 820px; }
    .app-page--wide { max-width: none; }
    .app-page--center { max-width: 560px; margin: 0 auto; }
    .app-page--form { max-width: 680px; }
    .app-page--wide > p:not(.app-eyebrow) { max-width: 760px; }
    .app-title { font-size: 30px; }

    /* Toutes les pages (2026-10-08) : titres de section en libellés, une liste
       = un seul cadre fileté (et non une carte par ligne), formulaire principal
       dans une carte. Sur téléphone, rien ne change. */
    .app-main .app-h2 {
        margin: 32px 0 10px; align-items: center;
        font: 600 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
    }
    .app-main .app-h2 .app-count { font-size: 12px; }
    .app-h2__link { font: 600 14px/1 var(--font); letter-spacing: 0; text-transform: none; color: var(--green); text-decoration: none; }
    .app-h2__link:hover { text-decoration: underline; }

    .app-main .app-list {
        gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    }
    .app-main .app-list:not(:has(> li)) { display: none; }
    .app-main .app-list > li + li { border-top: 1px solid var(--line-soft); }
    .app-main .app-list > li > .app-row,
    .app-main .app-list > .app-card,
    .app-main .app-list > .app-task,
    .app-main .app-list > .app-entry,
    .app-main .app-list--compact > li { margin: 0; border: 0; border-radius: 0; }
    /* Après la remise à zéro ci-dessus (spécificité de :is() = sa classe la plus forte). */
    .app-main .app-list > :is(li, .app-card, .app-task, .app-entry) + :is(li, .app-card, .app-task, .app-entry) { border-top: 1px solid var(--line-soft); }
    .app-main .app-list > li > .app-row { min-height: 56px; border-left: 4px solid transparent; }
    .app-main .app-list > li > .app-row--due { border-left-color: var(--amber); }
    .app-main .app-list > li > .app-row--late { border-left-color: var(--red); }
    .app-main .app-list > .app-card--nc, .app-main .app-list > .app-task.is-late { border-left: 4px solid var(--red); }
    .app-main .app-list > .app-card--quiet { background: var(--surface); }
    .app-main .app-row__main { gap: 4px; }
    .app-main .app-list .app-chevron { font-size: 22px; }
    /* Sommaire des réglages : deux colonnes, filets par l'écart de la grille. */
    /* (filets portés par les cases : les lignes masquées sur ordinateur sont en fin de liste,
       une case vide reste blanche). */
    .app-main .app-list[data-settings-sections] > li { border-top: 1px solid var(--line-soft); }
    .app-main .app-list[data-settings-sections] > li:nth-child(-n+2) { border-top: 0; }
    .app-main .app-list[data-settings-sections] > li:nth-child(odd) { border-right: 1px solid var(--line-soft); }

    .app-split > .app-form, .app-split > div > .app-form, .app-page--form > .app-form, .app-nc-layout__new > .app-form {
        margin: 0; padding: 24px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    }
    .app-tabs--scroll { flex-wrap: wrap; overflow: visible; }

    /* Nettoyage : aujourd'hui à gauche, semaine et mois à droite. */
    .app-cleaning { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 32px; align-items: start; }
    .app-cleaning__group--daily { grid-column: 1; grid-row: 1 / 4; }
    .app-cleaning__group--weekly, .app-cleaning__group--monthly { grid-column: 2; }
    .app-cleaning:not(:has(.app-cleaning__group--daily)) > * { grid-column: 1 / -1; }
    .app-cleaning__group--daily .app-h2, .app-cleaning__group--weekly .app-h2 { margin-top: 0; }
    .app-task__form { padding: 10px 14px; }
    .app-check { width: 40px; height: 40px; border-radius: 8px; }

    /* Non-conformités : les registres à gauche, « Signaler » toujours visible à droite. */
    .app-nc-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 34%, 400px); grid-template-rows: auto 1fr; column-gap: 32px; align-items: start; }
    .app-nc-layout__open { grid-column: 1; grid-row: 1; }
    .app-nc-layout__closed { grid-column: 1; grid-row: 2; }
    .app-nc-layout__new { grid-column: 2; grid-row: 1 / 3; position: sticky; top: 80px; }
    .app-nc-layout__open > .app-h2:first-child, .app-nc-layout__new > .app-h2:first-child { margin-top: 0; }

    /* Historique : une saisie par ligne, valeur et « Corriger » en colonnes. */
    .app-history { max-width: 1000px; }
    .app-history .app-entry {
        display: grid; grid-template-columns: minmax(0, 1fr) auto 96px; column-gap: 20px; row-gap: 2px;
        align-items: center; padding: 10px 16px;
    }
    .app-history .app-entry__head { display: contents; }
    .app-history .app-entry > * { grid-column: 1; margin: 0; }
    .app-history .app-entry__head > :first-child { grid-column: 1; grid-row: 1; }
    .app-history .app-entry__head > :nth-child(2) { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
    .app-history .app-entry > .app-link { grid-column: 3; grid-row: 1 / span 2; justify-self: end; min-height: 0; }

    /* Export : archives et vérification à côté du formulaire. */
    .app-export-side > .app-h2:first-child { margin-top: 0; }

    /* Réglages : enceintes et friteuses en grille, équipe en lignes. */
    .app-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; margin: 12px 0; }
    .app-cards > .app-card { margin: 0; }
    /* Une grille par ligne : colonnes de largeur fixe pour rester alignées (le titulaire n'a pas « Retirer »). */
    .app-team > li { display: grid; grid-template-columns: minmax(0, 1fr) auto 104px; align-items: center; column-gap: 12px; padding: 12px 16px; }
    .app-team > li > p { margin: 0; }
    .app-team > li > .app-inline { grid-column: 2; }
    .app-team > li > form:not(.app-inline) { grid-column: 3; justify-self: end; }
    .app-split .app-segments { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
    .app-team .app-inline { flex-wrap: nowrap; }
    .app-team .app-inline .app-input { flex: none; width: 120px; }
    .app-team .app-inline .app-btn { min-width: 160px; }

    /* Accueil (2026-10-08) : chiffres clés en bandeau, puis à gauche ce qu'il
       faut faire (maintenant, températures), à droite saisir et le point du
       jour. Une liste = un seul cadre fileté, pas une carte par ligne. */
    .app-dash .app-title { margin-bottom: 0; }
    .app-dash > .app-muted { margin: 6px 0 0; }
    .app-kpis {
        list-style: none; margin: 20px 0 32px; padding: 0;
        display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
        background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    }
    .app-kpis > li + li { border-left: 1px solid var(--line); }
    .app-kpi { display: grid; gap: 4px; align-content: start; height: 100%; padding: 16px 20px; color: inherit; text-decoration: none; }
    .app-kpi:hover { background: #FBFBF9; }
    .app-kpi__label { font: 600 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
    .app-kpi__value { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
    .app-kpi__value small { font-size: 18px; font-weight: 600; color: var(--text-3); }
    .app-kpi__sub { font-size: 13px; color: var(--text-3); }
    .app-kpi.is-late .app-kpi__value { color: var(--red); }
    .app-kpi.is-late .app-kpi__sub { color: var(--red); font-weight: 600; }

    .app-home { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 30%, 340px); gap: 32px; align-items: start; }
    .app-home__main, .app-home__side { display: grid; gap: 28px; align-content: start; min-width: 0; }
    .app-dash .app-h2 { margin-top: 0; }
    .app-dash .app-block > .app-small { margin: 8px 0 0; }

    /* Saisir : raccourcis sur deux colonnes, séparés par des filets. */
    .app-quick-links {
        list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
        background: var(--line-soft); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
    }
    .app-quick-links > li { background: var(--surface); }
    .app-quick-links > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .app-quick-links a {
        display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px;
        color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none;
    }
    .app-quick-links a:hover { background: var(--green-bg); color: var(--green-dark); }
    .app-quick-links svg { flex: none; color: var(--green); }

    /* Le point du jour : contenus dans un cadre, comme les listes. */
    .app-dash .app-progress, .app-dash .app-mini-list, .app-dash .app-block__empty {
        margin: 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    }
    .app-dash .app-mini-list li:first-child { padding-top: 0; }
    .app-dash .app-mini-list li:last-child { padding-bottom: 0; }
    .app-nc-list .app-row__title {
        font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }

    /* Installer l'application, alertes « sur ce téléphone » : sans objet sur un ordinateur. */
    .app-dash [data-install-card], .app-dash [data-push-card] { display: none; }

    /* Formulaires : la saisie à gauche, les repères à droite. */
    .app-split { display: grid; grid-template-columns: minmax(0, 620px) minmax(280px, 1fr); gap: 40px; align-items: start; }
    .app-aside { position: sticky; top: 80px; display: grid; gap: 12px; }
    .app-aside .app-card { margin: 0; }

    /* Réglages : sommaire sur deux colonnes. */
    .app-list[data-settings-sections] { grid-template-columns: 1fr 1fr; }

    /* Aide : thèmes à gauche, questions à droite. */
    .app-help-layout { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: 40px; align-items: start; }
    .app-help-toc { position: sticky; top: 80px; flex-direction: column; flex-wrap: nowrap; }
    .app-help-toc .app-chip-link { border-radius: 8px; border-color: transparent; background: transparent; }
    .app-help-toc .app-chip-link:hover { background: var(--line-soft); }
    .app-help-sections .app-h2:first-child { margin-top: 0; }

    /* Survol (souris) : ce qui se clique se voit. */
    .app-row:hover, .app-tile:hover { border-color: var(--green-line); background: #FBFBF9; }
    .app-btn--primary:hover { background: var(--green-dark); }
}

/* Accueil sur téléphone : les non-conformités sont rangées dans la colonne
   principale (pour l'ordinateur) mais s'affichent après le nettoyage, comme
   avant ; les deux colonnes s'effacent au profit d'une seule pile. */
@media (max-width: 1023px) {
    .app-home { display: flex; flex-direction: column; }
    .app-home__main, .app-home__side { display: contents; }
    .app-home__side > * { order: 3; }
    .app-home__side > .app-block--cleaning { order: 1; }
    .app-home .app-block--nc { order: 2; }
}

/* En dernier : l'emporte sur l'affichage propre de chaque bloc (.app-progress en grille…). */
@media (max-width: 1023px) {
    .app-desk-only { display: none; }
}
@media (min-width: 1024px) {
    .app-mobile-only { display: none; }
}