/*
 * « Garde-manger » — design system organic-modern chaleureux.
 * Fond crème texturé, vert jardin en accent, ambre/terracotta pour les
 * péremptions. Titres Fraunces, corps Hanken Grotesk. Mobile-first, à portée
 * de pouce.
 */

:root {
    /* Surfaces & encre */
    --paper: #fbf6ee;
    --surface: #fffdf9;
    --surface-2: #f4ecdf;
    --ink: #2a2420;
    --ink-soft: #7b6f63;
    --line: #e7ddcf;

    /* Accent — vert jardin */
    --accent: #276749;
    --accent-strong: #1f5238;
    --accent-ink: #ffffff;
    --accent-tint: rgba(39, 103, 73, 0.10);

    /* Sémantique — péremption & stock */
    --soon: #b56a12;
    --soon-tint: rgba(181, 106, 18, 0.14);
    --expired: #b5332f;
    --expired-tint: rgba(181, 51, 47, 0.12);
    --success: #276749;
    --success-tint: var(--accent-tint);
    --info: #2a6f8e;
    --info-tint: rgba(42, 111, 142, 0.12);
    --low: #a15b00;
    --low-tint: rgba(161, 91, 0, 0.12);
    --gold: #c98a1f;

    /* Élévation */
    --shadow-sm: 0 1px 2px rgba(60, 42, 20, 0.06);
    --shadow: 0 10px 30px -14px rgba(60, 42, 20, 0.28);
    --shadow-accent: 0 8px 18px -10px color-mix(in srgb, var(--accent) 70%, transparent);

    /* Rayons */
    --radius: 20px;
    --radius-sm: 13px;
    --radius-pill: 999px;

    /* Espacement — base 4px, en rem pour suivre la taille de police */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;

    /* Échelle typographique */
    --text-eyebrow: 0.72rem;
    --text-sm: 0.82rem;
    --text-body: 1rem;
    --text-lg: 1.15rem;
    --text-h2: 1.3rem;
    --text-h1: clamp(1.7rem, 6vw, 2.15rem);

    --sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
    --display: "Fraunces", ui-serif, Georgia, serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #17120e;
        --surface: #201913;
        --surface-2: #2a221a;
        --ink: #f1e7d9;
        --ink-soft: #a89a8a;
        --line: #342b22;

        --accent: #54c495;
        --accent-strong: #6fd0a6;
        --accent-ink: #08160f;
        --accent-tint: rgba(84, 196, 149, 0.14);

        --soon: #e8a24e;
        --soon-tint: rgba(232, 162, 78, 0.16);
        --expired: #ff7d73;
        --expired-tint: rgba(255, 125, 115, 0.14);
        --success: #54c495;
        --success-tint: var(--accent-tint);
        --info: #6bb6d6;
        --info-tint: rgba(107, 182, 214, 0.16);
        --low: #e0a256;
        --low-tint: rgba(224, 162, 86, 0.16);
        --gold: #e4b451;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow: 0 12px 34px -16px rgba(0, 0, 0, 0.7);
    }
}

* {
    box-sizing: border-box;
}

/* L'attribut `hidden` (UA display:none) est sinon écrasé par les display des
   classes (ex. .btn-icon inline-flex) : on le force. */
[hidden] {
    display: none !important;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    background:
        radial-gradient(120% 60% at 50% -10%, var(--accent-tint), transparent 60%),
        var(--paper);
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
}

/* Grain subtil pour la texture « papier » */
.grain {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    .grain {
        mix-blend-mode: screen;
        opacity: 0.4;
    }
}

/* App-bar */
.appbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    padding: max(0.6rem, env(safe-area-inset-top)) 1.1rem 0.6rem;
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.brand {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.brand-mark {
    color: var(--accent);
    font-size: 1.4em;
    line-height: 0;
    transform: translateY(1px);
}

.container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 1.25rem clamp(1rem, 4vw, 1.6rem) 5rem;
}

/* Typographie */
h1 {
    font-family: var(--display);
    font-weight: 600;
    font-size: var(--text-h1);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0.2rem 0 0.15rem;
}

h2 {
    font-family: var(--display);
    font-weight: 600;
    font-size: var(--text-h2);
    letter-spacing: -0.01em;
    margin: 1.6rem 0 0.5rem;
}

h3 {
    font-size: var(--text-eyebrow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
    margin: 1.3rem 0 0.5rem 0.2rem;
}

a {
    color: var(--accent-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.muted {
    color: var(--ink-soft);
    font-size: 0.92rem;
}

/* Cartes */
.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.1rem 1.15rem;
    margin: 0.85rem 0;
    box-shadow: var(--shadow);
    animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Formulaires */
label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ink-soft);
    margin: 0.7rem 0 0.3rem;
}

input,
button {
    font: inherit;
}

input[type="text"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--ink);
    transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-tint);
}

/* Boutons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 52px;
    padding: 0.85rem 1.2rem;
    border: none;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 90%, white), var(--accent));
    color: var(--accent-ink);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    margin-top: 0.9rem;
    box-shadow: var(--shadow-accent);
    transition: transform 0.08s ease, box-shadow 0.15s, filter 0.15s;
}

.btn:hover {
    filter: brightness(1.03);
}

.btn:active {
    transform: translateY(1px) scale(0.995);
    box-shadow: 0 4px 10px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}

.btn-secondary {
    background: transparent;
    color: var(--accent-strong);
    border: 1.5px solid var(--line);
    box-shadow: none;
}

.btn-danger {
    color: var(--expired);
    border-color: color-mix(in srgb, var(--expired) 45%, var(--line));
}

/* Actions alignées à droite d'une ligne (badge + bouton d'action). */
.row-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.row-actions form {
    margin: 0;
    display: flex;
}

/* Actions d'administration d'un membre, sous son nom : plusieurs boutons qui
   passent à la ligne sur mobile. */
.member-actions {
    flex-wrap: wrap;
    padding: 0.1rem 0.15rem 0.4rem;
}

/* Deux boutons côte à côte : chacun partage la largeur, sans marge du haut. */
.btn-row {
    display: flex;
    gap: 0.6rem;
    align-items: stretch;
}

.btn-row > * {
    flex: 1;
    margin: 0;
    min-width: 0;
}

.btn-row form {
    display: flex;
}

.btn-row form .btn {
    width: 100%;
    margin: 0;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.4rem 0.85rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--ink);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.08s, border-color 0.15s, background 0.15s;
}

.btn-icon:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
}

.btn-icon:active {
    transform: scale(0.94);
}

.btn-icon-danger {
    color: var(--expired);
    border-color: color-mix(in srgb, var(--expired) 35%, var(--line));
}

/* Sélecteur de rangement de destination (liste de courses) */
.dest-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-4);
}

.dest-picker-label {
    font-size: var(--text-sm);
    color: var(--ink-soft);
    margin-right: var(--s-1);
}

.dest-picker form {
    margin: 0;
}

.dest-option {
    min-height: 40px;
    padding: 0.4rem 0.95rem;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--ink);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.08s, border-color 0.15s, background 0.15s, color 0.15s;
}

.dest-option:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
}

.dest-option:active {
    transform: scale(0.96);
}

.dest-option.is-active {
    background: var(--accent-tint);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    color: var(--accent-strong);
}

/* Badges */
.badge {
    flex: none;
    padding: 0.22rem 0.62rem;
    border-radius: var(--radius-pill);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    background: var(--accent-tint);
    color: var(--accent-strong);
}

.badge-soon {
    background: var(--soon-tint);
    color: var(--soon);
}

.badge-expired {
    background: var(--expired-tint);
    color: var(--expired);
}

.badge-ok {
    background: color-mix(in srgb, var(--ink-soft) 14%, transparent);
    color: var(--ink-soft);
}

.badge-low {
    background: var(--low-tint);
    color: var(--low);
}

/* Flash */
.flash {
    position: relative;
    padding: 0.8rem 1rem 0.8rem 1.15rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    margin: 0 0 0.6rem;
    overflow: hidden;
    animation: rise 0.35s ease both;
}

.flash::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent);
}

.flash-error::before {
    background: var(--expired);
}

.flash-error {
    color: var(--expired);
}

/* Listes (frigo, courses) */
.lot-list {
    list-style: none;
    padding: 0.35rem 0.15rem;
    margin: 0.6rem 0;
}

.lot-list.card {
    padding: 0.5rem 1rem;
}

.lot {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
    animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Surface glissante : couche opaque qui se translate au swipe, révélant les
   fonds d'action colorés en dessous. Sans contrôleur swipe, se comporte comme
   une simple ligne flex (rétro-compatible). */
.lot-surface {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.1rem;
    background: var(--surface);
    touch-action: pan-y;
}

.lot[data-controller~="swipe"] .lot-surface {
    will-change: transform;
    cursor: grab;
    /* Évite la sélection de texte et le drag natif d'image pendant un swipe. */
    user-select: none;
    -webkit-user-select: none;
}

.lot[data-controller~="swipe"] .lot-surface img {
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: none;
}

.lot:last-child {
    border-bottom: none;
}

.lot:nth-child(2) { animation-delay: 0.03s; }
.lot:nth-child(3) { animation-delay: 0.06s; }
.lot:nth-child(4) { animation-delay: 0.09s; }
.lot:nth-child(5) { animation-delay: 0.12s; }
.lot:nth-child(n + 6) { animation-delay: 0.15s; }

/* Ligne remplacée par un delta Turbo ciblé (coche/favori) : pas de réanimation
   d'entrée — seul le contenu de la ligne change, sans « flash ». */
.lot-static {
    animation: none;
}

/* La liste de courses se met à jour en temps réel par morphing DOM (Turbo) :
   changer un article de rayon relocalise son nœud (via la « pantry »
   d'idiomorph = détache/rattache), ce qui rejouerait « rise » sur les lignes et
   les groupes concernés → effet de « toute la liste s'actualise ». On coupe donc
   l'animation d'entrée dans la liste (le morph gère déjà la transition en
   place). Scopé à #shopping-list : le frigo et les cartes de page la gardent. */
#shopping-list .lot,
#shopping-list .lot-list.card {
    animation: none;
}

/* Ligne « tap pour cocher » : le nom invite au tap. */
.lot[data-swipe-tap-value="true"] .lot-info {
    cursor: pointer;
}

/* Bloc image + texte à gauche du lot ; les actions restent poussées à droite
   par le space-between de .lot-surface. */
.lot-media {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    flex: 1;
}

.lot-info {
    min-width: 0;
}

.lot-info strong {
    font-weight: 600;
}

/* Vignette produit (image Open Food Facts) ; fallback monogramme quand la
   fiche n'a pas d'image. Un seul jeu de dimensions pour les deux variantes. */
.lot-thumb {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--surface-2);
    border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}

.lot-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-size: 1.15rem;
    color: var(--ink-soft);
}

.lot-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: none;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.lot-actions form {
    margin: 0;
}

/* Menu d'actions d'un lot : replie « −1 » / « Fini » derrière un « ⋯ ». */
.lot-menu {
    position: relative;
}

.lot-menu-toggle {
    font-size: 1.15rem;
    line-height: 1;
    letter-spacing: 0.04em;
    padding: 0.4rem 0.7rem;
}

.lot-menu-items {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    display: none;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 210px;
    padding: 0.35rem;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

.lot-menu.is-open .lot-menu-items {
    display: flex;
}

.lot-menu-item {
    width: 100%;
    min-height: 42px;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font-weight: 600;
    font-size: 0.92rem;
    text-align: left;
    cursor: pointer;
}

.lot-menu-item:hover {
    background: var(--surface-2);
}

.lot-menu-item-danger {
    color: var(--expired);
}

/* Le menu ouvert doit déborder de la ligne ET de la carte, toutes deux en
   overflow:hidden (swipe / coins arrondis). Sûr : aucun swipe pendant l'ouverture. */
.lot:has(.lot-menu.is-open) {
    overflow: visible;
    z-index: 3;
}

/* La catégorie contenant un menu ouvert passe au-dessus des suivantes : chaque
   .lot-list a un transform (contexte d'empilement), sinon le popup serait peint
   sous la catégorie suivante. */
.lot-list:has(.lot-menu.is-open) {
    overflow: visible;
    position: relative;
    z-index: 5;
}

/* Date de péremption repliée dans le menu « Ranger » (liste de courses). */
.lot-menu-ranger {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.15rem;
    padding-top: 0.35rem;
    border-top: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}

.lot-menu-label {
    padding: 0 0.35rem;
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

.lot-menu-ranger input[type="date"] {
    width: 100%;
    margin: 0;
    padding: 0.45rem 0.55rem;
    font-size: 0.85rem;
    border-radius: 10px;
}

/* Case ronde à cocher (action principale d'une course en magasin). */
.lot-check {
    margin: 0;
    flex: none;
}

.check-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    padding: 0;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--accent) 45%, var(--line));
    background: var(--surface);
    color: var(--accent-ink);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.08s;
}

.check-toggle svg {
    width: 16px;
    height: 16px;
    opacity: 0;
    transition: opacity 0.12s;
}

.check-toggle.is-checked {
    background: var(--accent);
    border-color: var(--accent);
}

.check-toggle.is-checked svg {
    opacity: 1;
}

.check-toggle:active {
    transform: scale(0.9);
}

/* Formulaire d'ajout compact (quantité + bouton sur une ligne). */
.shopping-add {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.shopping-add input {
    margin: 0;
}

.shopping-add-row {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.shopping-add .shopping-add-qty {
    width: 4.5rem;
    flex: none;
}

.shopping-add-row .btn {
    width: auto;
    margin-top: 0;
    flex: 1;
}

/* Statuts de lot */
.lot-expired .lot-info strong {
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--expired) 55%, transparent);
}

.lot-checked .lot-info strong {
    text-decoration: line-through;
    opacity: 0.55;
}

/* Activité récente — journal secondaire, volontairement discret pour ne pas
   concurrencer le contenu du frigo. Pas de carte, texte atténué, séparateur
   léger qui démarque la zone sans la mettre au même niveau. */
.activity {
    margin-top: 2.2rem;
    padding-top: 0.4rem;
    border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.activity-list {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0;
}

.activity-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.3rem 0.2rem;
    font-size: 0.86rem;
    color: var(--ink-soft);
}

.activity-desc {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-desc strong {
    font-weight: 600;
    color: var(--ink);
}

.activity-meta {
    flex: none;
    font-size: 0.78rem;
    white-space: nowrap;
}

/* Scanner (caméra PWA) */
.scanner {
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 46vh;
    background: #0c0a08;
    border-radius: var(--radius);
    overflow: hidden;
    object-fit: cover;
    box-shadow: var(--shadow);
}

/* Ranger sans rescan (formulaire inline compact) */
.to-storage {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.to-storage input[type="date"] {
    width: auto;
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
    border-radius: 10px;
}

/* Accueil — tuiles du foyer (hub de gestion de la maison) */
.hub-household {
    margin-top: 1.2rem;
}

.hub-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
    margin: 0.85rem 0;
}

@media (max-width: 380px) {
    .hub-tiles {
        grid-template-columns: 1fr;
    }
}

.hub-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    min-height: 148px;
    padding: 1.1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    color: var(--ink);
    text-decoration: none;
    animation: rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    transition: transform 0.08s ease, box-shadow 0.15s, border-color 0.15s;
}

.hub-tile:nth-child(2) { animation-delay: 0.05s; }

a.hub-tile:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    box-shadow: 0 14px 34px -16px rgba(60, 42, 20, 0.4);
}

a.hub-tile:active {
    transform: translateY(1px) scale(0.99);
}

.hub-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--accent-tint);
    color: var(--accent-strong);
    margin-bottom: 0.25rem;
}

.hub-tile-icon svg {
    width: 24px;
    height: 24px;
}

.hub-tile-alert .hub-tile-icon {
    background: var(--soon-tint);
    color: var(--soon);
}

.hub-tile-title {
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

.hub-tile-stat {
    font-size: 0.92rem;
    color: var(--ink-soft);
}

.hub-tile-stat strong {
    font-size: 1.15rem;
    color: var(--ink);
    font-weight: 700;
}

.hub-tile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.hub-tile-empty {
    opacity: 0.75;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* Fonds d'action révélés par le swipe (générés par swipe_controller). */
.lot-swipe-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    padding: 0 0.7rem;
    opacity: 0;
    pointer-events: none;
    font-weight: 600;
    font-size: 0.92rem;
    transition: opacity 0.12s linear, background 0.12s linear;
}

.lot-swipe-bg--left {
    justify-content: flex-start;
}

.lot-swipe-bg--right {
    justify-content: flex-end;
}

.lot-swipe-bg--danger {
    background: var(--expired-tint);
    color: var(--expired);
}

.lot-swipe-bg--success {
    background: var(--success-tint);
    color: var(--success);
}

.lot-swipe-bg--neutral {
    background: var(--surface-2);
    color: var(--ink-soft);
}

.lot-swipe-bg--danger.is-armed {
    background: color-mix(in srgb, var(--expired) 24%, transparent);
}

.lot-swipe-bg--success.is-armed {
    background: color-mix(in srgb, var(--success) 24%, transparent);
}

.lot-swipe-bg--neutral.is-armed {
    background: color-mix(in srgb, var(--ink-soft) 22%, transparent);
}

.lot-swipe-label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: transform 0.12s ease;
}

.lot-swipe-bg.is-armed .lot-swipe-label {
    transform: scale(1.08);
}

/* Pull-to-refresh (généré par pull_refresh_controller). */
.pull-refresh-indicator {
    height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 0.2s ease;
}

.pull-refresh-spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--line);
    border-top-color: var(--accent);
    opacity: 0.45;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.pull-refresh-indicator.is-armed .pull-refresh-spinner {
    opacity: 1;
    transform: rotate(180deg);
}

.pull-refresh-indicator.is-loading .pull-refresh-spinner {
    opacity: 1;
    animation: pull-spin 0.7s linear infinite;
}

@keyframes pull-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
    }

    .lot-surface,
    .lot-swipe-bg,
    .lot-swipe-label,
    .pull-refresh-indicator,
    .pull-refresh-spinner {
        transition: none !important;
    }
}

/* Aperçu produit sur la confirmation de scan : image plus grande pour
   confirmer visuellement le bon produit avant l'ajout au frigo. */
.product-preview {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-bottom: var(--s-4);
}

.product-preview-img {
    width: 76px;
    height: 76px;
    flex: none;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--surface-2);
    border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}

.product-preview-img-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--display);
    font-size: 1.8rem;
    color: var(--ink-soft);
}

.product-preview-info {
    min-width: 0;
}

/* Champ photo du formulaire manuel : bouton déclencheur + aperçu de la photo
   prise (miniature carrée), côte à côte. */
.photo-field {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-top: 0.3rem;
}

.photo-trigger {
    width: auto;
    margin-top: 0;
    cursor: pointer;
}

.photo-preview {
    width: 76px;
    height: 76px;
    flex: none;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--surface-2);
    border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}

/* Sélecteur de magasin : créer un magasin à la volée + lien de gestion. */
.store-new {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.store-new input[type="text"] {
    width: auto;
    min-width: 8rem;
    margin: 0;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
}

.store-manage {
    margin-top: var(--s-2);
}

/* En-tête de rayon dans la liste. */
.aisle-heading {
    color: var(--accent-strong);
}

/* Affectation au rayon dans le menu « ⋯ » (rayons du magasin + création). */
.lot-menu-section {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-bottom: 0.3rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
}

.lot-menu-newaisle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    padding-top: 0.15rem;
}

.lot-menu-newaisle input[type="text"] {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0.4rem 0.55rem;
    font-size: 0.85rem;
    border-radius: 10px;
}

.lot-menu-newaisle-add {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    padding: 0;
    color: var(--success, var(--accent));
}

.lot-menu-newaisle-add svg {
    width: 20px;
    height: 20px;
}

/* Écran de gestion des magasins & rayons. */
.manage-list {
    list-style: none;
    padding: 0;
    margin: 0.6rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.manage-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.manage-row form {
    margin: 0;
}

.manage-name {
    flex: 1;
    min-width: 6rem;
    font-weight: 600;
}

.manage-actions,
.manage-order {
    display: flex;
    gap: 0.3rem;
}

.manage-rename {
    display: flex;
    gap: 0.3rem;
    flex: 1;
    min-width: 8rem;
}

.manage-rename input[type="text"] {
    flex: 1;
    width: auto;
    margin: 0;
    padding: 0.4rem 0.6rem;
    font-size: 0.9rem;
}

.manage-add {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.7rem;
}

.manage-add input[type="text"] {
    flex: 1;
    min-width: 10rem;
    margin: 0;
}

.manage-add .btn {
    width: auto;
    flex: none;
    margin-top: 0;
}

.btn-icon:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Poignée de glisser-déposer (réordonner les rayons). */
.manage-handle {
    flex: none;
    padding: 0.3rem 0.5rem;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--ink-soft);
    cursor: grab;
    user-select: none;
    touch-action: none; /* le glissement de la poignée ne scrolle pas la page */
}

.manage-handle:active {
    cursor: grabbing;
}

/* États SortableJS pendant le glissement. */
.sortable-ghost {
    opacity: 0.4;
}

.sortable-chosen {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}