/* Cuisine — design : ivoire chaud, encre profonde, vert sauge ; Fraunces (titres) + Manrope (texte). */
:root {
  color-scheme: light;
  --fond: #f6f1e9;
  --fond-2: #efe8dc;
  --surface: #fffdf9;
  --surface-2: #faf6ef;
  --ligne: #e6dccd;
  --ligne-forte: #d6c9b5;
  --encre: #1d1a16;
  --encre-2: #5d554b;
  --encre-3: #8c8274;
  --accent: #2f5443;          /* vert sauge profond : boutons, liens */
  --accent-2: #3d6b56;
  --accent-doux: #e3ece5;
  --accent-encre: #ffffff;
  --chaud: #b5532c;           /* terracotta : favoris, alertes douces */
  --chaud-doux: #f6e4da;
  --ok: #2f7a4f;
  --alerte: #b5532c;
  --serie-prot: #d4572a;
  --serie-gluc: #1a9f70;
  --serie-lip: #5a4bb8;
  --anneau-fond: #ece4d6;
  --ombre-1: 0 1px 2px rgba(60, 45, 25, .06), 0 1px 1px rgba(60, 45, 25, .04);
  --ombre-2: 0 8px 24px -8px rgba(60, 45, 25, .18), 0 2px 6px rgba(60, 45, 25, .06);
  --ombre-3: 0 24px 60px -20px rgba(40, 30, 15, .35);
  --rayon: 18px;
  --rayon-s: 12px;
  --titre: "Fraunces", Georgia, serif;
  --texte: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --barre: 72px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fond: #14120f; --fond-2: #1b1814; --surface: #1f1c17; --surface-2: #26221c;
    --ligne: #332e26; --ligne-forte: #443d32;
    --encre: #f4efe7; --encre-2: #c3b9aa; --encre-3: #8e8577;
    --accent: #8cc4a6; --accent-2: #a6d6bb; --accent-doux: #22312a; --accent-encre: #10231a;
    --chaud: #e08a62; --chaud-doux: #3a261c; --ok: #7cc49a; --alerte: #e08a62;
    --serie-prot: #d95926; --serie-gluc: #199e70; --serie-lip: #9085e9;
    --anneau-fond: #2c2720;
    --ombre-1: 0 1px 2px rgba(0, 0, 0, .3); --ombre-2: 0 10px 30px -10px rgba(0, 0, 0, .6); --ombre-3: 0 24px 60px -20px rgba(0, 0, 0, .8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fond: #14120f; --fond-2: #1b1814; --surface: #1f1c17; --surface-2: #26221c;
  --ligne: #332e26; --ligne-forte: #443d32;
  --encre: #f4efe7; --encre-2: #c3b9aa; --encre-3: #8e8577;
  --accent: #8cc4a6; --accent-2: #a6d6bb; --accent-doux: #22312a; --accent-encre: #10231a;
  --chaud: #e08a62; --chaud-doux: #3a261c; --ok: #7cc49a; --alerte: #e08a62;
  --serie-prot: #d95926; --serie-gluc: #199e70; --serie-lip: #9085e9;
  --anneau-fond: #2c2720;
  --ombre-1: 0 1px 2px rgba(0, 0, 0, .3); --ombre-2: 0 10px 30px -10px rgba(0, 0, 0, .6); --ombre-3: 0 24px 60px -20px rgba(0, 0, 0, .8);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 15px/1.5 var(--texte); font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; letter-spacing: -.01em; margin: 0; font-optical-sizing: auto; }
h1 { font-size: clamp(26px, 5vw, 34px); line-height: 1.1; }
h2 { font-size: 20px; line-height: 1.2; }
h3 { font-size: 16px; }
.discret { color: var(--encre-3); }
.petit { font-size: 13px; }
.chiffres { font-variant-numeric: tabular-nums; }
.cache { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
::selection { background: var(--accent-doux); }

/* ---------- squelette ---------- */
.appli { min-height: 100dvh; display: flex; }
.navigation {
  position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
  height: calc(var(--barre) + env(safe-area-inset-bottom));
  padding: 6px 6px env(safe-area-inset-bottom);
  display: flex; justify-content: space-around; align-items: stretch;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px);
  border-top: 1px solid var(--ligne);
}
.navigation .marque { display: none; }
.nav-lien {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--encre-3); font-size: 11px; font-weight: 600; border-radius: 14px; position: relative;
  transition: color .2s;
}
.nav-lien svg { width: 23px; height: 23px; transition: transform .25s cubic-bezier(.3, 1.5, .5, 1); }
.nav-lien.actif { color: var(--accent); }
.nav-lien.actif svg { transform: translateY(-1px) scale(1.06); }
.nav-lien.actif::before {
  content: ""; position: absolute; top: 4px; width: 42px; height: 30px; border-radius: 12px;
  background: var(--accent-doux); z-index: -1;
}
.nav-lien .pastille {
  position: absolute; top: 4px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 9px; background: var(--chaud); color: #fff; font-size: 10px; line-height: 17px; text-align: center;
}
.contenu {
  flex: 1; min-width: 0; padding: 0 16px calc(var(--barre) + 28px + env(safe-area-inset-bottom));
  max-width: 1120px; margin: 0 auto; width: 100%;
}
.vue { animation: entree .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes entree { from { opacity: 0; transform: translateY(8px); } }

@media (min-width: 900px) {
  .navigation {
    top: 0; right: auto; width: 236px; height: 100dvh; flex-direction: column; justify-content: flex-start;
    gap: 4px; padding: 22px 14px; border-top: 0; border-right: 1px solid var(--ligne); background: var(--surface-2);
  }
  .navigation .marque { display: flex; align-items: center; gap: 10px; padding: 4px 10px 22px; }
  .marque .logo { width: 36px; height: 36px; }
  .marque b { font-family: var(--titre); font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
  .nav-lien { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 11px 14px; font-size: 14.5px; color: var(--encre-2); }
  .nav-lien:hover { background: var(--fond-2); color: var(--encre); }
  .nav-lien.actif { background: var(--accent-doux); color: var(--accent); }
  .nav-lien.actif::before { display: none; }
  .nav-lien svg { width: 20px; height: 20px; }
  .nav-lien .pastille { position: static; margin-left: auto; }
  .nav-bas { margin-top: auto; }
  .contenu { margin-left: 236px; padding: 0 40px 60px; max-width: none; }
  .contenu > .vue { max-width: 1100px; margin: 0 auto; }
}

/* ---------- en-têtes ---------- */
.entete {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: calc(18px + env(safe-area-inset-top)) 0 14px;
  position: relative;
}
/* sur un petit téléphone, les boutons passent sous le titre au lieu de le couper ou de le recouvrir */
.entete .titres { flex: 1 1 150px; min-width: 0; }
.entete .surtitre { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-3); }
.entete h1 { overflow: hidden; text-overflow: ellipsis; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (min-width: 900px) { .entete { padding-top: 34px; padding-bottom: 20px; } }

/* ---------- boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid transparent; background: var(--accent); color: var(--accent-encre);
  font-weight: 700; font-size: 14.5px; cursor: pointer; white-space: nowrap; user-select: none;
  transition: transform .12s, background .2s, box-shadow .2s, opacity .2s; box-shadow: var(--ombre-1);
}
.bouton:hover { background: var(--accent-2); }
.bouton:active { transform: scale(.97); }
.bouton:disabled { opacity: .5; pointer-events: none; }
.bouton svg { width: 18px; height: 18px; flex: none; }
.bouton.second { background: var(--surface); color: var(--encre); border-color: var(--ligne-forte); box-shadow: none; }
.bouton.second:hover { background: var(--surface-2); }
.bouton.fantome { background: transparent; color: var(--encre-2); box-shadow: none; }
.bouton.fantome:hover { background: var(--fond-2); color: var(--encre); }
.bouton.danger { background: transparent; color: var(--alerte); border-color: color-mix(in srgb, var(--alerte) 35%, transparent); box-shadow: none; }
.bouton.petit { height: 36px; padding: 0 14px; font-size: 13.5px; }
.bouton.large { width: 100%; }
.bouton.grand { height: 54px; font-size: 16px; padding: 0 26px; }
.icone-bouton {
  width: 42px; height: 42px; flex: none; display: inline-grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--ligne); background: var(--surface); color: var(--encre-2); cursor: pointer;
  transition: background .2s, transform .12s, color .2s;
}
.icone-bouton:hover { background: var(--surface-2); color: var(--encre); }
.icone-bouton:active { transform: scale(.93); }
.icone-bouton svg { width: 20px; height: 20px; }
.icone-bouton.nu { border: 0; background: transparent; }
.icone-bouton.actif { color: var(--chaud); }
.bouton-flottant {
  position: fixed; z-index: 25; right: 18px; bottom: calc(var(--barre) + 18px + env(safe-area-inset-bottom));
  width: 58px; height: 58px; border-radius: 20px; border: 0; background: var(--accent); color: var(--accent-encre);
  display: grid; place-items: center; box-shadow: var(--ombre-2); cursor: pointer; transition: transform .15s;
}
.bouton-flottant:active { transform: scale(.94); }
.bouton-flottant svg { width: 26px; height: 26px; }
@media (min-width: 900px) { .bouton-flottant { display: none; } }

/* ---------- cartes ---------- */
.carte { background: var(--surface); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre-1); }
.carte.pad { padding: 18px; }
.carte-titre { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.carte-titre h2 { font-size: 18px; }
.grille { display: grid; gap: 14px; }
.section { margin-top: 26px; }
.section > .carte-titre { margin-bottom: 12px; }

/* ---------- formulaires ---------- */
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ > span, .etiquette { font-size: 12.5px; font-weight: 700; color: var(--encre-2); letter-spacing: .02em; }
.saisie, select.saisie, textarea.saisie {
  width: 100%; min-height: 46px; padding: 11px 14px; border-radius: var(--rayon-s); border: 1px solid var(--ligne-forte);
  background: var(--surface); color: var(--encre); outline: none; transition: border .15s, box-shadow .15s;
}
textarea.saisie { resize: vertical; min-height: 110px; line-height: 1.55; }
.saisie:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.saisie::placeholder { color: var(--encre-3); }
.recherche { position: relative; }
.recherche svg { position: absolute; left: 14px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); color: var(--encre-3); pointer-events: none; }
.recherche .saisie { padding-left: 44px; border-radius: 999px; background: var(--surface); }
.ligne-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }

.puces { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 6px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.puces::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .puces { margin: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; } }
.puce {
  flex: none; height: 36px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--ligne-forte);
  background: var(--surface); color: var(--encre-2); font-weight: 600; font-size: 13.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; transition: all .15s;
}
.puce:hover { color: var(--encre); }
.puce.actif { background: var(--encre); border-color: var(--encre); color: var(--fond); }
.puce svg { width: 15px; height: 15px; }

.segments { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--fond-2); gap: 2px; }
.segments button { border: 0; background: transparent; height: 34px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--encre-2); cursor: pointer; }
.segments button.actif { background: var(--surface); color: var(--encre); box-shadow: var(--ombre-1); }

.compteur { display: inline-flex; align-items: center; border: 1px solid var(--ligne-forte); border-radius: 999px; background: var(--surface); }
.compteur button { width: 40px; height: 40px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--encre-2); border-radius: 50%; }
.compteur button:hover { color: var(--encre); background: var(--surface-2); }
.compteur svg { width: 18px; height: 18px; }
.compteur output { min-width: 64px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- journée ---------- */
.bandeau-jour { display: flex; align-items: center; gap: 6px; }
.bandeau-jour .date { font-family: var(--titre); font-size: 15px; color: var(--encre-2); min-width: 0; }
.resume {
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; padding: 22px;
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
}
.anneau { position: relative; width: 156px; height: 156px; }
.anneau svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anneau .piste { stroke: var(--anneau-fond); }
.anneau .valeur { stroke: var(--accent); transition: stroke-dashoffset 1s cubic-bezier(.2, .8, .2, 1); }
.anneau.depasse .valeur { stroke: var(--chaud); }
.anneau .centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.anneau .centre b { font-family: var(--titre); font-size: 34px; line-height: 1; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.anneau .centre span { font-size: 12px; color: var(--encre-3); margin-top: 4px; font-weight: 600; }
.macros { display: grid; gap: 13px; }
.macro .haut { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; margin-bottom: 6px; }
.macro .nom { font-weight: 700; display: inline-flex; align-items: center; gap: 7px; }
.macro .nom i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); display: inline-block; }
.macro .val { color: var(--encre-2); font-variant-numeric: tabular-nums; }
.macro .barre { height: 8px; border-radius: 4px; background: var(--anneau-fond); overflow: hidden; }
.macro .barre div { height: 100%; border-radius: 4px; background: var(--c); width: 0; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
@media (max-width: 520px) {
  .resume { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .resume .macros { width: 100%; }
}
.repas-bloc { padding: 4px 0; }
.repas-tete { display: flex; align-items: center; gap: 10px; padding: 14px 16px 8px; }
.repas-tete .emoji { font-size: 20px; }
.repas-tete h3 { flex: 1; font-family: var(--titre); font-size: 17px; }
.repas-tete .kcal { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--encre-2); font-size: 14px; }
.entree { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--ligne); }
.entree .txt { flex: 1; min-width: 0; }
.entree .txt b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entree .txt small { color: var(--encre-3); font-size: 12.5px; }
.entree .k { font-weight: 700; font-variant-numeric: tabular-nums; }
.entree.prevu { background: repeating-linear-gradient(-45deg, transparent 0 8px, color-mix(in srgb, var(--accent-doux) 55%, transparent) 8px 9px); }
.ajouter-ligne { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; border: 0; border-top: 1px dashed var(--ligne); background: none; color: var(--accent); font-weight: 700; cursor: pointer; font-size: 14px; }
.ajouter-ligne svg { width: 18px; height: 18px; }
.ajouter-ligne:hover { background: var(--surface-2); }
.grille-jour { display: grid; gap: 14px; }
@media (min-width: 1000px) { .grille-jour { grid-template-columns: 1.15fr 1fr; align-items: start; } }

/* ---------- recettes ---------- */
.grille-recettes { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
@media (max-width: 560px) { .grille-recettes { grid-template-columns: 1fr 1fr; gap: 12px; } }
.carte-recette { overflow: hidden; cursor: pointer; transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; position: relative; color: inherit; }
.carte-recette:hover { transform: translateY(-3px); box-shadow: var(--ombre-2); }
.carte-recette .photo { aspect-ratio: 4/3; position: relative; overflow: hidden; background: var(--fond-2); }
.carte-recette .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.carte-recette:hover .photo img { transform: scale(1.04); }
.carte-recette .corps { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.carte-recette h3 { font-family: var(--titre); font-size: 16.5px; line-height: 1.25; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--encre-3); font-weight: 600; }
.meta span { display: inline-flex; align-items: center; gap: 4px; }
.meta svg { width: 14px; height: 14px; }
.badge-kcal {
  position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 800;
  background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(8px); color: var(--encre); font-variant-numeric: tabular-nums;
}
.coeur { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--chaud); backdrop-filter: blur(8px); }
.coeur svg { width: 17px; height: 17px; }
.vignette {
  width: 100%; height: 100%; display: grid; place-items: center; font-size: 44px;
  background: radial-gradient(120% 100% at 30% 20%, var(--v1, #f3e3cf) 0%, var(--v2, #e9cfb0) 100%);
}
.vignette.v-Plat { --v1: #f1dcc6; --v2: #e3bf98; }
.vignette.v-Dessert { --v1: #f6dfe0; --v2: #e9bfc4; }
.vignette.v-Entrée { --v1: #e2ecd9; --v2: #c5d9b4; }
.vignette.v-Petit-déjeuner { --v1: #f6ead0; --v2: #ecd5a3; }
.vignette.v-Boisson { --v1: #dbeaf0; --v2: #b8d4e0; }
.vignette.v-Snack { --v1: #efe3d3; --v2: #dcc6aa; }
.vignette.v-Accompagnement { --v1: #e6ead6; --v2: #cfd6b0; }
.vignette.v-Sauce { --v1: #f4ddd2; --v2: #e3b8a3; }
:root[data-theme="dark"] .vignette, :root:not([data-theme="light"]) .vignette { filter: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vignette { filter: brightness(.55) saturate(.9); } }
:root[data-theme="dark"] .vignette { filter: brightness(.55) saturate(.9); }

/* détail recette */
.heros { position: relative; margin: 0 -16px; aspect-ratio: 16/10; max-height: 52vh; overflow: hidden; background: var(--fond-2); }
.heros img, .heros .vignette { width: 100%; height: 100%; object-fit: cover; font-size: 80px; }
.heros::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 30%, transparent 60%, rgba(0,0,0,.15) 100%); pointer-events: none; }
.heros .barre-haut { position: absolute; z-index: 2; top: calc(12px + env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; gap: 8px; }
.heros .barre-haut .icone-bouton { background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(10px); border: 0; color: var(--encre); }
@media (min-width: 900px) { .heros { margin: 28px 0 0; border-radius: 24px; aspect-ratio: 21/9; } }
.fiche { position: relative; z-index: 3; margin: -28px -16px 0; padding: 24px 16px 0; background: var(--fond); border-radius: 26px 26px 0 0; }
@media (min-width: 900px) { .fiche { margin: 0; padding: 26px 0 0; background: none; } }
.fiche .description { font-size: 15.5px; color: var(--encre-2); margin: 10px 0 0; max-width: 70ch; }
.infos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.info { background: var(--surface); border: 1px solid var(--ligne); border-radius: 14px; padding: 10px 8px; text-align: center; }
.info b { display: block; font-family: var(--titre); font-size: 19px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.info span { font-size: 11.5px; color: var(--encre-3); font-weight: 700; }
.barre-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.barre-actions .bouton.grand { flex: 1 1 200px; }
.colonnes-recette { display: grid; gap: 22px; margin-top: 26px; }
@media (min-width: 900px) { .colonnes-recette { grid-template-columns: 360px 1fr; align-items: start; } .colonnes-recette > :first-child { position: sticky; top: 20px; } }
.liste-ingredients { list-style: none; margin: 0; padding: 0; }
.liste-ingredients li { display: flex; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--ligne); }
.liste-ingredients li:last-child { border-bottom: 0; }
.liste-ingredients .qte { min-width: 74px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--encre); }
.liste-ingredients .nom { flex: 1; color: var(--encre-2); }
.liste-ingredients .alerte-lien { color: var(--chaud); font-size: 12px; font-weight: 700; white-space: nowrap; }
.etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0; display: grid; gap: 4px; }
.etapes li { counter-increment: etape; display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 12px 0; }
.etapes li::before { content: counter(etape); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-doux); color: var(--accent); font-weight: 800; font-size: 14px; }
.etapes p { margin: 4px 0 0; font-size: 15.5px; line-height: 1.6; }
.tableau-nutri { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.tableau-nutri td { padding: 8px 0; border-bottom: 1px solid var(--ligne); }
.tableau-nutri td:last-child { text-align: right; font-weight: 700; }
.tableau-nutri tr.sous td:first-child { padding-left: 14px; color: var(--encre-3); }
.fiabilite { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--chaud-doux); color: var(--encre); font-size: 13px; margin-top: 12px; }
.fiabilite svg { width: 18px; height: 18px; flex: none; color: var(--chaud); margin-top: 1px; }
.notes { background: var(--surface-2); border-left: 3px solid var(--accent); padding: 12px 16px; border-radius: 0 12px 12px 0; color: var(--encre-2); white-space: pre-wrap; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.etiquette-tag { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--fond-2); color: var(--encre-2); }

/* éditeur */
.editeur { display: grid; gap: 18px; padding-bottom: 30px; }
@media (min-width: 900px) { .editeur { grid-template-columns: 1fr 340px; align-items: start; } .editeur .cote { position: sticky; top: 20px; } }
.zone-photo { aspect-ratio: 16/9; max-height: 280px; width: 100%; border-radius: var(--rayon); border: 2px dashed var(--ligne-forte); display: grid; place-items: center; overflow: hidden; cursor: pointer; position: relative; background: var(--surface-2); color: var(--encre-3); text-align: center; }
.zone-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.zone-photo .invite { display: grid; gap: 6px; justify-items: center; font-weight: 600; font-size: 14px; }
.zone-photo .invite svg { width: 30px; height: 30px; }
.zone-photo .retirer { position: absolute; top: 10px; right: 10px; z-index: 2; }
.analyse { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.analyse li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ligne); }
.analyse .etat { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.analyse .etat.non { background: var(--chaud); }
.analyse .etat.neutre { background: var(--ligne-forte); }
.analyse .t { flex: 1; min-width: 0; }
.analyse .t b { font-weight: 600; display: block; }
.analyse .t small { color: var(--encre-3); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.analyse .k { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.analyse button { border: 0; background: none; color: var(--accent); font-weight: 700; cursor: pointer; font-size: 12.5px; padding: 4px; }

/* ---------- planning ---------- */
.semaine-nav { display: flex; align-items: center; gap: 8px; }
.semaine-nav .periode { font-weight: 700; font-size: 14px; min-width: 150px; text-align: center; }
.jours { display: grid; gap: 12px; }
@media (min-width: 700px) { .jours { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }
.jour-col { padding: 0; overflow: hidden; }
.jour-col.aujourdhui { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--ombre-1); }
.jour-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; padding: 12px 14px 8px; gap: 8px; }
.jour-tete b { font-family: var(--titre); font-size: 17px; text-transform: capitalize; }
.jour-tete small { color: var(--encre-3); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; }
.jauge { height: 4px; background: var(--anneau-fond); margin: 0 14px 8px; border-radius: 2px; overflow: hidden; }
.jauge div { height: 100%; background: var(--accent); border-radius: 2px; }
.jauge.depasse div { background: var(--chaud); }
.creneau { padding: 6px 14px 10px; border-top: 1px solid var(--ligne); }
.creneau .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--encre-3); margin: 6px 0 6px; display: flex; justify-content: space-between; align-items: center; }
.creneau .lbl button { border: 0; background: none; color: var(--accent); cursor: pointer; padding: 2px; display: grid; place-items: center; border-radius: 6px; }
.creneau .lbl button svg { width: 17px; height: 17px; }
.plat { display: flex; align-items: center; gap: 10px; padding: 6px; margin: 0 -6px; border-radius: 12px; cursor: pointer; }
.plat:hover { background: var(--surface-2); }
.plat .mini { width: 42px; height: 42px; border-radius: 10px; overflow: hidden; flex: none; background: var(--fond-2); }
.plat .mini img, .plat .mini .vignette { width: 100%; height: 100%; object-fit: cover; font-size: 20px; }
.plat .t { flex: 1; min-width: 0; font-size: 13.5px; }
.plat .t b { display: block; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.plat .t small { color: var(--encre-3); font-weight: 600; font-size: 12px; }
.plat.mange { opacity: .55; }
.plat.mange .t b { text-decoration: line-through; }
.vide-creneau { font-size: 13px; color: var(--encre-3); padding: 2px 0 4px; }

/* ---------- courses ---------- */
.rayon { margin-top: 18px; }
.rayon h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--encre-3); font-family: var(--texte); font-weight: 800; margin: 0 0 8px 4px; display: flex; gap: 8px; align-items: center; }
.article { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--ligne); cursor: pointer; user-select: none; transition: background .15s; }
.article:last-child { border-bottom: 0; }
.article:hover { background: var(--surface-2); }
.case { width: 24px; height: 24px; flex: none; border-radius: 8px; border: 2px solid var(--ligne-forte); display: grid; place-items: center; transition: all .2s; }
.case svg { width: 15px; height: 15px; color: var(--accent-encre); opacity: 0; transform: scale(.5); transition: all .2s cubic-bezier(.3, 1.6, .5, 1); }
.article.coche .case { background: var(--accent); border-color: var(--accent); }
.article.coche .case svg { opacity: 1; transform: none; }
.article .t { flex: 1; min-width: 0; }
.article .t b { font-weight: 600; transition: color .2s; }
.article.coche .t b { color: var(--encre-3); text-decoration: line-through; }
.article .d { color: var(--encre-2); font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.article .suppr { opacity: 0; }
.article:hover .suppr { opacity: 1; }
@media (hover: none) { .article .suppr { opacity: .6; } }
.ajout-rapide { display: flex; gap: 8px; }
.ajout-rapide .saisie { border-radius: 999px; }
.progression { height: 6px; border-radius: 3px; background: var(--anneau-fond); overflow: hidden; margin-top: 10px; }
.progression div { height: 100%; background: var(--accent); transition: width .4s; }

/* ---------- chef ---------- */
.tuiles-chef { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.tuile { padding: 18px; cursor: pointer; transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; gap: 8px; text-align: left; border: 1px solid var(--ligne); background: var(--surface); border-radius: var(--rayon); color: inherit; }
.tuile:hover { transform: translateY(-2px); box-shadow: var(--ombre-2); }
.tuile .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-doux); color: var(--accent); }
.tuile .ic svg { width: 23px; height: 23px; }
.tuile b { font-family: var(--titre); font-size: 17px; font-weight: 600; }
.tuile span { color: var(--encre-3); font-size: 13.5px; }
.chef-hero { padding: 22px; display: flex; gap: 16px; align-items: center; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: var(--accent-encre); border: 0; }
.chef-hero .toque { font-size: 42px; line-height: 1; }
.chef-hero h2 { font-size: 22px; }
.chef-hero p { margin: 4px 0 0; opacity: .85; font-size: 14px; }
.idee { padding: 16px; display: flex; gap: 14px; align-items: flex-start; }
.idee .em { font-size: 34px; line-height: 1; }
.idee .t { flex: 1; min-width: 0; }
.idee h3 { font-family: var(--titre); font-size: 17px; font-weight: 600; }
.idee p { margin: 4px 0 8px; color: var(--encre-2); font-size: 14px; }
.reflexion { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 34px 16px; text-align: center; color: var(--encre-2); }
.casserole { width: 64px; height: 64px; position: relative; }
.casserole::before { content: "🍲"; font-size: 52px; display: block; animation: mijote 1.4s ease-in-out infinite; }
.casserole i { position: absolute; top: -6px; width: 6px; height: 14px; border-radius: 3px; background: var(--encre-3); opacity: 0; animation: vapeur 1.8s ease-in-out infinite; }
.casserole i:nth-child(1) { left: 16px; } .casserole i:nth-child(2) { left: 29px; animation-delay: .5s; } .casserole i:nth-child(3) { left: 42px; animation-delay: 1s; }
@keyframes mijote { 50% { transform: translateY(-3px) rotate(-3deg); } }
@keyframes vapeur { 0% { opacity: 0; transform: translateY(6px) scaleY(.6); } 40% { opacity: .5; } 100% { opacity: 0; transform: translateY(-16px) scaleY(1.2); } }
.reponse-chef { line-height: 1.65; }
.reponse-chef p { margin: 0 0 10px; }
.reponse-chef ul { margin: 0 0 10px; padding-left: 20px; }

/* ---------- feuilles (modales) ---------- */
.voile { position: fixed; inset: 0; z-index: 80; background: rgba(20, 15, 8, .42); backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; animation: fondu .2s; }
@keyframes fondu { from { opacity: 0; } }
.feuille {
  width: 100%; max-height: 92dvh; display: flex; flex-direction: column; background: var(--fond);
  border-radius: 26px 26px 0 0; box-shadow: var(--ombre-3); animation: monte .32s cubic-bezier(.2, .9, .25, 1);
  padding-bottom: env(safe-area-inset-bottom);
}
@keyframes monte { from { transform: translateY(100%); } }
.feuille .poignee { width: 40px; height: 5px; border-radius: 3px; background: var(--ligne-forte); margin: 9px auto 0; flex: none; }
.feuille-tete { display: flex; align-items: center; gap: 10px; padding: 12px 18px 10px; }
.feuille-tete h2 { flex: 1; font-size: 20px; }
.feuille-corps { padding: 4px 18px 20px; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.feuille-pied { padding: 12px 18px 16px; border-top: 1px solid var(--ligne); display: flex; gap: 10px; background: var(--fond); }
.feuille-pied .bouton { flex: 1; }
@media (min-width: 700px) {
  .voile { align-items: center; padding: 30px; }
  .feuille { max-width: 560px; border-radius: 24px; max-height: 86dvh; animation: apparait .25s cubic-bezier(.2, .9, .25, 1); }
  .feuille.large { max-width: 760px; }
  .feuille .poignee { display: none; }
  @keyframes apparait { from { opacity: 0; transform: translateY(12px) scale(.98); } }
}
.resultats { display: grid; gap: 2px; margin: 0 -8px; }
.resultat { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; cursor: pointer; border: 0; background: none; text-align: left; width: 100%; }
.resultat:hover, .resultat:focus-visible { background: var(--surface); outline: none; }
.resultat .ic { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--fond-2); font-size: 18px; overflow: hidden; }
.resultat .ic img { width: 100%; height: 100%; object-fit: cover; }
.resultat .t { flex: 1; min-width: 0; }
.resultat .t b { display: block; font-weight: 600; font-size: 14px; line-height: 1.3; }
.resultat .t small { color: var(--encre-3); font-size: 12.5px; }
.resultat .k { font-weight: 700; font-size: 13px; color: var(--encre-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.source { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; background: var(--fond-2); color: var(--encre-3); margin-left: 6px; vertical-align: 1px; }
.choix-repas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.choix-repas button { border: 1px solid var(--ligne-forte); background: var(--surface); border-radius: 14px; padding: 10px 4px; cursor: pointer; display: grid; gap: 2px; justify-items: center; font-size: 12px; font-weight: 700; color: var(--encre-2); }
.choix-repas button span { font-size: 20px; }
.choix-repas button.actif { border-color: var(--accent); background: var(--accent-doux); color: var(--accent); }
.apercu-apport { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.apercu-apport div { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 8px 4px; }
.apercu-apport b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; font-family: var(--titre); }
.apercu-apport span { font-size: 11px; color: var(--encre-3); font-weight: 700; }

/* ---------- toasts ---------- */
.toasts { position: fixed; z-index: 90; left: 50%; transform: translateX(-50%); bottom: calc(var(--barre) + 20px + env(safe-area-inset-bottom)); display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
@media (min-width: 900px) { .toasts { bottom: 28px; left: calc(50% + 118px); } }
.toast { background: var(--encre); color: var(--fond); padding: 12px 16px; border-radius: 14px; box-shadow: var(--ombre-2); font-weight: 600; font-size: 14px; display: flex; gap: 10px; align-items: center; animation: toast .3s cubic-bezier(.2, .9, .3, 1.2); pointer-events: auto; }
.toast.erreur { background: var(--chaud); color: #fff; }
.toast button { margin-left: auto; border: 0; background: none; color: inherit; font-weight: 800; cursor: pointer; text-decoration: underline; }
@keyframes toast { from { opacity: 0; transform: translateY(12px) scale(.96); } }

/* ---------- vides et chargement ---------- */
.vide { text-align: center; padding: 46px 20px; color: var(--encre-2); display: grid; justify-items: center; gap: 10px; }
.vide .em { font-size: 52px; line-height: 1; }
.vide h2 { font-size: 21px; color: var(--encre); }
.vide p { margin: 0; max-width: 40ch; }
.squelette { background: linear-gradient(90deg, var(--fond-2) 0%, var(--surface-2) 50%, var(--fond-2) 100%); background-size: 200% 100%; animation: brille 1.3s infinite; border-radius: 12px; }
@keyframes brille { to { background-position: -200% 0; } }

/* ---------- statistiques ---------- */
.graphe { width: 100%; height: auto; display: block; overflow: visible; }
.graphe .grille-l { stroke: var(--ligne); stroke-width: 1; }
.graphe .axe { fill: var(--encre-3); font-size: 11px; font-family: var(--texte); font-weight: 600; }
.graphe .barre-k { fill: var(--accent); }
.graphe .barre-k.depasse { fill: var(--chaud); }
.graphe .objectif { stroke: var(--encre-2); stroke-width: 1.5; stroke-dasharray: 4 4; }
.graphe .courbe { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.graphe .point { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.graphe .cible { fill: transparent; cursor: pointer; }
.graphe .cible:hover + .barre-k, .graphe .barre-k:hover { opacity: .85; }
.infobulle { position: fixed; z-index: 95; pointer-events: none; background: var(--encre); color: var(--fond); padding: 8px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 600; box-shadow: var(--ombre-2); transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap; }
.chiffres-cles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.chiffre { padding: 16px; }
.chiffre span { font-size: 12.5px; font-weight: 700; color: var(--encre-3); }
.chiffre b { display: block; font-family: var(--titre); font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; letter-spacing: -.02em; }
.chiffre small { color: var(--encre-3); font-size: 12.5px; }

/* ---------- mode cuisine ---------- */
.cuisson { position: fixed; inset: 0; z-index: 70; background: #12100d; color: #f5efe6; display: flex; flex-direction: column; animation: fondu .25s; }
.cuisson .haut { display: flex; align-items: center; gap: 12px; padding: calc(14px + env(safe-area-inset-top)) 16px 10px; }
.cuisson .haut .icone-bouton { background: #26221c; border-color: #3a342b; color: #f5efe6; }
.cuisson .haut .titre { flex: 1; min-width: 0; font-family: var(--titre); font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #c9bfb0; }
.cuisson .avance { display: flex; gap: 4px; padding: 0 16px; }
.cuisson .avance i { flex: 1; height: 4px; border-radius: 2px; background: #3a342b; transition: background .3s; }
.cuisson .avance i.fait { background: #8cc4a6; }
.cuisson .scene { flex: 1; overflow-y: auto; padding: 28px 22px; display: flex; flex-direction: column; justify-content: center; max-width: 900px; width: 100%; margin: 0 auto; }
.cuisson .num { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8cc4a6; margin-bottom: 14px; }
.cuisson .texte-etape { font-family: var(--titre); font-size: clamp(25px, 4.6vw, 42px); line-height: 1.32; font-weight: 500; letter-spacing: -.01em; }
.cuisson .texte-etape .duree { color: #f0b08f; border-bottom: 2px dotted #f0b08f; cursor: pointer; white-space: nowrap; }
.cuisson .ingr-etape { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.cuisson .ingr-etape span { background: #26221c; border: 1px solid #3a342b; border-radius: 999px; padding: 6px 12px; font-size: 14px; color: #d9cfbf; }
.cuisson .liste-courses-cuisson { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.cuisson .liste-courses-cuisson li { display: flex; gap: 14px; align-items: center; padding: 13px 4px; border-bottom: 1px solid #2c2720; font-size: 18px; cursor: pointer; }
.cuisson .liste-courses-cuisson li .case { border-color: #5a5145; }
.cuisson .liste-courses-cuisson li.coche { color: #7d7466; text-decoration: line-through; }
.cuisson .liste-courses-cuisson li.coche .case { background: #8cc4a6; border-color: #8cc4a6; }
.cuisson .liste-courses-cuisson li.coche .case svg { opacity: 1; transform: none; color: #10231a; }
.cuisson .liste-courses-cuisson b { min-width: 86px; font-variant-numeric: tabular-nums; }
.cuisson .bas { display: flex; gap: 12px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); max-width: 900px; width: 100%; margin: 0 auto; }
.cuisson .bas .bouton { flex: 1; height: 58px; font-size: 16px; }
.cuisson .bas .bouton.second { background: #26221c; border-color: #3a342b; color: #f5efe6; }
.cuisson .bas .bouton:not(.second) { background: #8cc4a6; color: #10231a; }
.minuteurs { display: flex; gap: 8px; padding: 0 16px 8px; overflow-x: auto; max-width: 900px; width: 100%; margin: 0 auto; }
.minuteur { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 999px; background: #26221c; border: 1px solid #3a342b; font-variant-numeric: tabular-nums; }
.minuteur b { font-size: 20px; font-weight: 800; }
.minuteur small { color: #a99f90; font-size: 12px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.minuteur button { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #3a342b; color: #f5efe6; display: grid; place-items: center; cursor: pointer; }
.minuteur button svg { width: 16px; height: 16px; }
.minuteur.fini { background: #b5532c; border-color: #e08a62; animation: sonne .6s ease-in-out infinite alternate; }
@keyframes sonne { to { transform: scale(1.05); } }
.minuteur.pause b { opacity: .5; }

/* les colonnes de grille ne s'élargissent jamais à cause d'un texte long */
.grille > *, .grille-jour > *, .colonnes-recette > *, .editeur > *, .jours > * { min-width: 0; }

/* en mode cuisine, les messages s'affichent en haut pour ne pas cacher les minuteurs */
body:has(.cuisson) .toasts { bottom: auto; top: calc(80px + env(safe-area-inset-top)); left: 50%; }
.choix-photo { display: grid; gap: 10px; padding-bottom: 6px; }
.choix-photo .bouton { padding-top: 16px; padding-bottom: 16px; font-size: 16px; }