/* FullHouse — feuille de l'application, mobile d'abord.
   Les jetons et les composants `.ui-*` sont dans ui.css (kit d'interface, chargé avant) :
   ici, les anciens noms (`.button`, `.panel`, `.state`, `.notice`, `.option`…) prennent le
   même rendu que le kit, déclarés côte à côte avec les sélecteurs `.ui-*` pour ne rien
   casser dans les gabarits existants, puis les écrans qui n'ont pas encore été refaits. */

:root {
  /* Anciens noms, alignés sur les jetons du kit. */
  --inox: var(--background);
  --assiette: var(--card);
  --bouteille: var(--primary);
  --bouteille-fonce: var(--primary-hover);
  --moutarde: var(--accent);
  --encre-douce: var(--muted-foreground);
  --filet: var(--border);
  --alerte: var(--destructive);
  --alerte-fond: var(--destructive-soft);
  --ok-fond: var(--success-soft);
  --moutarde-fond: var(--accent-soft);
  --gutter: var(--ui-gutter);
  /* Hauteur de la barre de navigation du bas (mobile, application configurée) : 0 sans elle. Tout ce
     qui se colle en bas de l'écran se pose juste dessus, sans blanc ni chevauchement. */
  --tabbar-h: 0px;
}
.has-nav { --tabbar-h: calc(4rem + env(safe-area-inset-bottom)); }

.nowrap { white-space: nowrap; }
.lead { color: var(--muted-foreground); margin-bottom: 1.5rem; max-width: 36em; }
.lead strong { color: var(--foreground); font-weight: 600; }

/* ---------- en-tête ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.5rem; padding: 0 var(--gutter);
  background: rgba(250, 250, 250, 0.92); border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.brand { display: inline-flex; align-items: center; gap: 0.625rem; font-family: var(--font-heading); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; text-decoration: none; }
.brand-mark { width: 2rem; height: 2rem; flex: none; border-radius: var(--radius-md); }
.top-nav { display: flex; align-items: center; gap: 0.75rem; min-height: 3.5rem; }
.top-nav .ui-tabs { display: none; align-self: stretch; border-bottom: 0; }
/* Les onglets de l'en-tête : le rendu de `.ui-tab` (la classe `top-tab` est attendue par les tests). */
.top-tab {
  display: none; align-items: center; justify-content: center; gap: 0.5rem; flex: none;
  min-height: 3.5rem; padding: 0.5rem 0.75rem;
  font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; line-height: 1.25; white-space: nowrap;
  color: var(--muted-foreground); background: none; border: 0; border-bottom: 2px solid transparent;
  text-decoration: none; cursor: pointer;
}
.top-tab:hover { color: var(--foreground); }
.top-tab[aria-current="page"] { color: var(--foreground); border-bottom-color: var(--primary); }
.top-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--ring); border-radius: var(--radius-sm); }
.top-nav form { margin: 0; }
.top-link { display: inline-flex; align-items: center; min-height: var(--ui-control); padding: 0 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); text-decoration: none; border-radius: var(--radius-md); }
.top-link:hover { color: var(--foreground); background: var(--muted); }
.avatar { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.avatar[aria-current="page"] { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); }

/* ---------- menu de l'application (mobile : barre du bas) ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  box-sizing: border-box; height: var(--tabbar-h); align-content: start;
  padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94); border-top: 1px solid var(--border);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.tabbar a { display: grid; justify-items: center; gap: 0.125rem; padding: 0.375rem 0.125rem; min-height: 3.25rem; font-size: 0.6875rem; font-weight: 500; color: var(--muted-foreground); text-decoration: none; border-radius: var(--radius-md); -webkit-tap-highlight-color: transparent; }
.tabbar svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a[aria-current="page"] { color: var(--primary); font-weight: 600; }
.tabbar a[aria-current="page"] svg { stroke-width: 2.25; }
.has-nav main { padding-bottom: calc(var(--tabbar-h) + 1.5rem); }

/* ---------- gabarits de page ---------- */
main { width: 100%; padding: 1.5rem var(--gutter) 4rem; margin: 0 auto; }
main.narrow { max-width: 28rem; }
main.wide { max-width: 72rem; }

/* ---------- formulaires (anciens noms → rendu du kit) ---------- */
.stack { display: grid; gap: 1rem; }
label { display: grid; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; line-height: 1.25; }
input, textarea, select {
  display: block; width: 100%;
  font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 1.4; color: var(--foreground);
  background: var(--card); border: 1px solid var(--input); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
input, select { min-height: var(--ui-control); padding: 0.375rem 0.75rem; }
textarea { min-height: 5rem; padding: 0.5rem 0.75rem; resize: vertical; }
input:hover, textarea:hover, select:hover { border-color: #A1A1AA; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring); border-radius: var(--radius-md); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--destructive); }
input:disabled, textarea:disabled, select:disabled { opacity: 0.5; cursor: not-allowed; background: var(--muted); }
input[type="checkbox"], input[type="radio"] { width: 1rem; min-height: 0; height: 1rem; padding: 0; margin: 0; box-shadow: none; accent-color: var(--primary); }
input[type="file"] { padding: 0.375rem 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); }
input[type="file"]::file-selector-button { margin-right: 0.75rem; padding: 0.125rem 0.5rem; font: inherit; font-weight: 500; color: var(--foreground); background: transparent; border: 0; cursor: pointer; }
select {
  appearance: none; -webkit-appearance: none; padding-right: 2.25rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center;
}
input.code { font-size: 1.75rem; font-weight: 700; letter-spacing: 0.3em; text-align: center; min-height: 3.25rem; }
.hint { font-weight: 400; font-size: 0.875rem; line-height: 1.45; color: var(--muted-foreground); }
@media (min-width: 760px) {
  input, textarea, select { font-size: 0.875rem; }
  input.code { font-size: 1.75rem; }
}

/* Le bouton historique garde sa largeur pleine (formulaires d'une colonne) et la hauteur
   « lg » du kit ; `.button-quiet` = « outline », `.button-small` = taille normale, largeur auto. */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; min-height: var(--ui-control-lg); padding: 0.625rem 1.25rem;
  font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500; line-height: 1.25; text-decoration: none; cursor: pointer;
  color: var(--primary-foreground); background: var(--primary);
  border: 1px solid transparent; border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  -webkit-tap-highlight-color: transparent;
}
.button:hover { background: var(--primary-hover); }
.button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); }
.button-quiet { color: var(--foreground); background: var(--card); border-color: var(--input); }
.button-quiet:hover { background: var(--muted); }
.button-small { width: auto; min-height: var(--ui-control); padding: 0.5rem 1rem; font-size: 0.875rem; }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.5; pointer-events: none; cursor: not-allowed; }

button.link {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.or { display: flex; align-items: center; gap: 0.75rem; margin: 1.125rem 0; color: var(--muted-foreground); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.aside { margin: 1.5rem 0 0; font-size: 0.875rem; color: var(--muted-foreground); }
.aside a, .aside button.link { color: var(--foreground); font-weight: 500; }
.back { font-size: 0.875rem; margin-bottom: 1.25rem; }

/* Messages : même rendu que .ui-alert. */
.notice {
  padding: 0.875rem 1rem; margin-bottom: 1.25rem; font-size: 0.875rem; line-height: 1.45;
  color: #14532D; background: var(--success-soft); border: 1px solid #9CC7AF; border-radius: var(--radius-lg);
}
.notice-error { color: var(--destructive); background: var(--destructive-soft); border-color: rgba(220, 38, 38, 0.5); font-weight: 500; }

/* ---------- listes ---------- */
.rows { list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px solid var(--border); }
.rows li { border-bottom: 1px solid var(--filet); }
.rows a { display: grid; gap: 2px; padding: 16px 0; text-decoration: none; }
.rows a:hover .row-title { text-decoration: underline; text-underline-offset: 3px; }
.row-title { font-weight: 700; font-size: 1.1rem; }
.row-sub { color: var(--encre-douce); font-size: 0.95rem; }
.more summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.more[open] summary { margin-bottom: 16px; }

/* ---------- vitrine ---------- */
.hero { display: grid; gap: 36px; padding-top: 16px; }
.hero h1 { font-size: clamp(2.6rem, 11vw, 4.75rem); line-height: 0.98; letter-spacing: -0.035em; margin-bottom: 20px; max-width: 9em; }
.hero .lead { font-size: 1.125rem; }
.hero .button { max-width: 20rem; }

.board {
  margin: 0; padding: 22px 20px 18px;
  background: var(--bouteille); color: #FFFFFF; border-radius: var(--radius-xl);
}
.board-title { font-weight: 700; font-size: 1.15rem; margin-bottom: 10px; }
.board-rows { list-style: none; margin: 0; padding: 0; }
.board-rows li {
  display: grid; grid-template-columns: 3.2em 1fr auto; align-items: baseline; gap: 10px;
  padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.board-rows .day { font-weight: 700; }
.board-rows .what { line-height: 1.3; }
.board-rows .kind { font-size: 0.8rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.4); white-space: nowrap; }
.board-rows .is-closed { color: rgba(255, 255, 255, 0.6); }
.board-rows .is-today .day { color: var(--moutarde); }
.board-rows .is-today .kind { background: var(--moutarde); border-color: var(--moutarde); color: var(--bouteille); }
.board-foot { margin: 14px 0 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.72); }

.steps { margin-top: 56px; max-width: 40rem; }
.steps h2 { font-size: 1.6rem; letter-spacing: -0.02em; margin-top: 0; }
.steps ol { margin: 0; padding-left: 1.3em; display: grid; gap: 14px; }
.steps li::marker { font-weight: 800; }
.steps li { color: var(--encre-douce); padding-left: 6px; }
.steps strong { color: var(--bouteille); }

/* ---------- admin ---------- */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 28px; margin: 20px 0 0; border-top: 1px solid var(--border); }
.figures div { padding: 14px 0; border-bottom: 1px solid var(--filet); }
.figures dt { font-size: 0.9rem; color: var(--encre-douce); }
.figures dd { margin: 0; font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.inline-actions { color: var(--encre-douce); font-size: 0.95rem; margin-bottom: 12px; }
.table-wrap { overflow-x: auto; margin-top: 14px; }
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th, td { text-align: left; padding: 0.625rem 0.875rem 0.625rem 0; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-weight: 500; color: var(--muted-foreground); white-space: nowrap; }
td { font-variant-numeric: tabular-nums; }

/* ---------- écrans larges ---------- */
@media (min-width: 760px) {
  :root { --gutter: 2rem; }
  h1 { font-size: 2.25rem; }
  .tabbar { display: none; }
  .has-nav { --tabbar-h: 0px; }
  .top { min-height: 4rem; }
  .top-nav, .top-tab { min-height: 4rem; }
  .top-nav .ui-tabs { display: flex; }
  .top-tab { display: inline-flex; }
  .top-nav { gap: 1rem; }
  .has-nav main { padding-bottom: 4rem; }
  main.narrow { padding-top: 3.5rem; }
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 56px; padding-top: 40px; }
  .board { padding: 28px 28px 22px; }
  .steps { margin-top: 88px; }
}

@media (prefers-reduced-motion: no-preference) {
  .button, input, textarea, select { transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease; }
}

/* ---------- questionnaire ---------- */
.progress { height: 6px; background: var(--filet); border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.progress span { display: block; height: 100%; background: var(--bouteille); border-radius: 999px; }
.step-count { font-size: 0.875rem; color: var(--encre-douce); margin-bottom: 20px; }

.sr-only, .sr-label { position: relative; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-label { font-size: 0; }  /* l'intitulé est déjà le titre de la page ; il reste lu par les lecteurs d'écran */
.sr-label input, .sr-label textarea { font-size: 16px; }
@media (min-width: 760px) { .sr-label input, .sr-label textarea { font-size: 0.875rem; } }

.stack-tight { gap: 10px; }
fieldset.options { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.ui-option, .option {
  display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer;
  padding: 0.875rem 1rem; min-height: 3.25rem; font-size: 0.875rem; font-weight: 400; line-height: 1.45;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.ui-option:hover, .option:hover { border-color: #A1A1AA; }
.ui-option input, .option input { width: 1rem; min-height: 1rem; height: 1rem; margin: 0.1875rem 0 0; padding: 0; flex: none; accent-color: var(--primary); }
.ui-option:has(input:checked), .option:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.ui-option:has(input:focus-visible), .option:has(input:focus-visible) { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); }
.ui-option input:focus-visible, .option input:focus-visible { outline: none; }
.ui-option-text, .option-text { display: grid; gap: 0.125rem; min-width: 0; }
.ui-option-title, .option-title { font-weight: 500; font-size: 0.9375rem; color: var(--foreground); }
.ui-option-sample, .option-sample { color: var(--muted-foreground); font-size: 0.875rem; line-height: 1.4; }

table.hours { font-size: 1rem; }
table.hours th[scope="col"] { text-align: center; padding-right: 0; }
table.hours th[scope="row"] { font-weight: 600; color: var(--bouteille); border-bottom: 1px solid var(--filet); white-space: nowrap; }
table.hours td { text-align: center; padding: 6px 0; }
.tick { display: flex; align-items: center; justify-content: center; min-height: 44px; cursor: pointer; }
.tick input { width: 1.25rem; min-height: 1.25rem; height: 1.25rem; padding: 0; accent-color: var(--primary); }

button.skip { justify-self: center; color: var(--encre-douce); font-size: 0.95rem; min-height: 44px; }

/* ---------- surfaces ---------- */
.panel { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); padding: 1.25rem; margin-top: 1rem; }
.panel h2 { margin: 0 0 0.75rem; font-size: 1.125rem; }
.panel > p { color: var(--muted-foreground); font-size: 0.9375rem; }
.panel > :last-child, .panel form > :last-child { margin-bottom: 0; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.panel-head a { font-size: 0.875rem; font-weight: 500; }
.panel-action { margin: 0.875rem 0 0; }
.panel-ask { background: var(--accent-soft); border-color: var(--accent); }
.panel-ask > p { color: var(--foreground); }
.plain { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.js-only { display: none; }
.js .js-only { display: inline-flex; }
label.check { display: flex; align-items: center; gap: 0.625rem; font-weight: 500; font-size: 0.875rem; cursor: pointer; min-height: var(--ui-control); }
label.check input { width: 1rem; min-height: 1rem; height: 1rem; padding: 0; flex: none; accent-color: var(--primary); }

/* ---------- fiche du restaurant ---------- */
.enseigne { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--bouteille); color: #FFFFFF; border-radius: var(--radius-xl); }
.enseigne h1 { margin: 0 0 4px; font-size: 1.7rem; color: #FFFFFF; overflow-wrap: anywhere; }
.enseigne p { margin: 0; color: rgba(255, 255, 255, 0.8); font-size: 0.95rem; }
.enseigne-logo { margin: 0; flex: none; display: grid; gap: 8px; justify-items: center; }
.enseigne-logo label { display: grid; place-items: center; width: 76px; height: 76px; border-radius: var(--radius-lg); overflow: hidden; }
.enseigne-logo img { width: 100%; height: 100%; object-fit: contain; background: var(--assiette); padding: 6px; }
.enseigne-nologo { display: grid; place-items: center; width: 100%; height: 100%; text-align: center; font-size: 0.8rem; font-weight: 600; line-height: 1.25; border: 1.5px dashed rgba(255, 255, 255, 0.6); border-radius: var(--radius-lg); }
.enseigne-logo label:hover .enseigne-nologo { border-color: #FFFFFF; }

.steps-list { list-style: none; margin: 0 0 16px; padding: 0; }
.steps-list li + li { border-top: 1px solid var(--filet); }
.steps-list a, .step-locked { display: flex; align-items: center; gap: 14px; padding: 12px 0; text-decoration: none; }
.steps-list li:first-child a, .steps-list li:first-child .step-locked { padding-top: 0; }
.step-locked { opacity: 0.55; }
.step-mark { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.is-done .step-mark { background: var(--bouteille); border-color: var(--bouteille); color: #FFFFFF; }
.is-current .step-mark { background: var(--moutarde); border-color: var(--moutarde); }
.step-body { display: grid; }
.step-title { font-weight: 700; }
.step-text { color: var(--encre-douce); font-size: 0.95rem; }
.steps-list a:hover .step-title { text-decoration: underline; text-underline-offset: 3px; }

.strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.strip img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); background: var(--filet); }
.score-compact { margin-top: 16px; }

.answers { list-style: none; margin: 0; padding: 0; }
.answers li + li { border-top: 1px solid var(--filet); }
.answers a { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 13px 0; text-decoration: none; }
.answers li:last-child a { padding-bottom: 0; }
.answer-label { grid-column: 1; font-size: 0.875rem; color: var(--encre-douce); }
.answer-value { grid-column: 1; font-weight: 500; font-size: 0.9375rem; overflow-wrap: anywhere; }
.answer-value.empty { font-weight: 400; color: var(--encre-douce); }
.answers .edit { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 0.875rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
h1 + form { margin-top: 24px; }
table.hours th[scope="row"] { vertical-align: middle; }

/* ---------- jauge ---------- */
/* La note seule (revue du 15 octobre au soir) : chiffre, niveau, jauge, un bouton. */
.score-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.score-head p { margin: 0; }
.score-figure { font-size: 0.95rem; color: var(--encre-douce); }
.score-figure strong { font-size: 2.5rem; font-weight: 800; line-height: 1; color: var(--bouteille); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.score-level { font-weight: 600; }
.meter { height: 10px; margin-top: 12px; background: var(--filet); border-radius: 999px; overflow: hidden; }
.meter span { display: block; height: 100%; min-width: 4px; background: var(--moutarde); border-radius: 999px; }
.score-add { margin-top: 14px; }
.score-upload { margin: 16px 0 0; }
.logo-panel { display: grid; gap: 14px; }
.logo-panel p { margin: 0; color: var(--encre-douce); }
.logo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.logo-actions form { margin: 0; }
.logo-actions .link { font-size: 0.9rem; color: var(--encre-douce); }

/* ---------- photos ---------- */
main.medium { max-width: 46rem; }
.no-js-only { display: inline-flex; }
.js .no-js-only { display: none; }

.upload { display: grid; gap: 12px; margin-bottom: 8px; }
.upload-button { position: relative; cursor: pointer; }
.upload-button input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; margin: 0;
  opacity: 0; cursor: pointer; border: 0;
}
.upload-button:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.upload.is-busy .upload-button { opacity: 0.6; pointer-events: none; }
.upload-status, .save-status { margin: 0; font-size: 0.95rem; color: var(--encre-douce); }
.upload-status:empty, .save-status:empty { display: none; }
.upload-status.is-error, .save-status.is-error { color: var(--alerte); font-weight: 600; }
.photo-count { font-size: 0.95rem; color: var(--encre-douce); margin: 20px 0 0; }

.photos { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--border); }
.photos:empty { border-top: 0; }
.photo { display: grid; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--filet); scroll-margin-top: 16px; }
.photo-thumb { display: block; }
.photo-thumb img { display: block; width: 100%; height: auto; max-height: 240px; object-fit: cover; border-radius: var(--radius); background: var(--filet); }
.photo-form { display: grid; gap: 14px; }

fieldset.chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
fieldset.chips legend { padding: 0; margin-bottom: 0.5rem; font-weight: 500; font-size: 0.875rem; }
.chip { display: block; font-weight: 600; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; min-height: 0; height: 1px; padding: 0; }
.chip span {
  display: inline-flex; align-items: center; min-height: var(--ui-control-sm); padding: 0.375rem 0.875rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px; font-size: 0.875rem; font-weight: 500;
}
.chip:hover span { border-color: var(--encre-douce); }
.chip input:checked + span { background: var(--bouteille); border-color: var(--bouteille); color: #FFFFFF; }
.chip input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Les champs propres à une catégorie n'apparaissent que pour elle. */
.field-dish, .field-consent { display: none; }
.photo-form:has(input[value="plat"]:checked) .field-dish { display: grid; }
.photo-form:has(input[value="equipe"]:checked) .field-consent { display: flex; }
.field-consent { align-items: flex-start; gap: 12px; font-weight: 400; cursor: pointer; }
.field-consent input { width: 1rem; min-height: 1rem; height: 1rem; padding: 0; margin: 0.1875rem 0 0; flex: none; accent-color: var(--primary); }
.photo-delete { justify-self: start; font-size: 0.9rem; color: var(--encre-douce); }
.after-upload { margin-top: 28px; }

.logo { width: 72px; height: 72px; object-fit: contain; background: var(--assiette); border: 1px solid var(--filet); border-radius: var(--radius); padding: 6px; }

@media (min-width: 760px) {
  main.medium { padding-top: 56px; }
  .photo { grid-template-columns: 220px 1fr; column-gap: 24px; }
  .photo-thumb { grid-row: 1 / span 2; }
  .photo-thumb img { max-height: 220px; }
  .upload-button { max-width: 20rem; }
}

/* ---------- analyse ---------- */
.ardoise { margin: 0 0 4px; padding: 22px 20px; background: var(--bouteille); color: #FFFFFF; border-radius: var(--radius-xl); font-size: 1.15rem; line-height: 1.45; font-weight: 500; }
.panel h3 { font-size: 0.95rem; margin: 0 0 6px; color: var(--encre-douce); font-weight: 600; }
.facts { margin: 0; display: grid; gap: 12px; }
.facts dt { font-size: 0.875rem; color: var(--encre-douce); }
.facts dd { margin: 0; }
.swatches { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px 20px; }
.swatches li { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--filet); flex: none; }
.do-dont { display: grid; gap: 20px; margin-top: 18px; }
.dishes, .themes { list-style: none; margin: 0; padding: 0; }
.dishes li { display: grid; grid-template-columns: 88px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--filet); }
.dishes li:first-child, .themes li:first-child { border-top: 0; padding-top: 0; }
.dishes li:last-child, .themes li:last-child { padding-bottom: 0; }
.dishes li.no-photo { grid-template-columns: 1fr; }
.dishes img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--radius); background: var(--filet); }
.dishes p { margin: 4px 0 0; color: var(--encre-douce); font-size: 0.95rem; }
.themes li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--filet); }
.themes span { color: var(--encre-douce); font-size: 0.95rem; }

/* L'action de l'écran reste sous le pouce pendant toute la lecture (revue du 18 octobre : plus de blanc
   dessous, plus de décalage). Elle se colle exactement au bas de l'écran, ou juste au-dessus de la barre
   de navigation du bas quand elle est là (--tabbar-h) ; la zone de sécurité de l'iPhone est dans sa
   marge intérieure quand elle touche le bas de l'écran, dans la barre de navigation sinon. Son fond
   s'étend sur toute la largeur de l'écran (ombre portée découpée), sans débordement horizontal. En
   fin de page, la page s'arrête sous elle : pas de marge de <main> en dessous. */
.action-bar {
  position: sticky; bottom: var(--tabbar-h); z-index: 2;
  margin: 24px calc(-1 * var(--gutter)) 0; padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  background: rgb(250, 250, 250);
  box-shadow: 0 0 0 100vmax rgb(250, 250, 250);
  clip-path: inset(-1px -100vmax 0 -100vmax);
}
.action-bar::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--filet); box-shadow: 0 0 0 100vmax var(--filet); clip-path: inset(0 -100vmax); }
.has-nav .action-bar { padding-bottom: 14px; }
/* La page qui finit par la barre : plus de marge sous elle, et sur une page courte, la barre descend
   quand même jusqu'en bas (main occupe toute la hauteur sous l'en-tête). */
main:has(> .action-bar:last-child) {
  display: flex; flex-direction: column;
  min-height: calc(100vh - 3.5rem); min-height: calc(100dvh - 3.5rem);
  padding-bottom: var(--tabbar-h);
}
main:has(> .action-bar:last-child) > .action-bar:last-child { margin-top: auto; }
main:has(> .action-bar:last-child) > :nth-last-child(2) { margin-bottom: 24px; }
@media (min-width: 760px) {
  main:has(> .action-bar:last-child) { min-height: calc(100vh - 4rem); min-height: calc(100dvh - 4rem); }
}
.action-bar form { margin: 0; }
.action-bar .hint { margin: 8px 0 0; text-align: center; }

/* ---------- calendrier ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 12px; }
.page-head h1 { margin: 0; }
.week-note { margin: 12px 0; color: var(--encre-douce); font-size: 0.95rem; }
.week-note.is-error { color: var(--alerte); font-weight: 600; }
.week form { margin-top: 12px; }
.slots { list-style: none; margin: 0; padding: 0; }
.slots li + li { border-top: 1px solid var(--filet); }
.slots a { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; padding: 12px 0; text-decoration: none; }
.slots li:first-child a { padding-top: 0; }
.slots img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-md); background: var(--filet); }
.slot-text { display: grid; gap: 2px; min-width: 0; }
.slot-day { font-size: 0.875rem; color: var(--encre-douce); }
.slot-text strong { overflow-wrap: anywhere; }
.slots a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.slot-state { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.state { display: inline-flex; align-items: center; padding: 0.125rem 0.625rem; border-radius: var(--radius-md); border: 1px solid var(--border); font-size: 0.75rem; font-weight: 600; line-height: 1.25; white-space: nowrap; color: var(--foreground); }
.state-proposed { background: var(--accent-soft); border-color: var(--accent); }
.state-approved { background: var(--success-soft); border-color: #9CC7AF; color: #14532D; }
.state-published { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.state-video { border-color: var(--primary); }

.line summary { cursor: pointer; font-weight: 700; font-size: 1.15rem; }
.line[open] summary { margin-bottom: 12px; }
.line-pillars { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.line-pillars li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.line-count { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--moutarde); font-weight: 800; font-variant-numeric: tabular-nums; }
.line-what { display: block; color: var(--encre-douce); font-size: 0.95rem; }

/* ---------- une publication ---------- */
.post-frame { background: var(--assiette); border: 1px solid var(--filet); border-radius: var(--radius-xl); overflow: hidden; }
.post-frame img, .post-frame video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--filet); }
.post-frame-tall img, .post-frame-tall video { aspect-ratio: 9 / 16; }
.post-note { margin: 10px 0 0; font-size: 0.9rem; color: var(--encre-douce); }
.post-note.is-error { color: var(--alerte); font-weight: 600; }
.post-brief { margin: 0; padding: 12px 14px; background: var(--assiette); border: 1px solid var(--filet); border-radius: var(--radius); }
.post-brief .hint { display: block; }
.post-form { display: grid; gap: 10px; }
.post-warning { margin: 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--alerte-fond); color: var(--alerte); font-size: 0.9rem; font-weight: 600; }
.post-why { margin: 0; color: var(--encre-douce); font-size: 0.95rem; }
.post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.button[disabled] { opacity: 0.5; cursor: not-allowed; }
.inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.inline-form label { flex: 1 1 12rem; }
.inline-form input { min-width: 0; }

/* ---------- créer une publication ---------- */
fieldset.picker { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
fieldset.picker legend { padding: 0; margin-bottom: 0.5rem; font-weight: 500; font-size: 0.875rem; }
.pick { position: relative; display: block; cursor: pointer; border-radius: var(--radius-lg); overflow: hidden; border: 2px solid var(--filet); background: var(--assiette); aspect-ratio: 1; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; }
.pick img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pick span { display: grid; place-items: center; height: 100%; padding: 8px; text-align: center; font-weight: 600; font-size: 0.9rem; }
.pick:has(input:checked) { border-color: var(--bouteille); box-shadow: 0 0 0 2px var(--bouteille); }
.pick:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
input[type="date"] { min-height: var(--ui-control); }

/* ---------- compte ---------- */
.field-static { margin: 0; display: grid; gap: 2px; }
.logout { margin-top: 24px; }

.admin-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.admin-actions form { margin: 0; }
.key-test { margin: 14px 0 0; overflow-wrap: anywhere; }
.key-test .hint { display: block; }

.progress-busy span { width: 40%; }
@media (prefers-reduced-motion: no-preference) {
  .progress-busy span { animation: glisse 1.6s ease-in-out infinite alternate; }
  @keyframes glisse { from { margin-left: 0; } to { margin-left: 60%; } }
}
@media (min-width: 760px) {
  .panel { padding: 24px; }
  .enseigne { padding: 28px; gap: 22px; }
  .enseigne h1 { font-size: 2.2rem; }
  .enseigne-logo label { width: 96px; height: 96px; }
  .steps-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
  .steps-list li + li { border-top: 0; }
  .steps-list a, .step-locked { flex-direction: column; align-items: flex-start; gap: 10px; padding: 0; }
  .journey .button { max-width: 22rem; }
  .strip { grid-template-columns: repeat(6, 1fr); }
  .logo-panel { grid-template-columns: 1fr auto; align-items: center; }
  .do-dont { grid-template-columns: 1fr 1fr; }
  .ardoise { padding: 28px; font-size: 1.3rem; }
  .action-bar { text-align: center; }
  .action-bar .button { max-width: 24rem; }
  fieldset.picker { grid-template-columns: repeat(5, 1fr); }
}

/* ---------- analyse : le résumé d'abord, tout le détail replié ----------
   Écran « Voilà ce qu'on a compris » : résumé, questions, validation ; le reste
   (points forts, image, décor de studio, ton, plats, sujets, photos manquantes)
   tient dans un seul bloc replié. */
.understood summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; padding: 6px 0; }
.understood[open] summary { margin-bottom: 10px; }
.understood-part { padding: 18px 0; border-top: 1px solid var(--filet); }
.understood-part:last-child { padding-bottom: 0; }
.understood-part > p { margin: 0 0 12px; color: var(--encre-douce); }
.understood-part > .panel-action { margin: 14px 0 0; }


/* ---------- calendrier jour par jour ---------- */
.now { margin: 0 0 18px; font-weight: 600; }
.now .hint { margin-left: 6px; }
.week-nav { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 8px; margin: 0 0 6px; padding: 8px; background: var(--assiette); border: 1px solid var(--filet); border-radius: var(--radius-xl); }
.week-arrow { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-lg); font-size: 1.3rem; font-weight: 700; text-decoration: none; border: 1px solid var(--border); }
.week-arrow:hover { border-color: var(--bouteille); }
.week-arrow.is-off { opacity: 0.3; }
.week-title { display: grid; text-align: center; }
.week-title strong { font-size: 1.1rem; }
.week-title span { font-size: 0.9rem; color: var(--encre-douce); }
.week-back { margin: 0 0 12px; text-align: center; font-size: 0.95rem; font-weight: 600; }
.week-wait { margin: 14px 0; padding: 14px 16px; background: var(--moutarde-fond); border: 1.5px solid var(--moutarde); border-radius: var(--radius); }
.week-wait p { margin: 0 0 10px; }
.week-wait .progress { margin: 0; }
.week-prepare { margin: 14px 0; }
.week-prepare .button { max-width: 24rem; }

.days { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.day { background: var(--assiette); border: 1px solid var(--filet); border-radius: var(--radius-xl); padding: 12px 14px; scroll-margin-top: 12px; }
.day.is-today { border: 2px solid var(--bouteille); box-shadow: 0 0 0 3px var(--moutarde); }
.day.is-past { background: transparent; }
.day.is-past .slot { opacity: 0.7; }
.day-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.day-name { font-weight: 700; text-transform: capitalize; }
.day-number { font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.day-today { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: var(--moutarde); font-size: 0.8rem; font-weight: 700; }
.day-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.slot-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.slot { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px; border-radius: var(--radius-lg); text-decoration: none; }
.slot:hover { background: var(--inox); }
.slot-thumb { position: relative; display: block; width: 64px; height: 80px; border-radius: var(--radius-md); overflow: hidden; background: var(--filet); }
.slot-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slot-video { position: absolute; right: 4px; bottom: 4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bouteille); color: #FFFFFF; font-size: 0.6rem; padding-left: 2px; }
.slot-time { font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.slot-text strong { font-weight: 600; }
.state-busy { background: var(--moutarde-fond); border-color: var(--moutarde); }
/* Deux gestes distincts : « Remplacer » sur chaque publication, « + Ajouter » sur chaque jour. */
.slot-replace, .day-add { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 12px; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.slot-replace { background: var(--assiette); border: 1px solid var(--border); }
.slot-replace:hover { border-color: var(--bouteille); }
.day-add { width: 100%; margin-top: 8px; border: 1.5px dashed var(--encre-douce); color: var(--bouteille); }
.day-add:hover { border-style: solid; border-color: var(--bouteille); background: var(--inox); }
.day-empty { margin: 0; font-size: 0.9rem; color: var(--encre-douce); }
.line-why { margin-top: 12px; color: var(--encre-douce); }
/* Coût réel d'une génération, à côté de ce qui a été créé (interrupteur provisoire SHOW_COSTS). */
.cost-note { margin: 8px 0 0; font-size: 0.85rem; line-height: 1.35; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.cost-note strong { color: var(--bouteille); font-weight: 700; }
.cost-credits { white-space: nowrap; }
.cost-total { padding-top: 12px; border-top: 1px solid var(--filet); }
.when-fields { display: grid; gap: 18px; }

/* Création en cours : l'image respire sous un voile, un anneau tourne. */
.post-frame { position: relative; }
.making { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 20px; text-align: center; color: #FFFFFF; background: rgba(18, 55, 42, 0.62); }
.making strong { font-size: 1.15rem; }
.making span { font-size: 0.9rem; max-width: 16em; }
.making-ring { width: 54px; height: 54px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.28); border-top-color: var(--moutarde); }
.slot.is-pending .slot-thumb:not(.is-preparing)::after { content: ""; position: absolute; inset: 0; background: rgba(18, 55, 42, 0.45); }
@media (prefers-reduced-motion: no-preference) {
  .making-ring { animation: tourne 1.1s linear infinite; }
  .is-making img, .is-making video { animation: respire 3.2s ease-in-out infinite; }
  .making { background: linear-gradient(110deg, rgba(18, 55, 42, 0.72) 30%, rgba(18, 55, 42, 0.48) 50%, rgba(18, 55, 42, 0.72) 70%); background-size: 240% 100%; animation: balaie 2.4s linear infinite; }
  .slot.is-pending .slot-thumb:not(.is-preparing)::after { background: linear-gradient(110deg, rgba(18, 55, 42, 0.55) 30%, rgba(18, 55, 42, 0.2) 50%, rgba(18, 55, 42, 0.55) 70%); background-size: 240% 100%; animation: balaie 1.8s linear infinite; }
  @keyframes tourne { to { transform: rotate(360deg); } }
  @keyframes respire { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
  @keyframes balaie { from { background-position: 120% 0; } to { background-position: -120% 0; } }
}
@media (min-width: 900px) {
  .days { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: start; }
  .day { padding: 10px; min-height: 220px; }
  .day-head { flex-wrap: wrap; }
  .day-today { margin-left: 0; }
  .slot-item { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .slot { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 4px; }
  .slot-replace { min-height: 36px; padding: 4px 6px; font-size: 0.8rem; }
  .day-add { min-height: 36px; padding: 4px 6px; font-size: 0.8rem; }
  .slot-thumb { width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .slot-text strong { font-size: 0.9rem; }
  .state { font-size: 0.72rem; padding: 2px 8px; }
  .when-fields { grid-template-columns: 1fr 1fr; }
  .week-nav { max-width: 30rem; margin-inline: auto; }
}


/* ---------- en préparation : jamais une photo prise au hasard ----------
   Tant que le texte s'écrit ou qu'aucune photo n'est retenue, l'aperçu et la vignette du
   calendrier montrent un écran neutre, dans le langage de « .making » : vert bouteille,
   anneau moutarde. */
.preparing { display: grid; place-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; aspect-ratio: 4 / 5; color: #FFFFFF; background: var(--bouteille); }
.preparing strong { font-size: 1.15rem; }
.preparing span:not(.making-ring) { font-size: 0.9rem; max-width: 17em; color: rgba(255, 255, 255, 0.86); }
.preparing.is-idle { color: var(--bouteille); background: var(--inox); }
.preparing.is-idle span { color: var(--encre-douce); }
.slot-thumb.is-preparing { display: grid; place-items: center; background: var(--bouteille); }
.slot-thumb.is-idle { background: var(--filet); }
.slot-ring { width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.28); border-top-color: var(--moutarde); }
@media (prefers-reduced-motion: no-preference) {
  .slot-ring { animation: tourne 1.1s linear infinite; }
  .preparing:not(.is-idle), .slot-thumb.is-preparing:not(.is-idle) { background: linear-gradient(110deg, #12372A 30%, #1E5A45 50%, #12372A 70%); background-size: 240% 100%; animation: balaie 2.4s linear infinite; }
}

/* ---------- éditeur d'une publication ----------
   À gauche l'aperçu et sa barre d'outils (des boutons, chacun ouvre son panneau sur place) ;
   à droite le texte, le jour et l'heure, l'état et la seule action principale. Sur mobile,
   tout s'empile et l'action principale reste sous le pouce. */
fieldset.options legend, .schedule legend { padding: 0; margin-bottom: 0.5rem; font-weight: 500; font-size: 0.875rem; }

.editor-main { display: contents; }
.editor-main > * { margin-top: 16px; margin-bottom: 0; }
.editor-panel { display: grid; gap: 12px; padding: 16px; }
.editor-panel > * { margin: 0; }
.editor-panel form { margin: 0; }
.editor-visual .post-note strong { color: var(--bouteille); }

.tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tools form { margin: 0; }
.tools .button-quiet { padding: 8px 14px; font-size: 0.9rem; }
.tool > summary { list-style: none; }
.tool > summary::-webkit-details-marker { display: none; }
/* Fermé, un outil ne pèse que son bouton : son panneau ne compte pas dans sa largeur. */
.tool:not([open]) > :not(summary) { display: none; }
.tool[open] { order: 10; flex: 1 0 100%; padding: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.tool[open] > summary { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; width: 100%; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--foreground); font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; }
.tool[open] > summary::after { content: "Fermer"; font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 3px; }
.tool-panel { display: grid; gap: 14px; margin-top: 14px; }
.tool-panel > * { margin: 0; }
.tool-panel fieldset.picker { grid-template-columns: repeat(4, 1fr); }
.tool-panel .button { justify-self: start; }
.tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.tool-actions .link { font-size: 0.9rem; color: var(--encre-douce); min-height: 40px; }
.import-fields { display: grid; gap: 14px; }

.schedule fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.schedule-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.schedule-fields input { min-width: 0; }
.schedule .button { justify-self: start; }

.publish {
  position: sticky; bottom: var(--tabbar-h); z-index: 2;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px;
  margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 12px var(--gutter);
  background: rgba(250, 250, 250, 0.94); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.publish.is-done { position: static; grid-template-columns: minmax(0, 1fr); }
.publish form, .publish-state { margin: 0; }
.publish-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.quiet-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; font-size: 0.9rem; color: var(--encre-douce); }
.quiet-actions form { margin: 0; }
.quiet-actions a, .quiet-actions .link { display: inline-flex; align-items: center; min-height: 40px; }

/* ---------- créer une publication : quatre blocs, dans l'ordre ---------- */
.composer { display: grid; gap: 14px; }
.compose-block { display: grid; gap: 12px; padding: 16px; background: var(--assiette); border: 1px solid var(--filet); border-radius: var(--radius-xl); }
.compose-block > * { margin: 0; }
.compose-block h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 1.15rem; }
.compose-block h2 label { font: inherit; display: inline; }
.compose-step { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--bouteille); color: #FFFFFF; font-size: 0.9rem; font-weight: 700; }
.compose-block .option, .tool-panel .option { background: var(--inox); }
.compose-block .option:has(input:checked), .tool-panel .option:has(input:checked) { background: var(--assiette); }
.visual-choice { display: none; gap: 14px; padding-top: 4px; }
.visual-choice > * { margin: 0; }
.visual-block:has(input[name="visual"][value="choisi"]:checked) .visual-choice { display: grid; }
@supports not selector(:has(*)) { .visual-choice { display: grid; } }
.overlay-fields { display: grid; gap: 14px; }
.composer-submit { display: grid; gap: 10px; margin-top: 6px; }
.composer-mode { margin: 0; font-size: 0.95rem; color: var(--encre-douce); }
.composer-mode .link { color: var(--bouteille); font-weight: 600; min-height: 40px; }

@media (min-width: 760px) {
  .editor { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 32px; align-items: start; }
  .editor-main { display: grid; gap: 16px; align-content: start; }
  .editor-main > * { margin-top: 0; }
  .editor-panel { padding: 20px; }
  .publish { position: static; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 20px; background: var(--assiette); border: 1px solid var(--filet); border-radius: var(--radius-xl); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .import-fields, .overlay-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-panel .import-fields, .tool-panel .overlay-fields { grid-template-columns: minmax(0, 1fr); }
  .compose-block { padding: 22px; }
  .composer-submit .button { max-width: 24rem; }
}

/* Éditeur : actions secondaires en boutons, la plus lourde en dernier et en rouge sourd. */
.post-actions form { margin: 0; }
.post-actions-end { padding-top: 12px; border-top: 1px solid var(--filet); }
.button-danger { color: var(--destructive); }
.button-danger:hover { background: var(--destructive-soft); border-color: rgba(220, 38, 38, 0.5); }
.tools-text { margin-top: 0; }
.composer-submit .button-quiet { min-height: 48px; }

/* ---------- événements (chantier calendrier) ----------
   Un événement se voit partout par le même repère : un point moutarde et son nom. */
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.kind-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 20px; padding: 4px; background: var(--assiette); border: 1px solid var(--filet); border-radius: var(--radius-lg); }
.kind-switch a { display: grid; place-items: center; min-height: 44px; padding: 6px 10px; border-radius: var(--radius-md); font-weight: 600; text-align: center; text-decoration: none; color: var(--encre-douce); }
.kind-switch a:hover { color: var(--bouteille); }
.kind-switch a[aria-current="page"] { background: var(--bouteille); color: #FFFFFF; }
.day-event { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 6px 10px; border-radius: var(--radius-md); background: var(--moutarde-fond); border: 1.5px solid var(--moutarde); font-size: 0.875rem; font-weight: 700; line-height: 1.25; text-decoration: none; overflow-wrap: anywhere; }
.day-event:hover { background: var(--moutarde); }
.day-event-mark { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--bouteille); }
.slot-event { justify-self: start; max-width: 100%; padding: 1px 8px; border-radius: 999px; background: var(--moutarde-fond); border: 1px solid var(--moutarde); font-size: 0.75rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.events h2 { margin-bottom: 4px; }
.event-list { list-style: none; margin: 0; padding: 0; }
.event-list li + li { border-top: 1px solid var(--filet); }
.event-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; text-decoration: none; }
.event-list li:last-child .event-row { padding-bottom: 0; }
.event-row:hover .event-text > strong { text-decoration: underline; text-underline-offset: 3px; }
.event-date { display: grid; justify-items: center; align-content: center; width: 52px; height: 56px; border-radius: var(--radius-lg); background: var(--moutarde); font-size: 0.75rem; font-weight: 700; line-height: 1.1; }
.event-date strong { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.event-text { display: grid; gap: 1px; min-width: 0; }
.event-text > strong { overflow-wrap: anywhere; }
.event-text > span { font-size: 0.95rem; }
.event-kicker { display: inline-block; margin: 0 0 8px; padding: 2px 10px; border-radius: 999px; background: var(--moutarde); font-size: 0.8rem; font-weight: 700; }
.event-plan { border: 1.5px solid var(--moutarde); background: var(--moutarde-fond); scroll-margin-top: 12px; }
.event-plan .notice { background: var(--assiette); }
.event-plan-sentence { font-size: 1.05rem; }
.event-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.event-steps li { display: grid; gap: 0 12px; padding: 8px 12px; background: var(--assiette); border-radius: var(--radius-md); }
.event-step-day { font-weight: 700; }
.event-step-day::first-letter { text-transform: uppercase; }
.event-step-role { color: var(--encre-douce); font-size: 0.95rem; }
.post-event { margin: -16px 0 24px; font-size: 0.95rem; color: var(--encre-douce); }
.post-event a { color: var(--bouteille); font-weight: 600; }
.event-cancel { margin-top: 20px; }
.event-cancel .tool-panel p { color: var(--bouteille); }
.button-danger-solid { background: var(--destructive); border-color: transparent; color: var(--destructive-foreground); }
.button-danger-solid:hover { background: var(--destructive-hover); }
@media (min-width: 760px) {
  .kind-switch { max-width: 24rem; }
  .event-steps li { grid-template-columns: 13rem minmax(0, 1fr); align-items: baseline; }
}
@media (min-width: 900px) {
  .day-event { font-size: 0.8rem; padding: 5px 8px; }
}
.week-short { display: grid; gap: 10px; justify-items: start; margin: 14px 0; padding: 14px 16px; background: var(--moutarde-fond); border: 1.5px solid var(--moutarde); border-radius: var(--radius); }
.week-short p { margin: 0; font-size: 0.95rem; }

/* ---------------------------------------------------------- plan de la semaine (engine/weekplan.py) */
.week-prepare-card, .plan-ready, .auto-weeks { margin: 14px 0; }
.auto-weeks { margin-top: 20px; }
.plan-back { text-align: left; }
.plan-week { margin: 0 0 4px; font-size: 0.875rem; }
.plan h1 { margin-bottom: 16px; }
.plan-idea { margin: 0 0 16px; }
.plan-idea p:first-child { font-size: 1.05rem; line-height: 1.45; }
.plan-lines { margin: 8px 0 20px; }
.plan-line { align-items: flex-start !important; }
.plan-thumb { flex: none; width: 64px; height: 80px; object-fit: cover; border-radius: var(--radius-md); background: var(--muted); }
.plan-when { font-size: 0.8125rem !important; font-weight: 600; color: var(--primary) !important; }
.plan-image { font-size: 0.8125rem !important; }
.plan-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.plan-line form { flex: none; margin: 0; }
.plan-actions { display: grid; gap: 10px; margin: 0 0 16px; }
.plan-actions form { margin: 0; }
.plan-note { margin: 0; text-align: center; }
.plan-redo > summary { list-style: none; }
.plan-redo > summary::-webkit-details-marker { display: none; }
.plan-redo[open] > form { margin-top: 12px; }
@media (min-width: 760px) {
  .plan-thumb { width: 80px; height: 100px; }
}
/* ===================================================== « Mon restaurant » (chantier onboarding) */
.hub-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.hub-head > * { margin: 0; }
.hub-logo { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); color: var(--primary); font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; text-decoration: none; }
.hub-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.hub-title { flex: 1 1 auto; min-width: 0; }
.hub-title h1 { margin: 0; font-size: 1.5rem; overflow-wrap: anywhere; }
.hub-title p { margin: 0; }
.hub-action { width: 100%; }
.hub-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.hub-tile { display: flex; flex-direction: column; gap: 0.375rem; padding: 0.875rem; color: inherit; text-decoration: none; min-height: 8.5rem; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.hub-tile:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; }
a.hub-tile:hover { border-color: #A1A1AA; box-shadow: var(--shadow-md); }
.hub-tile.is-off { background: var(--muted); box-shadow: none; }
.hub-tile-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.375rem; }
.hub-tile-name { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; }
.hub-tile-top .ui-badge { white-space: normal; }
.hub-tile-text { font-size: 0.8125rem; line-height: 1.35; color: var(--muted-foreground); }
.hub-meter { height: 0.375rem; }
.hub-meter > span { background: var(--accent); }
.hub-tile-go { margin-top: auto; font-size: 0.8125rem; font-weight: 600; color: var(--primary); }
.hub-tile-go::after { content: " →"; }
.hub .assistant-block { margin: 0 0 1rem; }
.hub-sheet .ui-card-content { padding-top: 0.5rem; }
.hub-group { border-bottom: 1px solid var(--border); }
.hub-group:last-child { border-bottom: 0; }
.hub-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 3rem; font-weight: 600; font-size: 0.9375rem; cursor: pointer; list-style: none; }
.hub-group > summary::-webkit-details-marker { display: none; }
.hub-group > summary::after { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--muted-foreground); border-bottom: 2px solid var(--muted-foreground); transform: rotate(45deg); transition: transform 0.15s ease; }
.hub-group > summary > span:first-child { flex: 1 1 auto; }
.hub-group[open] > summary::after { transform: rotate(-135deg); }
.hub-answers { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.hub-answers li { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; border-top: 1px solid var(--border); }
.hub-answer { display: flex; flex-direction: column; gap: 0.125rem; flex: 1 1 auto; min-width: 0; }
.hub-answer-label { font-size: 0.75rem; color: var(--muted-foreground); }
.hub-answer-value { font-size: 0.875rem; overflow-wrap: anywhere; }
.hub-answer-value.is-empty { color: var(--muted-foreground); font-style: italic; }
.hub-answers .ui-btn { flex: none; color: var(--muted-foreground); }
.hub-group-foot { margin: 0 0 0.75rem; }
.hub-score { font-size: 0.8125rem; color: var(--muted-foreground); }
.hub-score strong { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--primary); font-variant-numeric: tabular-nums; }

/* ---------- Accueil (revue du 18 octobre) : bonjour, raccourcis, premiers pas, cette semaine, compte ---------- */
.home-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.home-title { flex: 1 1 auto; min-width: 0; }
.home-hello { margin: 0; font-size: 0.875rem; color: var(--muted-foreground); }
.home-title h1 { margin: 0; font-size: 1.5rem; line-height: 1.15; overflow-wrap: anywhere; }

/* Les raccourcis : quatre en rangée ; sur un écran étroit, la rangée défile au doigt. */
.home-shortcuts { margin: 0 calc(-1 * var(--gutter)) 1.25rem; }
.home-shortcuts ul { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(5.25rem, 1fr); gap: 0.5rem; margin: 0; padding: 0 var(--gutter) 0.25rem; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.home-shortcuts ul::-webkit-scrollbar { display: none; }
.home-shortcuts li { scroll-snap-align: start; }
.home-shortcut { display: flex; flex-direction: column; align-items: center; gap: 0.4375rem; height: 100%; padding: 0.75rem 0.25rem 0.625rem; color: var(--foreground); text-align: center; text-decoration: none; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); -webkit-tap-highlight-color: transparent; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.home-shortcut:hover { border-color: #A1A1AA; box-shadow: var(--shadow-md); }
.home-shortcut:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); }
.home-shortcut-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--success-soft); color: var(--primary); }
.home-shortcut-icon svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.home-shortcut-label { font-size: 0.75rem; font-weight: 600; line-height: 1.2; }

/* Premiers pas : 4 étapes au plus, la prochaine avec son bouton. */
.home-steps { margin-bottom: 0.75rem; padding: 1rem 1rem 0.5rem; }
.home-steps-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.625rem; }
.home-steps-head h2 { margin: 0; font-size: 1.125rem; }
.home-steps-count { font-size: 0.875rem; font-weight: 600; color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-step-list { list-style: none; margin: 0.375rem 0 0; padding: 0; }
.home-step { border-top: 1px solid var(--border); }
.home-step:first-child { border-top: 0; }
.home-step-row { display: flex; align-items: center; gap: 0.75rem; min-height: 3.25rem; padding: 0.5rem 0; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a.home-step-row:hover .home-step-label { text-decoration: underline; text-underline-offset: 3px; }
a.home-step-row:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring); border-radius: var(--radius-sm); }
.todo-check { display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid var(--input); background: var(--card); }
.todo-check svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.home-step.is-done .todo-check { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
.home-step.is-next .todo-check { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(233, 184, 36, 0.25); }
.home-step.is-blocked .todo-check { border-style: dashed; background: transparent; }
.home-step-text { display: flex; flex-direction: column; gap: 0.125rem; flex: 1 1 auto; min-width: 0; }
.home-step-label { font-size: 0.9375rem; font-weight: 500; overflow-wrap: anywhere; }
.home-step.is-next .home-step-label { font-weight: 600; }
.home-step.is-done .home-step-label { color: var(--muted-foreground); font-weight: 400; text-decoration: line-through; text-decoration-color: rgba(113, 113, 122, 0.5); }
.home-step.is-blocked .home-step-label { color: var(--muted-foreground); }
.home-step-detail { font-size: 0.8125rem; color: var(--muted-foreground); }
.home-step-detail.is-waiting::before { content: ""; display: inline-block; width: 0.4375rem; height: 0.4375rem; margin-right: 0.375rem; border-radius: 50%; background: var(--accent); vertical-align: 0.0625rem; }
.home-go { flex: none; width: 1rem; height: 1rem; fill: none; stroke: var(--muted-foreground); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.home-step-action { padding: 0 0 0.875rem 2.25rem; }
.home-step-action form { margin: 0; }

/* Suggestions : une ou deux lignes discrètes, rejetables quand c'est facultatif. */
.home-tips { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.5rem; }
.home-tip { display: flex; align-items: center; gap: 0.25rem; padding: 0 0.25rem 0 0; background: var(--accent-soft); border: 1px solid #F3E2A6; border-radius: var(--radius-lg); }
.home-tip-main { display: flex; align-items: center; gap: 0.625rem; flex: 1 1 auto; min-width: 0; min-height: 2.75rem; padding: 0.5rem 0.25rem 0.5rem 0.875rem; color: var(--foreground); text-decoration: none; }
.home-tip-dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); }
.home-tip-text { flex: 1 1 auto; min-width: 0; font-size: 0.875rem; line-height: 1.3; }
.home-tip-go { flex: none; font-size: 0.8125rem; font-weight: 600; color: var(--primary); }
.home-tip-go::after { content: " →"; }
.home-tip-side { flex: none; margin: 0; }
.home-tip-side .ui-btn { color: var(--muted-foreground); font-weight: 500; padding: 0 0.5rem; }

/* Sections : « Cette semaine », « Ton compte ». */
.home-section { margin-top: 1.5rem; }
.home-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.625rem; }
.home-section-head h2 { margin: 0; font-size: 1.125rem; }
.home-more { font-size: 0.875rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.home-more::after { content: " →"; }
.home-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.home-post { display: flex; flex-direction: row; align-items: center; text-align: left; gap: 0.75rem; padding: 0.5rem 0.75rem 0.5rem 0.5rem; color: inherit; text-decoration: none; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.home-post:hover { border-color: #A1A1AA; box-shadow: var(--shadow-md); }
.home-post-thumb { position: relative; display: grid; place-items: center; flex: none; width: 3.75rem; height: 4.5rem; overflow: hidden; border-radius: var(--radius-md); background: var(--muted); }
.home-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.home-post-video { position: absolute; right: 0.25rem; bottom: 0.25rem; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.5625rem; }
.home-post-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; flex: 1 1 auto; min-width: 0; }
.home-post-when { font-size: 0.75rem; font-weight: 600; color: var(--muted-foreground); }
.home-post-subject { width: 100%; font-size: 0.9375rem; font-weight: 500; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-post-action { flex: none; display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.75rem; font-size: 0.8125rem; font-weight: 600; color: var(--foreground); border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--card); }
.home-post-action.is-strong { color: var(--primary); border-color: var(--primary); }
.home-posts-more { margin: 0.625rem 0 0; font-size: 0.875rem; }
.home-posts-more a { color: var(--primary); font-weight: 600; }
.home-preparing { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; padding: 0.875rem 1rem; font-size: 0.875rem; }
.home-ring { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--primary); animation: home-spin 0.9s linear infinite; }
@keyframes home-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .home-ring { animation: none; border-top-color: var(--accent); } }
.home-empty { padding: 1.25rem 1rem; text-align: center; }
.home-empty-title { margin: 0 0 0.25rem; font-weight: 600; }
.home-empty-text { margin: 0 auto 0.875rem; max-width: 26rem; font-size: 0.875rem; color: var(--muted-foreground); }
.home-empty-text:last-child { margin-bottom: 0; }
.home-empty form { margin: 0; }

/* L'état du compte : de petites cartes. */
.home-status { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.home-stat { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 0.875rem; }
.home-stat-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.375rem; }
.home-stat-name { font-size: 0.875rem; font-weight: 600; }
.home-stat-figure { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.home-stat-figure strong { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--primary); font-variant-numeric: tabular-nums; }
.home-stat-text { font-size: 0.8125rem; color: var(--muted-foreground); }
.home-stat-top .ui-badge { white-space: nowrap; }
.home-stat-link { margin-top: auto; font-size: 0.8125rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.home-stat-link::after { content: " →"; }
.home-status > .home-stat:nth-child(3):last-child { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .home-title h1 { font-size: 1.875rem; }
  .home-shortcuts { margin-left: 0; margin-right: 0; }
  .home-shortcuts ul { padding: 0; grid-auto-columns: minmax(0, 1fr); overflow: visible; }
  .home-shortcut { flex-direction: row; justify-content: flex-start; gap: 0.625rem; padding: 0.75rem; text-align: left; }
  .home-shortcut-label { font-size: 0.875rem; }
  .home-steps { padding: 1.25rem 1.25rem 0.5rem; }
  .home-step-action { max-width: 22rem; }
  .home-status { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .home-status > .home-stat:nth-child(3):last-child { grid-column: auto; }
}

@media (min-width: 760px) {
  .hub-tiles { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
  .hub-tile:last-child:nth-child(odd) { grid-column: auto; min-height: 8.5rem; }
  .hub-title h1 { font-size: 1.875rem; }
}

/* Écran « Ta carte », nom des photos de plats, questions de l'analyse */
.menu-step { margin-top: 0.5rem; }
.menu-skip { margin-top: 0.5rem; }
.dish-pick { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.dish-pick:empty { display: none; }
.dish-pick button { min-height: 2rem; padding: 0.25rem 0.625rem; font: inherit; font-size: 0.8125rem; color: var(--foreground); background: var(--card); border: 1px solid var(--input); border-radius: 999px; cursor: pointer; }
.dish-pick button:hover, .dish-pick button[aria-pressed="true"] { border-color: var(--primary); background: var(--success-soft); }
.dish-help { margin: 0; font-size: 0.8125rem; color: var(--muted-foreground); }
.dish-help:empty { display: none; }
.question-photos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.question-photos li { display: grid; gap: 0.25rem; width: 5.5rem; font-size: 0.75rem; color: var(--muted-foreground); }
.question-photos img { display: block; width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: var(--radius-md); background: var(--border); }
.booking-tool { display: grid; gap: 0.5rem; border: 0; margin: 0; padding: 0; }
.booking-tool legend { padding: 0; margin-bottom: 0.5rem; font-size: 0.875rem; font-weight: 500; }
.booking-tool .chips-row { display: flex; flex-wrap: wrap; gap: 0.375rem; }