/* ============================================================
   public/css/mobile-fixes.css — L'Économe
   Corrections responsive mobile + safe-area iOS (notch)
   Chargé APRÈS app.css → overrides ciblés
   ============================================================ */

/* ── Mobile tab bar (iOS native feel) ─────────────────────────
   Active sur tout viewport ≤768px (PWA standalone ET navigateur web).
   L'expérience premium s'applique aux utilisateurs qui n'ont pas
   encore installé — ça les incite à le faire et garde la cohérence. */
.mobile-tabbar {
  display: none;
}

/* Hub Compte — masqué par défaut, activé à l'intérieur du media query */
.compte-pwa-hub {
  display: none;
}

@media (max-width: 768px) {
  /* ── Native-app feel : bloquer les gestes web qui cassent l'illusion
     d'app installée (rebond scroll iOS, zoom double-tap, tap highlight
     orange par défaut sur Android). ───────────────────────────────── */
  html,
  body {
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
  }
  a,
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  .mtab,
  .cph-row,
  .cph-shortcut {
    touch-action: manipulation;
  }

  .mobile-tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: var(--paper-sheet);
    border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom)) 4px;
  }
  [data-theme="dark"] .mobile-tabbar {
    background: oklch(0.22 0.015 90);
    border-top-color: var(--border);
  }
  .mtab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    min-height: 48px;
    text-decoration: none;
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2px;
    border-radius: 10px;
    transition:
      color 0.15s ease,
      background 0.15s ease,
      transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mtab:active {
    transform: scale(0.97);
    background: color-mix(in oklch, var(--brand) 8%, transparent);
  }
  .mtab.on {
    color: var(--brand);
  }
  .mtab.on .mtab-icon {
    stroke-width: 2.2;
  }
  .mtab-icon {
    width: 22px;
    height: 22px;
  }
  .mtab-label {
    line-height: 1;
  }

  /* Laisser la place au tabbar (~62px) + composer-bar (~62px) + marge
     visuelle confortable. 150px était à la limite sur iPhone 14/15 Pro
     avec home-indicator — « Tes prochains repas. » + son lien « Voir le
     menu complet → » touchaient le composer bar. 180px donne du air et
     évite le ressenti « contenu coupé ». */
  .content {
    /* User signale gros vide entre contenu court et footer mobile.
       Cause : .content { flex: 1 } sticky footer pattern desktop pousse
       le footer en bas du viewport quand contenu court. Sur mobile en
       browser ça crée 600px+ de vide visible avant le footer (qui est
       déjà au-dessus du composer + tabbar fixes). Fix mobile : flex: 0
       pour laisser le contenu sizer naturellement, footer juste après. */
    flex: 0 1 auto !important;
    padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
  }
  .app-footer {
    /* Avant : padding-bottom 180px doublait celui de .content → vide
       perçu de ~600px. La .content a déjà tout le padding nécessaire pour
       clearer le composer + tabbar. Footer = padding tight + margin-top
       réduit pour rester près du contenu. */
    margin-top: 24px !important;
    padding-bottom: 18px !important;
  }
}

/* ── Background racine (évite le blanc au pinch-zoom) ──────── */
html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}
[data-theme="dark"] html,
html[data-theme="dark"] {
  background: var(--paper);
}
body {
  background: var(--paper);
}
/* L'app layout remplit le viewport minimal sur toutes tailles */
.app-layout {
  min-height: 100vh;
  min-height: 100dvh;
}
[data-theme="dark"] body {
  background: var(--paper);
}

/* ── Anti-débordement horizontal mobile ────────────────────── */
/* Le scroll vertical est géré nativement par body (voir app.css :
   le scroll-lock est strictement desktop ≥ 769px). Ici on se contente
   d'empêcher le débordement horizontal. */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

/* Scroll-lock quand un overlay plein-écran est actif (modal célébration,
   vocal, cook mode). Appliqué via classe sur <body> depuis JS pour éviter
   les inline styles qui peuvent leaker. Marche sur toutes tailles :
   - mobile : bloque le scroll naturel de body
   - desktop : redondant avec le body overflow:hidden déjà appliqué, mais
     empêche aussi .content de scroller sous le modal. */
body.scroll-locked {
  overflow: hidden !important;
}
body.scroll-locked .content {
  overflow: hidden !important;
}

/* ── Safe-area iOS (notch) — topbar et sidebar ─────────────── */
.topbar {
  padding-left: max(28px, env(safe-area-inset-left));
  padding-right: max(28px, env(safe-area-inset-right));
  padding-top: max(12px, env(safe-area-inset-top));
}
.sidebar {
  padding-left: env(safe-area-inset-left);
  padding-bottom: env(safe-area-inset-bottom);
}
.content {
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

/* ── Sidebar mobile : background OPAQUE forcé ──────────────── */
@media (max-width: 768px) {
  /* Cleanup 2026-05-09 (audit R24) : avant on declarait `background`
     + `background-color` les deux avec !important. Redondant — la
     2e annule la 1ere de toute facon (cascade). On garde juste
     `background` qui inclut color + image en shorthand. */
  .sidebar {
    background: var(--cream-fixed, var(--paper-sheet)) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.18);
  }
  [data-theme="dark"] .sidebar {
    background: var(--cream-fixed, var(--paper-sheet)) !important;
  }
  .sidebar-overlay {
    background: rgba(0, 0, 0, 0.45) !important;
    /* Couvre jusque sous le notch pour masquer la status bar
       quand l'overlay est actif. */
    top: calc(0px - env(safe-area-inset-top)) !important;
    padding-top: env(safe-area-inset-top);
  }
}

/* ── SITE PUBLIC : burger menu mobile opaque ───────────────── */
/* Corrige la transparence du menu mobile sur accueil/tarifs/faq/contact/login.
   IMPORTANT : on utilise des hex literals (pas var() → oklch()) parce que
   sur les browsers qui ne supportent pas oklch (iOS Safari < 15.4, embedded
   webviews, etc.), var(--paper-sheet) résout sur une valeur invalide,
   et la propriété tombe à transparent (initial value), pas au declaration
   précédent. Hex first → marche partout, point.

   Audit /audit (2026-05-12) : on overlay @supports oklch pour les browsers
   modernes — hex pour fallback < iOS 15.4, var() pour browsers qui parsent
   oklch (95%+ du parc 2026). Best of both worlds : marche partout +
   respecte dark mode et tokens sur modernes. */
@media (max-width: 768px) {
  .site-nav {
    background: #faf6ec !important;
  }
  .nav-links {
    background: #faf6ec !important;
    z-index: 105 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  }
  .nav-links.open {
    opacity: 1 !important;
    visibility: visible !important;
    background: #faf6ec !important;
  }
  .site-nav .nav-links.open a:not(.nav-btn-main):not(.nav-btn-sec) {
    color: #2e2e26 !important;
  }
  .site-nav .nav-links.open .nav-btn-main {
    background: #4a9e46 !important;
    background-color: #4a9e46 !important;
    color: #faf6ec !important;
  }
  .site-nav .nav-links.open .nav-btn-sec {
    color: #2e6b2a !important;
  }
  .nav-burger {
    z-index: 110 !important;
  }
  .nav-logo {
    z-index: 110 !important;
  }
}
/* Browsers modernes (95%+ 2026) : tokens prennent le relais sur hex.
   Permet au dark mode + theme switching de marcher correctement. */
@supports (color: oklch(0 0 0)) {
  @media (max-width: 768px) {
    .site-nav {
      background: var(--paper-sheet) !important;
    }
    .nav-links {
      background: var(--paper-sheet) !important;
    }
    .nav-links.open {
      background: var(--paper-sheet) !important;
    }
    .site-nav .nav-links.open a:not(.nav-btn-main):not(.nav-btn-sec) {
      color: var(--ink) !important;
    }
    .site-nav .nav-links.open .nav-btn-main {
      background: var(--brand) !important;
      background-color: var(--brand) !important;
      color: var(--paper) !important;
    }
    .site-nav .nav-links.open .nav-btn-sec {
      color: var(--brand-dark) !important;
    }
  }
}

/* ── Touch targets ≥ 44px (Apple HIG) sur mobile ───────────── */
@media (max-width: 1024px) {
  .ni {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .btn-sec,
  .btn-main,
  .dark-toggle,
  .sidebar-toggle {
    min-height: 44px;
    min-width: 44px;
  }
  .chk {
    width: 28px;
    height: 28px;
    font-size: 12px;
    border-radius: 7px;
  }
  /* Nav group toggles — étaient 30px, maintenant 44px */
  .nav-group-toggle {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* Topbar icon buttons */
  .tb-icon-btn {
    min-width: 44px;
    min-height: 44px;
  }
  /* Dashboard quick actions */
  .dash-hero-action {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* Circulaires-pending banner close */
  .circulaires-pending-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Garde-manger action buttons (consommé/gaspillé) */
  .pantry-action-btn {
    min-width: 44px;
    min-height: 44px;
  }
  /* Footer links */
  .app-footer-links a {
    display: inline-block;
    padding: 12px 4px;
  }
  /* Allergies checkboxes in profil */
  .ptag {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ── Texte minimum 12px sur mobile ─────────────────────────── */
@media (max-width: 768px) {
  .dash-stat-eyebrow,
  .dash-section-eyebrow,
  .page-masthead-eyebrow,
  .page-masthead-meta span,
  .logo-sub,
  .w-desc,
  .uplan {
    font-size: 12px !important;
  }
  .pill {
    font-size: 12px !important;
    padding: 4px 10px !important;
  }
  label {
    font-size: 12px;
  }
}

/* ── Profil : sticky save bar ───────────────────────────────── */
/* Desktop : 3 boutons sur une ligne, logout à droite. */
.profil-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.profil-logout {
  margin-left: auto;
}

/* Mobile web : stack vertical pour que chaque bouton respire
   sans tronquer "Sauvegarder". */
@media (max-width: 768px) {
  .profil-actions {
    position: sticky;
    bottom: 0;
    z-index: 50;
    background: var(--paper-sheet);
    border-top: 1px solid var(--border);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    margin: 16px -16px -16px;
    box-shadow: 0 -4px 16px oklch(0.22 0.02 110 / 0.08);
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .profil-actions .btn-main,
  .profil-actions .btn-sec {
    width: 100%;
    text-align: center;
  }
  .profil-actions .btn-main {
    padding: 13px 20px;
    font-size: 14px;
  }
  .profil-actions .btn-sec {
    padding: 11px 16px;
    font-size: 13px;
  }
  .profil-logout {
    margin-left: 0;
    width: 100%;
  }
  .profil-logout .btn-sec {
    width: 100%;
  }
}

/* PWA iPhone : tabbar fixe en bas, donc la sticky bar doit se
   positionner AU-DESSUS du tabbar (70px + safe-area). */
@media (max-width: 768px) {
  .profil-actions {
    bottom: calc(64px + env(safe-area-inset-bottom));
    padding: 12px 16px;
  }
}

/* ── Topbar : sticky + hauteur fixe mobile ─────────────────── */
@media (max-width: 768px) {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    min-height: 56px;
    max-height: 64px;
    overflow: hidden;
    background: var(--paper-sheet);
  }
  .topbar-form {
    flex-shrink: 0;
  }
}

/* Désencombrement topbar UNIQUEMENT en mode PWA installé.
   En Safari web normal, on garde tous les boutons (dark mode, live-pill). */
@media (max-width: 768px) {
  .topbar #darkToggle {
    display: none;
  }
  .topbar .live-pill {
    display: none;
  }

  /* PWA iOS : status bar translucide overlay le contenu → on relâche le
     max-height pour que padding-top env(safe-area-inset-top) puisse
     réellement pousser le contenu sous l'encoche. */
  .topbar {
    max-height: none;
    min-height: calc(56px + env(safe-area-inset-top));
    padding-top: calc(12px + env(safe-area-inset-top));
  }

  /* Sidebar : le logo-zone doit aussi respecter l'encoche en standalone. */
  .sidebar .logo-zone {
    padding-top: calc(18px + env(safe-area-inset-top));
  }
}

/* ── Grilles dashboard adaptées mobile ─────────────────────── */
@media (max-width: 768px) {
  .dgrid,
  .dgrid3 {
    grid-template-columns: 1fr;
  }
  .urgence-grid {
    grid-template-columns: 1fr 1fr;
  }
  .pantry-grid,
  .badges-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .fb-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .fb-amount {
    font-size: 42px;
  }
  .recipe-cover {
    height: 120px;
    font-size: 48px;
  }
  .cmp-row {
    flex-direction: column;
  }
}

/* .fb2-stats responsive override supprimé 2026-06-04 — dead code (cf.
   app.css commentaire .fb2-* block). */

/* ── KPI strip : breakpoint intermédiaire 640px ────────────── */
@media (max-width: 640px) {
  .kpi-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .kpi-val {
    font-size: 22px;
  }
  .fantome-banner {
    padding: 20px 18px;
  }
  .fb-amount {
    font-size: 36px;
  }
}

/* ── Topbar responsive — hide pill earlier, compact button ── */
@media (max-width: 768px) {
  .live-pill {
    display: none;
  }
  .tb-right .btn-main {
    font-size: 0; /* hide text */
    padding: 8px 10px;
    min-width: 40px;
  }
  .tb-right .btn-main::before {
    content: "✦ IA";
    font-size: 12px;
  }
}
@media (max-width: 480px) {
  .ptitle {
    font-size: 13px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tb-right .btn-main::before {
    content: "✦";
    font-size: 16px;
  }
  .tb-right .btn-main {
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .dark-toggle {
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── Très petit mobile 380px (iPhone SE) ───────────────────── */
@media (max-width: 480px) {
  .topbar {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  .ptitle {
    font-size: 12px;
    max-width: 110px;
  }
  .kpi-strip {
    grid-template-columns: 1fr;
  }
  .urgence-grid {
    grid-template-columns: 1fr;
  }
  .day-strip {
    flex-wrap: wrap;
  }
  .dc {
    flex: 0 0 calc(33.333% - 5px);
  }
}

/* ── Lisibilité : taille minimale font sur mobile ──────────── */
@media (max-width: 480px) {
  .kpi-lbl,
  .ri-detail,
  .si-r,
  .pred-timing {
    font-size: 11px;
  }
  .nav-sec,
  .logo-sub,
  .fb-eyebrow,
  .sc-lbl {
    font-size: 10px;
  }
}

/* ── Inputs : éviter zoom auto iOS (font-size ≥ 16px) ──────── */
@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

/* ── Tableaux scrollables horizontalement si débordement ───── */
@media (max-width: 768px) {
  .table-wrap,
  .content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* ── Modales adaptées mobile ───────────────────────────────── */
@media (max-width: 480px) {
  .modal-box,
  #vocalOverlay > div {
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin: 10px !important;
    padding: 24px 20px !important;
  }
}

/* ── DASHBOARD RESPONSIVE — corrections complètes ─────────── */

/* Tablette : fantôme banner + grilles */
@media (max-width: 1024px) {
  .fb-amount {
    font-size: 44px;
  }
  .fb-ring svg {
    width: 90px !important;
    height: 90px !important;
  }
  .dgrid {
    grid-template-columns: 1fr;
  }
  .dgrid3 {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile : empilage complet + tailles adaptées */
@media (max-width: 768px) {
  /* Budget fantôme : empiler le ring sous le texte */
  .fantome-banner {
    padding: 20px 16px;
    margin-bottom: 14px;
  }
  .fb-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .fb-left {
    width: 100%;
  }
  .fb-main {
    display: flex;
    align-items: baseline;
    gap: 4px;
  }
  .fb-amount {
    font-size: 38px;
  }
  .fb-currency {
    font-size: 18px;
  }
  .fb-sub {
    font-size: 12px;
  }
  .fb-tags {
    gap: 6px;
  }
  .fb-tags .ftag {
    font-size: 10px;
    padding: 3px 8px;
  }

  /* Ring : centrer sous le texte */
  .fb-ring {
    align-self: center;
    position: relative;
  }
  .fb-ring svg {
    width: 90px !important;
    height: 90px !important;
  }
  .fb-pct {
    font-size: 18px;
  }
  .fb-plbl {
    font-size: 9px;
  }

  /* KPI : 2 colonnes */
  .kpi-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .kpi {
    padding: 12px 14px;
  }
  .kpi-ico {
    font-size: 16px;
    margin-bottom: 4px;
  }
  .kpi-val {
    font-size: 20px;
  }
  .kpi-lbl {
    font-size: 10px;
  }

  /* Grilles dashboard : tout en une colonne */
  .dgrid,
  .dgrid3 {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Menu items */
  .ri {
    padding: 10px;
    gap: 10px;
  }
  .ri-emo {
    font-size: 22px;
  }
  .ri-name {
    font-size: 13px;
  }
  .ri-detail {
    font-size: 11px;
  }
  .ri-price {
    font-size: 14px;
  }

  /* Aubaines items */
  .si {
    padding: 8px 10px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .si-nom {
    font-size: 12px;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .si-p {
    font-size: 13px;
  }
  .si-pct {
    font-size: 8px;
  }
  .st {
    font-size: 9px;
    padding: 2px 5px;
    white-space: nowrap;
  }

  /* Prédictions */
  .pred-card {
    padding: 14px;
  }
  .pred-item {
    gap: 8px;
  }
  .pred-prod {
    font-size: 12px;
  }
  .pred-timing {
    font-size: 10px;
  }
  .pred-action {
    font-size: 10px;
    padding: 4px 8px;
  }

  /* Score card */
  .score-card {
    padding: 14px;
  }
  .sc-pct {
    font-size: 32px;
  }
  .sc-trophy {
    font-size: 24px;
  }
  .sc-desc {
    font-size: 11px;
  }

  /* Detective alertes */
  .detective-alert {
    padding: 10px 12px;
    gap: 8px;
  }

  /* Cards générales */
  .card {
    padding: 14px;
    margin-bottom: 10px;
    border-radius: 14px;
  }
  .chd {
    margin-bottom: 12px;
  }
  .ctitle {
    font-size: 14px;
  }
  .caction {
    font-size: 11px;
  }
  .pill {
    font-size: 9px;
    padding: 3px 8px;
  }
}

/* Petit mobile : encore plus compact */
@media (max-width: 480px) {
  .fantome-banner {
    padding: 16px 14px;
  }
  .fb-amount {
    font-size: 32px;
  }
  .fb-eyebrow {
    font-size: 8px;
    letter-spacing: 2px;
  }
  .fb-sub {
    font-size: 11px;
  }
  .fb-ring svg {
    width: 80px !important;
    height: 80px !important;
  }
  .fb-pct {
    font-size: 16px;
  }

  .kpi-strip {
    gap: 6px;
  }
  .kpi {
    padding: 10px 12px;
    border-radius: 14px;
  }
  .kpi-val {
    font-size: 18px;
  }

  .ri-emo {
    font-size: 20px;
  }
  .ri-price {
    font-size: 13px;
  }

  .card {
    padding: 12px;
    border-radius: 12px;
  }
  .chd {
    margin-bottom: 10px;
  }
}

/* iPhone SE / très petit */
@media (max-width: 480px) {
  .kpi-strip {
    grid-template-columns: 1fr 1fr;
  }
  .fb-amount {
    font-size: 28px;
  }
  .fb-currency {
    font-size: 14px;
  }
  .kpi-val {
    font-size: 16px;
  }
  .fb-ring svg {
    width: 70px !important;
    height: 70px !important;
  }
}

/* ── MENU PAGE RESPONSIVE ─────────────────────────────────── */

/* Recipe emoji (default desktop size) */
.recipe-emoji {
  font-size: 60px;
}

/* Day strip + checkboxes: touch-friendly on all screens */
.dc {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.chk {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.li {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {
  /* Grille recette + liste du soir : empiler en colonne */
  .menu-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Day strip : horizontal scroll, bien espacé */
  .day-strip {
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
  }
  .dc {
    min-width: 50px;
    min-height: 70px;
    padding: 10px 8px;
    scroll-snap-align: start;
    position: relative;
    z-index: 1;
  }
  .dn {
    font-size: 10px;
  }
  .dd {
    font-size: 16px;
  }
  .de {
    font-size: 16px;
  }

  /* Recipe panel */
  .recipe-panel {
    width: 100%;
  }
  .recipe-cover {
    height: 100px;
    border-radius: 14px 14px 0 0;
  }
  .recipe-emoji {
    font-size: 44px !important;
  }
  .recipe-body {
    padding: 14px;
  }
  .recipe-title {
    font-size: 18px;
  }
  .rmeta {
    flex-wrap: wrap;
    gap: 8px;
  }
  .rm {
    font-size: 12px;
  }

  /* Ingrédients : empiler pour plus de lisibilité */
  .ing-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 4px;
    padding: 8px 0;
  }
  .ing-row > div {
    margin-left: 0 !important;
  }
  .ing-row > div[style*="display:flex"] {
    flex-wrap: wrap;
    gap: 4px !important;
  }
  .pantry-tag,
  .expire-tag {
    font-size: 10px;
  }

  /* Liste du soir */
  .lp {
    width: 100%;
    padding: 14px;
  }
  .ls-title {
    font-size: 12px;
  }
  .li {
    gap: 10px;
    padding: 10px 0;
    min-height: 44px;
  }
  .li-n {
    font-size: 13px;
  }
  .li-q {
    font-size: 11px;
    white-space: nowrap;
  }

  /* Checkboxes : 44px touch target minimum */
  .chk {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 14px;
    flex-shrink: 0;
  }

  /* Recipe speed / meteo badges */
  .recipe-speed {
    font-size: 11px;
    padding: 4px 10px;
  }

  /* Bouton vert topbar : ne pas déborder */
  .tb-right .btn-main {
    font-size: 10px;
    padding: 6px 10px;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Instructions block */
  .jour-panel div[style*="white-space:pre-line"] {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }

  /* Bouton liste courses */
  .jour-panel .btn-main {
    font-size: 13px;
    padding: 12px 16px;
  }
}

@media (max-width: 480px) {
  .recipe-cover {
    height: 80px;
  }
  .recipe-emoji {
    font-size: 36px !important;
  }
  .recipe-title {
    font-size: 16px;
  }
  .rm {
    font-size: 11px;
  }
  .dc {
    min-width: 44px;
    padding: 8px 6px;
  }
  .dd {
    font-size: 14px;
  }
  .dn {
    font-size: 9px;
  }
  .chk {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  .lp {
    padding: 12px;
  }
  .recipe-body {
    padding: 12px;
  }
}

/* ── ADMIN CIRCULAIRES RESPONSIVE ─────────────────────────── */
@media (max-width: 768px) {
  /* Boutons enseigne en grille 2 colonnes */
  div[style*="grid-template-columns"][style*="minmax(180px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  div[style*="grid-template-columns"][style*="minmax(140px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* ── AUTH PAGES : décale sous la topbar fixe + responsive ──── */
.auth-body .auth-split {
  padding-top: 64px;
}

@media (max-width: 768px) {
  .auth-brand {
    display: none !important;
  }
  .auth-form-side {
    width: 100% !important;
    padding: 20px !important;
    min-height: calc(100vh - 64px);
  }
}

/* ── Témoignages : marquee horizontal infini ─────────────────── */
.testimonials-marquee {
  margin-top: 48px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.testimonials-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: testimonials-scroll 40s linear infinite;
}
@media (hover: hover) and (pointer: fine) {
  .testimonials-marquee:hover .testimonials-track {
    animation-play-state: paused;
  }
}
.testimonial-card {
  flex: 0 0 340px;
  background: var(--paper-sheet);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  padding: 28px;
  text-align: left;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.testimonial-card p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 16px;
}
.testimonial-card .t-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.testimonial-card .t-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream-fixed);
  font-size: 14px;
  font-weight: 700;
}
.testimonial-card .t-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.testimonial-card .t-role {
  font-size: 11px;
  color: var(--ink-muted);
}

@keyframes testimonials-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-360px * 5));
  }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials-track {
    animation: none;
  }
}
@media (max-width: 640px) {
  .testimonial-card {
    flex: 0 0 280px;
    padding: 22px;
  }
  @keyframes testimonials-scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-300px * 5));
    }
  }
}

/* ── Compteur live ─────────────────────────────────────────── */
.live-counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 10px 18px;
  border-radius: 980px;
  background: oklch(0.59 0.16 143 / 0.12);
  border: 1px solid oklch(0.59 0.16 143 / 0.25);
  font-size: 13px;
  color: var(--ink);
}
.live-counter strong {
  font-weight: 700;
  color: var(--brand);
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0 oklch(0.59 0.16 143 / 0.6);
  animation: live-pulse 2s infinite;
}
@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 oklch(0.59 0.16 143 / 0.6);
  }
  70% {
    box-shadow: 0 0 0 10px oklch(0.59 0.16 143 / 0);
  }
  100% {
    box-shadow: 0 0 0 0 oklch(0.59 0.16 143 / 0);
  }
}

/* ── Trust bar : grille animée épiceries ───────────────────── */
.trust-bar {
  padding: 56px 24px;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--paper-soft);
}
.trust-label {
  font-size: 13px;
  color: var(--ink-muted);
  font-weight: 500;
  margin-bottom: 28px;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
}
.trust-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  background: var(--paper-sheet);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  .trust-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  }
}
.trust-emoji {
  font-size: 28px;
  animation: trust-float 4s ease-in-out infinite;
}
.trust-card:nth-child(2) .trust-emoji {
  animation-delay: 0.5s;
}
.trust-card:nth-child(3) .trust-emoji {
  animation-delay: 1s;
}
.trust-card:nth-child(4) .trust-emoji {
  animation-delay: 1.5s;
}
@keyframes trust-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@media (max-width: 640px) {
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Calculateur ───────────────────────────────────────────── */
.calc-card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--paper-sheet);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 36px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  text-align: center;
}
.calc-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 20px;
}
.calc-input-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.calc-input-row input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--brand) 0%, var(--brand) 50%, var(--paper-deep) 50%);
  outline: none;
}
.calc-input-row input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow:
    0 0 0 4px oklch(0.59 0.16 143 / 0.3),
    0 2px 8px oklch(0.59 0.16 143 / 0.42);
}
.calc-input-row input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow:
    0 0 0 4px oklch(0.59 0.16 143 / 0.3),
    0 2px 8px oklch(0.59 0.16 143 / 0.42);
}
.calc-input-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--paper-sheet);
  box-shadow: 0 2px 8px oklch(0.59 0.16 143 / 0.42);
  cursor: pointer;
}
.calc-input-row input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--paper-sheet);
  box-shadow: 0 2px 8px oklch(0.59 0.16 143 / 0.42);
  cursor: pointer;
}
.calc-input-val {
  min-width: 80px;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}
.calc-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.calc-result {
  background: var(--paper);
  border-radius: 14px;
  padding: 20px;
}
.calc-result-hl {
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
  color: var(--cream-fixed);
}
.calc-result-lbl {
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 6px;
}
.calc-result-val {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.calc-result:not(.calc-result-hl) .calc-result-val {
  color: var(--ink);
}
@media (max-width: 480px) {
  .calc-card {
    padding: 24px;
  }
  .calc-input-row {
    flex-direction: column;
    gap: 12px;
  }
}

/* ── Avant / Après slider ──────────────────────────────────── */
.ba-slider {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  cursor: ew-resize;
  user-select: none;
  background: var(--paper-sheet);
}
.ba-side {
  position: relative;
  padding: 32px;
}
.ba-after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--paper-sheet);
  clip-path: inset(0 0 0 50%);
}
.ba-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.ba-tag-red {
  background: oklch(0.94 0.032 22);
  color: var(--danger);
}
.ba-tag-green {
  background: var(--accent-tint);
  color: var(--brand-dark);
}
.ba-receipt {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
}
.ba-line {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
  color: var(--ink-soft);
}
.ba-line em {
  font-style: normal;
  color: var(--brand);
  font-weight: 600;
  font-size: 11px;
}
.ba-total {
  margin-top: 8px;
  padding-top: 14px !important;
  border-top: 2px solid var(--ink);
  border-bottom: none;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}
.ba-total-green {
  color: var(--brand-dark) !important;
  border-top-color: var(--brand-dark);
}
.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background: var(--brand);
  cursor: ew-resize;
  z-index: 10;
}
.ba-handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--cream-fixed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 4px 16px oklch(0.59 0.16 143 / 0.42);
  letter-spacing: -2px;
}
.ba-savings {
  text-align: center;
  margin-top: 24px;
  font-size: 16px;
  color: var(--ink-soft);
}
.ba-savings strong {
  color: var(--brand);
  font-size: 22px;
  font-weight: 800;
}

/* Sticky mobile CTA — defined and controlled in public/css/site.css
   (with IntersectionObserver in layouts/site.blade.php). The legacy
   block here is removed so it doesn't override the new logic. */
body.auth-body .sticky-cta-mobile {
  display: none !important;
}

/* ── Wizard register — RELOCALISÉ vers auth-landing.css 2026-05-10 (P0) ─ */

/* ── Comparateur ───────────────────────────────────────────── */
.comp-search {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin: 32px auto 0;
}
.comp-search input {
  flex: 1;
  padding: 16px 20px;
  border: 2px solid var(--paper-deep);
  border-radius: 14px;
  font-size: 15px;
  background: var(--paper-sheet);
  outline: none;
  transition: border-color 0.2s;
}
.comp-search input:focus {
  border-color: var(--brand);
}
.comp-search button {
  padding: 16px 28px;
  border-radius: 14px;
}

.comp-suggestions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.comp-sug-label {
  font-size: 13px;
  color: var(--ink-muted);
  margin-right: 4px;
}
.comp-sug {
  padding: 6px 14px;
  background: var(--paper-sheet);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  transition:
    transform 0.2s,
    opacity 0.2s,
    color 0.2s,
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}
@media (hover: hover) and (pointer: fine) {
  .comp-sug:hover {
    border-color: var(--brand);
    background: oklch(0.59 0.16 143 / 0.1);
    color: var(--brand);
  }
}

.comp-empty {
  text-align: center;
  padding: 60px 20px;
}
.comp-empty-emoji {
  font-size: 48px;
  margin-bottom: 16px;
}
.comp-empty h3 {
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 8px;
}
.comp-empty p {
  color: var(--ink-muted);
}

.comp-best {
  max-width: 720px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--brand), var(--brand-light));
  color: var(--cream-fixed);
  border-radius: 24px;
  padding: 40px 32px;
  text-align: center;
  box-shadow: 0 12px 40px oklch(0.59 0.16 143 / 0.32);
}
.comp-best-tag {
  display: inline-block;
  padding: 6px 16px;
  background: color-mix(in oklch, var(--paper-sheet) 25%, transparent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.comp-best-product {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
}
.comp-best-price {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
}
.comp-best-price span {
  display: block;
  font-size: 16px;
  font-weight: 500;
  margin-top: 8px;
  opacity: 0.9;
}
.comp-best-savings {
  margin-top: 20px;
  font-size: 14px;
  opacity: 0.95;
}
.comp-best-savings strong {
  font-weight: 800;
}

.comp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.comp-store {
  background: var(--paper-sheet);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  overflow: hidden;
}
.comp-store-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--paper-soft);
}
.comp-store-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}
.comp-store-count {
  font-size: 12px;
  color: var(--ink-muted);
}
.comp-store-maxi .comp-store-head {
  border-top: 4px solid var(--paille);
}
.comp-store-super-c .comp-store-head {
  border-top: 4px solid var(--danger);
}
.comp-store-iga .comp-store-head {
  border-top: 4px solid var(--ardoise);
}
.comp-store-metro .comp-store-head {
  border-top: 4px solid var(--brand);
}
.comp-store-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 13px;
}
.comp-items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.comp-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.comp-item:last-child {
  border-bottom: none;
}
.comp-item-info {
  flex: 1;
  min-width: 0;
}
.comp-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comp-item-unit {
  font-size: 11px;
  color: var(--ink-muted);
}
.comp-item-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.comp-item-old {
  font-size: 11px;
  color: var(--ink-muted);
  text-decoration: line-through;
}
.comp-item-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.comp-item-discount {
  font-size: 10px;
  font-weight: 700;
  color: var(--brand);
  background: oklch(0.59 0.16 143 / 0.14);
  padding: 2px 6px;
  border-radius: 4px;
}

.comp-cta {
  margin-top: 56px;
  padding: 48px 32px;
  text-align: center;
  background: var(--paper);
  border-radius: 24px;
}
.comp-cta h3 {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
}
.comp-cta p {
  color: var(--ink-muted);
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .comp-grid {
    grid-template-columns: 1fr;
  }
  .comp-best-price {
    font-size: 44px;
  }
  .comp-search {
    flex-direction: column;
  }
  .comp-search button {
    width: 100%;
  }
}

/* ── Trust tiles : monogrammes épiceries (légalement safe) ──── */
.trust-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 16px 22px;
  background: var(--paper-sheet);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  text-align: center;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}
.trust-tile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--tile-color, var(--brand));
}
@media (hover: hover) and (pointer: fine) {
  .trust-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  }
}
.trust-mono {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--tile-color, var(--brand));
  color: var(--cream-fixed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -1px;
  box-shadow: 0 8px 20px var(--tile-shadow, oklch(0.59 0.16 143 / 0.32));
}
.trust-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.trust-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.trust-maxi {
  --tile-color: var(--paille);
  --tile-shadow: oklch(0.82 0.11 88 / 0.38);
}
.trust-maxi .trust-mono {
  color: var(--ink);
}
.trust-superc {
  --tile-color: var(--danger);
  --tile-shadow: oklch(0.44 0.14 25 / 0.32);
}
.trust-iga {
  --tile-color: var(--ardoise);
  --tile-shadow: oklch(0.52 0.1 220 / 0.32);
}
.trust-metro {
  --tile-color: var(--brand);
  --tile-shadow: oklch(0.59 0.16 143 / 0.32);
}

.trust-disclaimer {
  max-width: 720px;
  margin: 24px auto 0;
  font-size: 11px;
  color: var(--ink-muted);
  text-align: center;
  font-style: italic;
}

/* Override de l'ancien style trust-card pour ne pas conflicter */
.trust-card {
  display: none;
}

/* ── Icônes SVG features ────────────────────────────────────── */
.feat-icon-svg {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: oklch(0.59 0.16 143 / 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--brand);
  transition:
    transform 0.3s ease,
    background 0.3s ease;
}
.feat-icon-svg svg {
  width: 32px;
  height: 32px;
}
@media (hover: hover) and (pointer: fine) {
  .feat-card:hover .feat-icon-svg {
    transform: scale(1.08) rotate(-3deg);
    background: color-mix(in oklch, var(--brand) 15%, transparent);
  }
}
.feat-card-highlight .feat-icon-svg {
  background: var(--brand);
  color: var(--cream-fixed);
}
@media (hover: hover) and (pointer: fine) {
  .feat-card-highlight:hover .feat-icon-svg {
    background: var(--brand-dark);
  }
}
/* Cache l'ancien style emoji UNIQUEMENT là où il y a un SVG à côté */
.feat-card:has(.feat-icon-svg) .feat-icon {
  display: none !important;
}

/* ── PROFIL PAGE RESPONSIVE ──────────────────────────────────── */
@media (max-width: 768px) {
  /* Profil : 2-col grid → single column */
  .profil-grid {
    grid-template-columns: 1fr !important;
  }
  /* Mode optimisation tags : stack on small screens */
  .profil-grid .ptag {
    min-width: unset !important;
  }
  /* Bottom action buttons : wrap */
  .profil-grid ~ div[style*="display:flex"] {
    flex-wrap: wrap;
  }
  .profil-grid ~ div[style*="display:flex"] > * {
    flex: 1 1 auto;
    text-align: center;
  }
  .profil-grid ~ div[style*="display:flex"] form {
    margin-left: 0 !important;
  }
}
@media (max-width: 480px) {
  .ptag {
    padding: 8px 10px !important;
    font-size: 11px;
  }
  .ptag div[style*="font-size:20px"] {
    font-size: 16px !important;
  }
}

/* ── Décorations flottantes hero ────────────────────────────── */
.hero-mockup {
  position: relative;
}
.hero-deco {
  position: absolute;
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 8px 24px oklch(0.59 0.16 143 / 0.25));
  z-index: 2;
  pointer-events: none;
  animation: hero-float 6s ease-in-out infinite;
}
.hero-deco-1 {
  top: -20px;
  left: -10px;
  animation-delay: 0s;
}
.hero-deco-2 {
  top: 20%;
  right: -30px;
  width: 72px;
  height: 72px;
  animation-delay: 1.5s;
}
.hero-deco-3 {
  bottom: 20%;
  left: -30px;
  animation-delay: 3s;
}
.hero-deco-4 {
  bottom: -10px;
  right: 10%;
  animation-delay: 4.5s;
}

@keyframes hero-float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(3deg);
  }
}
@media (max-width: 768px) {
  .hero-deco {
    display: none;
  }
}

/* ── Showcase SVG illustrations ────────────────────────────── */
.showcase-svg {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 12px 40px oklch(0.59 0.16 143 / 0.15));
}
.showcase-visual-inner {
  display: none;
}

/* ==================================================================
   DASHBOARD — REFONTE MOBILE NATIVE-FEEL
   Casse le mega-bento-card en blocs distincts, tuiles d'action 2×3,
   respiration entre sections. UNIQUEMENT en PWA installée — le web
   mobile (Safari navigateur) reste tel quel pour garder l'aspect
   "site web" du site.
   ================================================================== */
@media (max-width: 768px) {
  /* 1 — Hero : plus de "mega-card". Juste un conteneur neutre
     qui laisse respirer ses enfants. */
  .dash-hero {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 18px;
  }
  .dash-hero::before {
    display: none !important;
  }

  /* 2 — Greeting : bloc de texte simple, pas encapsulé */
  .dash-hero-greeting {
    margin-bottom: 18px;
    padding: 0 2px;
  }

  /* 3 — Ring + KPIs : deviennent une carte dédiée (budget hero) */
  .dash-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-bottom: 18px;
    padding: 22px 20px;
    background: var(--paper-sheet);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.02),
      0 4px 16px rgba(0, 0, 0, 0.03);
  }
  .dash-hero-ring {
    width: 160px !important;
    height: 160px !important;
    margin: 0 auto;
  }
  .dash-hero-ring svg {
    width: 160px !important;
    height: 160px !important;
  }
  /* KPIs : horizontalement comme des stats iOS (3 colonnes) */
  .dash-hero-numbers {
    flex-direction: row !important;
    gap: 0 !important;
    justify-content: space-around;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
  .dash-hero-kpi {
    flex: 1;
    text-align: center;
    position: relative;
  }
  .dash-hero-kpi + .dash-hero-kpi::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: var(--border);
  }
  .dash-hero-kpi-value {
    font-size: 22px !important;
    line-height: 1.1;
  }
  .dash-hero-kpi-label {
    font-size: 10px !important;
    letter-spacing: 0.3px;
    margin-top: 4px;
    padding: 0 4px;
  }

  /* 4 — Actions : grille 2 colonnes × 3 lignes (dernier row centré),
     tuiles carrées épaisses, emoji dominant au-dessus du label. */
  .dash-hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px !important;
    margin-bottom: 18px;
  }
  /* 4-bis — Nouveau CTA éditorial + Scanner section : respirent bien en
     PWA standalone, sinon collent au ring sans container parent. */
  .dash-cta {
    margin-bottom: 18px;
  }
  .dash-scan-section {
    margin-top: 8px;
  }
  .dash-scan-auto,
  .dash-scan-card {
    box-shadow: 0 1px 3px oklch(0.22 0.02 110 / 0.06);
  }
  .dash-hero-action {
    aspect-ratio: 1.3 / 1;
    padding: 14px 8px !important;
    border-radius: 18px !important;
    background: var(--paper-sheet);
    border: 1px solid var(--border) !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    -webkit-tap-highlight-color: transparent;
  }
  .dash-hero-action:active {
    transform: scale(0.96);
    background: var(--accent-tint);
  }
  /* Lead = initiale Young Serif dans pastille tintée brand (cookbook feel).
     Remplace l'ancien emoji 28px — typographic lead cohérent avec le hub. */
  .dash-hero-action-lead {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Young Serif", Georgia, serif;
    font-size: 20px;
    font-weight: 400;
    background: color-mix(in oklch, var(--brand) 10%, var(--paper-deep));
    color: var(--brand);
    line-height: 1;
  }
  .dash-hero-action-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    letter-spacing: 0.1px;
  }
  /* L'action "Dépanne-moi" prend toute la largeur (rangée solo) pour
     souligner sa nature distincte (aide ponctuelle, pas un outil quotidien),
     tout en conservant la palette crème/vert commune pour rester calme. */
  .dash-hero-action--urgent {
    grid-column: 1 / -1;
    aspect-ratio: auto !important;
    flex-direction: row !important;
    justify-content: center;
    gap: 12px !important;
    padding: 16px !important;
    background: var(--paper-sheet) !important;
    border-color: var(--border) !important;
  }
  .dash-hero-action--urgent .dash-hero-action-lead {
    font-size: 20px;
    color: var(--brand-dark) !important;
  }
  .dash-hero-action--urgent .dash-hero-action-label {
    color: var(--ink) !important;
    font-size: 14px;
    font-weight: 600 !important;
  }

  /* 5 — Tabs : retire le container "carte" global, tabs nues + panels
     qui respirent avec leurs propres cartes internes */
  .dash-tabs {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  .dash-tabs-nav {
    border-bottom: 1px solid var(--border);
    padding: 0 !important;
    margin-bottom: 14px;
  }
  .dash-tab-panel {
    padding: 0 !important;
  }

  /* 6 — Repas de la semaine : chaque repas = sa carte (pas une liste unie) */
  .dash-section-head {
    margin-bottom: 12px;
    padding: 0 2px;
  }
  .dash-meal {
    background: var(--paper-sheet);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px !important;
    margin-bottom: 10px;
    grid-template-columns: 52px 1fr auto !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
  }
  @media (hover: hover) and (pointer: fine) {
    .dash-meal:hover {
      padding-left: 14px !important;
    }
  }
  .dash-meal:last-child {
    border-bottom: 1px solid var(--border) !important;
  }

  /* 7 — Restock / benchmark / saison : déjà en cartes, juste resserrer */
  .dash-restock {
    border-radius: 16px !important;
    margin-top: 14px;
  }
}

/* ==================================================================
   DASHBOARD PWA — MODE WOW (iOS native, motion + depth)
   Couche d'amélioration visuelle par-dessus la refonte structurelle.
   Topbar glass, greeting XL, ring bling, tuiles 3D, stagger animations.
   ================================================================== */
@media (max-width: 768px) {
  /* ═══ TOPBAR — glass iOS ═══════════════════════════════════════ */
  /* Plus de titre "Tableau de bord" : le contenu greeting fait le job */
  body[data-route="dashboard"] .topbar .ptitle,
  .main .topbar .ptitle {
    display: none;
  }
  .topbar {
    background: var(--paper-sheet) !important;
    border-bottom: 1px solid var(--border);
  }
  [data-theme="dark"] .topbar {
    background: oklch(0.22 0.015 90) !important;
  }
  /* Boutons topbar : plus léger, plus tap-friendly */
  .tb-icon-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    border: none !important;
    border-radius: 12px !important;
    width: 40px;
    height: 40px;
    transition:
      transform 0.1s,
      background 0.15s;
  }
  .tb-icon-btn:active {
    transform: scale(0.92);
    background: rgba(0, 0, 0, 0.08) !important;
  }
  .sidebar-toggle {
    background: transparent !important;
    border: none !important;
    font-size: 22px !important;
    width: 40px;
    height: 40px;
  }
  .sidebar-toggle:active {
    transform: scale(0.92);
  }

  /* ═══ GREETING — typographique, hero éditorial ══════════════════ */
  .dash-hero-greeting {
    padding: 6px 2px 2px !important;
    margin-bottom: 22px !important;
  }
  .dash-hero-meta {
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
    color: oklch(0.55 0.02 130) !important;
  }
  .page-masthead-title,
  .dash-hero-greeting h1 {
    font-size: clamp(32px, 8vw, 42px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    margin-top: 6px !important;
  }
  .dash-hero-context {
    font-size: 16px !important;
    line-height: 1.45 !important;
    color: var(--ink-soft) !important;
    margin-top: 12px !important;
    padding-right: 12px;
  }

  /* ═══ BUDGET RING CARD — le hero visuel ════════════════════════ */
  .dash-hero-grid {
    /* Avant : linear-gradient cream → brand-pale + radial-gradient ::before
       avec ellipse rgba(58,112,82,.12) → effet « reflets verts » que le
       user trouve désagréable. Maintenant : paper-sheet plat + box-shadow
       neutre. Le ring vert porte déjà l'accent brand visuellement, pas
       besoin d'amplifier avec un wash de fond. */
    background: var(--paper-sheet) !important;
    padding: 28px 22px 22px !important;
    border-radius: 24px !important;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.02),
      0 4px 14px rgba(0, 0, 0, 0.04) !important;
    position: relative;
    overflow: hidden;
  }
  .dash-hero-ring,
  .dash-hero-numbers {
    position: relative;
    z-index: 1;
  }
  .dash-hero-ring {
    width: 180px !important;
    height: 180px !important;
  }
  .dash-hero-ring svg {
    width: 180px !important;
    height: 180px !important;
  }
  /* Ring : ombre portée vert labrador sur le stroke actif */
  .dash-hero-ring-progress {
    filter: drop-shadow(0 2px 8px rgba(58, 112, 82, 0.25));
  }
  .dash-hero-ring-pct {
    font-size: 48px !important;
    font-weight: 400 !important;
    letter-spacing: -0.02em !important;
  }
  .dash-hero-ring-pct span {
    font-size: 24px !important;
    opacity: 0.6;
  }
  .dash-hero-ring-lbl {
    font-size: 9px !important;
    letter-spacing: 2.5px !important;
    opacity: 0.7;
  }

  /* ═══ KPIs — compact iOS Health style ══════════════════════════ */
  .dash-hero-numbers {
    padding-top: 20px !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  }
  .dash-hero-kpi-value {
    font-size: 24px !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
  }
  .dash-hero-kpi-label {
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
    opacity: 0.75;
  }

  /* ═══ ACTION TILES — 3D tap, gradient, bounce ══════════════════ */
  .dash-hero-action {
    background: linear-gradient(180deg, var(--paper-sheet), oklch(0.97 0.01 100)) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.03),
      0 4px 12px rgba(0, 0, 0, 0.04) !important;
    transition:
      transform 0.2s var(--ease-snap),
      box-shadow 0.2s ease,
      background 0.15s ease !important;
  }
  .dash-hero-action:active {
    transform: scale(0.94) !important;
    background: linear-gradient(
      180deg,
      var(--brand-pale),
      color-mix(in oklch, var(--brand) 14%, var(--paper-deep))
    ) !important;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 2px 6px rgba(0, 0, 0, 0.06) !important;
  }
  /* Lead premium variant : garde la transition + active state, pas de
     drop-shadow (c'est une lettre serif maintenant, pas un emoji). */
  .dash-hero-action-lead {
    transition: transform 0.2s var(--ease-snap);
  }
  .dash-hero-action:active .dash-hero-action-lead {
    transform: scale(1.06);
  }
  .dash-hero-action-label {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
  }

  /* Dépanne-moi : traitement calme — pas de pulse, pas de gradient brick.
     L'action se distingue uniquement par sa largeur pleine (grid-column 1/-1)
     définie plus haut dans ce fichier. Le contenu dicte l'emphase, pas la chrome. */

  /* ═══ SECTION HEADERS — iOS Mail / Settings style ══════════════ */
  .dash-section-head {
    margin-bottom: 10px !important;
    padding: 4px 2px 0 !important;
  }
  .dash-section-title {
    font-family: var(--font-display) !important;
    font-size: 24px !important;
    letter-spacing: -0.01em !important;
  }
  .dash-section-action {
    font-size: 13px !important;
    color: var(--brand-dark) !important;
    font-weight: 500 !important;
  }

  /* ═══ TABS — pill active, spring indicator ═════════════════════ */
  .dash-tabs-nav {
    border-bottom: none !important;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    padding: 4px !important;
    gap: 2px;
  }
  .dash-tab {
    border-radius: 9px !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
    transition:
      transform 0.22s,
      opacity 0.22s,
      color 0.22s,
      background 0.22s,
      border-color 0.22s,
      box-shadow 0.22s cubic-bezier(0.25, 1, 0.5, 1) !important;
  }
  .dash-tab.is-active {
    background: var(--paper-sheet) !important;
    color: var(--ink) !important;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 2px 8px rgba(0, 0, 0, 0.06);
  }
  .dash-tab.is-active::after {
    display: none !important;
  }

  /* ═══ MEAL CARDS — elevation + entrée animée ═══════════════════ */
  .dash-meal {
    background: var(--paper-sheet) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 18px !important;
    padding: 14px 16px !important;
    margin-bottom: 10px;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.03),
      0 3px 10px rgba(0, 0, 0, 0.04) !important;
    transition:
      transform 0.2s var(--ease-snap),
      box-shadow 0.2s !important;
  }
  .dash-meal:active {
    transform: scale(0.98);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  }
  .dash-meal-emoji {
    font-size: 36px !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
  }
  .dash-meal-name {
    font-size: 16px !important;
    letter-spacing: -0.01em !important;
  }
  .dash-meal-price {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--brand-dark) !important;
  }

  /* ═══ ENTER ANIMATIONS — stagger fade-up au chargement ═════════ */
  .dash-hero-greeting,
  .dash-hero-grid,
  .dash-hero-actions,
  .dash-tabs {
    animation: dashEnterUp 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  }
  .dash-hero-greeting {
    animation-delay: 0.02s;
  }
  .dash-hero-grid {
    animation-delay: 0.08s;
  }
  .dash-hero-actions {
    animation-delay: 0.14s;
  }
  .dash-tabs {
    animation-delay: 0.2s;
  }
  @keyframes dashEnterUp {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .dash-hero-greeting,
    .dash-hero-grid,
    .dash-hero-actions,
    .dash-tabs,
    .mtab.on .mtab-icon,
    .is-navigating::after {
      animation: none !important;
    }
    .dash-hero-action--urgent {
      animation: none !important;
    }
  }

  /* ═══ TABBAR — active indicator spring ═════════════════════════ */
  .mtab.on {
    font-weight: 600;
  }
  .mtab.on .mtab-icon {
    filter: drop-shadow(0 2px 6px rgba(58, 112, 82, 0.3));
    animation: tabPop 0.3s var(--ease-snap);
  }
  @keyframes tabPop {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.15);
    }
    100% {
      transform: scale(1);
    }
  }

  /* ═══ SCROLLBAR mobile : invisible (style iOS) ═════════════════ */
  .content::-webkit-scrollbar {
    display: none;
  }
  .content {
    scrollbar-width: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   PWA SIDEBAR — iOS Settings style (grouped inset lists)
   Gate: installed PWA on mobile only. Zero impact on mobile Safari.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Sidebar container : fond paper sheet, padding safe-area ── */
  .sidebar {
    background: linear-gradient(180deg, oklch(0.97 0.01 90) 0%, oklch(0.95 0.015 85) 100%) !important;
    padding: 0 !important;
    gap: 0 !important;
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.06);
  }

  /* ── Bouton Fermer (✕) en haut à droite : geste natif iOS ────── */
  .sidebar-close-btn {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top));
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.55);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition:
      background 0.15s ease,
      transform 0.15s var(--ease-snap);
  }
  .sidebar-close-btn:active {
    transform: scale(0.92);
    background: rgba(0, 0, 0, 0.1);
  }

  /* ── Logo zone : Large Title style iOS ───────────────────────── */
  .sidebar .logo-zone {
    padding: calc(14px + env(safe-area-inset-top)) 20px 12px !important;
    background: transparent;
    border-bottom: none !important;
  }
  /* Masque logo / sous-titre : on utilise "Menu" comme titre large */
  .sidebar .logo-mark,
  .sidebar .logo-sub {
    display: none !important;
  }
  .sidebar-title-lg {
    font-family:
      var(--font-display),
      -apple-system,
      system-ui,
      sans-serif;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ink);
    line-height: 1.1;
    padding-top: 34px; /* espace sous le bouton fermer */
  }
  .pwa-install-btn {
    margin-top: 14px !important;
    border-radius: 11px !important;
    padding: 11px 16px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important;
    color: var(--cream-fixed) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(58, 112, 82, 0.28);
  }

  /* ── Weather strip : carte flottante rounded ────────────────── */
  .sidebar .weather-strip {
    margin: 0 16px 18px !important;
    padding: 14px 16px !important;
    background: var(--paper-sheet) !important;
    border-radius: 14px !important;
    border: none !important;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 4px 12px rgba(0, 0, 0, 0.05) !important;
  }
  .sidebar .w-temp {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
  }
  .sidebar .w-desc {
    font-size: 12px !important;
    opacity: 0.7;
    margin-top: 2px;
  }
  .sidebar .w-ai {
    font-size: 11.5px !important;
    margin-top: 6px !important;
    opacity: 0.85;
  }

  /* ── Nav : padding latéral pour inset group effect ───────────── */
  .sidebar .nav {
    padding: 0 16px 28px !important;
    gap: 0 !important;
    display: flex;
    flex-direction: column;
  }
  /* Espace inter-sections : seulement avant les toggles de groupe,
     les headers admin, et Bilan annuel — PAS entre items adjacents */
  .sidebar .nav > .nav-group-toggle,
  .sidebar .nav > .nav-sec {
    margin-top: 22px !important;
  }
  /* Bilan annuel (seul .ni après un .nav-group fermé) : espacement aussi */
  .sidebar .nav > .nav-group + .ni {
    margin-top: 22px !important;
    border-top-left-radius: 13px !important;
    border-top-right-radius: 13px !important;
    border-bottom-left-radius: 13px !important;
    border-bottom-right-radius: 13px !important;
  }

  /* ══ GROUPE "ESSENTIELS" : 6 items top-level regroupés ══════════
     On cible les .ni directs enfants de .nav (pas dans .nav-group)
     pour les wrapper visuellement dans une carte grouped-list.
     CSS pur : via first-of-type / background sur chaque .ni + border-radius
     sur premier et dernier du groupe via sélecteurs adjacents.
     ═════════════════════════════════════════════════════════════ */
  .sidebar .nav > .ni {
    background: var(--paper-sheet);
    margin: 0 !important;
    padding: 10px 14px 10px 48px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
    letter-spacing: -0.005em;
    position: relative;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition:
      background 0.15s ease,
      transform 0.15s var(--ease-snap);
  }
  .sidebar .nav > .ni:active {
    background: rgba(0, 0, 0, 0.04);
    transform: scale(0.985);
  }

  /* Premier .ni du bloc → arrondi top */
  .sidebar .nav > .ni:first-child,
  .sidebar .nav > .nav-group-toggle + .ni {
    border-top-left-radius: 13px;
    border-top-right-radius: 13px;
  }
  /* Dernier .ni avant toggle ou avant fin → arrondi bottom */
  .sidebar .nav > .ni:has(+ .nav-group-toggle),
  .sidebar .nav > .ni:has(+ .nav-sec),
  .sidebar .nav > .ni:last-child {
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 13px;
    border-bottom: none;
  }

  /* ── Pastille icône à gauche — palette restreinte 4 tons ─── */
  .sidebar .ni .nico {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cream-fixed) !important;
    background: var(--brand);
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  .sidebar .ni .nico::before {
    content: "";
    width: 16px;
    height: 16px;
    background: var(--cream-fixed);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
  }

  /* ── Palette restreinte : 4 tons seulement ──────────────────
     labrador (green)  → primary (app identity)
     brick    (red)    → warmth / action
     gold     (amber)  → money / savings
     slate    (gray)   → neutral / utility  */

  /* Essentiels — icônes SF-Symbols style par position.
     Nav refondue : seulement 2 items top-level (Accueil + Assistant),
     le reste vit dans les 5 nav-group-toggle plus bas. */
  /* 1. Accueil — house (labrador) */
  .sidebar .nav > .ni:nth-of-type(1) .nico {
    background: linear-gradient(135deg, var(--brand), var(--brand-light));
  }
  .sidebar .nav > .ni:nth-of-type(1) .nico::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z'/></svg>");
  }
  /* 2. Assistant — chat bubble (brick) */
  .sidebar .nav > .ni:nth-of-type(2) .nico {
    background: linear-gradient(135deg, var(--danger), oklch(0.72 0.17 143));
  }
  .sidebar .nav > .ni:nth-of-type(2) .nico::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
  }

  /* ── Chevron › à droite (style iOS) ────────────────────────── */
  .sidebar .ni::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 8px;
    height: 8px;
    /* color-mix au lieu de rgba(0,0,0,X) — theme-aware via --ink. */
    border-right: 2px solid color-mix(in oklch, var(--ink) 28%, transparent);
    border-top: 2px solid color-mix(in oklch, var(--ink) 28%, transparent);
    transform: translateY(-50%) rotate(45deg);
    transition: border-color 0.15s;
  }

  /* ── État actif : fond labrador pâle pleine largeur, sans accent gauche ── */
  .sidebar .ni.on {
    background: oklch(0.93 0.05 155 / 0.55) !important;
    color: var(--brand-dark) !important;
    font-weight: 600 !important;
  }
  .sidebar .ni.on::after {
    border-color: var(--brand-dark);
  }

  /* ── NAV GROUP TOGGLE : section header style iOS Settings ─── */
  .sidebar .nav-group-toggle {
    margin: 0 !important;
    padding: 10px 14px 10px 48px !important;
    background: var(--paper-sheet) !important;
    border: none !important;
    border-radius: 13px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--ink) !important;
    letter-spacing: -0.005em;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    text-transform: none !important;
    position: relative;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s var(--ease-snap);
    /* iOS Safari fix : sans cursor:pointer EXPLICITE sur le <button>, iOS
       ne fire pas le click event (les <a> sont OK car nativement clickables).
       touch-action:manipulation supprime aussi le 300ms tap-delay legacy. */
    cursor: pointer !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.05);
  }
  .sidebar .nav-group-toggle:active {
    transform: scale(0.985);
    background: rgba(0, 0, 0, 0.03) !important;
  }
  /* Pastille icône gauche pour toggle — palette restreinte 4 tons */
  .sidebar .nav-group-toggle::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 7px;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 28px 28px;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 28px 28px;
  }
  /* Pastille ::after : icône blanche posée par-dessus la pastille colorée */
  .sidebar .nav-group-toggle[data-nav-group]::after {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: var(--cream-fixed);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    pointer-events: none;
  }

  /* Ma semaine — calendar (labrador) */
  .sidebar .nav-group-toggle[data-nav-group="semaine"]::before {
    background: linear-gradient(135deg, var(--brand), var(--brand-light));
  }
  .sidebar .nav-group-toggle[data-nav-group="semaine"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 10h18M8 3v4M16 3v4'/></svg>");
  }

  /* Je magasine — cart (brick) */
  .sidebar .nav-group-toggle[data-nav-group="magasin"]::before {
    background: linear-gradient(135deg, var(--danger), oklch(0.72 0.17 143));
  }
  .sidebar .nav-group-toggle[data-nav-group="magasin"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16l-2 12H6z'/><path d='M8 7V5a4 4 0 0 1 8 0v2'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h16l-2 12H6z'/><path d='M8 7V5a4 4 0 0 1 8 0v2'/></svg>");
  }

  /* Mes économies — chart-up (courge/gold) */
  .sidebar .nav-group-toggle[data-nav-group="economies"]::before {
    background: linear-gradient(135deg, oklch(0.72 0.17 143), var(--courge));
  }
  .sidebar .nav-group-toggle[data-nav-group="economies"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V10M10 20v-7M16 20v-4M22 20V6'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V10M10 20v-7M16 20v-4M22 20V6'/></svg>");
  }

  /* Économiser plus — scissors (ardoise) */
  .sidebar .nav-group-toggle[data-nav-group="tactiques"]::before {
    background: linear-gradient(135deg, var(--ardoise), oklch(0.64 0.1 220));
  }
  .sidebar .nav-group-toggle[data-nav-group="tactiques"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='6' r='3'/><circle cx='6' cy='18' r='3'/><path d='M20 4 8.12 15.88M14.47 14.48 20 20M8.12 8.12 12 12'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='6' r='3'/><circle cx='6' cy='18' r='3'/><path d='M20 4 8.12 15.88M14.47 14.48 20 20M8.12 8.12 12 12'/></svg>");
  }

  /* Réglages — sliders (slate) */
  .sidebar .nav-group-toggle[data-nav-group="reglages"]::before {
    background: linear-gradient(135deg, oklch(0.55 0.03 240), oklch(0.66 0.04 240));
  }
  .sidebar .nav-group-toggle[data-nav-group="reglages"]::after {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='6' x2='11' y2='6'/><line x1='17' y1='6' x2='20' y2='6'/><line x1='4' y1='12' x2='7' y2='12'/><line x1='13' y1='12' x2='20' y2='12'/><line x1='4' y1='18' x2='15' y2='18'/><line x1='21' y1='18' x2='20' y2='18'/><circle cx='14' cy='6' r='2'/><circle cx='10' cy='12' r='2'/><circle cx='18' cy='18' r='2'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='6' x2='11' y2='6'/><line x1='17' y1='6' x2='20' y2='6'/><line x1='4' y1='12' x2='7' y2='12'/><line x1='13' y1='12' x2='20' y2='12'/><line x1='4' y1='18' x2='15' y2='18'/><line x1='21' y1='18' x2='20' y2='18'/><circle cx='14' cy='6' r='2'/><circle cx='10' cy='12' r='2'/><circle cx='18' cy='18' r='2'/></svg>");
  }
  /* Chevron toggle : rotation 90° quand ouvert */
  .sidebar .nav-group-chevron {
    font-size: 20px !important;
    color: rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.25s var(--ease-snap);
    line-height: 1;
  }
  .sidebar .nav-group-toggle.is-open .nav-group-chevron {
    transform: rotate(90deg);
  }

  /* Quand le toggle est ouvert → arrondi seulement en haut (le group prend le bas) */
  .sidebar .nav-group-toggle.is-open {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }

  /* ── NAV GROUP : conteneur des sous-items, carte blanche arrondie bas ── */
  .sidebar .nav-group {
    background: var(--paper-sheet);
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 13px;
    overflow: hidden;
    margin-top: -1px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }
  .sidebar .nav-group .ni {
    margin: 0 !important;
    padding: 9px 14px 9px 44px !important;
    background: transparent !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 14.5px !important;
    min-height: 40px;
    display: flex !important;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  .sidebar .nav-group .ni:last-child {
    border-bottom: none;
  }
  .sidebar .nav-group .ni:active {
    background: rgba(0, 0, 0, 0.04) !important;
  }
  /* Icône pour sous-items : petit point neutre (hiérarchie visuelle) */
  .sidebar .nav-group .ni .nico {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.08) !important;
    box-shadow: none;
    left: 14px;
  }
  .sidebar .nav-group .ni .nico::before {
    width: 6px;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* ── NAV SEC (Admin header) ─────────────────────────────────── */
  .sidebar .nav-sec {
    font-size: 12px !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.45) !important;
    padding: 12px 16px 6px !important;
    margin-top: 6px !important;
    font-weight: 600 !important;
  }

  /* ── BADGES (urgents count) : style iOS rouge ───────────────── */
  .sidebar .nbadge {
    position: absolute !important;
    right: 38px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: var(--danger) !important;
    color: var(--cream-fixed) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 3px oklch(0.44 0.14 25 / 0.32);
  }

  /* ── URGENCE BUTTON : pill flottante en bas, brick gradient ── */
  .sidebar .urgence-btn {
    margin: 20px 16px 14px !important;
    padding: 14px 18px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--danger), oklch(0.72 0.13 85)) !important;
    color: var(--cream-fixed) !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    border: none !important;
    box-shadow:
      0 4px 14px oklch(0.59 0.16 143 / 0.38),
      0 1px 2px oklch(0.59 0.16 143 / 0.22) !important;
    display: flex !important;
    align-items: center;
    gap: 10px !important;
    justify-content: center;
    transition: transform 0.15s var(--ease-snap);
  }
  .sidebar .urgence-btn:active {
    transform: scale(0.97);
  }
  .sidebar .urgence-btn .ub-dot {
    width: 8px !important;
    height: 8px !important;
    background: var(--cream-fixed) !important;
    border-radius: 50%;
    box-shadow: 0 0 0 0 oklch(0.992 0.006 85 / 0.6);
    animation: urgenceDotPulse 1.6s ease-in-out infinite;
  }
  @keyframes urgenceDotPulse {
    0%,
    100% {
      box-shadow: 0 0 0 0 oklch(0.992 0.006 85 / 0.6);
    }
    50% {
      box-shadow: 0 0 0 6px oklch(0.992 0.006 85 / 0);
    }
  }

  /* ── USER CARD : profile row style iOS Settings ─────────────── */
  .sidebar .sidebar-user {
    margin: 0 16px calc(16px + env(safe-area-inset-bottom)) !important;
    padding: 14px 14px 14px 14px !important;
    background: var(--paper-sheet) !important;
    border-radius: 14px !important;
    border: none !important;
    display: flex !important;
    align-items: center;
    gap: 12px !important;
    box-shadow:
      0 1px 2px rgba(0, 0, 0, 0.04),
      0 4px 12px rgba(0, 0, 0, 0.05);
  }
  .sidebar .sidebar-user .uav {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important;
    color: var(--cream-fixed) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(58, 112, 82, 0.3);
    flex-shrink: 0;
  }
  .sidebar .sidebar-user .uname {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em;
    color: var(--ink) !important;
  }
  .sidebar .sidebar-user .uplan {
    font-size: 12px !important;
    opacity: 0.6;
    margin-top: 2px;
  }

  /* ── ni-premium : highlight pour items abonnement ──────────── */
  .sidebar .ni-premium {
    color: var(--brand-dark) !important;
    font-weight: 600 !important;
  }

  /* ── Reduced motion ────────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .sidebar .urgence-btn .ub-dot {
      animation: none !important;
    }
    .sidebar .nav-group-toggle,
    .sidebar .ni,
    .sidebar .urgence-btn {
      transition: none !important;
    }
  }
}

/* ══════════════════════════════════════════════════════════════════
   PWA NATIVE iOS FEEL — topbar, fonts, web-chrome cleanup
   Tout ce qui fait "web site" disparaît en PWA installée.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Typographie système iOS sur texte body ─────────────────── */
  body,
  .content-inner,
  .ni,
  .nav-group-toggle,
  .btn-sec,
  .btn-main,
  .dash-meal-name,
  .dash-meal-price {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-synthesis: none;
  }

  /* ── Masque éléments web-only qui cassent l'illusion d'app ─── */
  .skip-link {
    display: none !important;
  }
  .flash {
    border-radius: 14px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12) !important;
    margin: 12px !important;
    /* Sticky sous la topbar en PWA → le user ne rate pas la confirmation
       s'il a déjà scrollé avant le submit. */
    position: sticky;
    top: calc(env(safe-area-inset-top) + 54px);
    z-index: 80;
  }

  /* ── TOPBAR : surface solide, iOS Navigation Bar sans effet verre ── */
  .topbar {
    background: var(--paper-sheet) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 0 14px !important;
    padding-top: calc(6px + env(safe-area-inset-top)) !important;
    min-height: calc(44px + env(safe-area-inset-top)) !important;
    max-height: none !important;
    gap: 8px !important;
  }
  /* Hamburger : conservé en PWA — complément à la tabbar pour accès
     rapide à TOUTES les fonctionnalités (sidebar = index complet). */
  /* Form Générer un menu (global du layout) : caché en PWA.
     Seule la version contextuelle poussée par la page Menu reste visible. */
  .topbar .topbar-form:not(.topbar-form--ctx) {
    display: none !important;
  }
  .topbar #menuGenPill {
    display: none !important;
  }
  /* Titre de page : caché par défaut (le dashboard a son propre greeting) */
  .topbar .ptitle {
    display: none !important;
  }
  /* Live pill : masquée (bruit web) */
  .topbar .live-pill {
    display: none !important;
  }
  /* Boutons icônes topbar (vocal, dark) : style iOS 34px */
  .topbar .tb-icon-btn {
    /* WCAG 2.5.5 (AAA) : 44×44 minimum sur touch device.
       Avant 34px violait la norme. Le visuel reste compact via
       padding/border-radius, hit area étendue. */
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border: none !important;
    color: var(--brand-dark) !important;
    padding: 0 !important;
  }
  .topbar .tb-icon-btn:active {
    transform: scale(0.92);
  }
  /* Dark toggle : masqué en PWA (le système OS gère déjà) */
  .topbar #darkToggle {
    display: none !important;
  }
  /* Bouton Générer un menu : style iOS primary fill */
  .topbar .btn-main.btn-icon-mobile {
    height: 44px !important;
    min-height: 44px !important;
    width: auto !important;
    min-width: 44px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark)) !important;
    color: var(--cream-fixed) !important;
    box-shadow: 0 2px 8px rgba(58, 112, 82, 0.25) !important;
  }
  .topbar .btn-icon-mobile-text {
    display: none !important;
  }
  .topbar .btn-icon-mobile {
    width: 34px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .topbar .btn-icon-mobile-icon {
    width: 16px !important;
    height: 16px !important;
    stroke-width: 2.5 !important;
  }
  .topbar-form {
    margin: 0 !important;
  }
  /* tb-left / tb-right : aligne sur 1 ligne avec gap */
  .tb-left {
    gap: 10px !important;
    align-items: center !important;
  }
  .tb-right {
    gap: 6px !important;
    align-items: center !important;
  }

  /* ── Body : fond iOS grouped (ton crème légèrement plus froid) ── */
  body {
    background: oklch(0.96 0.01 85) !important;
  }

  /* ── Content inner : padding iOS Health style ──────────────── */
  .content-inner {
    padding: 14px 16px calc(80px + env(safe-area-inset-bottom)) !important;
  }

  /* ── Boutons action style iOS : spring + scale on tap ──────── */
  .btn-sec,
  .btn-main {
    border-radius: 11px !important;
    transition: transform 0.12s var(--ease-snap) !important;
  }
  .btn-sec:active,
  .btn-main:active {
    transform: scale(0.97);
  }

  /* ── Bandeau « Circulaires en attente » : sheet iOS, surface solide ── */
  .circulaires-pending {
    border-radius: 14px !important;
    margin: 10px !important;
  }

  /* ── Status bar cover : fond opaque sous l'encoche ──────────
     En standalone iOS, le status bar est translucide et le système
     dessine 16:50 / wifi / batterie PAR-DESSUS le contenu du webview.
     Ce backdrop opaque couvre la zone safe-area pour que les glyphes
     système aient un fond propre (pas du texte qui traverse). */
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top);
    background: var(--paper-sheet);
    z-index: 9999;
    pointer-events: none;
  }

  /* ── Navigating : overlay de chargement pour actions IA lentes ── */
  .is-navigating::after {
    content: "";
    position: fixed;
    top: env(safe-area-inset-top);
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--brand), transparent);
    background-size: 200% 100%;
    animation: navbar-slide 1.2s ease-in-out infinite;
    will-change: background-position;
    z-index: 10000;
    pointer-events: none;
  }
  @keyframes navbar-slide {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  /* ── Compte hub PWA — écran « tout est ici » en cookbook cream
     En-tête profil + raccourcis tuiles vivantes + sections groupées
     style iOS Settings revisité pour L'Économe. Le contenu détaillé
     (abonnement, factures, supprimer) reste accessible en scrollant. */
  .compte-pwa-hub {
    display: block;
    padding: 0 12px 4px;
    margin-bottom: 20px;
  }
  /* Masque le masthead original (duplique l'infos profil du hub) */
  .compte-pwa-hub ~ .page-masthead {
    display: none !important;
  }
  .compte-pwa-hub ~ .dash-budget {
    display: none !important;
  }

  /* Header profil : fond gradient brand subtil au lieu d'un flat iOS
     Settings. Donne de l'identité au hub sans casser le ton éditorial. */
  .cph-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 18px;
    background: linear-gradient(
      135deg,
      oklch(0.59 0.16 143 / 0.12) 0%,
      var(--paper-sheet) 55%,
      var(--paper-sheet) 100%
    );
    border: 1px solid oklch(0.59 0.16 143 / 0.22);
    border-radius: 16px;
    text-decoration: none;
    color: var(--ink);
    margin-bottom: 16px;
    box-shadow: 0 2px 8px oklch(0.59 0.16 143 / 0.08);
    transition: transform 0.12s var(--ease-snap);
  }
  .cph-profile:active {
    transform: scale(0.98);
  }
  .cph-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    color: var(--cream-fixed);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
  }
  .cph-profile-body {
    flex: 1;
    min-width: 0;
  }
  .cph-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cph-plan {
    font-size: 13px;
    color: var(--ink-muted);
  }
  .cph-chev {
    font-size: 22px;
    color: var(--ink-muted);
    font-weight: 300;
    margin-left: 4px;
  }

  /* Tuiles vivantes — 4 cards 2×2 avec icône SVG + label + meta dynamique.
     Remplace les anciennes lettres-chip statiques. Données live (compteurs
     reçus, urgents frigo, favoris, économies $). */
  .cph-tiles {
    display: grid;
    /* minmax(0, 1fr) au lieu de 1fr : sans ça, le label « Combien j'ai
       sauvé » en nowrap force la colonne à dépasser la largeur viewport
       sur iPhone < 400px (la 2e tuile finit clippée hors écran). */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 22px;
  }
  .cph-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    min-width: 0; /* permet à la tuile de rétrécir sous min-content */
    min-height: 76px;
    background: var(--paper-sheet);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--ink);
    transition:
      transform 0.12s var(--ease-snap),
      background 0.15s ease,
      border-color 0.15s ease;
  }
  .cph-tile:active {
    transform: scale(0.97);
  }
  .cph-tile-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--paper-soft);
    border-radius: 50%;
    color: var(--brand-dark);
  }
  .cph-tile-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
  }
  .cph-tile-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cph-tile-meta {
    font-size: 12px;
    color: var(--ink-muted);
    line-height: 1.25;
    font-feature-settings: "tnum" 1;
  }
  /* Variante mise en avant : tuile « Combien j'ai sauvé » = dopamine */
  .cph-tile--primary {
    background: var(--accent-tint);
    border-color: var(--accent-tint2);
  }
  .cph-tile--primary .cph-tile-icon {
    background: var(--brand);
    color: var(--cream-fixed);
  }
  .cph-tile--primary .cph-tile-label,
  .cph-tile--primary .cph-tile-meta {
    color: var(--accent-deep);
  }
  /* Variante alerte : urgents au frigo (jaune ambré, pas rouge alarmiste) */
  .cph-tile.is-flagged {
    border-color: oklch(0.78 0.14 85 / 0.55);
    background: oklch(0.98 0.025 85);
  }
  .cph-tile.is-flagged .cph-tile-icon {
    color: oklch(0.5 0.13 65);
  }
  @media (prefers-reduced-motion: reduce) {
    .cph-tile {
      transition: none;
    }
    .cph-tile:active {
      transform: none;
    }
  }

  /* Section : titre + liste iOS grouped inset */
  .cph-section {
    margin-bottom: 18px;
  }
  .cph-section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-muted);
    padding: 0 16px 8px;
  }
  .cph-list {
    background: var(--paper-sheet);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  }
  .cph-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    min-height: 48px;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
  }
  .cph-row:last-child {
    border-bottom: none;
  }
  .cph-row:active {
    background: color-mix(in oklch, var(--brand) 5%, transparent);
  }
  .cph-row-label {
    flex: 1;
    font-size: 15.5px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.1px;
  }
  .cph-row-chev {
    font-size: 20px;
    color: var(--ink-fade);
    font-weight: 300;
  }

  /* Déconnexion — bouton rouge centré, full-width card */
  .cph-logout-form {
    margin: 20px 0 12px;
  }
  .cph-logout {
    width: 100%;
    padding: 14px;
    background: var(--paper-sheet);
    border: none;
    border-radius: 14px;
    color: var(--danger);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px oklch(0.22 0.02 110 / 0.06);
    transition: transform 0.12s var(--ease-snap);
  }
  .cph-logout:active {
    transform: scale(0.98);
    background: var(--danger-tint);
  }

  /* Footer legal — lien discret Conditions · Vie privée.
     Remplace l'ancienne section L'Économe avec 3 rangées full-card
     qui dominaient visuellement le bas du hub. */
  .cph-legal {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px 0 4px;
    font-size: 12px;
    color: var(--ink-muted);
  }
  .cph-legal a {
    color: var(--ink-muted);
    text-decoration: none;
    padding: 4px 6px;
  }
  @media (hover: hover) and (pointer: fine) {
    .cph-legal a:hover {
      text-decoration: underline;
    }
  }

  .cph-version {
    text-align: center;
    font-size: 12px;
    color: var(--ink-muted);
    padding: 8px 0 16px;
  }

  /* Dark mode — overrides complets du hub */
  [data-theme="dark"] .cph-profile,
  [data-theme="dark"] .cph-shortcut,
  [data-theme="dark"] .cph-list,
  [data-theme="dark"] .cph-logout {
    background: oklch(0.22 0.01 85);
  }
  [data-theme="dark"] .cph-row {
    border-bottom-color: rgba(255, 255, 255, 0.06);
  }
  [data-theme="dark"] .cph-row:active {
    background: rgba(255, 255, 255, 0.04);
  }
  [data-theme="dark"] .cph-logout:active {
    background: oklch(0.26 0.02 30);
  }

  /* Shortcut lead dark : lettre capitale plus lumineuse pour contraster */
  [data-theme="dark"] .cph-shortcut-lead {
    color: var(--brand-light);
  }

  /* ── Focus clavier (PWA) : indicateur visible sur cibles tactiles
     principales. Nécessaire pour navigation Bluetooth keyboard iPad
     ou utilisateurs a11y. outline-offset 2px évite les chevauchements
     avec les backgrounds des cartes. ───────────────────────────── */
  .cph-row:focus-visible,
  .cph-shortcut:focus-visible,
  .cph-profile:focus-visible,
  .cph-logout:focus-visible,
  .dash-hero-action:focus-visible,
  .mtab:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 12px;
  }
  /* Inputs / textarea / select sur mobile : ring visible au focus clavier */
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }

  /* ── View Transitions : fondu natif entre pages (Safari 18+) ───
     Active la transition auto sur chaque navigation MPA en PWA.
     Le tabbar/topbar sont marqués view-transition-name pour rester
     en place (pas de flash), et le .content fait un cross-fade doux. */
  @view-transition {
    navigation: auto;
  }

  .mobile-tabbar {
    view-transition-name: app-tabbar;
  }
  .topbar {
    view-transition-name: app-topbar;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.18s;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  ::view-transition-old(app-tabbar),
  ::view-transition-new(app-tabbar),
  ::view-transition-old(app-topbar),
  ::view-transition-new(app-topbar) {
    animation: none;
  }

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation: none;
    }
  }
}

/* ── iOS Safari A2HS banner — Add-to-Home-Screen fallback ──────
   Safari ne fire pas beforeinstallprompt ; on guide l'utilisateur
   manuellement. Apparaît uniquement sur iOS, hors standalone, une
   fois (dismiss persistant via localStorage). ──────────────────── */
.ios-a2hs {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 95;
  background: var(--paper-sheet, #faf6ec);
  border: 1px solid oklch(0.59 0.16 143 / 0.18);
  border-radius: 14px;
  box-shadow: 0 12px 40px oklch(0.22 0.02 110 / 0.18);
  padding: 12px 14px;
  animation: iosA2hsUp 0.38s var(--ease-snap) both;
}
[data-theme="dark"] .ios-a2hs {
  background: oklch(0.28 0.015 110);
  border-color: oklch(0.72 0.14 143 / 0.28);
}
.ios-a2hs-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ios-a2hs-icon {
  flex: 0 0 40px;
  border-radius: 10px;
  box-shadow: 0 2px 6px oklch(0.22 0.02 110 / 0.18);
}
.ios-a2hs-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink, #222);
}
[data-theme="dark"] .ios-a2hs-text {
  color: var(--paper-sheet, #faf6ec);
}
.ios-a2hs-text strong {
  font-size: 14px;
  font-weight: 600;
}
.ios-a2hs-text span:last-child {
  opacity: 0.78;
}
.ios-a2hs-close {
  flex: 0 0 44px;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-soft, #666);
  cursor: pointer;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) {
  .ios-a2hs-close:hover,
  .ios-a2hs-close:focus-visible {
    background: oklch(0.22 0.02 110 / 0.06);
    outline: none;
  }
}
@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .ios-a2hs-close:hover,
  [data-theme="dark"] .ios-a2hs-close:focus-visible {
    background: oklch(1 0 0 / 0.06);
  }
}
@keyframes iosA2hsUp {
  from {
    transform: translateY(110%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ios-a2hs {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   POLISH v98 — Premium mobile/PWA pass (avril 2026)
   - Touch targets min 44px sur tous interactifs tactiles
   - Cover gradients tokenisés (dark-mode ready)
   - Glassmorphism adouci (batterie Android, vieux iPhones)
   - Tokens de remplacement pour hardcodes restants
═══════════════════════════════════════════════════════════════ */

/* Touch targets : tout ce qui est tappable ≥44×44 sur tactile.
   Guard pointer:coarse → ne casse pas desktop. */
@media (pointer: coarse) {
  .pill,
  .chk,
  .tb-icon-btn,
  .sidebar-toggle,
  .btn-sec,
  .btn-main,
  .nav-btn-sec,
  .nav-btn-main,
  .cph-shortcut,
  .compte-quicklink,
  .dash-hero-action,
  .dash-tab,
  .dash-section-action,
  button[type="submit"],
  button[type="button"]:not(.celebration-toast-close):not(.nav-burger span) {
    min-height: 44px;
    min-width: 44px;
  }
  /* .tb-icon-btn 40→44 sans casser le layout : on étend la zone cliquable
     via padding fantôme */
  .tb-icon-btn {
    width: 44px !important;
    height: 44px !important;
  }
  /* Pills et checks : padding vertical bumped pour atteindre 44px de haut */
  .pill {
    padding: 12px 14px !important;
    min-height: 44px;
  }
  .chk {
    padding: 12px 10px !important;
    min-height: 44px;
  }
  /* .dash-tab : 44px garanti même avec font 13px */
  .dash-tab {
    padding: 14px 18px !important;
    min-height: 48px;
  }
  /* Liens dans listes : tap-expansion sans toucher le layout visuel */
  .compte-quicklink,
  .dash-hero-action {
    padding: 14px 16px !important;
  }
}

/* Covers recettes : brand-pure crème + signature É italique Vert Jean-Talon
   Les anciens gradients tokenisés par catégorie sont supprimés — ils lisaient
   « brunâtre » en mobile et cassaient l'identité crème L'Économe. Le fond est
   maintenant défini une seule fois dans app.css via var(--paper-sheet) et la
   signature graphique est le giant É italique ::before + filet vert 2px ::after.
   Cette section garde juste un no-op pour documenter le choix. */

/* Glassmorphism adouci : remplace backdrop-filter:blur() par surface
   semi-opaque. Gain batterie sur Android, compat vieux iOS, look
   plus maîtrisé (moins "toy OS"). On garde blur très léger (4px) pour
   hint de profondeur sans le tax GPU. */
@supports (backdrop-filter: blur(4px)) {
  .glass,
  .panel-glass,
  .topbar-glass {
    backdrop-filter: blur(4px) saturate(1.05);
    -webkit-backdrop-filter: blur(4px) saturate(1.05);
    background: oklch(0.99 0.004 75 / 0.88);
  }
  [data-theme="dark"] .glass,
  [data-theme="dark"] .panel-glass,
  [data-theme="dark"] .topbar-glass {
    background: oklch(0.2 0.015 90 / 0.86);
  }
}

/* Fix hardcode meta greeting : token au lieu de oklch arbitraire */
@media (max-width: 640px) {
  .dash-hero-meta {
    color: var(--ink-muted) !important;
  }
}

/* Active state tb-icon-btn : remplace scale(.92) jank par surface tint
   (zero layout shift, pas de compositor hit) */
@media (pointer: coarse) {
  .tb-icon-btn:active {
    transform: none !important;
    background: var(--accent-tint) !important;
  }
  .sidebar-toggle:active {
    transform: none !important;
    background: var(--accent-tint) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   POLISH v99 — Post-v98 follow-ups (avril 2026)
═══════════════════════════════════════════════════════════════ */

/* Sidebar nav items: touch target 44px sur tactile (v98 avait oublié .ni) */
@media (pointer: coarse) {
  .ni {
    min-height: 44px;
    padding: 10px 20px !important;
  }
  .mtab {
    min-height: 44px;
  }
  .cph-shortcut {
    min-height: 56px;
    min-width: 56px;
  }
}

/* Form error states: sans feedback visuel, l'utilisateur tourne en rond.
   Style uniforme pour [aria-invalid="true"] + .is-invalid + :invalid submitted */
.form-group.is-invalid input,
.form-group.is-invalid textarea,
.form-group.is-invalid select,
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--danger) !important;
  background: color-mix(in oklch, var(--danger-tint) 60%, var(--paper-sheet));
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--danger) 14%, transparent);
}
.form-group.is-invalid input:focus,
.form-group.is-invalid textarea:focus,
.form-group.is-invalid select:focus,
input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus {
  outline: none;
  border-color: var(--danger-deep) !important;
  box-shadow: 0 0 0 4px color-mix(in oklch, var(--danger) 22%, transparent);
}
.form-error,
.field-error,
.invalid-feedback {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--danger-deep);
  font-weight: 500;
}

/* Labels mobile : jamais sous 13px (lisibilité + AA sur 1x ratio) */
@media (max-width: 768px) {
  label,
  .form-label,
  .dash-section-eyebrow,
  .page-masthead-eyebrow {
    font-size: max(12px, 1em) !important;
  }
  label {
    font-size: 13px !important;
  }
}

/* Flash messages: bump contraste texte sur fond tint */
.flash-error {
  color: var(--danger-deep) !important;
}
.flash-success {
  color: var(--accent-deep) !important;
}

/* Active state tap feedback: scale(.97) reste mais respecte reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .mtab:active,
  .btn-sec:active,
  .btn-main:active,
  .cph-shortcut:active,
  .tb-icon-btn:active,
  .sidebar-toggle:active {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   POLISH v101 — Responsive ultra-fluide (avril 2026)
   Fix "le responsive de la recette ishhh" : la grille 1.4fr/1fr
   du détail recette ne cassait pas sous 768px. Remplacement par
   une classe sémantique + polish page-par-page.
═══════════════════════════════════════════════════════════════ */

/* .recipe-layout : régression P0 corrigée 2026-05-10 — la règle vivait
   ici (mobile-fixes) mais ce fichier est media-gated max-width:768px
   dans app.blade.php → grille 2-col jamais active sur desktop. Bug
   latent existant. Relocalisé vers app.css près du @media min-width:961px
   sticky pattern. NE PAS REMETTRE ICI. */

/* Meta chips recette : pas d'écrasement sur très petits écrans,
   padding léger au lieu d'un gap qui colle les labels au texte. */
@media (max-width: 480px) {
  .rmeta {
    gap: 10px 14px;
  }
  .rm {
    font-size: 12px;
    line-height: 1.4;
  }
}

/* Bouton "Mode cuisine" / "Voir recette complète" :
   le <p> explicatif dessous peut paraître "collé" à côté des pills
   et du chd au-dessus. On renforce la respiration verticale autour
   des CTA principaux sur mobile. */
@media (max-width: 768px) {
  .recipe-body form,
  .recipe-body .btn-main.btn-full,
  .recipe-body > .btn-main {
    margin-top: 20px !important;
  }
  .recipe-body form + *,
  .recipe-body .btn-main + p {
    margin-top: 10px;
  }
  /* Les sections chd après instructions : air au-dessus.
     Beaucoup d'inline "margin:24px 0 10px" → on pousse à 28px sur
     mobile où l'œil lit dans un canal étroit. */
  .recipe-body .chd[style*="margin:24px 0"] {
    margin: 28px 0 10px !important;
  }
}

/* Ingredient rows : sur mobile, le badge circulaire/prix peut
   partir à la ligne. Aligner proprement à droite sans compression. */
@media (max-width: 640px) {
  .ing-row {
    padding: 12px 0 !important;
    gap: 6px !important;
  }
  .ing-row > span:first-child {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
  }
  .ing-row .si-pct,
  .ing-row .pantry-tag,
  .ing-row .expire-tag {
    font-size: 11px !important;
    padding: 3px 8px !important;
  }
}

/* Nutrition grid : 5 colonnes desktop → 2 sur ≤480px avec auto-fit
   déjà OK, mais on garantit un padding minimal. */
@media (max-width: 480px) {
  .recipe-body div[style*="grid-template-columns"][style*="minmax(100px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Helper générique : toute `<div style="display:grid;grid-template-columns:1fr 1fr…">`
   sans breakpoint → stacker via @supports + attribut-selector.
   On cible les patterns fréquents dans le codebase (voir audit).
═══════════════════════════════════════════════════════════════ */

/* Onboarding choix épiceries : 2×2 desktop, single column ≤ 480px
   pour respecter touch target + lisibilité logo/nom. */
.ob-choices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 32px;
}
@media (max-width: 480px) {
  .ob-choices-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
.ob-choice {
  min-height: 72px;
}

/* La regle "page-masthead + spacing desktop" (@media min-width:769px) a ete
   relocalisee vers public/css/app.css 2026-05-09 — meme raison que la
   regle sticky liste-du-soir : ne pouvait pas s'activer dans un fichier
   mobile-only. */

/* Boutons pleine-largeur sur mobile : tactile friendly. Les CTA
   primaires dans les panneaux méritent full-width ≤ 640px. */
@media (max-width: 640px) {
  .recipe-body .btn-main.btn-full,
  .recipe-body > form .btn-main {
    width: 100%;
    padding: 16px !important;
    font-size: 15px !important;
    font-weight: 700;
  }
}

/* ════════════════════════════════════════════════════════════════════
   SIDEBAR — REFONTE ÉDITORIALE FLAT MONO-ACCENT (full-width drawer)
   Override des cards-per-item + gradients en lignes simples avec
   dividers 1px. Mono-accent Vert Jean-Talon partout. Aligne avec
   le rebrand Direction C (cream uniforme, pas de surfaces flottantes).
   Bloc final pour facilité de revert (git revert un seul commit).
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* ── Drawer plein écran : vraie immersion, le menu prend tout l'écran
     comme un menu d'app native (pas un panneau-tiroir partiel) ─────── */
  .sidebar {
    width: 100vw !important;
    max-width: 100vw !important;
    background: var(--paper) !important;
    background-color: var(--paper) !important;
    box-shadow: none !important;
    /* BUG-FIX 2026-04-30 : `overflow-y: auto` ici cassait le flex-context
       interne — `.nav` (flex:1; overflow:auto) ne calculait plus sa hauteur
       max correctement, donc `.urgence-btn` et `.sidebar-user` overflow
       l'écran en bas et se chevauchaient avec la fin du nav.
       Solution : laisser .sidebar en `overflow: hidden` (de app.css:211),
       et délégate le scroll uniquement au `.nav` interne. */
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Garantir que les sections fixes (logo, météo, urgence-btn, profil)
     ne shrinkent pas — sinon le scroll de .nav ne libère pas l'espace
     et le drawer reste « collé en haut ». */
  .sidebar > .logo-zone,
  .sidebar > .weather-strip,
  .sidebar > .urgence-btn,
  .sidebar > .sidebar-user {
    flex-shrink: 0 !important;
  }
  /* La nav est le SEUL scroller dans le drawer mobile. min-height: 0
     est le pattern flexbox standard pour qu'un enfant flex avec
     overflow:auto puisse vraiment shrink en dessous de son content size. */
  .sidebar .nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Bouton fermer : 44×44 (touch target conforme) ─────────── */
  .sidebar-close-btn {
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
    color: var(--ink) !important;
    font-size: 22px !important;
    font-weight: 300 !important;
  }
  .sidebar-close-btn:active {
    background: oklch(0 0 0 / 0.04) !important;
  }

  /* ── Logo zone : padding aéré pour full-width ──────────────── */
  .sidebar .logo-zone {
    padding: calc(18px + env(safe-area-inset-top)) 24px 18px !important;
  }
  .sidebar-title-lg {
    font-size: 38px !important;
    padding-top: 36px !important;
  }

  /* ── Weather strip : flat sur accent-tint, pas surélevé ───── */
  .sidebar .weather-strip {
    margin: 0 0 4px !important;
    padding: 18px 24px !important;
    background: var(--accent-tint) !important;
    border-radius: 0 !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
  }

  /* ── Nav : pleine largeur, zéro inset ──────────────────────── */
  .sidebar .nav {
    padding: 0 !important;
    gap: 0 !important;
  }
  .sidebar .nav > .nav-group-toggle,
  .sidebar .nav > .nav-sec {
    margin-top: 0 !important;
  }
  .sidebar .nav > .nav-group + .ni {
    margin-top: 0 !important;
    border-radius: 0 !important;
  }

  /* ── ITEMS : lignes plates, divider 1px, zéro card ────────── */
  .sidebar .nav > .ni,
  .sidebar .nav-group-toggle {
    background: transparent !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
    padding: 14px 24px 14px 68px !important;
    min-height: 56px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
  }
  .sidebar .nav > .ni:active,
  .sidebar .nav-group-toggle:active {
    background: oklch(0 0 0 / 0.03) !important;
    transform: none !important;
  }
  .sidebar .nav > .ni:first-child,
  .sidebar .nav > .nav-group-toggle + .ni,
  .sidebar .nav > .ni:has(+ .nav-group-toggle),
  .sidebar .nav > .ni:has(+ .nav-sec),
  .sidebar .nav > .ni:last-child {
    border-radius: 0 !important;
  }

  /* ── Pastilles d'icônes : 32×32 flat mono-accent ─────────── */
  .sidebar .ni .nico,
  .sidebar .nav-group-toggle::before {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: var(--accent-tint) !important;
    background-image: none !important;
    box-shadow: none !important;
    left: 24px !important;
  }
  .sidebar .ni .nico::before,
  .sidebar .nav-group-toggle::after {
    background: var(--accent-deep) !important;
    width: 18px !important;
    height: 18px !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    left: 31px !important;
  }
  /* Override TOUTES les pastilles colorées hard-codées (Accueil, Assistant,
     Ma semaine, Mes courses, Mes économies, Réglages, Tactiques) */
  .sidebar .nav > .ni:nth-of-type(1) .nico,
  .sidebar .nav > .ni:nth-of-type(2) .nico,
  .sidebar .nav-group-toggle[data-nav-group="semaine"]::before,
  .sidebar .nav-group-toggle[data-nav-group="magasin"]::before,
  .sidebar .nav-group-toggle[data-nav-group="economies"]::before,
  .sidebar .nav-group-toggle[data-nav-group="tactiques"]::before,
  .sidebar .nav-group-toggle[data-nav-group="reglages"]::before {
    background: var(--accent-tint) !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  /* ── État actif : pastille d'icône remplie + label gras + couleur accent
     (pas de stripe — respect du <absolute_bans> impeccable) ─────────── */
  .sidebar .ni.on {
    background: transparent !important;
    color: var(--accent-deep) !important;
    font-weight: 700 !important;
  }
  .sidebar .ni.on .nico {
    background: var(--accent) !important;
  }
  .sidebar .ni.on .nico::before {
    background: var(--cream-fixed) !important;
  }
  .sidebar .ni.on::after {
    border-color: var(--accent-deep) !important;
  }

  /* ── Chevron : ton ink-muted, pas noir 28% ─────────────────── */
  .sidebar .ni::after {
    border-right-color: var(--ink-muted) !important;
    border-top-color: var(--ink-muted) !important;
  }

  /* ── nav-group ouverte : sub-items indentés, pas de card ──── */
  .sidebar .nav-group {
    background: oklch(0 0 0 / 0.015) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    overflow: hidden;
  }
  .sidebar .nav-group .ni {
    padding: 12px 24px 12px 68px !important;
    background: transparent !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
    font-size: 15px !important;
    min-height: 48px !important;
  }
  .sidebar .nav-group .ni:last-child {
    border-bottom: none !important;
  }
  .sidebar .nav-group-toggle.is-open {
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* ── SOUPER EXPRESS : mono-accent plein, ZÉRO gradient ──── */
  .sidebar .urgence-btn {
    margin: 24px 24px 12px !important;
    padding: 16px 20px !important;
    border-radius: 14px !important;
    background: var(--accent) !important;
    background-image: none !important;
    color: var(--cream-fixed) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }
  .sidebar .urgence-btn:active {
    background: var(--accent-deep) !important;
    transform: scale(0.98);
  }

  /* ── FOOTER PROFIL : flat, signature discrète ─────────────── */
  .sidebar .sidebar-user {
    margin: 0 24px calc(20px + env(safe-area-inset-bottom)) !important;
    padding: 16px 0 !important;
    background: transparent !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    gap: 14px !important;
  }
  .sidebar .sidebar-user .uav {
    width: 38px !important;
    height: 38px !important;
    background: var(--accent) !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  .sidebar .sidebar-user .uname {
    font-family: var(--font-display) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--ink) !important;
  }
  .sidebar .sidebar-user .uplan {
    font-size: 12px !important;
    color: var(--ink-muted) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-top: 2px !important;
  }

  /* ── PWA install button : flat aussi ──────────────────────── */
  .pwa-install-btn {
    background: var(--accent) !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  /* ── Dark mode adjustements ───────────────────────────────── */
  [data-theme="dark"] .sidebar {
    background: var(--paper) !important;
  }
  [data-theme="dark"] .sidebar .weather-strip {
    background: oklch(0.28 0.04 143) !important;
    border-color: var(--border) !important;
  }
  [data-theme="dark"] .sidebar .nav-group {
    background: oklch(1 0 0 / 0.03) !important;
  }
}