/* public/caisse.css — La caisse, d'après DESIGN.md (« La Carte de Membre d'Élite »)
   et les maquettes validées de docs/maquettes/caisse.
   Tout est rangé sous .caisse : l'ancien style de l'espace ne fuit pas dedans,
   et cette feuille ne touche rien d'autre.

   Mise en page :
   - moins de 900 px : identifier en pleine page, recherche en bas, l'action
     arrive en feuille basse (le succès prend tout l'écran) ;
   - 900 px et plus : deux colonnes, panneau d'action collant à droite. */

.caisse {
    --fond: #FBFAF7;
    --surface: #FFFFFF;
    --surface-2: #F3F1EC;
    --bordure: #E6E2D9;
    --bordure-forte: #D3CEC2;
    --encre: #17150F;
    --encre-2: #57534A;
    --encre-3: #6F6A5F;
    --em: #0F7A55;
    --em-survol: #0B6647;
    --em-doux: #E3F2EB;
    --em-texte: #0B6647;
    --sur-em: #FFFFFF;
    --ambre: #D39317;
    --ambre-vif: #EBAA2C;
    --ambre-doux: #FBF0D8;
    --ambre-texte: #85570A;
    --attention: #B4540A;
    --attention-doux: #FCEDE0;
    --danger: #C23B2E;
    --danger-doux: #FBE9E6;
    --anneau: rgb(15 122 85 / 0.32);
    --ombre-1: 0 1px 2px rgb(23 21 15 / 0.06);
    --ombre-2: 0 6px 16px -4px rgb(23 21 15 / 0.18);
    --ombre-feuille: 0 -12px 32px -12px rgb(23 21 15 / 0.22);
    --voile: rgb(23 21 15 / 0.28);
    --police: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --police-code: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --bas-nav: calc(64px + env(safe-area-inset-bottom));   /* hauteur des onglets du bas (espace.css) */
    --sortie: cubic-bezier(0.22, 1, 0.36, 1);

    position: relative;
    color: var(--encre);
    font: 400 0.9375rem/1.55 var(--police);
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}

html[data-theme="dark"] .caisse {
    --fond: #0E0F11;
    --surface: #16171A;
    --surface-2: #1D1F23;
    --bordure: #2A2C31;
    --bordure-forte: #3A3D43;
    --encre: #F3F1EB;
    --encre-2: #B3AFA6;
    --encre-3: #8F8B81;
    --em: #2FBF86;
    --em-survol: #47D29B;
    --em-doux: rgb(47 191 134 / 0.14);
    --em-texte: #5AD9A3;
    --sur-em: #04160E;
    --ambre: #F0B23A;
    --ambre-vif: #FFC65A;
    --ambre-doux: #33260C;
    --ambre-texte: #F4C467;
    --attention: #F09A4A;
    --attention-doux: rgb(240 154 74 / 0.14);
    --danger: #F0776A;
    --danger-doux: rgb(240 119 106 / 0.14);
    --anneau: rgb(47 191 134 / 0.36);
    --ombre-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --ombre-2: 0 8px 20px -6px rgb(0 0 0 / 0.6);
    --ombre-feuille: 0 -12px 32px -12px rgb(0 0 0 / 0.7);
    --voile: rgb(0 0 0 / 0.5);
}

/* L'onglet n'anime plus son entrée : une transformation, même nulle, ferait
   de lui le repère des éléments fixes (feuille, toast) au lieu de l'écran. */
#tab-scanner.active { animation: none; opacity: 1; transform: none; }
/* Même raison pour contain et isolation : sans ça, la feuille basse passerait
   sous la barre de navigation du téléphone. */
.main-content:has(#tab-scanner.active) { contain: none; isolation: auto; }

/* Remises à zéro sans poids (:where) : les classes de composants gagnent. */
:where(.caisse) *, :where(.caisse) *::before, :where(.caisse) *::after { box-sizing: border-box; }
:where(.caisse) :where(h2, h3, p) { margin: 0; }
:where(.caisse) button { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; }
:where(.caisse) svg { flex: none; }
.caisse [hidden] { display: none !important; }

.c-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.c-code { font-family: var(--police-code); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; }

/* ── En-tête ─────────────────────────────────────────────────────────────── */

.c-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 16px; }
.c-titre { font-size: var(--t-ecran, 1.75rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }

.c-etat {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 9px 5px 7px; border-radius: 999px;
    font-size: 0.75rem; font-weight: 550; line-height: 1.3; white-space: nowrap;
    background: var(--surface-2); color: var(--encre-2);
}
.c-etat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.c-etat:empty { display: none; }
.c-etat-ok     { background: var(--em-doux); color: var(--em-texte); }
.c-etat-danger { background: var(--danger-doux); color: var(--danger); }
.c-etat-ambre  { background: var(--ambre-doux); color: var(--ambre-texte); align-self: flex-start; }
.c-etat-ambre::before, .c-etat-grand::before { display: none; }
.c-etat-grand  { font-size: 0.8125rem; padding: 6px 12px; gap: 8px; }

.c-bandeau-hors-ligne {
    display: flex; align-items: flex-start; gap: 12px;
    margin: 0 0 16px; padding: 12px 16px; border-radius: 12px;
    background: var(--danger-doux); color: var(--danger);
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
}
.c-bandeau-hors-ligne div { display: flex; flex-direction: column; gap: 2px; }
.c-bandeau-hors-ligne strong { font-weight: 600; }
.c-bandeau-hors-ligne span { color: var(--encre-2); font-size: 0.8125rem; }

/* ── Boutons ─────────────────────────────────────────────────────────────── */

.c-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    position: relative; overflow: hidden;
    height: 40px; padding: 0 16px; border-radius: 8px;
    border: 1px solid transparent; background: transparent;
    font-size: 0.9375rem; font-weight: 550; line-height: 1; white-space: nowrap;
    cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
    transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease, box-shadow 120ms ease;
}
.c-btn:active:not(:disabled) { transform: scale(0.985); }
.c-btn:disabled { cursor: not-allowed; opacity: 0.55; }
.caisse :focus-visible { outline: none; box-shadow: 0 0 0 3px var(--anneau); }

.c-btn-primaire {
    background: var(--em); color: var(--sur-em);
    box-shadow: var(--ombre-1), inset 0 1px 0 rgb(255 255 255 / 0.16);
}
.c-btn-primaire:hover:not(:disabled) { background: var(--em-survol); }
.c-btn-primaire:disabled { opacity: 1; background: var(--surface-2); color: var(--encre-3); box-shadow: none; border-color: var(--bordure); }

.c-btn-secondaire { background: var(--surface); border-color: var(--bordure-forte); color: var(--encre); box-shadow: var(--ombre-1); }
.c-btn-secondaire:hover:not(:disabled) { background: var(--surface-2); }

.c-btn-discret { color: var(--encre-2); padding: 0 12px; }
.c-btn-discret:hover:not(:disabled) { background: var(--surface-2); color: var(--encre); }

.c-btn-petit { height: 36px; padding: 0 12px; font-size: 0.8125rem; }
.c-btn-large { height: 48px; width: 100%; }
.c-btn-comptoir { height: 56px; width: 100%; border-radius: 12px; font-size: 1.0625rem; }

.c-btn-pointille {
    width: 100%; height: 48px; margin-top: 12px;
    border: 1px dashed var(--bordure-forte); color: var(--encre-2); background: transparent;
}
.c-btn-pointille:hover { background: var(--surface); color: var(--encre); }

/* Décompte du retour automatique : une lueur traverse le bouton. */
.c-decompte::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 0;
    background: rgb(255 255 255 / 0.16);
    animation: c-decompte var(--c-duree, 4s) linear forwards;
}
.c-btn-secondaire.c-decompte::before { background: color-mix(in srgb, var(--em) 12%, transparent); }
.c-decompte > * { position: relative; }
@keyframes c-decompte { to { width: 100%; } }

/* ── Identifier : caméra, recherche, habitués ────────────────────────────── */

.c-identifier { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.c-camera:not(:has(> :not([hidden]))) { display: none; }

.c-viseur {
    position: relative; overflow: hidden; border-radius: 18px;
    background: #1D1F23; aspect-ratio: 4 / 3.4; max-height: 52vh;
    box-shadow: var(--ombre-2);
}
/* La librairie pose position:relative en ligne sur #reader : sans !important,
   le conteneur retombait dans le flux et prenait la hauteur de ce qu'il
   contient — 0 px dès que la vidéo est en absolu. */
.c-viseur #reader { position: absolute !important; inset: 0 !important; border: 0 !important; }
/* La vidéo remplit le viseur et reste centrée, quoi que la librairie insère
   avant elle ou quel que soit le sens du flux (l'iPhone l'envoie en portrait). */
.c-viseur #reader video {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important; object-position: center !important; display: block;
}
.c-viseur #reader img, .c-viseur #reader__dashboard, .c-viseur #reader__header_message { display: none !important; }
.c-viseur #qr-shaded-region { display: none !important; }
/* Le repère de visée : un rectangle, au centre exact de l'image visible. */
.c-viseur::after {
    content: ""; position: absolute; z-index: 1; pointer-events: none;
    top: 50%; left: 50%; width: min(76%, 300px); aspect-ratio: 1.6; translate: -50% -50%;
    --c: #F6F3EA; --l: 28px; --e: 3px;
    background:
        linear-gradient(var(--c) 0 0) top left / var(--l) var(--e) no-repeat,
        linear-gradient(var(--c) 0 0) top left / var(--e) var(--l) no-repeat,
        linear-gradient(var(--c) 0 0) top right / var(--l) var(--e) no-repeat,
        linear-gradient(var(--c) 0 0) top right / var(--e) var(--l) no-repeat,
        linear-gradient(var(--c) 0 0) bottom left / var(--l) var(--e) no-repeat,
        linear-gradient(var(--c) 0 0) bottom left / var(--e) var(--l) no-repeat,
        linear-gradient(var(--c) 0 0) bottom right / var(--l) var(--e) no-repeat,
        linear-gradient(var(--c) 0 0) bottom right / var(--e) var(--l) no-repeat;
    filter: drop-shadow(0 1px 4px rgb(0 0 0 / 0.45));
}
.c-viseur-aide, .c-viseur-fermer { z-index: 2; }
.c-viseur-aide {
    position: absolute; left: 0; right: 0; bottom: 16px; text-align: center;
    color: #F6F3EA; font-size: 0.9375rem; font-weight: 550;
    text-shadow: 0 1px 8px rgb(0 0 0 / 0.5); pointer-events: none;
}
.c-viseur-fermer {
    position: absolute; top: 12px; right: 12px; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px; border: 1px solid rgb(255 255 255 / 0.2);
    background: rgb(14 15 17 / 0.55); color: #F6F3EA !important; cursor: pointer;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

.c-veille, .c-encart {
    width: 100%; border-radius: 18px;
    border: 1px dashed var(--bordure-forte); background: var(--surface-2);
    display: flex; flex-direction: column; gap: 10px; padding: 24px;
}
.c-veille { min-height: 168px; align-items: center; justify-content: center; color: var(--encre-2); cursor: pointer; }
.c-veille:hover { background: var(--surface); color: var(--encre); }
.c-encart { align-items: flex-start; }
.c-encart strong { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.c-encart span { color: var(--encre-2); }

.c-recherche { display: flex; gap: 8px; align-items: stretch; }
.c-recherche-champ {
    flex: 1; min-width: 0; height: 56px; display: flex; align-items: center; gap: 10px;
    padding: 0 16px; border-radius: 12px;
    background: var(--surface); border: 1px solid var(--bordure-forte); color: var(--encre-2);
    box-shadow: var(--ombre-1); cursor: text;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.c-recherche-champ:focus-within { border-color: var(--em); box-shadow: 0 0 0 3px var(--anneau); }
.caisse .c-recherche-champ input {
    flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0;
    border: 0; outline: 0; background: transparent; box-shadow: none; border-radius: 0;
    color: var(--encre); font: 400 1.0625rem/1 var(--police);
    -webkit-appearance: none; appearance: none;
}
.caisse .c-recherche-champ input::placeholder { color: var(--encre-3); opacity: 1; }
.caisse .c-recherche-champ input::-webkit-search-cancel-button { display: none; }
.c-btn-scan { height: 56px; width: 56px; padding: 0; border-radius: 12px; }
.c-btn-scan-texte { display: none; }

.c-resultats { min-width: 0; }
.c-liste-tete { font-size: var(--t-section, 1.25rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 0 4px 12px; }

.c-liste {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px; box-shadow: var(--ombre-1);
}
.c-ligne {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px;
    padding: 10px 14px; text-align: left; cursor: pointer;
    background: transparent; border: 0; border-top: 1px solid var(--bordure);
    transition: background-color 120ms ease;
}
.c-liste .c-ligne:first-child { border-top: 0; }
.c-ligne:hover { background: var(--surface-2); }
.c-liste .c-ligne:first-child:not(:only-child):hover, .c-ligne:active { background: var(--em-doux); }

.c-av {
    width: 40px; height: 40px; flex: none; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--em-doux); color: var(--em-texte); font-size: 0.8125rem; font-weight: 600;
}
.c-av-grand { width: 44px; height: 44px; }
.c-ligne-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.c-ligne-nom { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-ligne-nom strong { font-weight: 650; }
.c-ligne-meta { font-size: 0.8125rem; color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-ligne-prog { font-size: 0.8125rem; font-weight: 600; color: var(--ambre-texte); white-space: nowrap; }

/* Habitués : tuiles sur téléphone, liste sur grand écran. */
.c-habitues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.c-habitues .c-ligne {
    flex-direction: column; justify-content: center; gap: 4px; min-height: 96px; padding: 12px 6px;
    text-align: center; border: 1px solid var(--bordure); border-radius: 12px;
    background: var(--surface); box-shadow: var(--ombre-1);
}
.c-habitues .c-av { width: 36px; height: 36px; }
.c-habitues .c-ligne-texte { align-items: center; width: 100%; }
.c-habitues .c-ligne-nom { font-size: 0.8125rem; max-width: 100%; }
.c-habitues .c-ligne-meta { display: none; }
.c-habitues .c-ligne-prog { font-size: 0.75rem; }

.c-vide {
    display: flex; flex-direction: column; gap: 4px; padding: 24px 20px; text-align: center;
    border: 1px dashed var(--bordure-forte); border-radius: 12px; color: var(--encre-2);
}
.c-vide strong { color: var(--encre); font-weight: 600; }
.c-vide-grand { border: 0; padding: 32px 8px 16px; }
.c-vide-grand strong { font-size: 1.25rem; letter-spacing: -0.02em; }

.c-squelette { display: flex; flex-direction: column; gap: 10px; }
.c-squelette span {
    height: 64px; border-radius: 12px;
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 50%, var(--surface-2) 75%);
    background-size: 200% 100%; animation: c-lueur 1.4s ease-in-out infinite;
}
.c-squelette span:nth-child(2) { width: 82%; }
.c-squelette span:nth-child(3) { width: 64%; }
@keyframes c-lueur { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── Panneau d'action ───────────────────────────────────────────────────── */

.c-panneau { background: var(--surface); color: var(--encre); }
.c-panneau-contenu { display: flex; flex-direction: column; gap: 16px; }

.c-poignee { width: 36px; height: 4px; border-radius: 999px; background: var(--bordure-forte); align-self: center; margin: -4px 0 -4px; }

.c-panneau-vide {
    flex: 1; min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; color: var(--encre-3); text-align: center; padding: 24px;
}

.c-identite { display: flex; align-items: center; gap: 12px; }
.c-identite-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.c-identite-nom { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-identite-meta { font-size: 0.8125rem; color: var(--encre-2); }

.c-fidelite {
    display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 12px;
    background: var(--ambre-doux); color: var(--ambre-texte); font-size: 0.8125rem; font-weight: 550;
}
.c-fidelite span { flex: 1; }

.c-tampons { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.c-tampon {
    width: 26px; height: 26px; flex: none; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px dashed var(--bordure-forte); color: var(--encre-3);
    transition: background-color 160ms ease, border-color 160ms ease;
}
.c-tampon svg { width: 13px; height: 13px; }
.c-tampon.plein {
    border: 0; color: rgb(42 28 3 / 0.55);
    background: radial-gradient(circle at 35% 30%, var(--ambre-vif), var(--ambre) 70%);
    box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.12);
}
.c-tampon.plein:not(.cadeau) svg { opacity: 0; }
.c-tampon.suivant { border: 1.5px dashed var(--em); background: var(--em-doux); color: var(--em-texte); }
.c-tampon.cadeau:not(.plein):not(.suivant) { border-style: solid; }
.c-tampons-recompense .c-tampon.plein { box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.12), 0 0 0 3px color-mix(in srgb, var(--ambre) 22%, transparent); }

.c-operation { font-size: 2.75rem; font-weight: 650; letter-spacing: -0.035em; line-height: 1; }

.c-puces { display: flex; gap: 8px; }
.c-puce {
    height: 44px; min-width: 64px; padding: 0 14px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--bordure-forte); background: var(--surface); font-weight: 550;
    transition: background-color 120ms ease, color 120ms ease;
}
.c-puce:hover { background: var(--surface-2); }
.c-puce[aria-pressed="true"] { background: var(--encre); color: var(--fond); border-color: var(--encre); }

.c-lien-action {
    display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0; align-self: flex-start;
    border: 0; background: transparent; color: var(--encre-2); cursor: pointer;
}
.c-lien-action:hover { color: var(--encre); }

.c-champ { display: flex; flex-direction: column; gap: 6px; }
.c-champ-libelle { font-size: 0.8125rem; font-weight: 550; color: var(--encre); }
.caisse .c-saisie {
    height: 48px; width: 100%; max-width: 360px; margin: 0; padding: 0 14px; border-radius: 8px;
    border: 1px solid var(--bordure-forte); background: var(--surface); color: var(--encre);
    font: 400 1.0625rem/1 var(--police); font-variant-numeric: tabular-nums; box-shadow: none;
    -webkit-appearance: none; appearance: none;
}
.caisse .c-saisie:focus { outline: none; border-color: var(--em); box-shadow: 0 0 0 3px var(--anneau); }
.caisse .c-saisie-comptoir { height: 64px; max-width: none; font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; }
.caisse .c-saisie::placeholder { color: var(--encre-3); opacity: 1; }

.c-recap {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 14px 0; border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure);
}
.c-recap span { color: var(--encre-2); }
.c-recap strong { font-weight: 600; text-align: right; }

.c-pile { display: flex; flex-direction: column; gap: 12px; }
.c-question { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.c-options { display: grid; gap: 10px; }
.c-option {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 12px 14px;
    text-align: left; cursor: pointer; border-radius: 12px;
    border: 1px solid var(--bordure-forte); background: var(--surface); box-shadow: var(--ombre-1);
    transition: border-color 120ms ease, background-color 120ms ease;
}
.c-option:hover:not(:disabled) { border-color: var(--em); background: var(--em-doux); }
.c-option:disabled { cursor: not-allowed; opacity: 0.5; box-shadow: none; }
.c-option-icone { width: 40px; height: 40px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.c-option-icone-em { background: var(--em-doux); color: var(--em-texte); }
.c-option-icone-ambre { background: var(--ambre-doux); color: var(--ambre-texte); }
.c-option-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-option-texte strong { font-size: 1.0625rem; font-weight: 600; }
.c-option-texte span { font-size: 0.8125rem; color: var(--encre-2); }

.c-note { font-size: 0.8125rem; color: var(--encre-3); text-align: center; }

.c-alerte {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px;
    background: var(--attention-doux); color: var(--encre);
    border: 1px solid color-mix(in srgb, var(--attention) 30%, transparent); font-size: 0.8125rem;
}
.c-alerte span { flex: 1 1 200px; }
.c-alerte-danger { background: var(--danger-doux); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }

/* ── Succès ──────────────────────────────────────────────────────────────── */

.c-succes { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 16px 0; }
.c-succes .c-etat { align-self: center; }
.c-succes-coche {
    width: 76px; height: 76px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
    background: var(--em); color: var(--sur-em);
    box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--em) 45%, transparent);
    animation: c-apparition 360ms var(--sortie) both;
}
.c-succes-coche svg { stroke-width: 2.2; }
.c-succes-titre { font-size: 2.75rem; font-weight: 650; letter-spacing: -0.035em; line-height: 1; }
.c-succes-titre-moyen { font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.25; }
.c-succes-sous { font-size: 1.0625rem; color: var(--encre-2); }
.c-progression {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 20px;
    border-radius: 12px; background: var(--surface); border: 1px solid var(--bordure); box-shadow: var(--ombre-1);
}
.c-progression .c-tampons { justify-content: center; gap: 6px; }
.c-progression .c-tampon { width: 22px; height: 22px; }
.c-a-jour { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--em-texte); }
.c-actions { display: flex; flex-direction: column; gap: 10px; }

@keyframes c-apparition { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── Toast d'annulation ──────────────────────────────────────────────────── */

.c-toast {
    position: fixed; z-index: 1200; left: 16px; right: 16px; bottom: calc(var(--bas-nav) + 12px);
    display: flex; align-items: center; gap: 12px; overflow: hidden;
    padding: 10px 10px 10px 14px; border-radius: 12px;
    background: #17150F; color: #FBFAF7; box-shadow: var(--ombre-2);
    animation: c-monte 240ms var(--sortie) both;
}
html[data-theme="dark"] .caisse .c-toast { background: #F3F1EB; color: #17150F; }
.c-toast p { flex: 1; min-width: 0; font-size: 0.9375rem; }
.c-toast-coche {
    width: 26px; height: 26px; flex: none; border-radius: 999px;
    display: flex; align-items: center; justify-content: center; background: #0F7A55; color: #FFFFFF;
}
.c-toast .c-btn { color: inherit; background: color-mix(in srgb, currentColor 14%, transparent); border-color: color-mix(in srgb, currentColor 24%, transparent); }
.c-toast-barre {
    position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
    background: currentColor; opacity: 0.35; transform-origin: left;
    animation: c-barre var(--c-duree, 10s) linear forwards;
}
@keyframes c-barre { to { transform: scaleX(0); } }
@keyframes c-monte { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── Renvoyer la carte ───────────────────────────────────────────────────── */

.c-renvoi {
    display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px;
    border-radius: 12px; border: 1px solid var(--bordure); background: var(--surface-2);
    color: var(--encre-2); font-size: 0.8125rem;
}
.c-renvoi span { flex: 1; }
.c-renvoi-retour { align-self: flex-start; padding: 0 12px 0 4px; }
.c-renvoi-qr { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0; text-align: center; }
.c-qr {
    width: min(280px, 72vw); aspect-ratio: 1; padding: 16px;
    border-radius: 18px; border: 1px solid var(--bordure); background: #FFFFFF; box-shadow: var(--ombre-2);
}
.c-qr svg { display: block; width: 100%; height: 100%; }
.c-qr-expire { opacity: 0.25; filter: grayscale(1); }

/* ── Téléphone et petite tablette ────────────────────────────────────────── */

@media (max-width: 899.98px) {
    /* La recherche descend à portée du pouce, juste au-dessus de la barre du
       bas. Les 150 px d'avant laissaient aussi la place du bouton flottant
       « Caisse », devenu un onglet : il restait un grand vide. */
    .c-identifier { min-height: calc(100dvh - var(--bas-nav) - 92px); }
    .c-camera { order: 1; }
    .c-resultats { order: 2; }
    .c-recherche {
        order: 3; position: sticky; bottom: 8px; margin-top: auto; z-index: 5;
        padding-top: 8px; background: linear-gradient(to bottom, transparent, var(--fond) 12px);
    }

    .caisse-voile {
        position: fixed; inset: 0; z-index: 1090; background: var(--voile);
        opacity: 0; pointer-events: none; transition: opacity 200ms ease;
    }
    .c-panneau {
        position: fixed; z-index: 1100; left: 0; right: 0; bottom: 0;
        max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain;
        padding: 12px 20px calc(24px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0; box-shadow: var(--ombre-feuille);
        transform: translateY(105%); visibility: hidden;
        transition: transform 280ms var(--sortie), visibility 0s linear 280ms;
    }
    .caisse:not([data-etat="identifier"]) .caisse-voile { opacity: 1; pointer-events: auto; }
    .caisse:not([data-etat="identifier"]) .c-panneau { transform: none; visibility: visible; transition: transform 280ms var(--sortie); }

    /* Le succès prend tout l'écran : il se lit de loin, puis s'efface. */
    .caisse[data-etat="renvoi"] .c-panneau,
    .caisse[data-etat="succes"] .c-panneau { top: 0; max-height: none; border-radius: 0; background: var(--fond); display: flex; flex-direction: column; }
    .caisse[data-etat="succes"] .c-panneau-contenu { flex: 1; }
    .caisse[data-etat="renvoi"] .c-poignee,
    .caisse[data-etat="succes"] .c-poignee { display: none; }
    .caisse[data-etat="succes"] .c-succes { flex: 1; }

    .caisse[data-etat="identifier"] .c-panneau-contenu > .c-panneau-vide { display: none; }
}

@media (min-width: 769px) and (max-width: 899.98px) {
    .caisse { --bas-nav: 0px; }
    .c-panneau { left: 50%; right: auto; width: min(560px, 100%); translate: -50% 0; }
    .caisse[data-etat="succes"] .c-panneau { left: 0; right: 0; width: auto; translate: none; }
}

/* ── Grand écran : deux colonnes ─────────────────────────────────────────── */

.c-kbd {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px;
    border: 1px solid var(--bordure-forte); border-bottom-width: 2px; background: var(--surface);
    font: 500 0.75rem/1 var(--police-code); color: var(--encre-2);
}
/* Déclarée après .c-kbd : une touche marquée « ordinateur » reste cachée
   ailleurs (l'étiquette « Entrée » du champ de recherche). */
.c-ordi { display: none; }

@media (min-width: 900px) {
    .caisse { --bas-nav: 0px; }
    .c-grille { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 24px; align-items: start; }
    .caisse-voile { display: none; }

    .c-identifier { order: 0; }
    .c-recherche { order: -1; }
    .c-recherche-champ { height: 52px; }
    .c-btn-scan { height: 52px; width: auto; padding: 0 14px; }
    .c-btn-scan-texte { display: none; }
    .c-viseur { aspect-ratio: 4 / 3; }

    .c-habitues { display: flex; flex-direction: column; gap: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px; box-shadow: var(--ombre-1); }
    .c-habitues .c-ligne {
        flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 64px; padding: 10px 14px;
        text-align: left; border: 0; border-top: 1px solid var(--bordure); border-radius: 0; box-shadow: none; background: transparent;
    }
    .c-habitues .c-ligne:first-child { border-top: 0; }
    .c-habitues .c-ligne:hover { background: var(--surface-2); }
    .c-habitues .c-av { width: 40px; height: 40px; }
    .c-habitues .c-ligne-texte { align-items: flex-start; }
    .c-habitues .c-ligne-nom { font-size: 0.9375rem; }
    .c-habitues .c-ligne-meta { display: block; }
    .c-habitues .c-ligne-prog { font-size: 0.8125rem; }

    .c-panneau {
        position: sticky; top: 0; min-height: 520px; max-height: calc(100vh - 88px); overflow-y: auto;
        padding: 28px 32px; border: 1px solid var(--bordure); border-radius: 12px; box-shadow: var(--ombre-1);
    }
    .c-panneau-contenu { gap: 20px; min-height: 100%; }
    .c-poignee { display: none; }
    .c-identite-nom { font-size: 2rem; font-weight: 650; letter-spacing: -0.03em; line-height: 1.15; }
    .c-av-grand { width: 56px; height: 56px; font-size: 1.0625rem; }
    .c-identite-meta { font-size: 0.9375rem; }
    .c-tampon { width: 32px; height: 32px; }
    .c-tampon svg { width: 15px; height: 15px; }
    .c-btn-comptoir { max-width: 420px; align-self: flex-end; }
    .c-actions .c-btn-comptoir, .c-actions .c-btn-large { max-width: none; align-self: stretch; }
    .c-options { grid-template-columns: 1fr 1fr; }
    .c-succes { padding: 32px 0 8px; }

    .c-toast { left: 24px; right: auto; bottom: 24px; width: min(472px, calc(100vw - 48px)); }

    /* ── Plein écran, d'après la maquette OrdiCaisse ─────────────────────────
       Une bande en haut (Caisse · commerce · douchette · en ligne), la colonne
       de recherche sur fond gris avec les raccourcis, et l'encaissement à
       droite, sans cadre. La barre latérale de l'espace est masquée
       (espace.css) ; la croix ramène à l'accueil. */
    .c-ordi { display: revert; }
    .caisse { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
    .caisse .c-entete {
        flex: none; height: 64px; padding: 0 32px; gap: 16px; justify-content: flex-start;
        border-bottom: 1px solid var(--bordure); background: var(--surface);
    }
    .caisse .c-titre { font-size: 1.25rem; letter-spacing: -0.02em; }
    .c-commerce { margin-right: auto; font-size: 0.9375rem; color: var(--encre-2); }
    .c-douchette { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--encre-2); }
    .c-fermer {
        width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
        border: 0; border-radius: 8px; background: none; color: var(--encre-2); cursor: pointer;
    }
    .c-fermer:hover { background: var(--surface-2); color: var(--encre); }
    .caisse .c-grille { flex: 1; min-height: 0; grid-template-columns: 520px minmax(0, 1fr); gap: 0; align-items: stretch; }
    .caisse .c-identifier {
        padding: 24px; gap: 16px; overflow-y: auto;
        background: var(--surface-2); border-right: 1px solid var(--bordure);
    }
    .c-recherche-champ .c-kbd { display: inline-flex; margin-left: auto; }
    .c-reconnu { margin: -6px 0 0; font-size: 0.8125rem; color: var(--encre-2); }
    .c-liste-reconnu .c-ligne { background: var(--em-doux); }
    .c-raccourcis {
        margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 16px;
        border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface);
    }
    .c-raccourcis > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.8125rem; color: var(--encre-2); }
    .c-raccourcis-titre { font-size: 0.8125rem; font-weight: 550; color: var(--encre); }
    .c-kbds { display: inline-flex; gap: 4px; }
    .caisse .c-panneau {
        position: static; max-height: none; min-height: 0; overflow-y: auto; padding: 32px 40px;
        border: 0; border-radius: 0; box-shadow: none; background: transparent;
    }
    .caisse .c-panneau-contenu { gap: 28px; }

    .c-identite-ordi { align-items: center; }
    .c-etat-statut { flex: none; background: var(--em-doux); color: var(--em-texte); }
    .c-etat-statut::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    .c-etat-statut.endormis { background: var(--attention-doux, #FCEDE0); color: var(--attention, #B4540A); }
    .c-etat-statut.nouveaux, .c-etat-statut.occasionnels { background: var(--surface-2); color: var(--encre-2); }
    .c-o-corps { display: flex; gap: 40px; align-items: flex-start; }
    .c-carte-client {
        width: 360px; height: 227px; flex: none; display: flex; flex-direction: column; justify-content: space-between;
        padding: 24px; border-radius: 18px; color: #F6F3EA;
        background:
            radial-gradient(120% 90% at 0% 0%, rgb(255 255 255 / 0.16), transparent 55%),
            linear-gradient(160deg, color-mix(in srgb, var(--c-carte) 78%, white) 0%, var(--c-carte) 55%, color-mix(in srgb, var(--c-carte) 80%, black) 100%);
        box-shadow: 0 22px 44px -16px rgb(23 21 15 / 0.32), 0 6px 12px -2px rgb(23 21 15 / 0.10), inset 0 1px 0 rgb(255 255 255 / 0.18);
    }
    .c-carte-client.clair { color: #17150F; }
    .c-carte-haut { display: flex; flex-direction: column; }
    .c-carte-haut strong { font-size: 1rem; font-weight: 600; }
    .c-carte-haut span { font-size: 0.75rem; opacity: 0.72; }
    .c-carte-tampons { display: grid; grid-template-columns: repeat(5, 34px); gap: 10px; }
    .c-carte-tampon { width: 34px; height: 34px; border-radius: 50%; border: 1.5px dashed currentColor; opacity: 0.45; }
    .c-carte-tampon.plein { opacity: 1; border: 0; background: radial-gradient(circle at 35% 30%, var(--ambre-vif, #EBAA2C), var(--ambre, #D39317) 70%); box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.14); }
    .c-carte-tampon.suivant { opacity: 1; border: 2px solid currentColor; background: rgb(255 255 255 / 0.14); }
    .c-carte-bas { display: flex; justify-content: space-between; align-items: flex-end; }
    .c-carte-bas strong { font-size: 0.875rem; font-weight: 600; }
    .c-carte-compte { font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
    .c-carte-compte small { font-size: 0.8125rem; opacity: 0.7; }
    .c-o-action { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
    .c-o-action .c-operation { margin: 0; font-size: 2.75rem; font-weight: 650; letter-spacing: -0.035em; line-height: 1; }
    .c-o-puces { display: flex; align-items: center; gap: 8px; }
    .c-o-aide { margin-left: 8px; font-size: 0.8125rem; color: var(--encre-3); }
    .c-o-montant { max-width: 360px; }
    .c-o-montant .c-saisie { height: 48px; font-size: 1.0625rem; }
    .c-facultatif { font-weight: 400; color: var(--encre-3); }
    .c-o-pied { margin-top: auto; display: flex; align-items: center; gap: 20px; padding-top: 24px; border-top: 1px solid var(--bordure); }
    .c-o-apres { flex: 1; display: flex; flex-direction: column; gap: 2px; }
    .c-o-apres span { font-size: 0.8125rem; color: var(--encre-2); }
    .c-o-apres strong { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
    .c-o-retour { height: 48px; padding: 0 16px; gap: 10px; }
    .caisse .c-o-valider { width: 340px; max-width: none; height: 56px; align-self: auto; border-radius: 12px; gap: 12px; font-size: 1.0625rem; }
    .c-kbd-clair { background: rgb(255 255 255 / 0.16); border-color: rgb(255 255 255 / 0.3); color: #fff; }
}

/* ── Téléphone : la caisse de la maquette « comptoir » ──────────────────────
   On cherche en haut, un grand bouton sombre ouvre la caméra à la demande,
   les habitués suivent en liste. Plus de recherche collée en bas d'écran. */
@media (max-width: 768px) {
    .caisse .c-identifier { min-height: 0; gap: 14px; }
    .caisse .c-recherche {
        order: 0; position: static; margin-top: 0; padding-top: 0; background: none;
        flex-direction: column; gap: 10px;
    }
    .caisse .c-recherche-champ { flex: none; height: 50px; border-radius: 14px; }
    .caisse .c-btn-scan {
        width: 100%; height: 56px; padding: 0 16px; gap: 10px; border-radius: 14px;
        background: var(--carte); color: var(--carte-texte); border-color: transparent;
        font-size: 1rem; font-weight: 600;
    }
    .caisse .c-btn-scan:hover { background: var(--carte); filter: brightness(1.08); }
    .caisse .c-btn-scan-texte { display: inline; }
    .caisse .c-camera { order: 1; }
    .caisse .c-resultats { order: 2; }
    .caisse .c-veille { display: none; }

    .caisse .c-habitues { display: flex; flex-direction: column; gap: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--bordure); border-radius: 12px; box-shadow: var(--ombre-1); }
    .caisse .c-habitues .c-ligne {
        flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 60px; padding: 10px 14px;
        text-align: left; border: 0; border-top: 1px solid var(--bordure); border-radius: 0; box-shadow: none; background: transparent;
    }
    .caisse .c-habitues .c-ligne:first-child { border-top: 0; }
    .caisse .c-habitues .c-av { width: 38px; height: 38px; }
    .caisse .c-habitues .c-ligne-texte { align-items: flex-start; flex: 1; min-width: 0; }
    .caisse .c-habitues .c-ligne-nom { font-size: 0.9375rem; }
    .caisse .c-habitues .c-ligne-meta { display: block; font-family: var(--police-code); font-size: 0.75rem; }
    .caisse .c-habitues .c-ligne-prog { font-size: 0.8125rem; }
}

@media (prefers-reduced-motion: reduce) {
    .caisse *, .caisse *::before, .caisse *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
    .c-decompte::before, .c-toast-barre { display: none; }
}