/* ============================================================
   L'ÉCONOME — HUMAN POLISH 2026-08

   Couche finale de produit. Elle ne remplace pas l'identité existante :
   elle retire les écarts accumulés entre site public, app, mobile et PWA.

   Intentions :
   - une seule voix visuelle, papier crème + Vert Jean-Talon;
   - aucune apparence dashboard SaaS / démo IA;
   - aucune micro-typo utile sous 13px;
   - interactions tactiles confortables et focus clavier visible;
   - cartes seulement lorsqu'elles ont une vraie raison d'exister;
   - mode clair uniquement pour cette phase produit.
   ============================================================ */

/* ── 0. MODE CLAIR UNIQUEMENT ─────────────────────────────── */
:root,
:root:not([data-theme="light"]),
[data-theme="dark"] {
  color-scheme: light !important;
  --paper: oklch(0.985 0.006 75) !important;
  --paper-soft: oklch(0.948 0.008 75) !important;
  --paper-sheet: oklch(0.996 0.002 75) !important;
  --paper-deep: oklch(0.935 0.01 75) !important;
  --ink: oklch(0.22 0.016 75) !important;
  --ink-soft: oklch(0.36 0.014 72) !important;
  --ink-muted: oklch(0.46 0.012 70) !important;
  --ink-fade: oklch(0.54 0.01 70) !important;
  --accent: oklch(0.53 0.16 143) !important; /* voir app.css : 0.59 échouait le contraste AA */
  --accent-deep: oklch(0.44 0.13 143) !important;
  --accent-bright: oklch(0.72 0.17 143) !important;
  --accent-tint: oklch(0.958 0.026 143) !important;
  --accent-tint2: oklch(0.91 0.05 143) !important;
  --bg: var(--paper) !important;
  --white: var(--paper-sheet) !important;
  --surface: var(--paper-soft) !important;
  --brand: var(--accent) !important;
  --brand-dark: var(--accent-deep) !important;
  --brand-light: var(--accent-bright) !important;
  --brand-pale: var(--accent-tint) !important;
}

/* Le contrôle reste dans le code pour une réactivation future, mais il
   n'est pas exposé pendant la phase light-only. */
#darkToggle {
  display: none !important;
}

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  background: var(--paper);
  color: var(--ink);
}

/* ── 1. ACCESSIBILITÉ ET RYTHME GLOBAL ────────────────────── */
:where(a, button, input, select, textarea, summary, [role="button"], [role="tab"], [tabindex]):focus-visible {
  outline: 3px solid color-mix(in oklch, var(--brand) 72%, var(--ink));
  outline-offset: 3px;
  box-shadow: none;
}

:where(button, .btn-main, .btn-sec, input, select, textarea) {
  font-family: var(--font-body, "Commissioner", system-ui, sans-serif);
}

:where(.btn-main, .btn-sec, button:not(.chk):not(.info-pop)) {
  min-height: 44px;
}

:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 46px;
  font-size: 16px;
  line-height: 1.35;
}

:where(.page-masthead-meta, .page-masthead-eyebrow, .dash-section-eyebrow,
  .dash-stat-eyebrow, .recipe-price-tag, .recipe-nutri-lbl, .recipe-startat,
  .recipe-ing-qty, .ing-history, .recette-cuisiner-note, .recipe-enrichir-note,
  .cuisine-eyebrow, .cuisine-step-counter, .cuisson-note-counter,
  .scan-card-eyebrow, .scan-card-meta, .scan-status, .scan-hint,
  .rap-eyebrow-sm, .rap-eyebrow-md, .rap-spark-eyebrow, .rap-text-muted,
  .profil-toggle-help, .profil-exclus-hint, .profil-ville-hint,
  .profil-ville-confirm, .profil-radio-desc, .abo-section-lede,
  .tarif-badge, .tarif-trial, .tarif-current, .tarif-name-suffix,
  .cph-tile-meta, .app-footer-trust, .app-footer-links, .app-footer-copy) {
  font-size: 13px !important;
  line-height: 1.45;
}

.page-masthead {
  max-width: 900px;
  margin-bottom: clamp(28px, 5vw, 48px);
}
.page-masthead-title {
  text-wrap: balance;
}
.page-masthead-lede {
  max-width: 62ch;
  color: var(--ink-soft);
}

/* Une carte n'est pas un effet visuel par défaut. */
.card,
.dash-section,
.recipe-panel,
.lp,
.onb-card,
.scan-card,
.tarif,
.auth-testimonial,
.contact-form,
.contact-editorial-form-card,
.letter {
  box-shadow: none !important;
}

/* ── 2. APP SHELL / NAVIGATION ────────────────────────────── */
.sidebar,
.topbar,
.mobile-tabbar,
.composer-bar,
.composer-sheet-panel {
  background: var(--paper-sheet);
}

.sidebar {
  border-right-color: var(--border2);
}
.logo-sub {
  letter-spacing: .02em;
  text-transform: none;
}
.weather-strip {
  background: transparent;
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
  border-radius: 0;
}
.w-ai {
  font-size: 13px !important;
  line-height: 1.45;
}

.nav .ni,
.nav-group-toggle {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.nav .ni.on {
  background: transparent;
  color: var(--brand-dark);
  font-weight: 700;
}
.nav .ni.on::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  margin-right: 8px;
  flex: 0 0 auto;
}
.nav .ni.on .nico {
  display: none;
}

.topbar {
  border-bottom-color: var(--border2);
}
.live-pill {
  border-radius: 999px;
  box-shadow: none;
}

.mobile-tabbar {
  box-shadow: 0 -1px 0 var(--border2) !important;
  backdrop-filter: none !important;
}
.mtab {
  min-height: 56px !important;
  font-size: 13px !important;
}
.mtab.on {
  background: transparent !important;
}

.composer-bar {
  border: 1px solid var(--border2);
  box-shadow: 0 3px 12px oklch(0.22 0.016 75 / .08) !important;
}
.composer-sheet-panel {
  box-shadow: 0 -8px 28px oklch(0.22 0.016 75 / .12) !important;
}
.composer-suggestion {
  min-height: 44px;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--border2);
  background: transparent;
  text-align: left;
}

/* ── 3. DASHBOARD / GARDE-MANGER ──────────────────────────── */
.dash-hero,
.dash-section,
.pantry-urgence {
  border-color: var(--border2);
}
.dash-hero {
  background: transparent;
}
.dash-hero-ring-pct,
.dash-stat-value,
.rap-stat-num-xl,
.rap-stat-num-lg,
.rap-stat-num {
  font-variant-numeric: tabular-nums;
}

.pantry-urgence {
  background: var(--accent-tint);
  box-shadow: none;
}
.pantry-time {
  min-height: 60px;
  box-shadow: none;
}
.pantry-time-active {
  background: var(--paper-sheet);
  border-color: var(--brand);
}
.pantry-group-title,
.pantry-legend-item {
  font-size: 13px !important;
}

/* ── 4. SEMAINE / MENU ────────────────────────────────────── */
.menu-day-strip,
.menu-day-card,
.menu-recipe-cover {
  box-shadow: none !important;
}
.menu-day-card {
  border-color: var(--border2);
}
.menu-day-card.is-active,
.menu-day-card.on {
  background: var(--accent-tint);
  border-color: var(--brand);
}
.recipe-tag-pill,
.recipe-chip,
.recipe-acc-pill,
.pantry-tag,
.expire-tag,
.si-pct {
  border-radius: 999px;
  box-shadow: none;
}

/* ── 5. FICHE RECETTE ─────────────────────────────────────── */
.recipe-layout {
  gap: clamp(28px, 5vw, 56px);
}
.recipe-panel {
  border: 1px solid var(--border2);
  background: var(--paper-sheet);
}
.recipe-cover-detail {
  box-shadow: none;
}
.recipe-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: -.025em;
}
.rmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 16px 0;
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
}
/* Deux rangées de méta se suivent depuis la refonte de la fiche recette
   (les faits d'un côté, le réglage des portions de l'autre). Le filet du
   bas de la première et celui du haut de la seconde se retrouvaient collés,
   avec 14 px de respiration de chaque côté : une bande vide barrée de deux
   traits, qui se lisait comme un bogue d'affichage. On fusionne. */
.rmeta + .rmeta {
  border-top: 0;
  padding-top: 0;
}
.rm {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-right: 1px solid var(--border2);
  font-size: 15px;
}
.rm:first-child { padding-left: 0; }
.rm:last-child { border-right: 0; }
.rm-portion-btn {
  min-width: 38px;
  min-height: 38px !important;
}
.recipe-startat,
.recipe-description {
  max-width: 66ch;
}
.recipe-tags-row {
  gap: 8px;
}
.recipe-tag-pill {
  background: transparent !important;
  border: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: var(--brand-dark) !important;
}
.recipe-tag-pill + .recipe-tag-pill::before {
  content: "·";
  color: var(--ink-muted);
  margin-right: 8px;
}
.recipe-section-head,
.recipe-instructions-head,
.recipe-section-h {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border2);
}
.ing-row {
  min-height: 58px;
  border-bottom-color: var(--border2);
}
.ing-subst-btn {
  min-height: 36px !important;
  font-size: 13px !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.recipe-tip-card {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.recipe-tip-list li,
.recipe-sub-row {
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border2);
}
.recipe-nutri-grid {
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
}
.recipe-nutri-cell {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.recipe-nutri-num {
  font-family: var(--font-display);
  font-weight: 400;
}
.lp {
  border: 0;
  border-top: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
}

/* ── 6. MODE CUISINE ──────────────────────────────────────── */
.cuisine-shell {
  max-width: 900px;
  margin-inline: auto;
}
.cuisine-header {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border2);
}
.cuisine-step {
  min-height: min(46vh, 440px);
  border: 0 !important;
  border-bottom: 1px solid var(--border2) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-inline: clamp(0px, 2vw, 18px);
}
.cuisine-step-num {
  font-family: var(--font-display);
  font-size: clamp(48px, 8vw, 78px);
  color: var(--brand-dark);
  background: transparent !important;
  border: 0 !important;
}
.cuisine-step-text {
  font-size: clamp(23px, 3.3vw, 34px);
  line-height: 1.38;
  max-width: 32ch;
  text-wrap: pretty;
}
.cuisine-progress {
  height: 3px;
  background: var(--paper-deep);
}
.cuisine-timer {
  box-shadow: none !important;
  background: var(--accent-tint);
  border: 1px solid var(--border2);
}
.cuisine-timer-display {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}
.cuisine-nav {
  gap: 12px;
}
.cuisine-nav .btn-main,
.cuisine-nav .btn-sec {
  min-height: 52px;
}
.cuisine-end {
  box-shadow: none !important;
  border: 1px solid var(--border2);
  background: var(--paper-sheet);
}
.feedback-btn {
  min-width: 86px;
  min-height: 64px !important;
  box-shadow: none !important;
}

/* ── 7. SCAN REÇU / CODE-BARRES ───────────────────────────── */
.scan-editorial,
.scan-wrapper {
  max-width: 820px;
}
.scan-editorial {
  background: transparent !important;
  box-shadow: none !important;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--border2);
  border-radius: 0 !important;
  padding-inline: 0 !important;
}
.scan-editorial-eyebrow,
.scan-editorial-note,
.scan-share-hint,
.scan-dropzone-text,
.scan-manual summary {
  font-size: 13px !important;
}
.scan-editorial-title {
  font-family: var(--font-display);
  font-weight: 400;
  text-wrap: balance;
}
.scan-editorial-form .btn-main {
  min-height: 52px;
}
.scan-dropzone {
  border-width: 1px !important;
  border-color: var(--border2) !important;
  background: var(--paper-sheet) !important;
  box-shadow: none !important;
}
.scan-video-frame {
  border-radius: 18px;
  box-shadow: none !important;
  border: 1px solid var(--border2);
  overflow: hidden;
}
.scan-status,
.scan-hint {
  backdrop-filter: none !important;
}
.scan-manual {
  margin-top: 16px;
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
}
.scan-manual summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.scan-card {
  border: 1px solid var(--border2);
  border-radius: 16px;
  background: var(--paper-sheet);
}
.scan-prix-row {
  min-height: 48px;
}
.scan-prix-flag {
  font-size: 13px !important;
}
.onb-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 !important;
}
.onb-card {
  border: 0 !important;
  border-bottom: 1px solid var(--border2) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding-inline: 0 !important;
}
.onb-card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
}

/* ── 8. RAPPORTS / ÉCONOMIES ──────────────────────────────── */
.rapport-tabs .dash-tabs-nav {
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border2);
}
.rapport-tabs .dash-tabs-nav::-webkit-scrollbar { display: none; }
.rapport-tabs .dash-tab {
  min-height: 48px;
  white-space: nowrap;
  border-radius: 0;
  background: transparent;
}
.rapport-tabs .dash-tab.is-active {
  color: var(--brand-dark);
  border-bottom: 2px solid var(--brand);
  background: transparent;
}
.rap-card--accent {
  border: 0 !important;
  border-top: 1px solid var(--ink) !important;
  border-bottom: 1px solid var(--border2) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding-inline: 0 !important;
}
.rap-stat-num-xl {
  font-size: clamp(52px, 8vw, 86px) !important;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.035em;
}
.rap-spark-card {
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  padding-inline: 0 !important;
}
.rapport-tabs .surveillance-stats {
  gap: 0 !important;
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
}
.rapport-tabs .surveillance-stats > .card {
  border: 0 !important;
  border-right: 1px solid var(--border2) !important;
  border-radius: 0 !important;
}
.rapport-tabs .surveillance-stats > .card:last-child {
  border-right: 0 !important;
}

/* ── 9. PROFIL / COMPTE ───────────────────────────────────── */
.profil-grid {
  gap: clamp(22px, 4vw, 40px);
}
.profil-grid > .card {
  border-radius: 16px;
}
.profil-toggle-row {
  min-height: 52px;
  border-bottom: 1px solid var(--border2);
  border-radius: 0 !important;
  padding: 8px 0 !important;
  background: transparent !important;
}
.profil-toggle-cb {
  min-width: 22px;
  min-height: 22px;
}
.profil-radio-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0 !important;
  border-top: 1px solid var(--border2);
}
.profil-ptag {
  min-height: 94px;
  border: 0 !important;
  border-bottom: 1px solid var(--border2) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.profil-ptag.on {
  background: var(--accent-tint) !important;
}
.profil-advanced,
.profil-actions-more {
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
}
.profil-advanced-summary,
.profil-actions-more-summary {
  min-height: 52px;
}

/* PWA compte : conserve la table des matières linéaire. */
.compte-pwa-hub .cph-tile {
  box-shadow: none !important;
}

/* ── 10. ABONNEMENT ───────────────────────────────────────── */
.abo-section-title {
  margin-top: clamp(36px, 6vw, 64px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.08;
  letter-spacing: -.02em;
}
.abo-section-lede {
  max-width: 68ch;
  color: var(--ink-soft);
  font-size: 16px !important;
}
.abo-plans {
  gap: clamp(18px, 3vw, 30px);
}
.tarif {
  border: 1px solid var(--border2);
  border-radius: 16px;
  background: var(--paper-sheet);
  transform: none !important;
}
.tarif-featured {
  border: 1.5px solid var(--brand) !important;
}
.tarif-badge {
  position: static !important;
  transform: none !important;
  display: inline-block;
  width: fit-content;
  margin-bottom: 16px;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--brand-dark) !important;
  letter-spacing: .08em !important;
}
.tarif-head {
  border-bottom-color: var(--border2);
}
.tarif-features li {
  min-height: 44px;
}
.tarif-current {
  padding: 16px 0;
  border-top: 1px solid var(--border2);
  color: var(--brand-dark);
  font-weight: 700;
}

/* ── 11. AUTH / ONBOARDING ────────────────────────────────── */
.auth-page,
.auth-layout,
.auth-form-side {
  background: var(--paper) !important;
}
.auth-brand {
  background: var(--paper-soft) !important;
  color: var(--ink) !important;
  border-right: 1px solid var(--border2);
}
.auth-brand::before,
.auth-brand::after {
  display: none !important;
}
.auth-logo,
.auth-logo strong,
.auth-brand-title,
.auth-brand-sub,
.auth-feature-title,
.auth-feature-desc,
.auth-testimonial,
.auth-testimonial p,
.auth-testimonial cite {
  color: var(--ink) !important;
}
.auth-brand-sub,
.auth-feature-desc,
.auth-testimonial cite {
  color: var(--ink-soft) !important;
}
.auth-features {
  border-top: 1px solid var(--border2);
}
.auth-feature {
  min-height: 64px;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--border2);
}
.auth-feature-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--brand-dark) !important;
}
.auth-testimonial {
  border: 0 !important;
  border-top: 1px solid var(--ink) !important;
  border-bottom: 1px solid var(--border2) !important;
  border-radius: 0 !important;
  padding: 24px 0 !important;
  background: transparent !important;
}
.auth-form-wrap {
  max-width: 540px;
}
.auth-eyebrow,
.auth-sub,
.auth-footer,
.wiz-help,
.wiz-label-help,
.wiz-recap-label,
.wiz-recap-anchor,
.wiz-step-label,
.wiz-grocery-note,
.onb-intro,
.onb-skip-note {
  font-size: 13px !important;
  line-height: 1.5;
}
.auth-form label,
.wiz-label,
.onb-field-label {
  font-size: 13px !important;
}
.wiz-progress {
  background: transparent !important;
  border-bottom: 1px solid var(--border2);
}
.wiz-progress-step {
  box-shadow: none !important;
}
.wiz-pills,
.wiz-grocery-grid,
.tag-cloud {
  gap: 8px !important;
}
.wiz-pill,
.wiz-grocery,
.ptag {
  min-height: 44px;
  box-shadow: none !important;
}
.wiz-recap {
  border: 0 !important;
  border-top: 1px solid var(--ink) !important;
  border-bottom: 1px solid var(--border2) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding-inline: 0 !important;
}
.onb-section {
  border-top: 1px solid var(--border2);
  padding-top: 24px;
}
.onb-section + .onb-section {
  margin-top: 32px;
}
.onb-sticky-actions {
  background: var(--paper-sheet) !important;
  border-top: 1px solid var(--border2);
  box-shadow: none !important;
}

/* ── 12. SITE PUBLIC ───────────────────────────────────────── */
.site-nav,
.site-footer {
  background: var(--paper-sheet);
  box-shadow: none !important;
}
.site-nav.scrolled {
  box-shadow: none !important;
}
.hero::before {
  display: none !important;
}
.mockup-budget,
.cta-banner {
  background: var(--accent-tint) !important;
}
.hero-editorial-eyebrow::after,
.tarifs-hero-eyebrow::after {
  background: var(--border) !important;
}
.receipt-hero {
  background-image: none !important;
}

:where(.masthead, .hero-editorial-eyebrow, .hero-editorial-cta .hero-note,
  .hero-ticker-source, .calc-editorial-result-label, .calc-editorial-cta .hero-note,
  .calc-editorial-source, .sources-label, .source-meta, .sources-note,
  .letter-signature, .letter-signature em, .back-cover-note, .section-label,
  .hero-note, .hero-stat-lbl, .mockup-status, .mockup-header p,
  .mockup-budget-label, .mockup-budget-sub, .mockup-meal-detail,
  .pull-attribution, .chapter-label, .stats-rule-eyebrow, .receipt-meta,
  .receipt-footer, .receipt-head small, .receipt-line em, .toc-page,
  .tarifs-hero-eyebrow, .tarif-trial, .tarifs-special-eyebrow,
  .tarifs-special-meta, .tarifs-recevoir-eyebrow, .tarifs-trust,
  .toc-aside-label, .toc-aside-link::before, .invite-eyebrow, .invite-field label,
  .invite-hint, .invite-fineprint, .contact-editorial-label,
  .contact-editorial-item-label, .contact-editorial-item-meta,
  .contact-editorial-form-eyebrow, .contact-editorial-form label,
  .home-hero-cta-note, .home-plan-tag, .home-plan-meta,
  .feat-bonus-eyebrow, .feat-bonus-meta, .chapter-fineprint) {
  font-size: 13px !important;
  line-height: 1.45;
}

.masthead {
  min-height: 52px;
}
.hero-editorial-lede {
  font-size: clamp(17px, 1.4vw, 19px) !important;
}
.hero-ticker {
  font-size: 16px;
}
.stats-rule-item {
  box-shadow: none;
}
.stats-rule-eyebrow {
  letter-spacing: .09em !important;
}
.calc-editorial {
  box-shadow: none !important;
  border-radius: 16px;
}
.letter {
  border-radius: 4px;
  transform: none !important;
}
.source:hover,
.toc-entry:hover,
.letter:hover {
  transform: none !important;
}
.tarifs-special-grid,
.tarifs-recevoir-inner,
.home-plan,
.feat-bonus-card,
.invite-card {
  box-shadow: none !important;
}

/* ── 13. ERROR / EMPTY STATES ─────────────────────────────── */
.error-page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(28px + env(safe-area-inset-top)) calc(22px + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(22px + env(safe-area-inset-left));
  background: var(--paper);
}
.error-shell {
  width: min(100%, 680px);
}
.error-brand {
  margin-bottom: 32px;
  font-family: var(--font-display);
  font-size: 23px;
  color: var(--ink);
}
.error-rule {
  border-top: 1px solid var(--ink);
  padding-top: 24px;
}
.error-eyebrow,
.error-quiet {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-muted);
}
.error-code {
  margin: 8px 0 2px;
  font-family: var(--font-display);
  font-size: clamp(64px, 16vw, 112px);
  line-height: .9;
  letter-spacing: -.05em;
  color: var(--brand-dark);
}
.error-title {
  margin: 16px 0 12px;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: clamp(30px, 6vw, 46px);
  line-height: 1.05;
  font-weight: 400;
}
.error-copy {
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.error-quiet { margin-top: 32px; }

/* ── 14. TABLETTE / MOBILE ────────────────────────────────── */
@media (max-width: 1024px) {
  .content {
    /* La gouttière est nommée pour que le panneau pleine largeur puisse
       la reprendre au lieu de la deviner (cf. .recipe-panel plus bas). */
    --gouttiere: clamp(20px, 4vw, 36px);
    padding-left: var(--gouttiere);
    padding-right: var(--gouttiere);
  }
  .recipe-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .recipe-layout > div:last-child {
    max-width: none;
  }
}

@media (max-width: 900px) {
  .page-masthead {
    margin-bottom: 28px;
  }
  .page-masthead-title {
    line-height: 1.02;
  }
  .page-masthead-meta {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .auth-brand {
    display: none !important;
  }
  .auth-form-side {
    padding-inline: max(20px, env(safe-area-inset-left)) !important;
  }
  .masthead {
    font-size: 13px !important;
    letter-spacing: .08em !important;
  }
  .hero-editorial-eyebrow {
    font-size: 13px !important;
  }
  .hero-editorial-lede {
    font-size: 16px !important;
  }
  .stats-rule-eyebrow {
    font-size: 13px !important;
  }
  .stats-rule-value {
    font-size: clamp(30px, 8vw, 42px) !important;
  }
  .chapter-label {
    font-size: 13px !important;
  }
}

@media (max-width: 768px) {
  :where(.content, .section, .hero-editorial, .chapter, .sources,
    .letters-inner, .back-cover, .tarifs-hero, .tarifs-plans,
    .contact-editorial, .home-chapters, .home-pricing) {
    padding-left: max(18px, env(safe-area-inset-left)) !important;
    padding-right: max(18px, env(safe-area-inset-right)) !important;
  }

  .page-masthead-title {
    font-size: clamp(34px, 10.2vw, 48px);
  }
  .page-masthead-lede {
    font-size: 16px !important;
  }

  /* Panneau pleine largeur — corrigé 2026-08-19.

     Deux défauts se combinaient. D'abord `margin-inline: -18px` ne
     correspondait à AUCUNE gouttière réelle : le conteneur fait 20 px de
     padding ici, et 16 px sous 430 px. Trois nombres écrits à la main qui
     dérivent l'un de l'autre. Ensuite mobile-fixes.css impose
     `width: 100%` au panneau : une largeur explicite empêche des marges
     négatives d'élargir la boîte. La marge de gauche le décalait donc
     sans que celle de droite ne le rattrape — 2 px hors écran à gauche,
     34 px de blanc à droite, mesuré sur un écran de 393 px.

     Maintenant la marge reprend la variable de gouttière, donc elle ne
     peut plus diverger, et `width: auto` rend la main aux marges. */
  .recipe-panel {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    width: auto;
    margin-inline: calc(var(--gouttiere, 16px) * -1);
  }
  .recipe-body {
    padding-inline: 16px;
  }
  .rmeta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rm,
  .rm:first-child {
    padding: 8px 8px 8px 0;
    border-right: 0;
    border-bottom: 1px solid var(--border2);
  }
  .rm:nth-last-child(-n+2) { border-bottom: 0; }
  .recipe-ing-meta {
    max-width: 100%;
  }

  .cuisine-header {
    align-items: flex-start;
  }
  .cuisine-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .cuisine-step {
    min-height: 44vh;
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .cuisine-step-text {
    font-size: clamp(22px, 6vw, 29px);
  }
  .cuisine-nav {
    position: sticky;
    bottom: calc(66px + env(safe-area-inset-bottom));
    z-index: 8;
    padding: 8px 0;
    background: var(--paper);
  }
  .cuisine-nav > * {
    flex: 1;
  }
  .feedback-btn {
    min-width: 0;
    flex: 1;
  }

  .scan-editorial,
  .scan-wrapper {
    width: 100%;
  }
  .scan-editorial-form .btn-main,
  .scan-actions .btn-main,
  .scan-actions .btn-sec {
    width: 100%;
  }
  .scan-card-head {
    align-items: flex-start;
  }

  .rapport-tabs .surveillance-stats {
    grid-template-columns: 1fr !important;
  }
  .rapport-tabs .surveillance-stats > .card {
    border-right: 0 !important;
    border-bottom: 1px solid var(--border2) !important;
  }
  .rapport-tabs .surveillance-stats > .card:last-child {
    border-bottom: 0 !important;
  }

  .profil-grid {
    grid-template-columns: 1fr !important;
  }
  .profil-radio-row {
    grid-template-columns: 1fr;
  }

  .abo-plans {
    grid-template-columns: 1fr !important;
  }
  .tarif {
    padding: 24px 20px !important;
  }

  .stats-rule {
    grid-template-columns: 1fr !important;
    border-top: 1px solid var(--ink);
  }
  .stats-rule-item,
  .stats-rule-item:last-child {
    border-right: 0 !important;
    border-bottom: 1px solid var(--border2) !important;
    text-align: left !important;
    padding: 16px 0 !important;
  }
  .stats-rule-item:last-child { border-bottom: 0 !important; }
  .stats-rule-value sub {
    display: inline !important;
    margin-left: 8px !important;
  }
  .sources-list {
    grid-template-columns: 1fr !important;
  }
  .source {
    padding: 24px 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
  .letters-stack { gap: 16px !important; }
  .letter { padding: 32px 24px 24px !important; }
}

/* 430 / 393 / 375 / 320 : le même layout doit survivre sans version spéciale. */
@media (max-width: 430px) {
  .content {
    --gouttiere: max(16px, env(safe-area-inset-left));
    padding-left: var(--gouttiere) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
  .page-masthead-title {
    font-size: clamp(32px, 10.5vw, 42px);
  }
  .page-masthead-meta .page-masthead-sep {
    display: none;
  }
  .page-masthead-meta {
    gap: 4px 8px;
  }
  .mobile-tabbar .mtab {
    padding-inline: 2px !important;
  }
  .mobile-tabbar .mtab-label {
    font-size: 13px !important;
  }
  .composer-bar {
    left: 12px !important;
    right: 12px !important;
    /* transform:none indispensable — ajouté 2026-08-19.
       app.css centre cette barre avec `left: 50%` + `translateX(-50%)`.
       En passant à `left: 12px` sans neutraliser la translation, la barre
       se décalait de la moitié de sa largeur vers la gauche : mesurée à
       x = -172px sur un écran de 393px, donc aux trois quarts hors champ,
       sur TOUTES les pages de l'app (la barre vit dans layouts/app).
       Le média fait max-width:430px : tous les iPhone et la plupart des
       Android étaient concernés. */
    transform: none !important;
  }
  .recipe-body { padding-inline: 16px; }
  .recipe-title { font-size: 30px; }
  .recipe-sub-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  .recipe-sub-arrow { display: none; }
  .cuisine-header-actions .cuisine-tts-label {
    display: none;
  }
  .cuisine-nav {
    gap: 8px;
  }
  .cuisine-nav .btn-main,
  .cuisine-nav .btn-sec {
    padding-inline: 12px;
  }
  .scan-card-head {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 16px;
  }
  .scan-card-image {
    width: 72px !important;
    height: 72px !important;
  }
  .tarifs-toggle-option { min-width: 0 !important; padding-inline: 16px !important; }
}

@media (max-width: 375px) {
  .page-masthead-title { font-size: 38px; }
  .page-masthead-lede { font-size: 16px !important; }
  .rmeta { grid-template-columns: 1fr; }
  .rm,
  .rm:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--border2);
  }
  .rm:last-child { border-bottom: 0; }
  .cuisine-step-num { font-size: 54px; }
  .cuisine-step-text { font-size: 23px; }
  .cuisine-header-actions .btn-sec { padding-inline: 8px; }
  .hero-editorial-title { font-size: 38px !important; }
  .calc-editorial { padding: 24px 16px !important; }
}

@media (max-width: 320px) {
  .content {
    padding-left: max(14px, env(safe-area-inset-left)) !important;
    padding-right: max(14px, env(safe-area-inset-right)) !important;
  }
  .page-masthead-title { font-size: 30px; }
  .mobile-tabbar .mtab-label { font-size: 13px !important; }
  .mobile-tabbar .mtab-icon { width: 21px !important; height: 21px !important; }
  .cuisine-nav .btn-main,
  .cuisine-nav .btn-sec { font-size: 15px; }
  .hero-editorial-title { font-size: 38px !important; }
  .hero-editorial-lede { font-size: 16px !important; }
}

/* ── 15. PWA STANDALONE / SAFE AREAS ─────────────────────── */
@media (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
  }
  .topbar {
    padding-top: env(safe-area-inset-top);
  }
  .mobile-tabbar {
    padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
  }
  .composer-sheet-panel {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Agrandissement de texte : éviter les composants à hauteur verrouillée. */
@media (max-width: 900px) {
  :where(.topbar, .nav .ni, .nav-group-toggle, .mtab, .cuisine-header,
    .cuisine-nav, .scan-status, .profil-toggle-row, .tarif-head) {
    height: auto !important;
  }
}

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

/* ════════════════════════════════════════════════════════════════
   Onglet Semaine — repères ajoutés le 2026-08-20
   ════════════════════════════════════════════════════════════════ */

/* « Aujourd'hui » sur le jour courant du sélecteur.
   Sur une rangée de sept dates, « le 20 » n'aide personne tant qu'on
   n'a pas cherché quel jour on est. */
.menu-day-today {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 980px;
  background: var(--accent-deep);
  color: var(--cream-fixed);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Le total du souper passe en second sous le prix par portion. */
.menu-recipe-cover-stat-sub {
  display: block;
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-muted);
  letter-spacing: 0;
  text-transform: none;
}

/* « Pourquoi ce souper » — les raisons réelles du choix.
   Pas une carte de plus : un filet, un intertitre, une liste. Le poids
   visuel doit rester sous celui du plat lui-même. */
.menu-why {
  margin: var(--space-lg) 0;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border2);
}
.menu-why-title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.menu-why-list {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-why-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}
.menu-why-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-deep);
}
/* Au-delà de deux raisons, on passe sur deux colonnes dès qu'il y a la
   place : trois lignes empilées repoussent les ingrédients trop bas. */
@media (min-width: 560px) {
  .menu-why-list {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

/* Sélecteur de jour : rangée qui défile, pas grille écrasée — 2026-08-20.

   Il était en `repeat(7, minmax(0, 1fr))` : sept colonnes égales dans la
   largeur de l'écran, soit 46 px par pastille sur un iPhone. L'`overflow-x:
   auto` déjà présent ne servait donc à rien — une grille en 1fr ne dépasse
   jamais son conteneur. À 46 px, le mot « Aujourd'hui » ne rentre pas : il
   débordait de 22 px sur la pastille voisine.

   En rangée défilante, chaque pastille prend la largeur qu'il lui faut et
   celle du jour courant peut porter son repère en entier. C'est aussi le
   geste attendu sur un calendrier horizontal : on pousse du pouce. */
.menu-days {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  /* Les pastilles touchent les bords de l'écran quand on défile, sinon la
     dernière semble coupée par une marge invisible. */
  padding-inline: 2px;
}
.menu-days > .menu-day {
  flex: 0 0 auto;
  min-width: 62px;
  scroll-snap-align: start;
}
.menu-days > .menu-day.is-today {
  min-width: 104px;
}
.menu-day-today {
  /* Le badge ne doit jamais élargir sa pastille au-delà du min-width
     prévu : s'il déborde, c'est le mot qu'on raccourcit, pas la mise en
     page qu'on casse. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Coût : « 5,53 $/portion » sur une ligne, le total en second.
   Le sous-titre ajouté au troisième chiffre créait un troisième élément
   dans un flex en baseline, ce qui disloquait la rangée sur trois lignes. */
.menu-recipe-cover-stat {
  flex-wrap: wrap;
}
.menu-recipe-cover-stat-sub {
  flex: 0 0 100%;
}

/* Le coût prend sa propre ligne. « 30 min » et « 4 portions » répondent à
   la même question (à quoi je m'engage ce soir) ; le prix en pose une
   autre. Et l'unité « $/portion » est trop large pour tenir en troisième
   colonne sur un écran de 393 px — elle se disloquait sur trois lignes. */
.menu-recipe-cover-stat--cout {
  flex: 0 0 100%;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border2);
}

/* Chapeau resserré — pour les pages dont le contenu doit tenir haut.
   Sur l'onglet Semaine, le chapeau standard poussait le plat du jour à
   712 px sur un écran de 852 : il fallait défiler pour savoir ce qu'on
   mange ce soir. Le titre reste en Young Serif, il perd juste le luxe de
   trois lignes. */
.page-masthead--compact .page-masthead-title {
  font-size: clamp(26px, 7.2vw, 34px) !important;
  line-height: 1.08 !important;
  text-wrap: balance;
}
.page-masthead--compact .page-masthead-lede {
  font-size: 15px !important;
  line-height: 1.45;
  margin-top: var(--space-2xs);
  max-width: 46ch;
}
.page-masthead--compact {
  margin-bottom: var(--space-md);
}

/* Les trois chiffres du souper en rangée compacte — 2026-08-20.
   Ils étaient empilés en colonne avec un filet vertical, ce qui donnait
   103 px de haut pour trois nombres. En pastilles bordées sur une rangée,
   c'est 60 px, et chaque chiffre se lit d'un coup avec son unité. */
@media (max-width: 900px) {
  .menu-recipe-cover-stats {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    padding-right: 0 !important;
    border-right: 0 !important;
    margin-bottom: var(--space-sm);
  }
  .menu-recipe-cover-stat {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 12px;
    border: 1px solid var(--border2);
    border-radius: 12px;
    background: var(--paper-soft);
  }
  .menu-recipe-cover-stat-num {
    font-size: 19px !important;
    line-height: 1.1;
  }
  .menu-recipe-cover-stat-unit {
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
    color: var(--ink-muted);
  }
  /* Le coût reprend sa place dans la rangée : la pastille lui donne déjà
     sa propre boîte, il n'a plus besoin d'une ligne à lui. */
  .menu-recipe-cover-stat--cout {
    flex: 1 1 auto;
    margin-top: 0;
    padding-top: 8px;
    border-top: 1px solid var(--border2);
  }
  .menu-recipe-cover-stat-sub {
    flex: none;
    margin-top: 2px;
    font-size: 12px;
  }
}

/* Le bouton principal de la carte du souper. */
.menu-recipe-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  font-size: 15px;
}

/* Le « É » filigrane cesse de traverser le titre — 2026-08-20.
   À clamp(240px, 38vw, 420px) et débordant de la carte, il passait
   derrière « riz citronné » et la ligne de descripteurs : on ne lisait
   plus une signature de marque mais une forme coupée en travers du texte.
   Plus petit, plus discret, et calé dans le coin qu'il ne quitte plus. */
@media (max-width: 900px) {
  .menu-recipe-cover--editorial::before {
    font-size: clamp(140px, 34vw, 200px) !important;
    right: -12px !important;
    bottom: -28px !important;
    opacity: 0.05 !important;
  }
}

/* ── Fiche recette : moins de traits, plus de lecture — 2026-08-20 ──
   La fiche comptait douze éléments encadrés dans le seul corps de la
   recette. Les métadonnées étaient présentées en rangées bordées, ce qui
   les faisait lire comme un formulaire. Une légende suffit. */
.recipe-faits {
  margin: var(--space-sm) 0 var(--space-lg);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.recipe-faits strong {
  color: var(--ink);
  font-weight: 700;
}
.recipe-faits span[aria-hidden] {
  color: var(--ink-fade);
  margin: 0 4px;
}

/* Le réglage des portions et le coût : deux blocs distincts, séparés
   pour de bon. Le prix se tenait à 8 px du bouton « + », donc on le
   lisait comme une partie du sélecteur. */
.recipe-portions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
}
.recipe-portions .rm-portions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}
.recipe-portions-val {
  font-size: 16px;
  color: var(--ink);
  min-width: 92px;
  text-align: center;
}
.recipe-portions-cout {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
}
.recipe-portions-cout-lbl {
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
.recipe-portions-cout strong {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Semaine encore vierge sur le tableau de bord — 2026-08-20.
   Un compte neuf voyait un « 0 % utilisé » géant occuper le tiers gauche
   de sa carte, sans rien autour. Le chiffre est vrai mais il ne dit rien,
   et il prend la meilleure place de l'écran d'accueil. La place revient à
   l'action qui fera exister ce chiffre. */
/* État vide de l'accueil : UNE phrase, jamais un bouton.
   Le bloc `.dash-cta` juste en dessous porte déjà l'action du premier
   jour. Si tu es tenté d'ajouter un bouton ici, mesure d'abord l'écart
   avec `.dash-cta` — la version précédente laissait 12 px entre les deux. */
.dash-hero-vierge-texte {
  margin: var(--space-md) 0 var(--space-sm);
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.dash-hero-vierge-texte strong {
  color: var(--ink);
  font-weight: 700;
}