/* ========== Traç'Tout HACCP — styles (design v3.1 « H2M »)  ==========
 * Identité reprise de la maquette client : fond bleu-canard dégradé,
 * contours et boutons vert citron, fiches à coin corné, champs en
 * pastille bleu-violet soulignée de vert, étiquettes orange.
 * ================================================================= */
:root {
  color-scheme: light;                /* fond clair depuis la v4.3 (demande client) */

  /* fond */
  --bg-deep: #d7e7ea;
  --bg-mid:  #e7f2f3;
  --bg-glow: #fbfdfd;

  /* accents */
  --lime:       #a2d056;
  --lime-bright:#b8e46a;
  --lime-ink:   #43721a;              /* le vert en TEXTE sur fond clair */
  --lime-soft:  rgba(162, 208, 86, .18);
  --lime-line:  rgba(134, 184, 58, .62);
  --teal:       #1f9c88;
  --orange:     #d9820a;
  --orange-soft:rgba(223, 142, 26, .15);
  --red:        #d94f3d;
  --red-soft:   rgba(217, 79, 61, .12);
  --green:      #56b54b;
  --green-soft: rgba(86, 181, 75, .17);

  /* champs de saisie (pastille bleu-violet de la maquette, inchangée) */
  --pill:      #5d6cae;
  --pill-hi:   #6f7ec2;

  /* texte */
  --ink:      #16323b;
  --ink-soft: rgba(22, 50, 59, .74);
  --ink-dim:  rgba(22, 50, 59, .56);

  /* surfaces */
  --card:      #ffffff;
  --card-hi:   #edf5ee;
  --line:      rgba(122, 175, 48, .40);
  --line-soft: rgba(22, 50, 59, .14);

  --radius: 18px;
  --fold: 20px;                        /* taille du coin corné */
  --tap: 48px;
  --shadow: 0 1px 3px rgba(20, 45, 55, .07), 0 10px 26px rgba(20, 45, 55, .09);
  --shadow-lift: 0 4px 12px rgba(20, 45, 55, .13), 0 18px 40px rgba(20, 45, 55, .15);

  /* pastilles de couleur pour les icônes */
  --hue1: rgba(162, 208, 86, .18);  --hue1-t: var(--lime);
  --hue2: rgba(239, 156, 30, .18);  --hue2-t: var(--orange);
  --hue3: rgba(93, 156, 226, .20);  --hue3-t: #7db6ef;
  --hue4: rgba(158, 124, 220, .20); --hue4-t: #b79bf0;
  --hue5: rgba(255, 122, 107, .18); --hue5-t: var(--red);
  --hue6: rgba(50, 190, 166, .18);  --hue6-t: var(--teal);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--bg-deep); }
body {
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background:
    radial-gradient(1100px 780px at 50% 34%, var(--bg-glow) 0%, transparent 68%),
    linear-gradient(165deg, #ddecea 0%, var(--bg-mid) 45%, var(--bg-deep) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
  min-height: 100dvh;
}
button { font: inherit; cursor: pointer; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }

/* ---------- Coin corné (signature de la maquette) ----------
 * Deux calques : le premier dessine le liseré vert, le second le
 * remplissage, décalé de 1,5 px — d'où un contour qui suit le pli. */
.fold {
  position: relative; background: none; border: 0; border-radius: var(--radius);
  isolation: isolate;   /* indispensable : sans ça les deux calques passeraient
                           derrière le fond de la page et ne se verraient pas */
}
.fold::before, .fold::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
}
.fold::before {
  background: var(--lime-line);
  clip-path: polygon(0 0, calc(100% - var(--fold)) 0, 100% var(--fold), 100% 100%, 0 100%);
}
.fold::after {
  inset: 1.6px;
  background: linear-gradient(155deg, #ffffff, #f2f8f3);
  clip-path: polygon(0 0, calc(100% - var(--fold) + 2px) 0, 100% calc(var(--fold) - 2px), 100% 100%, 0 100%);
}

/* ---------- Layout ---------- */
#app { max-width: 760px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; }

#topbar {
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .82));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--ink);
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid rgba(162, 208, 86, .22);
}
.topbar-inner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.02rem; flex: 1; min-width: 0; letter-spacing: .01em; }
#page-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-logo {
  width: 36px; height: 36px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.brand-logo svg { width: 100%; height: 100%; display: block; }
.icon-btn {
  background: var(--lime); color: #123018; border: none;
  width: 40px; height: 40px; border-radius: 999px; font-size: 1.25rem; font-weight: 800; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 9px rgba(20, 45, 55, .25);
}
.icon-btn:active { background: var(--lime-bright); transform: scale(.94); }

/* heure + date, en haut à droite comme sur la maquette */
.clock {
  text-align: right; line-height: 1.15; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.clock b { display: block; font-size: .92rem; font-weight: 700; }
.clock span { display: block; font-size: .64rem; color: var(--ink-soft); text-transform: capitalize; }

.etab-chip {
  background: rgba(22, 50, 59, .06); color: var(--ink); border: none;
  box-shadow: inset 0 0 0 1.5px var(--line);
  border-radius: 999px; padding: 8px 13px; font-size: .8rem; font-weight: 700;
  max-width: 36%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.etab-chip:active { background: var(--lime-soft); }

.view { flex: 1; padding: 18px 16px 122px; }

/* barre d'onglets flottante */
#tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: space-around; gap: 2px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 22px;
  margin: 0 auto calc(10px + env(safe-area-inset-bottom));
  max-width: 420px; width: calc(100% - 24px);
  box-shadow: var(--shadow-lift);
  border: 1.5px solid var(--line);
  padding: 6px;
}
#tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 4px 8px; text-decoration: none; color: var(--ink-soft);
  font-size: .68rem; font-weight: 700; border-radius: 16px;
  transition: background .15s, color .15s;
}
#tabbar a.active { color: #12300f; background: var(--lime); }
.tab-ico { font-size: 1.3rem; line-height: 1.15; }

/* ---------- Cartes & sections ---------- */
.card {
  background: var(--card); border-radius: var(--radius);
  border: 1.5px solid var(--line-soft);
  box-shadow: var(--shadow);
  padding: 18px 16px; margin-bottom: 14px;
}
.card h2 { font-size: 1.05rem; margin-bottom: 12px; font-weight: 700; }
.section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-soft); margin: 22px 2px 10px; font-weight: 700;
}
.section-title::before { content: ''; width: 18px; height: 3px; border-radius: 2px; background: var(--lime); }

/* bandeau d'accueil — clair comme le reste (demande client v4.3) */
.hero {
  --fold: 26px;
  color: var(--ink);
  border-radius: 22px; padding: 20px 18px; margin-bottom: 16px;
  overflow: visible;
}
.hero-date { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--lime-ink); font-weight: 700; }
.hero-name { font-size: 1.35rem; font-weight: 700; margin: 4px 0 10px; }
.hero-chip {
  display: inline-block; background: var(--lime-soft); border: 1.5px solid var(--line);
  color: var(--lime-ink);
  border-radius: 999px; padding: 5px 13px; font-size: .8rem; font-weight: 700;
}
.hero-user {
  display: block; margin-top: 12px; background: rgba(22, 50, 59, .05);
  border: 1.5px solid var(--line-soft); color: var(--ink);
  border-radius: 999px; padding: 8px 15px; font-size: .82rem; font-weight: 700;
}
.hero-user:active { background: var(--lime-soft); }
.hero-sign { font-size: .66rem; color: var(--ink-dim); letter-spacing: .08em; text-transform: uppercase; margin-top: 12px; }

/* ---------- Archives ---------- */
.arch-ico {
  font-size: 1.4rem; width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; background: var(--card-hi);
}
.arch-months { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.arch-month {
  background: var(--lime-soft); border: 1.5px solid var(--line); color: var(--lime-ink);
  border-radius: 11px; padding: 8px 12px; font-size: .8rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 7px;
}
.arch-month.expire { background: var(--orange-soft); border-color: rgba(239, 156, 30, .4); color: var(--orange); }
.arch-count {
  background: var(--lime); color: #12300f; border-radius: 999px;
  padding: 1px 7px; font-size: .7rem; font-weight: 800;
}
.arch-month.expire .arch-count { background: var(--orange); color: #3a2404; }

/* tuiles d'actions rapides — les « fiches à coin corné » de la maquette */
.tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile {
  border-radius: var(--radius);
  padding: 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-weight: 700; color: var(--ink); text-align: center; min-height: 116px; justify-content: center;
  font-size: .88rem; transition: transform .12s;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.tile:active { transform: scale(.96); }

/* pendant le rangement : la tuile prise suit le doigt, les autres s'effacent
   un peu pour montrer que c'est elle qu'on déplace */
.tile-grid.reorg .tile { opacity: .72; transition: opacity .15s; }
.tile-grid.reorg .tile.drag {
  opacity: 1; pointer-events: none; position: relative; z-index: 5;
  transition: none;
  filter: drop-shadow(0 14px 24px rgba(20, 45, 55, .28));
}

/* petit lien discret à droite d'un titre de section */
.mini-link {
  margin-left: auto; background: none; border: 0; padding: 2px 4px;
  color: var(--lime-ink); font-size: .68rem; font-weight: 700;
  text-transform: none; letter-spacing: .02em;
}
.mini-link:active { opacity: .6; }
.hint-actions { font-size: .74rem; color: var(--ink-dim); line-height: 1.35; margin: -4px 2px 11px; }
.tile .ico {
  font-size: 1.5rem; line-height: 1; width: 48px; height: 48px; border-radius: 15px;
  display: inline-flex; align-items: center; justify-content: center;
}
.tile:nth-child(6n+1) .ico { background: var(--hue1); }
.tile:nth-child(6n+2) .ico { background: var(--hue2); }
.tile:nth-child(6n+3) .ico { background: var(--hue3); }
.tile:nth-child(6n+4) .ico { background: var(--hue4); }
.tile:nth-child(6n+5) .ico { background: var(--hue6); }
.tile:nth-child(6n) .ico { background: var(--hue5); }
.tile small { font-weight: 500; color: var(--ink-dim); font-size: .72rem; }

/* tâches du jour — orange tant que ce n'est pas fait, vert une fois validé */
.task {
  display: flex; align-items: center; gap: 13px;
  background: var(--card); border-radius: var(--radius);
  border: 1.5px solid rgba(239, 156, 30, .38);
  box-shadow: var(--shadow);
  padding: 13px 14px; margin-bottom: 10px;
}
.task.done { border-color: rgba(86, 181, 75, .42); }
.task .t-ico {
  font-size: 1.35rem; width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--orange-soft);
}
.task.done .t-ico { background: var(--green-soft); }
.task .t-body { flex: 1; min-width: 0; }
.task .t-title { font-weight: 700; }
.task .t-sub { font-size: .8rem; color: var(--ink-soft); }
/* toute la ligne ouvre la fiche : le bouton n'est plus qu'un repère visuel */
.task[data-go] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.task[data-go]:active { transform: scale(.99); }
.task .t-go {
  background: var(--orange); color: #3a2404; border: none;
  border-radius: 999px; padding: 10px 16px; font-weight: 800; font-size: .85rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; white-space: nowrap;
}
.task.done .t-go { background: var(--green); color: #0f2a0c; font-size: 1.05rem; }

.task.urgent { border-color: rgba(255, 122, 107, .55); }
.task.urgent .t-ico { background: var(--red-soft); }
.task.urgent .t-go { background: var(--red); color: #3d100a; }

/* ---------- Ingrédients d'une fiche recette ---------- */
.ingr-head, .ingr-row {
  display: grid; grid-template-columns: 1.4fr 1fr .7fr auto; gap: 6px; align-items: center;
}
.ingr-head {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--orange); font-weight: 800; padding: 0 14px 4px;
}
.ingr-row { margin-bottom: 7px; }
.ingr-row .pill-input { min-height: 42px; padding: 6px 13px; min-width: 0; }
@media (max-width: 520px) {
  .ingr-head { display: none; }
  .ingr-row { grid-template-columns: 1fr 1fr auto; }
  .ingr-row .pill-input:first-child { grid-column: 1 / -1; }
}

/* ---------- Lignes de suivi de stock ---------- */
.stock-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--card); border: 1.5px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 13px 14px; margin-bottom: 10px;
}
.stock-row.proche { border-color: rgba(239, 156, 30, .5); }
.stock-row.urgent { border-color: rgba(255, 122, 107, .6); background: var(--red-soft); }
.stock-row .st-body { flex: 1; min-width: 180px; }
.stock-row .st-titre { font-weight: 700; }
.stock-row .st-sub { font-size: .78rem; color: var(--ink-soft); }
.stock-row .st-actions { display: flex; gap: 7px; }

/* ---------- Formulaires ---------- */
.form-grid { display: grid; gap: 14px; }
.field label {
  display: block; font-size: .72rem; font-weight: 700; color: var(--ink-soft);
  margin-bottom: 6px; letter-spacing: .07em; text-transform: uppercase;
}
.field input[type=text], .field input[type=number], .field input[type=date], .field input[type=time],
.field select, .field textarea {
  width: 100%; min-height: var(--tap); padding: 11px 16px;
  border: none; border-bottom: 3px solid var(--lime);
  border-radius: 999px; background: var(--pill); color: #fff;
  box-shadow: 0 3px 8px rgba(20, 45, 55, .16);
  transition: background .12s, box-shadow .12s;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, .55); }
.field textarea { min-height: 80px; resize: vertical; border-radius: 20px; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: var(--pill-hi);
  box-shadow: 0 0 0 3px rgba(162, 208, 86, .40);
}
.field .hint { font-size: .75rem; color: var(--ink-dim); margin-top: 5px; padding-left: 4px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: end; }

/* Deux cases côte à côte : sur téléphone, un titre long passe sur deux
   lignes et l'autre non — les cases se retrouvaient décalées en hauteur.
   On réserve donc deux lignes de titre et on colle le texte en bas, pour
   que les cases soient toujours en face l'une de l'autre. */
.row2 > .field, .row3 > .field { display: flex; flex-direction: column; }
.row2 > .field > label, .row3 > .field > label {
  display: flex; align-items: flex-end; min-height: 2.4em; margin-top: auto;
}
/* les cases date / heure sont un peu plus hautes que les autres selon le
   navigateur : on aligne tout le monde sur la plus haute */
.row2 .field input, .row2 .field select,
.row3 .field input, .row3 .field select { min-height: 50px; }
/* écrans très étroits : mieux vaut l'une sous l'autre que deux cases écrasées */
@media (max-width: 359px) {
  .row2, .row3 { grid-template-columns: 1fr; }
  .row2 > .field > label, .row3 > .field > label { min-height: 0; }
}

.seg { display: flex; border: 1.5px solid var(--line-soft); border-radius: 999px; overflow: hidden; background: rgba(22, 50, 59, .05); }
.seg button {
  flex: 1; border: none; background: transparent; padding: 12px 6px; font-weight: 700; color: var(--ink-soft);
  min-height: var(--tap); transition: background .12s, color .12s;
}
.seg button.on-ok { background: var(--lime); color: #12300f; }
.seg button.on-bad { background: var(--red); color: #3d100a; }
.seg button.on-neutral { background: rgba(22, 50, 59, .16); color: var(--ink); }

/* choix multiples en pastilles (transformation, cru/cuit, type de froid) */
.choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.choix button {
  min-height: var(--tap); border: none; border-radius: 15px; padding: 10px 8px;
  background: rgba(22, 50, 59, .05); box-shadow: inset 0 0 0 1.5px var(--line-soft);
  color: var(--ink-soft); font-weight: 700; font-size: .86rem;
  transition: background .12s, color .12s;
}
.choix button.on { background: var(--lime); color: #12300f; box-shadow: none; }

/* « la valeur est-elle dans la cible ? » : un bouton Valider et, sur la même
   ligne, la mesure à saisir seulement si on sort de la fourchette */
.cible-row { display: flex; gap: 10px; align-items: stretch; }
.cible-ok {
  flex: 1 1 54%; min-width: 0; min-height: var(--tap);
  border: none; border-radius: 999px; padding: 6px 14px;
  background: var(--lime-soft); color: var(--lime-ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  font-weight: 800; line-height: 1.15; text-align: left;
  transition: background .12s, color .12s;
}
.cible-ok b { font-size: .95rem; }
.cible-ok span { font-size: .68rem; font-weight: 700; opacity: .8; text-transform: uppercase; letter-spacing: .06em; }
.cible-ok.on { background: var(--lime); color: #12300f; box-shadow: none; }
.cible-row input { flex: 1 1 42%; min-width: 0; }
@media (max-width: 400px) { .cible-row { flex-direction: column; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 12px 18px; border-radius: 999px; border: none;
  font-weight: 800; font-size: 1rem; transition: transform .1s, box-shadow .12s;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: linear-gradient(180deg, var(--lime-bright), var(--lime)); color: #12300f; width: 100%;
  box-shadow: 0 6px 16px rgba(20, 45, 55, .22);
}
.btn-secondary { background: var(--lime-soft); color: var(--lime-ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost { background: transparent; color: var(--ink-soft); box-shadow: inset 0 0 0 1.5px var(--line-soft); }
.btn-danger { background: var(--red-soft); color: var(--red); box-shadow: inset 0 0 0 1.5px rgba(255, 122, 107, .4); }
.btn-sm { min-height: 38px; padding: 6px 14px; font-size: .84rem; }

.alert { border-radius: 14px; padding: 12px 14px; font-size: .9rem; margin: 10px 0; border: 1.5px solid transparent; }
.alert-warn { background: var(--orange-soft); color: var(--orange); border-color: rgba(239, 156, 30, .4); }
.alert-bad { background: var(--red-soft); color: var(--red); border-color: rgba(255, 122, 107, .4); }
.alert-ok { background: var(--lime-soft); color: var(--lime-ink); border-color: var(--line); }

/* ---------- Historique ---------- */
.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.list th, table.list td { padding: 9px 8px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; }
table.list tr:last-child td { border-bottom: none; }
table.list th {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--orange); font-weight: 800;         /* étiquettes orange de la maquette */
}
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .73rem; font-weight: 800; }
.badge-ok { background: var(--green-soft); color: #2c7326; }
.badge-bad { background: var(--red-soft); color: var(--red); }
.badge-warn { background: var(--orange-soft); color: var(--orange); }

/* ---------- Photos ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.photo-cell {
  position: relative; border: 1.5px solid var(--line-soft); padding: 0; border-radius: 14px; overflow: hidden;
  aspect-ratio: 1; background: rgba(22, 50, 59, .06); box-shadow: var(--shadow);
}
.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-cell .p-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(transparent, rgba(0, 20, 26, .86));
  color: #fff; font-size: .68rem; font-weight: 600; padding: 16px 7px 5px; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.photo-cell .p-prep {
  position: absolute; top: 6px; right: 6px; background: var(--lime); color: #12300f;
  border-radius: 999px; font-size: .65rem; padding: 3px 8px; font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
/* séparation entre les journées : bandeau plein, bien visible */
.jour + .jour { margin-top: 20px; }
.jour + .jour::before {
  content: ''; display: block; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--lime), transparent);
  margin-bottom: 16px; opacity: .55;
}
.date-head {
  position: sticky; top: calc(60px + env(safe-area-inset-top)); z-index: 5;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid var(--line); border-left: 5px solid var(--lime);
  border-radius: 12px; padding: 9px 13px; margin: 0 0 11px;
  box-shadow: var(--shadow);
}
.date-head .dh-jour {
  font-weight: 800; font-size: .95rem; color: var(--lime-ink);
  text-transform: capitalize; letter-spacing: .01em;
}
.date-head .dh-date { font-size: .84rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.date-head .dh-nb {
  margin-left: auto; font-size: .7rem; font-weight: 800;
  background: var(--lime-soft); color: var(--lime-ink);
  border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}

/* recherche sur une période */
.periode {
  background: var(--card); border: 1.5px solid var(--line-soft);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px;
}
.periode-titre {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-weight: 700; font-size: .92rem; margin-bottom: 10px;
}
.periode-nb {
  margin-left: auto; font-size: .7rem; font-weight: 800;
  background: var(--lime-soft); color: var(--lime-ink);
  border-radius: 999px; padding: 3px 10px;
}
.periode-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.periode-dates label {
  display: flex; align-items: center; gap: 7px;
  font-size: .72rem; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .06em;
}
.periode-dates input {
  flex: 1; min-width: 0; min-height: 42px; padding: 6px 12px;
  border: none; border-radius: 999px; background: var(--pill); color: #fff;
  border-bottom: 3px solid var(--lime);
}
.periode-dates input:focus { outline: none; box-shadow: 0 0 0 3px rgba(162, 208, 86, .40); }
.periode-raccourcis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.periode-raccourcis button {
  background: transparent; color: var(--ink-soft); border: 1.5px solid var(--line-soft);
  border-radius: 999px; padding: 6px 12px; font-size: .76rem; font-weight: 700;
}
.periode-raccourcis button:active,
.periode-raccourcis button.actif { background: var(--lime-soft); color: var(--lime-ink); border-color: var(--line); }

.capture-bar { display: flex; gap: 10px; margin-bottom: 14px; }
.capture-bar .btn { flex: 1; }

.photo-full { width: 100%; border-radius: 16px; margin-bottom: 12px; box-shadow: var(--shadow); }

.prep-item {
  display: flex; align-items: center; gap: 12px; background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1.5px solid var(--line-soft);
  padding: 14px; margin-bottom: 10px;
}
.prep-item .pr-body { flex: 1; min-width: 0; }
.prep-thumbs { display: flex; gap: 5px; margin-top: 7px; }
.prep-thumbs img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; }

/* ---------- Cases multiples (allergènes…) ---------- */
.multi { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.multi-opt {
  display: flex; align-items: center; gap: 8px; font-size: .87rem;
  padding: 10px; border: 1.5px solid var(--line-soft); border-radius: 14px; cursor: pointer;
  background: rgba(22, 50, 59, .04); transition: border-color .12s, background .12s;
}
.multi-opt input { width: 20px; height: 20px; accent-color: var(--lime); flex-shrink: 0; }
.multi-opt:has(input:checked) { border-color: var(--lime); background: var(--lime-soft); font-weight: 700; }

/* ---------- Checklist (nettoyage) ----------
 * Reprend les pastilles pleines de la maquette : orange = à faire,
 * vert = fait. */
.chk-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border-radius: 999px; margin-bottom: 8px;
  background: var(--orange); color: #3a2404;
  box-shadow: 0 3px 9px rgba(20, 45, 55, .18);
  transition: background .15s;
}
.chk-row.done { background: var(--green); color: #0f2a0c; }
.chk-box {
  width: 32px; height: 32px; border-radius: 999px; border: 2px solid rgba(0, 0, 0, .3);
  background: rgba(255, 255, 255, .55); font-size: 1.05rem; flex-shrink: 0; color: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
}
.chk-row.done .chk-box { background: #fff; color: #0f2a0c; }
.chk-row .c-label { flex: 1; font-weight: 700; }
.chk-row .c-freq { font-size: .68rem; font-weight: 800; background: rgba(0, 0, 0, .18); padding: 3px 9px; border-radius: 999px; }

/* ---------- Fenêtres (modales) ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0, 14, 19, .68); z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
@media (min-width: 600px) { .modal-backdrop { align-items: center; } }
.modal {
  background: linear-gradient(170deg, #ffffff, #f0f7f2);
  border: 1.5px solid var(--line);
  width: 100%; max-width: 560px; max-height: 88dvh;
  border-radius: 24px 24px 0 0; overflow-y: auto; padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
}
.modal::before {
  content: ''; display: block; width: 44px; height: 5px; border-radius: 3px;
  background: var(--line-soft); margin: 4px auto 14px;
}
@media (min-width: 600px) { .modal { border-radius: 24px; padding-top: 20px; } .modal::before { display: none; } }
.modal h3 { margin-bottom: 14px; font-size: 1.12rem; font-weight: 700; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-actions .btn { flex: 1; }

/* ---------- Toast ---------- */
#toast-root { position: fixed; bottom: 100px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 80; pointer-events: none; }
.toast {
  background: #ffffff; color: var(--ink); border: 1.5px solid var(--line);
  padding: 12px 22px; border-radius: 999px;
  font-size: .9rem; font-weight: 700; box-shadow: var(--shadow-lift);
  animation: toast-in .25s ease;
}
.toast.ok { background: var(--lime); color: #12300f; border-color: var(--lime-bright); }
.toast.bad { background: var(--red); color: #3d100a; border-color: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }

/* ---------- Confettis de validation ---------- */
.confetti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 90; }
.confetti i {
  position: absolute; top: -16px; width: 9px; height: 14px; border-radius: 2px;
  animation-name: confetti-tombe; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes confetti-tombe {
  from { transform: translate3d(0, 0, 0) rotate(0); opacity: 1; }
  to   { transform: translate3d(var(--x, 0), 102dvh, 0) rotate(var(--r, 360deg)); opacity: .85; }
}
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }

/* ---------- « Bravo, vous avez tout tracé ! » ----------
   Toutes les tâches du jour sont enregistrées : un grand pouce en l'air,
   une fois par journée. Disparaît tout seul, ou d'un appui. */
.bravo {
  position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 24, 31, .55); backdrop-filter: blur(2px);
  animation: bravo-fond .3s ease;
}
.bravo-carte {
  background: var(--card); border: 2px solid var(--lime);
  border-radius: 28px; padding: 26px 30px; text-align: center; max-width: 320px;
  box-shadow: var(--shadow-lift); animation: bravo-entre .45s cubic-bezier(.2, 1.5, .5, 1);
}
.bravo-pouce { font-size: 4.2rem; line-height: 1; animation: bravo-pouce 1.1s ease-in-out 2; }
.bravo-texte { font-size: 1.25rem; font-weight: 800; margin-top: 10px; color: var(--lime-ink); }
.bravo-sous { font-size: .86rem; color: var(--ink-soft); margin-top: 6px; }
@keyframes bravo-fond { from { opacity: 0; } }
@keyframes bravo-entre { from { opacity: 0; transform: scale(.7) translateY(20px); } }
@keyframes bravo-pouce {
  0%, 100% { transform: rotate(0) scale(1); }
  30% { transform: rotate(-12deg) scale(1.12); }
  60% { transform: rotate(10deg) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .bravo-carte, .bravo-pouce { animation: none; }
}

/* ---------- Vignettes photo d'une fabrication ---------- */
.photo-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.photo-mini:empty { display: none; }
.pm-vign {
  position: relative; width: 58px; height: 58px; border-radius: 12px; overflow: hidden;
  border: 1.5px solid var(--line-soft); padding: 0; background: none; flex-shrink: 0;
}
.pm-vign img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-x {
  position: absolute; top: 0; right: 0; width: 22px; height: 22px; border: none;
  border-radius: 0 0 0 10px; background: rgba(0, 12, 16, .72); color: #fff;
  font-size: .72rem; font-weight: 800; line-height: 1;
}

/* ---------- Parcours de paramétrage (premier lancement) ---------- */
.wizard { padding-bottom: 10px; }
.wizard-head { text-align: center; margin-bottom: 16px; }
.wizard-jauge { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; }
.wizard-jauge span {
  width: 26px; height: 5px; border-radius: 3px; background: var(--line-soft);
  transition: background .2s;
}
.wizard-jauge span.on { background: var(--lime); }
.wizard-pas {
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange);
}
.wizard-head h1 { font-size: 1.3rem; font-weight: 700; margin: 6px 0 6px; }
.wizard-head p { color: var(--ink-soft); font-size: .9rem; }
.wizard-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.wizard-actions .btn { flex: 1; }
.wizard-actions > span { flex: 0 0 0; }
.wizard-note { font-size: .76rem; color: var(--ink-dim); text-align: center; margin-top: 8px; }

/* ---------- Accueil premier lancement ---------- */
.onboard { text-align: center; padding: 34px 10px; }
.onboard .big {
  font-size: 3rem; width: 96px; height: 96px; margin: 0 auto;
  background: linear-gradient(160deg, var(--lime-bright), var(--teal)); border-radius: 30px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(20, 45, 55, .25);
}
.onboard h1 { font-size: 1.45rem; margin: 18px 0 6px; font-weight: 700; }
.onboard p { color: var(--ink-soft); margin-bottom: 24px; }

.empty { text-align: center; color: var(--ink-dim); padding: 30px 10px; font-size: .92rem; }
.empty .big { font-size: 2.6rem; display: block; margin-bottom: 10px; }

/* ---------- Liste des fiches ---------- */
.fiche-link {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  background: var(--card); border: 1.5px solid var(--line-soft);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 13px 14px; margin-bottom: 10px; transition: transform .1s, border-color .12s;
}
.fiche-link:active { transform: scale(.98); border-color: var(--lime); }
.fiche-link .ico {
  font-size: 1.4rem; width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.fiche-link:nth-child(6n+1) .ico { background: var(--hue1); }
.fiche-link:nth-child(6n+2) .ico { background: var(--hue2); }
.fiche-link:nth-child(6n+3) .ico { background: var(--hue3); }
.fiche-link:nth-child(6n+4) .ico { background: var(--hue4); }
.fiche-link:nth-child(6n+5) .ico { background: var(--hue6); }
.fiche-link:nth-child(6n) .ico { background: var(--hue5); }
.fiche-link .f-body { flex: 1; min-width: 0; }
.fiche-link .f-title { font-weight: 700; }
.fiche-link .f-sub { font-size: .76rem; color: var(--ink-dim); }
.fiche-link .arrow { color: var(--lime); font-size: 1.25rem; }

/* ---------- recherche ----------
 * La barre de l'accueil est un bouton déguisé en champ : le vrai champ
 * vit sur l'écran Recherche (search-box), pour que la saisie survive
 * aux allers-retours vers un résultat. */
.search-bar {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--card); border: 1.5px solid var(--line-soft);
  border-radius: 999px; padding: 12px 18px; margin-bottom: 14px;
  color: var(--ink-dim); font-size: .92rem;
  transition: transform .1s, border-color .12s;
}
.search-bar:active { transform: scale(.98); border-color: var(--lime); }

.search-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--pill); border-radius: 999px;
  padding: 4px 8px 4px 16px; margin-bottom: 14px;
  border-bottom: 3px solid var(--lime);
}
.search-box .search-loupe { font-size: 1.05rem; }
.search-box input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--ink); font-size: 1rem; padding: 10px 0;
}
.search-box input::placeholder { color: rgba(234, 246, 249, .55); }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-clear {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: var(--ink);
  font-size: .9rem; line-height: 1;
}
.res-thumb { overflow: hidden; padding: 0; }
.res-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }

/* ---------- bouton « Traç'Tout Contrôle » de l'accueil ---------- */
.ctrl-bar {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--card); border: 1.5px solid var(--lime-line);
  border-radius: var(--radius); padding: 11px 16px; margin-bottom: 14px;
  color: var(--ink); transition: transform .1s, border-color .12s;
}
.ctrl-bar:active { transform: scale(.98); border-color: var(--lime); }
.ctrl-bar > span:first-child { font-size: 1.3rem; }
.ctrl-bar > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ctrl-bar .cb-sub { font-size: .76rem; color: var(--ink-dim); }
.ctrl-bar .arrow { color: var(--lime); font-size: 1.25rem; }

.toolbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.toolbar select, .toolbar input[type=month], .toolbar input[type=date] {
  min-height: 42px; padding: 6px 14px; border: none; border-radius: 999px;
  background: var(--pill); color: #fff; border-bottom: 3px solid var(--lime);
}
.toolbar .spacer { flex: 1; }

/* champ isolé, hors bloc .field (ajout d'un élément de nettoyage…) */
.pill-input {
  min-height: 44px; padding: 8px 16px; border: none; border-radius: 999px;
  background: var(--pill); color: #fff; border-bottom: 3px solid var(--lime);
}
.pill-input:focus { outline: none; background: var(--pill-hi); box-shadow: 0 0 0 3px rgba(162, 208, 86, .40); }

.settings-item { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--line-soft); }
.settings-item:last-child { border-bottom: none; }
.settings-item .s-body { flex: 1; min-width: 0; }
.settings-item .s-sub { font-size: .78rem; color: var(--ink-dim); }

/* ---------- Impression / PDF (toujours sur fond blanc) ---------- */
#print-root { display: none; }
@media print {
  body > #app, #toast-root, #modal-root { display: none !important; }
  #print-root { display: block; color: #000; }
  html, body { background: #fff !important; color: #000 !important; }
  .print-sheet { page-break-after: always; font-size: 11px; color: #000; }
  .print-sheet h1 { font-size: 16px; text-align: center; border: 1.5px solid #000; padding: 6px; margin-bottom: 8px; }
  .print-meta { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 11px; }
  .print-sheet table { width: 100%; border-collapse: collapse; }
  .print-sheet th, .print-sheet td { border: 1px solid #000; padding: 4px 5px; text-align: left; }
  .print-sheet th { background: #eee; }
  .print-foot { margin-top: 10px; font-size: 9px; color: #333; display: flex; justify-content: space-between; }
  .print-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm; }
  .print-photos figure { border: 1px solid #000; padding: 3mm; page-break-inside: avoid; }
  .print-photos img { width: 100%; }
  .print-photos figcaption { font-size: 9px; margin-top: 2mm; }

  /* planche d'étiquettes autocollantes (surgélation) */
  .print-labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
  .print-label {
    border: 1px dashed #000; border-radius: 2mm; padding: 3mm;
    height: 40mm; page-break-inside: avoid; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .print-label .lab-etab { font-size: 7px; text-transform: uppercase; letter-spacing: .05em; }
  .print-label .lab-nom { font-size: 12px; font-weight: bold; line-height: 1.15; }
  .print-label .lab-etat { font-size: 8px; font-weight: normal; font-style: italic; }
  .print-label .lab-ligne { font-size: 9px; }
  .print-label .lab-dlc { font-size: 10px; font-weight: bold; border-top: 1px solid #000; padding-top: 1mm; }
  .print-label .lab-pied { font-size: 6.5px; }
}