/*
 * À table — adaptation de la DA originale au DOM de la version Cloudflare.
 * Source visuelle : Site GPT original, commit f209ead.
 * Cette feuille ne redéfinit que les composants réellement présents ici afin
 * d'éviter les collisions de classes/tokens avec l'ancien prototype.
 */

:root {
  --ink: #1f2824;
  --ink-2: #44514b;
  --muted: #68716d;
  --paper: #fffdf8;
  --line: #ded8ca;
  --green: #255342;
  --green-soft: #e5eee9;
  --orange: #9d452f;
  --orange-soft: #fbe8e3;
  --blue: #4f8391;
  --blue-soft: #e5eee9;
  --rose: #d65f76;
  --rose-soft: #feecef;
  --gold: #f0cf63;
  --gold-soft: #f7df86;
  --plum: #8c6a4f;
  --plum-soft: #efe9dc;
  --mint: #2f6a55;
  --mint-soft: #e5eee9;
  --surface-muted: #efe9dc;
  --shadow: 0 16px 45px rgb(45 52 48 / 8%);
  font-family: "Aptos", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: #f7f4ec;
}

* { box-sizing: border-box; }

html { background: #f7f4ec; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Aptos", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  background:
    radial-gradient(circle at 95% 0%, rgb(240 207 99 / 18%), transparent 22rem),
    #f7f4ec;
}

button, input, textarea, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgb(47 106 85 / 30%);
  outline-offset: 2px;
}

.app-shell { min-height: 100vh; }

/* Header éditorial original */
.topbar {
  position: static;
  z-index: 1;
  border: 0;
  background: transparent;
  backdrop-filter: none;
}

.topbar-inner {
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: 1.25rem 1rem .25rem;
  align-items: flex-end;
}

.topbar .brand-mark { display: none; }
.title-block { display: grid; gap: .15rem; min-width: 0; }

.eyebrow {
  display: block;
  margin: 0 0 .25rem;
  color: #9d452f;
  font-size: .77rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.topbar h1 {
  margin: 0;
  color: #1f2824;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 7vw, 3.4rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.045em;
}

.top-actions { margin-left: auto; }

.round-action {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #d8d2c5;
  border-radius: .8rem;
  background: #fffdf8;
  color: #255342;
  box-shadow: none;
}

.round-action.sync-on {
  border-color: #bdcbc5;
  background: #e5eee9;
  color: #255342;
}

main {
  width: min(100%, 1080px);
  max-width: none;
  margin: 0 auto;
  padding: 1rem 1rem 7.5rem;
}

.stack { gap: 1rem; }

.section-head h2,
.category-overview h2,
.plan-editor h2 {
  color: #1f2824;
  font-family: Georgia, "Times New Roman", serif;
}

.section-head h2 { font-size: 1.45rem; }

.muted {
  color: #616b66 !important;
  line-height: 1.5;
}

/* Actions */
.primary {
  min-height: 3rem;
  border: 0;
  border-radius: .9rem;
  background: #255342;
  color: #fff;
  font-weight: 800;
  box-shadow: none;
}

.primary:hover { opacity: .9; }
.primary.wide { margin-top: 1rem; }

.ghost {
  min-height: 2.5rem;
  border: 1px solid #d8d2c5;
  border-radius: .9rem;
  background: #fffdf8;
  color: #1f2824;
  font-weight: 750;
}

.ghost.small {
  min-height: 2.15rem;
  padding: .35rem .65rem;
  font-size: .75rem;
}

.icon-btn,
.replace-icon {
  border: 0;
  border-radius: .65rem;
  background: transparent;
  color: #69736e;
}

.icon-btn.active { background: #e5eee9; color: #255342; }

/* Accueil sans planning */
.welcome-card {
  min-height: 0;
  overflow: hidden;
  padding: 1.35rem;
  border: 1px solid #d9d3c6;
  border-radius: 1.5rem;
  background: #fffdf8;
  color: #1f2824;
  box-shadow: var(--shadow);
}

.welcome-card::before {
  content: none;
  display: none;
}

.welcome-card h2 {
  margin: .25rem 0 .55rem;
  font-family: Georgia, serif;
  font-size: clamp(1.65rem, 6vw, 2.35rem);
  line-height: 1.06;
  letter-spacing: -.025em;
}

.welcome-card p { color: #616b66; line-height: 1.5; }

.welcome-card .soft-kicker {
  padding: 0;
  border: 0;
  color: #9d452f;
  font-size: .77rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.welcome-card .food-illustration { display: none; }

/* Aujourd'hui */
.today-card {
  overflow: hidden;
  border: 1px solid #d9d3c6;
  border-radius: 1.5rem;
  background: #fffdf8;
  box-shadow: var(--shadow);
}

.today-card::before {
  content: "";
  display: block;
  height: 12rem;
  background:
    linear-gradient(180deg, transparent 48%, rgb(21 31 27 / 46%)),
    url("https://repas-simple.aseysen.chatgpt.site/meal-hero.png") center / cover no-repeat,
    #d9d3c6;
}

.today-main {
  display: block;
  width: 100%;
  padding: 1.25rem;
  text-align: left;
}

.today-main h3 {
  margin: .35rem 0 .55rem;
  font-family: Georgia, serif;
  font-size: clamp(1.65rem, 6vw, 2.35rem);
  line-height: 1.06;
  letter-spacing: -.025em;
}

.today-main > p { margin: 0; color: #616b66; line-height: 1.5; }

.today-topline { margin-bottom: .25rem; }

.day-label {
  padding: .42rem .72rem;
  border-radius: 999px;
  background: #f0cf63;
  color: #24332c;
  font-size: .78rem;
  font-weight: 850;
}

.category-chip {
  border: 0;
  background: transparent;
  color: #9d452f;
  font-size: .77rem;
  font-weight: 800;
}

.meal-footer {
  border-top: 1px solid #e2ddd2;
  background: #fffdf8;
  color: #68716d;
}

.meal-footer > span { font-size: .78rem; }

/* Badges et macros */
.macro-row,
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1rem;
}

.macro,
.badge-row > span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: .38rem .62rem;
  border: 0;
  border-radius: 999px;
  background: #f1ede4 !important;
  color: #44514b !important;
  font-size: .75rem;
  font-weight: 750;
}

.macro b { color: inherit; font-weight: 750; opacity: 1; }

/* Prochains repas */
.mini-meals,
.plan-editor-list { gap: .55rem; }

.mini-meal,
.plan-edit-row {
  overflow: hidden;
  border: 1px solid #ddd7ca;
  border-radius: 1rem;
  background: #fffdf8;
}

.mini-main { padding: .8rem; }

.mini-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: .65rem;
  background: #efe9dc;
  font-size: .9rem;
}

.mini-day,
.mini-meta,
.plan-day,
.plan-origin,
.plan-edit-main small {
  color: #707975;
  font-size: .72rem;
}

.mini-main h3,
.plan-edit-main strong { font-size: .9rem; }

.plan-editor {
  padding: .5rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.plan-edit-row { grid-template-columns: minmax(0,1fr) auto; }
.plan-edit-main { padding: .75rem; }
.plan-edit-actions { border-left: 0; background: transparent; }

/* Générateur */
.generator-card {
  padding: 1rem;
  border: 1px solid #d8d2c5;
  border-radius: 1.3rem;
  background: #fffdf8;
  box-shadow: none;
}

.generator-card h2 {
  margin: .15rem 0 .45rem;
  font-family: Georgia, serif;
  font-size: 1.45rem;
}

.meal-count-field {
  display: grid;
  gap: .45rem;
  margin: 1.1rem 0 .25rem;
}

.meal-count-field > span {
  color: #59635e;
  font-size: .8rem;
  font-weight: 800;
}

.meal-count-field select {
  width: 100%;
  min-height: 3rem;
  appearance: auto;
  border: 1px solid #d8d2c5;
  border-radius: .85rem;
  background: #fffdf8;
  color: #1f2824;
  padding: 0 .85rem;
  font-size: 1rem;
  font-weight: 700;
}

.principles { gap: .65rem; }

.principles > div {
  border: 1px solid #ded8ca;
  background: #fffdf8;
  box-shadow: none;
}

.principles > div > span {
  background: #e5eee9;
  color: #255342;
}

.principles strong { color: #1f2824; }

.principles p {
  color: #68716d !important;
  opacity: 1 !important;
}

/* Courses */
.shopping-group {
  overflow: hidden;
  padding: 0;
  border: 1px solid #ddd7ca;
  border-radius: 1.1rem;
  background: #fffdf8;
  box-shadow: none;
}

.shopping-title {
  margin: 0;
  padding: .78rem 1rem;
  border-bottom: 1px solid #e4ded2;
  background: #f2eee5;
}

.shopping-title h3 { margin: 0; font-size: .9rem; }
.shopping-dot { display: none; }

.shopping-item {
  min-height: 3.1rem;
  padding: .5rem 1rem;
  border-bottom: 1px solid #eee9df;
  background: #fffdf8;
}

.shopping-item:last-child { border-bottom: 0; }
.shopping-item.done { background: #faf8f2; color: #8d9490; }

/* Bibliothèque */
.recipe-toolbar {
  position: sticky;
  z-index: 5;
  top: 0;
  margin: -.2rem -.25rem 0;
  padding: .2rem .25rem .7rem;
  background: linear-gradient(#f7f4ec 80%, transparent);
}

.search-wrap {
  min-height: 3rem;
  border: 1px solid #d9d3c6;
  border-radius: 1rem;
  background: #fffdf8;
}

.search-wrap input { font-size: .9rem; }

.filter-chip {
  min-height: 2.25rem;
  border: 1px solid #d8d2c5 !important;
  border-radius: 999px;
  background: #fffdf8 !important;
  color: #58625d !important;
  font-size: .78rem;
  font-weight: 750;
}

.filter-chip.active {
  border-color: #255342 !important;
  background: #255342 !important;
  color: #fff !important;
}

.results-line { color: #747d79; font-size: .78rem; }

.recipe-grid { gap: .7rem; }

.recipe-card {
  position: relative;
  display: grid;
  grid-template-columns: .45rem minmax(0,1fr) auto;
  align-items: stretch;
  gap: 0;
  min-height: 5.25rem;
  overflow: hidden;
  border: 1px solid #ddd7ca;
  border-radius: 1.1rem;
  background: #fffdf8;
  box-shadow: none;
}

.recipe-card::before {
  content: "";
  background: var(--recipe-accent, #9d452f);
  border-radius: 0 .3rem .3rem 0;
}

.recipe-open {
  display: block;
  min-width: 0;
  padding: .85rem .4rem .85rem .8rem;
  text-align: left;
}

.recipe-art { display: none; }
.recipe-card-body { min-width: 0; padding: 0; }

.card-topline {
  margin-bottom: .2rem;
  color: #9d452f;
  font-size: .7rem;
  font-weight: 800;
}

.status {
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  color: #9d452f !important;
}

.recipe-card h3 {
  overflow: hidden;
  margin: 0 0 .2rem;
  color: #1f2824;
  font-size: .95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipe-card p { display: none; }

.recipe-card .macro-row.compact {
  display: block;
  margin: .12rem 0 0;
  color: #557065;
  font-size: .68rem;
}

.recipe-card .macro-row.compact .macro {
  display: inline;
  min-height: 0;
  padding: 0;
  background: transparent !important;
  color: #557065 !important;
  font-size: .68rem;
}

.recipe-card .macro-row.compact .macro + .macro::before { content: " · "; }

.favorite {
  position: static !important;
  top: auto !important;
  right: auto !important;
  align-self: center;
  justify-self: center;
  grid-column: 3;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 .35rem 0 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #77807c;
}

.favorite.on { background: #feecef; color: #a82f4a; }

/* Catégories */
.category-grid { gap: .7rem; }

.category-tile {
  min-height: 5rem;
  border: 1px solid #ddd7ca !important;
  border-radius: 1.1rem;
  background: #fffdf8 !important;
  box-shadow: none;
}

.category-tile strong { color: #1f2824; }
.category-tile small { color: #747d79; }
.category-icon { font-size: 1.35rem; }

/* Modales / bottom sheets */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgb(0 0 0 / 50%);
  backdrop-filter: blur(5px);
}

.modal-sheet,
.replace-sheet,
.install-sheet {
  display: block;
  position: relative;
  width: 100dvw;
  min-width: 100dvw;
  max-width: 100dvw;
  max-height: 92dvh;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 1.4rem 1.4rem 0 0;
  background: #fffdf8;
  box-shadow: 0 -20px 60px rgb(21 28 24 / 22%);
  transform: none;
  overscroll-behavior: contain;
}

.modal-sheet { padding: 0; }
.form-sheet,
.replace-sheet,
.install-sheet { padding: 1.25rem; }

.modal-handle {
  position: sticky;
  z-index: 4;
  top: .5rem;
  width: 44px;
  height: 5px;
  margin: .5rem auto -.4rem;
  border-radius: 999px;
  background: #ded8ca;
}

.modal-hero {
  display: block !important;
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 2rem 3.25rem 1rem 1.25rem;
  background: transparent !important;
}

.modal-art { display: none !important; }

.modal-hero-copy {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.modal-hero-copy h2,
.replace-head h2,
.form-head h2 {
  max-width: 100%;
  margin: .55rem 0 .5rem;
  color: #1f2824;
  font-family: Georgia, serif;
  font-size: clamp(1.75rem, 7.5vw, 2.15rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.025em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.modal-hero-copy p,
.replace-head p {
  max-width: 38rem;
  margin: 0;
  color: #66706b;
  font-size: .9rem;
  line-height: 1.45;
}

.close {
  position: absolute;
  top: 1.2rem;
  right: 1rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #5f6863;
  font-size: 1.7rem;
  opacity: .85;
}

.modal-content {
  width: 100%;
  min-width: 0;
  padding: 0 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
}

.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  margin: 1rem 0 1.25rem;
}

.recipe-section {
  margin-top: 0;
  padding: 1.15rem 0;
  border-top: 1px solid #e2ddd2;
}

.recipe-section .section-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .75rem;
  margin: 0 0 .75rem;
}

.recipe-section .section-title-row h3 {
  margin: 0;
  color: #1f2824;
  font-family: Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.15;
  text-align: left;
}

.section-number,
.steps li > span {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: .6rem;
  background: #f0cf63 !important;
  color: #1f2824 !important;
  font-size: .78rem;
  font-weight: 900;
}

.ingredients {
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid #ded8ca;
  border-radius: 1rem;
  list-style: none;
}

.ingredients li {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 1rem;
  padding: .72rem .9rem;
  border-top: 1px dashed #e4ded3;
  color: #424d48;
  font-size: .9rem;
}

.ingredients li:first-child { border-top: 0; }
.ingredients li span { min-width: 0; }
.ingredients strong { font-size: .83rem; white-space: nowrap; }

.steps {
  display: grid;
  gap: .85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: .75rem;
  align-items: start;
}

.steps p {
  margin: .15rem 0 0;
  color: #46514c;
  font-size: .9rem;
  line-height: 1.5;
}

.current-choice {
  border-color: #ded8ca;
  background: #fffdf8 !important;
}

.random-choice {
  border-radius: .9rem;
  background: #255342;
}

.replace-search,
.replace-recipe {
  border-color: #d8d2c5;
  background: #fffdf8;
}

.replace-recipe { border-radius: 1rem; }

/* Navigation mobile */
.bottom-nav {
  position: fixed;
  z-index: 30;
  left: .75rem;
  right: .75rem;
  bottom: max(.75rem, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 4.4rem;
  padding: .4rem;
  border: 1px solid rgb(216 210 197 / 90%);
  border-radius: 1.25rem;
  background: rgb(255 253 248 / 94%);
  box-shadow: 0 14px 45px rgb(34 43 39 / 18%);
  backdrop-filter: blur(16px);
}

.bottom-nav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .22rem;
  min-height: 0;
  padding: .35rem .15rem;
  border: 0;
  border-radius: .9rem;
  background: transparent;
  color: #76807b;
  font-size: .66rem;
  font-weight: 800;
}

.bottom-nav button > span {
  display: grid;
  place-items: center;
  line-height: 1;
}

.bottom-nav button svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bottom-nav button small { font-size: .66rem; }

.bottom-nav button.active {
  background: #255342;
  color: #fff;
}

/* Carte d'installation */
.install-card {
  border: 1px solid #cfd9d4;
  border-radius: 1.2rem;
  background: #e5eee9;
  box-shadow: none;
}

.install-icon,
.big-install-icon {
  background: #255342;
  color: #f0cf63;
  box-shadow: none;
}

@media (min-width: 700px) {
  .topbar-inner { padding: 2rem 2rem .3rem; }
  main { padding: 1.2rem 2rem 7.5rem; }

  .today-card {
    display: grid;
    grid-template-columns: minmax(16rem, .8fr) 1.2fr;
    min-height: 23rem;
  }

  .today-card::before {
    height: 100%;
    grid-row: 1 / 3;
  }

  .today-main { align-self: center; padding: 2rem; }
  .meal-footer { grid-column: 2; }
  .recipe-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

  .modal-backdrop { align-items: center; padding: 1rem; }

  .modal-sheet,
  .install-sheet,
  .replace-sheet {
    width: min(43rem, calc(100% - 2rem));
    min-width: 0;
    max-width: 43rem;
    max-height: 88dvh;
    margin: auto;
    border-radius: 1.35rem;
  }

  .form-sheet,
  .replace-sheet {
    width: min(58rem, calc(100% - 2rem));
    max-width: 58rem;
  }
}

@media (min-width: 1120px) {
  body::before {
    content: "";
    position: fixed;
    z-index: 0;
    inset: 0 auto 0 0;
    width: 15rem;
    border-right: 1px solid #ded8ca;
    background: rgb(255 253 248 / 72%);
    backdrop-filter: blur(18px);
  }

  .app-shell {
    display: grid;
    grid-template-columns: 15rem minmax(0,1fr);
  }

  .topbar { grid-column: 2; }
  .topbar-inner { padding: 2.5rem 3rem .3rem; }
  main { grid-column: 2; padding: 1.2rem 3rem 3rem; }
  .topbar h1 { font-size: 3.6rem; }

  .bottom-nav {
    top: 7rem;
    left: 1rem;
    right: auto;
    bottom: auto;
    grid-template-columns: 1fr;
    width: 13rem;
    min-height: 0;
    padding: .3rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .bottom-nav::before {
    content: "À table\A Nos repas, simplement.";
    position: absolute;
    top: -5.2rem;
    left: .55rem;
    white-space: pre;
    color: #6f7672;
    font-size: .78rem;
    line-height: 1.6;
  }

  .bottom-nav button {
    flex-direction: row;
    justify-content: flex-start;
    gap: .8rem;
    min-height: 3rem;
    padding: 0 .9rem;
    font-size: .83rem;
  }

  .bottom-nav button small { font-size: .83rem; }
  .bottom-nav button.active { background: #e5eee9; color: #255342; }
}

@media (max-width: 390px) {
  .modal-hero {
    display: block !important;
    grid-template-columns: none !important;
    padding-right: 3rem;
  }

  .modal-hero-copy {
    width: 100%;
    min-width: 0;
  }

  .modal-hero-copy h2 {
    font-size: 1.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}