/* ===================================================================
   Feed Me : thème clair, 2 ambiances (refonte "solaire")
   A · "carnet"    terracotta solaire, serif éditorial, texture papier
   B · "tournesol" jaune soleil, formes rondes, pop & joyeux
   Porté du handoff design ; complété pour la logique de l'app.
   =================================================================== */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-display: "Newsreader", Georgia, serif;
  --maxw: 1120px;
}

/* ---------- AMBIANCE A · CARNET ---------- */
[data-ambiance="carnet"] {
  --font-display: "Newsreader", Georgia, serif;
  --display-weight: 500;
  --display-style: normal;
  --display-spacing: -0.01em;

  --bg:        #FBF6EC;
  --bg-tint:   #F4EADA;
  --surface:   #FFFFFF;
  --surface-2: #FBF4E8;
  --ink:       #2A211B;
  --ink-soft:  #5C5046;
  --muted:     #9A8B7C;
  --line:      #ECDFCC;
  --line-soft: #F3EADC;

  --primary:    #D2552F;
  --primary-ink:#A23C1C;
  --primary-bg: #FBE7DC;
  --green:      #3E7C59;
  --green-bg:   #E3EEE4;
  --gold:       #D99A2B;
  --gold-bg:    #FAEFD2;
  --plaisir:    #C0457F;

  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --pill:      999px;

  --shadow-sm: 0 1px 2px rgba(60,40,20,.05), 0 1px 0 rgba(60,40,20,.02);
  --shadow:    0 2px 4px rgba(80,50,20,.05), 0 8px 24px -12px rgba(120,70,30,.18);
  --shadow-lg: 0 18px 48px -18px rgba(120,70,30,.30);
  --ring:      0 0 0 3px rgba(210,85,47,.5);

  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  --texture-opacity: .035;
  --glow: none;
}

/* ---------- AMBIANCE B · TOURNESOL ---------- */
[data-ambiance="tournesol"] {
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --display-weight: 700;
  --display-style: normal;
  --display-spacing: -0.02em;

  --bg:        #FFFCF3;
  --bg-tint:   #FFF4D6;
  --surface:   #FFFFFF;
  --surface-2: #FFF8E6;
  --ink:       #20231C;
  --ink-soft:  #4C5340;
  --muted:     #8B907E;
  --line:      #F0E7CE;
  --line-soft: #F6EFD9;

  --primary:    #F26B33;
  --primary-ink:#D2521E;
  --primary-bg: #FFE7D6;
  --green:      #4FA85B;
  --green-bg:   #E1F4DF;
  --gold:       #FFC53D;
  --gold-bg:    #FFF1C9;
  --plaisir:    #E64C8D;

  --radius:    18px;
  --radius-lg: 24px;
  --radius-xl: 30px;
  --pill:      999px;

  --shadow-sm: 0 2px 4px rgba(120,90,20,.06);
  --shadow:    0 4px 10px rgba(150,110,20,.07), 0 16px 36px -16px rgba(240,140,40,.28);
  --shadow-lg: 0 26px 64px -22px rgba(240,140,40,.40);
  --ring:      0 0 0 4px rgba(242,107,51,.5);

  --texture: none;
  --texture-opacity: 0;
  --glow: radial-gradient(120% 90% at 78% -10%, rgba(255,197,61,.28), rgba(255,197,61,0) 55%);
}

/* =================== BASE =================== */
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

.app-bg {
  position: relative;
  min-height: 100vh;
  background: var(--bg);
  background-image: var(--glow);
  transition: background-color .4s ease;
}
.app-bg::after {
  content: "";
  position: fixed; inset: 0;
  background-image: var(--texture);
  opacity: var(--texture-opacity);
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 0;
}
.app-wrap {
  position: relative; z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px 28px 140px;
}

h1, h2, h3 { margin: 0; }
.display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-style: var(--display-style);
  letter-spacing: var(--display-spacing);
}
.eyebrow {
  font-size: 12px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--primary);
}
.muted { color: var(--muted); }
.ico-gold { color: var(--gold); vertical-align: -3px; }
/* Transition d'entrée des vues : pilotée en JS dans go() (réarmée à chaque
   changement d'onglet). En CSS elle ne se rejouerait pas sur un simple swap d'innerHTML. */

/* =================== TOPBAR =================== */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 6px 2px 22px;
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand-logo {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--gold), var(--primary));
  box-shadow: var(--shadow-sm);
  color: #fff; flex: none;
}
[data-ambiance="tournesol"] .brand-logo { border-radius: 16px; }
.brand-name { font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.brand-sub { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.topbar-right { display: flex; align-items: center; gap: 10px; }

.icon-btn {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-soft); cursor: pointer; transition: .18s;
}
[data-ambiance="tournesol"] .icon-btn { border-radius: 14px; }
.icon-btn:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); transform: translateY(-1px); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* Salve 2 (a11y/mobile) : cibles tactiles >=44px + champs saisis >=16px (anti-zoom iOS) sur mobile. */
@media (max-width: 600px) {
  .icon-btn { width: 44px; height: 44px; }
  .topbar-right { gap: 6px; }
  .copy-btn { min-height: 44px; }
  .chip-row .chip { min-height: 44px; }
  .fb-close, .pt-close { width: 44px; height: 44px; }
  .prefs-input, .field { font-size: 16px; }
}

/* ---- Coin soleil vivant ---- */
.sun-corner {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 8px; border-radius: var(--pill);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); cursor: default;
}
.sun-orb { width: 34px; height: 34px; flex: none; }
.sun-greet { display: flex; flex-direction: column; line-height: 1.15; }
.sun-greet .g1 { font-size: 13px; font-weight: 800; }
.sun-greet .g2 { font-size: 10.5px; color: var(--muted); font-weight: 600; }
/* Illustration vivante : on anime la SVG elle-meme (rotation / scale / opacite),
   jamais de translation haut-bas. Le soleil fait tourner ses rayons et "respire" ;
   la lune fait scintiller ses etoiles. */
.sun-orb .sun-rays {
  transform-box: view-box; transform-origin: 12px 12px;
  animation: sun-rays-spin 16s linear infinite;
}
@keyframes sun-rays-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.sun-orb .sun-core {
  transform-box: fill-box; transform-origin: center;
  animation: sun-core-pulse 4.5s ease-in-out infinite;
}
@keyframes sun-core-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
.sun-orb .sun-star {
  transform-box: fill-box; transform-origin: center;
  animation: sun-twinkle 2.8s ease-in-out infinite;
}
.sun-orb .sun-star-2 { animation-delay: 1.2s; }
@keyframes sun-twinkle { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: .95; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .sun-orb .sun-rays, .sun-orb .sun-core, .sun-orb .sun-star { animation: none !important; }
}

/* =================== TABS =================== */
.tabs {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 6px; padding: 7px; margin-bottom: 30px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.tab {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 10px; border-radius: calc(var(--radius) - 1px);
  font-size: 14.5px; font-weight: 700; color: var(--ink-soft);
  cursor: pointer; border: none; background: transparent;
  transition: .18s; position: relative; font-family: var(--font-body);
}
.tab:hover { background: var(--surface-2); color: var(--ink); }
.tab:focus-visible { outline: none; box-shadow: var(--ring); }
.tab.active {
  background: var(--primary); color: #fff;
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primary) 70%, transparent);
}
.tab.active .tab-badge { background: rgba(255,255,255,.25); color: #fff; }
.tab-badge {
  font-size: 11.5px; font-weight: 800; min-width: 22px; text-align: center;
  padding: 2px 7px; border-radius: var(--pill);
  background: var(--surface-2); color: var(--muted);
}

/* =================== SCREEN HEAD =================== */
/* Bandeau « mode démo » (exploration d'un exemple) */
.demo-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-bottom: 22px; padding: 10px 16px;
  background: var(--gold-bg); color: var(--primary-ink);
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  border-radius: var(--radius-lg);
  font-size: 13.5px; font-weight: 700;
}
.demo-bar[hidden] { display: none; }
.demo-bar-txt { display: inline-flex; align-items: center; gap: 8px; }

/* Bouton « Sauvegarder mon planning » (topbar, orange) + sa modale */
.topbar-save { gap: 7px; height: 40px; padding: 0 15px; font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.topbar-save[hidden] { display: none; }
.save-card { max-width: 520px; }
/* Modale « Générer ta semaine » : corps scrollable (prompt + perso + collage). */
.gen-card { max-width: 560px; }
.gen-card .fb-head { flex: 0 0 auto; }
.gen-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.gen-prefs { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.gen-warn { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 14px; padding: 10px 12px; border-radius: var(--radius); background: var(--gold-bg); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.gen-warn svg { flex: none; color: var(--primary-ink); margin-top: 1px; }
.gen-warn b { color: var(--ink); }
/* Bloc « rappel calendrier » dans la modale de sauvegarde. */
.save-reminder { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.save-reminder-note { font-size: 12px; color: var(--muted); line-height: 1.4; }
.save-modal-link { margin: 16px 0 4px; }
.save-modal-loading { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 700; font-size: 13.5px; }
/* #4 : aide « Pas d'IA ? » + liens vers les IA gratuites (panneaux prompt). */
.ai-help { margin-top: 14px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.ai-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ai-link { display: inline-flex; align-items: center; padding: 7px 13px; border-radius: var(--pill); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); font-weight: 700; font-size: 12.5px; text-decoration: none; transition: .15s; }
.ai-link:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.ai-link:focus-visible { outline: none; box-shadow: var(--ring); }
@media (max-width: 900px) {
  .topbar-save-lbl { display: none; }
  .topbar-save { padding: 0; width: 40px; justify-content: center; }
}

.screen-head { margin-bottom: 26px; }
.screen-title { font-size: 38px; line-height: 1.05; margin: 6px 0 6px; }
.screen-sub { font-size: 15px; color: var(--ink-soft); }
.screen-sub b { color: var(--green); font-weight: 700; }
.screen-headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* =================== BUTTONS =================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-radius: var(--radius);
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  cursor: pointer; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); transition: .16s; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--primary) 65%, transparent); }
.btn-soft { background: var(--surface-2); border-color: var(--line-soft); color: var(--ink); }
.btn-green { background: var(--green); border-color: var(--green); color: #fff; }
.btn-danger { color: var(--plaisir); border-color: color-mix(in srgb, var(--plaisir) 35%, var(--line)); background: var(--surface); }
/* Bouton « Besoin d'aide ? » : chip orange clair, visible et invitant sans être un CTA plein. */
.btn-help { background: var(--primary-bg); border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); color: var(--primary-ink); }
.btn-help:hover { border-color: var(--primary); }
.btn-block { width: 100%; }
.btn svg { flex: none; }

/* =================== TODAY CARD =================== */
.today-card {
  border-radius: var(--radius-xl); padding: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold-bg) 70%, var(--surface)), var(--surface) 60%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  margin-bottom: 38px; position: relative; overflow: hidden;
}
.today-card::before {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 28%, transparent), transparent 70%);
  pointer-events: none;
}
.today-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; position: relative; flex-wrap: wrap; }
.today-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--pill);
  background: var(--green); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em;
}
.today-date { font-size: 22px; font-weight: 700; font-family: var(--font-display); white-space: nowrap; }

/* =================== MEAL GRID / CARD =================== */
.meal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.day-section { margin-bottom: 26px; }
.day-name {
  display: flex; align-items: center; gap: 12px;
  font-size: 17px; font-weight: 800; margin: 0 0 13px; letter-spacing: -.01em;
}
.day-name.is-today { color: var(--primary); }
.day-name::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.day-tag { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }

.meal-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 16px 16px 14px;
  box-shadow: var(--shadow-sm); position: relative;
  transition: .2s; overflow: hidden;
}
.meal-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: color-mix(in srgb, var(--moment-color) 30%, var(--line)); }
.meal-card.midi  { --moment-color: var(--gold);    --moment-bg: var(--gold-bg); }
.meal-card.soir  { --moment-color: var(--primary); --moment-bg: var(--primary-bg); }
.meal-card.plaisir { --moment-color: var(--plaisir); --moment-bg: color-mix(in srgb, var(--plaisir) 13%, var(--surface)); }
.meal-card.done { opacity: .62; }
.meal-card.done .meal-title { text-decoration: line-through; text-decoration-color: var(--muted); }
/* Repas annulé (« je n'y serai pas ») : grisé, titre barré, exclu des courses. */
.meal-card.skipped { opacity: .5; }
.meal-card.skipped .meal-title { text-decoration: line-through; text-decoration-color: var(--muted); }
.skip-tag { opacity: .85; font-weight: 800; color: var(--muted); }

.meal-moment {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--moment-color); background: var(--moment-bg);
  padding: 5px 11px 5px 9px; border-radius: var(--pill); margin-bottom: 11px;
}
.meal-moment svg { opacity: .9; }
.meal-moment .plaisir-tag { opacity: .85; }
.meal-title { font-size: 17px; font-weight: 700; line-height: 1.22; margin-bottom: 9px; letter-spacing: -.01em; }
.meal-meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--muted); font-weight: 600; margin-bottom: 12px; }
.meal-meta span { display: inline-flex; align-items: center; gap: 5px; }

.ing-toggle {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
  background: none; border: none; padding: 4px 0; margin-bottom: 4px; font-family: var(--font-body);
}
.ing-toggle:hover { color: var(--primary); }
.ing-toggle .chev { transition: transform .2s; }
.ing-toggle.open .chev { transform: rotate(90deg); }
.ing-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .28s ease, opacity .2s ease, margin .2s;
}
.ing-chips.open { max-height: 320px; opacity: 1; margin: 6px 0 12px; }
.chip {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px;
  border-radius: var(--pill); background: var(--surface-2);
  color: var(--ink-soft); border: 1px solid var(--line-soft);
}
.chip.basic { opacity: .7; }
.meal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 10px; }
.meal-actions .btn { padding: 10px; font-size: 13.5px; }
.meal-actions .span-2 { grid-column: 1 / -1; } /* bouton pleine largeur (Annuler / Rétablir) */

.done-stamp {
  position: absolute; top: 12px; right: 12px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--green); color: #fff; display: grid; place-items: center;
  transform: scale(0); transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.meal-card.done .done-stamp { transform: scale(1); }

/* =================== COURSES =================== */

/* --- Tableau de bord 2 colonnes (Progression + Budget) --- */
.courses-dash {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
.cd-col {
  padding: 18px 22px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.cd-progress {
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.cd-budget {
  background: linear-gradient(135deg, var(--green-bg), color-mix(in srgb, var(--green-bg) 30%, var(--surface)));
  border-color: color-mix(in srgb, var(--green) 18%, var(--line));
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.cd-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cd-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.cd-budget .cd-label { color: var(--green); }
.cd-count { font-size: 13px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.budget-note { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
/* #17 : comparaison estimé / cible budget proratisée. */
.budget-target { font-size: 12px; font-weight: 700; margin-top: 3px; }
.budget-target.ok { color: var(--green); }
.budget-target.over { color: var(--primary); }
.budget-amount { font-family: var(--font-display); font-size: 32px; font-weight: 700; color: var(--green); white-space: nowrap; line-height: 1.1; }

/* --- Barre de progression --- */
.progress-track { height: 10px; border-radius: var(--pill); background: var(--surface-2); overflow: hidden; }
.progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold) 0%, color-mix(in srgb, var(--gold) 40%, var(--green)) 60%, var(--green) 100%);
  background-size: 200% 100%;
  transition: width .7s cubic-bezier(.22,.61,.36,1);
  position: relative;
  overflow: hidden;
}
/* Shimmer sur la partie remplie */
.progress-fill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  animation: cd-shimmer 1.8s ease-in-out infinite;
}
@keyframes cd-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
/* Etat 100% : vert plein + pulsation celebratoire */
.progress-fill.is-full {
  background: var(--green);
}
.progress-fill.is-full::after {
  animation: none;
  display: none;
}
.progress-fill.is-full::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  animation: cd-pulse 1s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes cd-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 60%, transparent); }
  60%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 0%, transparent); }
}

.rayon { margin-bottom: 22px; }
.rayon-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 4px 10px; margin-bottom: 6px;
}
.rayon-title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; }
.rayon-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--gold-bg); color: var(--primary-ink); flex: none; }
.rayon-count { font-size: 12px; font-weight: 700; color: var(--muted); }
.rayon-total { font-size: 13.5px; font-weight: 800; color: var(--green); }

.course-list { display: flex; flex-direction: column; gap: 4px; }
.course-item {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 14px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line-soft);
  transition: .15s; cursor: pointer;
}
.course-item:hover { border-color: var(--line); box-shadow: var(--shadow-sm); }
.course-item:focus-visible { outline: none; box-shadow: var(--ring); }
.course-check {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  border: 2px solid var(--line); background: var(--surface);
  display: grid; place-items: center; color: #fff; transition: .15s;
}
.course-item.checked .course-check { background: var(--green); border-color: var(--green); }
.course-item.checked .course-name { text-decoration: line-through; color: var(--muted); }
.course-info { flex: 1; min-width: 0; }
.course-name { font-size: 14.5px; font-weight: 700; }
.course-qty { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.course-qty b { color: var(--ink-soft); font-weight: 800; }
.course-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.copy-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 7px 12px; border-radius: var(--radius); font-size: 12.5px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--ink-soft); cursor: pointer; transition: .15s; font-family: var(--font-body);
}
.copy-btn:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); }
.copy-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.copy-btn.copied { background: var(--green-bg); color: var(--green); border-color: var(--green); }
/* "J'ai déjà" (déjà en stock) */
.owned-btn.is-on { background: var(--green-bg); color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, var(--line)); }
.course-item.owned { opacity: .55; }
.course-item.owned .course-name { text-decoration: line-through; text-decoration-color: var(--muted); }
.course-item.owned .course-check { visibility: hidden; }
.owned-tag { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--surface-2); padding: 1px 7px; border-radius: var(--pill); margin-left: 6px; vertical-align: middle; }

.tip-bar {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--radius-lg); margin-bottom: 26px;
  background: var(--gold-bg); border: 1px solid color-mix(in srgb, var(--gold) 30%, var(--line));
  font-size: 13px; color: var(--ink-soft);
}
.tip-bar b { color: var(--primary-ink); }
.tip-ico { color: var(--gold); flex: none; margin-top: 1px; }
.code-tag { font-family: ui-monospace, monospace; font-size: .85em; background: var(--surface-2); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); }

/* =================== HISTORIQUE =================== */
.month-label { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--muted); text-transform: uppercase; margin: 22px 4px 12px; }
.hist-item {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 20px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line); margin-bottom: 10px;
  box-shadow: var(--shadow-sm); transition: .15s;
}
.hist-item:hover { box-shadow: var(--shadow); transform: translateX(2px); }
.hist-item.old { border-style: dashed; opacity: .72; }
.hist-date { text-align: center; flex: none; width: 52px; }
.hist-date .d { font-size: 26px; font-weight: 800; font-family: var(--font-display); line-height: 1; color: var(--primary); }
.hist-date .m { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; color: var(--muted); }
.hist-main { flex: 1; min-width: 0; }
.hist-title { font-size: 16px; font-weight: 700; }
.hist-moment { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.hist-ago { font-size: 12px; color: var(--muted); font-style: italic; white-space: nowrap; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state .es-row { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

/* =================== PARAMÈTRES =================== */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
.stat {
  padding: 18px 20px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  text-align: center;
}
.stat .num { font-family: var(--font-display); font-size: 32px; font-weight: 700; line-height: 1; color: var(--ink); text-align: center; }
.stat .lbl { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 6px; text-align: center; }
.stat.accent .num { color: var(--primary); }
.stat.green .num { color: var(--green); }

.panels { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.panel { padding: 22px; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.panel-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green); margin-bottom: 6px; }
.panel-title { font-size: 21px; font-family: var(--font-display); font-weight: 600; margin-bottom: 6px; }
[data-ambiance="tournesol"] .panel-title { font-weight: 700; }
.panel-desc { font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; }
.panel-sub { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }

.dropzone {
  border: 2px dashed var(--line); border-radius: var(--radius-lg);
  padding: 30px 20px; text-align: center; background: var(--surface-2);
  transition: .18s; cursor: pointer; margin-bottom: 14px;
}
.dropzone:hover, .dropzone.is-drag { border-color: var(--primary); background: var(--primary-bg); }
.dropzone:focus-visible { outline: none; box-shadow: var(--ring); }
.dropzone .dz-ico { color: var(--primary); margin-bottom: 8px; display: inline-grid; }
.dropzone .dz-t { font-weight: 700; font-size: 15px; }
.dropzone .dz-s { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.field {
  width: 100%; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); padding: 13px 14px; resize: vertical;
}
.field:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.prompt-box {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; line-height: 1.55;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; max-height: 230px; overflow-y: auto; white-space: pre-wrap; color: var(--ink-soft); margin-bottom: 14px;
}
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.save-note { font-size: 12px; color: var(--muted); margin-top: 14px; display: flex; gap: 8px; align-items: flex-start; }
.save-note svg { flex: none; margin-top: 1px; }
/* Rappel « génère la semaine prochaine » (vue Accueil, fin de semaine). */
.reminder-card { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 22px; border-radius: var(--radius-xl); background: var(--gold-bg); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); }
.reminder-ico { flex: none; color: var(--primary-ink); display: inline-flex; }
.reminder-txt { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.reminder-txt b { color: var(--ink); font-size: 14.5px; }
.reminder-txt span { color: var(--ink-soft); font-size: 13px; line-height: 1.45; }
.reminder-x { flex: none; background: none; border: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; border-radius: 6px; }
.reminder-x:hover { color: var(--ink); }
.reminder-x:focus-visible { outline: none; box-shadow: var(--ring); }

/* =================== NEXT WEEK BAR =================== */
.nextweek-wrap { margin-top: 18px; }
.nextweek-wrap summary { list-style: none; }
.nextweek-wrap summary::-webkit-details-marker { display: none; }
.nextweek {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px dashed var(--line); cursor: pointer; transition: .15s;
}
.nextweek:hover { border-color: var(--primary); background: var(--surface-2); }
.nextweek b { font-weight: 800; }
.nextweek .nw-ico { color: var(--green); display: inline-grid; }
.nextweek .nw-arrow { transition: transform .2s; }
.nextweek-wrap[open] .nextweek .nw-arrow { transform: rotate(90deg); }
.nextweek-body { padding-top: 20px; }
.nextweek-body .meal-card { opacity: .92; }

/* =================== PRÉFÉRENCES / ONBOARDING =================== */
.panel-prefs { margin-bottom: 18px; }
/* Panneau « Ton accès » (lien de l'espace) */
.panel-access { margin-bottom: 18px; border-color: color-mix(in srgb, var(--primary) 32%, var(--line)); }
.access-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.access-url { flex: 1 1 240px; min-width: 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px; }
/* #8 : lien discret de suppression de l'espace en ligne (action destructive, RGPD). */
.access-danger { margin-top: 12px; }
.btn-link-danger { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 4px 2px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; border-radius: 6px; }
.btn-link-danger:hover { color: var(--danger, #c0392b); text-decoration: underline; }
.btn-link-danger:focus-visible { outline: none; box-shadow: var(--ring); }

.prefs-field { margin-top: 18px; }
.prefs-field:first-of-type { margin-top: 0; }
/* Personnes + budget côte à côte (2 colonnes), 1 colonne sur mobile. */
.prefs-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; align-items: start; }
.prefs-grid2 .prefs-field { margin-top: 0; }
@media (max-width: 560px) { .prefs-grid2 { grid-template-columns: 1fr; } }
.prefs-label {
  display: block; font-size: 13.5px; font-weight: 800;
  color: var(--ink); margin-bottom: 10px;
}
.prefs-input {
  width: 100%; font-family: var(--font-body); font-size: 14px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); padding: 12px 14px;
}
.prefs-input::placeholder { color: var(--muted); }
.prefs-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }

.prefs-money { position: relative; }
.prefs-money .prefs-input { padding-right: 38px; }
.prefs-money-unit {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: 15px; font-weight: 800; color: var(--muted); pointer-events: none;
}

.prefs-note {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 9px; font-size: 12px; line-height: 1.5; color: var(--muted);
}
.prefs-note svg { flex: none; margin-top: 1px; color: var(--green); }

/* ---- Chips (toggles multi-sélection) ---- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--pill);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); font-family: var(--font-body);
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: .15s; white-space: nowrap;
}
.chip:hover { border-color: var(--primary); color: var(--ink); transform: translateY(-1px); }
.chip:focus-visible { outline: none; box-shadow: var(--ring); }
.chip.is-on {
  background: var(--primary-bg);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--line));
  color: var(--primary-ink);
}
.chip.is-on::before { content: "✓"; font-weight: 900; }

/* ---- Carte d'onboarding (premier lancement) ---- */
.onboard-card { max-width: 620px; margin: 0 auto; }
.onboard-hero {
  display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
  padding-bottom: 20px; border-bottom: 1px solid var(--line-soft);
}
.onboard-emoji { font-size: 38px; line-height: 1; flex: none; }
.onboard-actions {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px;
  padding-top: 20px; border-top: 1px solid var(--line-soft);
}
.onboard-actions .btn-primary { flex: 1; min-width: 180px; justify-content: center; }
.onboard-back { margin-top: 18px; }
.btn-sm { padding: 8px 12px; font-size: 13px; }

/* =================== TOAST / CONFETTI =================== */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: var(--bg); padding: 13px 20px; border-radius: var(--pill);
  font-size: 14px; font-weight: 700; z-index: 500; box-shadow: var(--shadow-lg); /* au-dessus des modales (fb-overlay 420, pt-overlay 400, tour 300) */
  display: flex; align-items: center; gap: 9px; opacity: 0; transition: .3s cubic-bezier(.34,1.4,.6,1);
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.confetti-piece { position: fixed; width: 9px; height: 9px; z-index: 150; pointer-events: none; border-radius: 2px; }

/* =================== RESPONSIVE =================== */
@media (max-width: 860px) {
  .app-wrap { padding: 16px 16px 120px; }
  .screen-title { font-size: 30px; }
  .meal-grid { grid-template-columns: 1fr; }
  .panels { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .budget-amount { font-size: 28px; }
}
@media (max-width: 600px) {
  .app-wrap { padding: 14px 12px 130px; }
  .brand-sub { display: none; }
  .sun-greet { display: none; }
  .tabs {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    grid-template-columns: repeat(5, 1fr); margin: 0; border-radius: 0;
    border-left: none; border-right: none; border-bottom: none;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px -12px rgba(0,0,0,.18);
  }
  .tab { flex-direction: column; gap: 3px; font-size: 10px; padding: 8px 2px; line-height: 1.1; }
  .tab span:not(.tab-badge) { text-align: center; }
  .tab .tab-badge { position: absolute; top: 2px; right: 50%; margin-right: -26px; }
  .screen-title { font-size: 26px; }
  .courses-dash { grid-template-columns: 1fr; }
  .course-item { flex-wrap: wrap; }
  .course-actions { width: 100%; justify-content: flex-end; }
  .onboard-actions { flex-direction: column; }
  .onboard-actions .btn, .onboard-actions .btn-primary { width: 100%; min-width: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .progress-fill { transition: none !important; }
  .progress-fill::after { animation: none !important; display: none; }
  .progress-fill.is-full::before { animation: none !important; }
}

/* =================== TUTORIEL ONBOARDING (GSAP) =================== */
/* Bouton d'aide rond dans la topbar */
.help-btn {
  font-family: var(--font-display);
  font-weight: 800; font-size: 19px; line-height: 1;
  border-radius: 50%;
}
[data-ambiance="tournesol"] .help-btn { border-radius: 50%; }
.help-btn:hover { color: var(--primary); }

/* verrou du scroll quand le modal est ouvert */
body.pt-locked { overflow: hidden; }

/* Overlay plein écran */
.pt-overlay {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--ink) 52%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pt-overlay[hidden] { display: none; }

/* Carte du modal */
.pt-card {
  position: relative;
  width: 100%; max-width: 600px;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  background-image: var(--glow);
  overflow: hidden;
}

/* En-tête : progression + fermer */
.pt-head {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line-soft);
}
.pt-dots { display: flex; gap: 7px; }
.pt-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--line); transition: .25s;
}
.pt-dot.on { background: var(--primary); transform: scale(1.25); }
.pt-dot.done { background: color-mix(in srgb, var(--primary) 50%, var(--line)); }
.pt-counter {
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-left: auto;
}
.pt-close {
  width: 34px; height: 34px; flex: none; margin-left: 6px;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-soft);
  font-size: 22px; line-height: 1; cursor: pointer; transition: .16s;
}
.pt-close:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.pt-close:focus-visible { outline: none; box-shadow: var(--ring); }

/* Titre accessible du dialog : visible uniquement pour les lecteurs d'écran
   (le <h2 class="pt-title"> de chaque étape fournit le titre visuel). */
.pt-sr-title {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Corps : pile d'étapes (une seule visible) */
.pt-body {
  position: relative;
  /* flex-basis auto (et non 0%) : sinon la hauteur posée par le JS pour animer le
     redimensionnement entre étapes serait ignorée (un item flex à basis non-auto
     ignore sa propriété height). Le scroll et le min-height restent inchangés. */
  flex: 1 1 auto; min-height: 320px;
  overflow-y: auto;
  padding: 30px 30px 26px;
}
/* Indice visuel de scroll : léger fondu en bas, uniquement quand le contenu
   déborde (classe posée par le JS), sinon la dernière ligne ne doit pas s'estomper. */
.pt-body.pt-scrollable {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
.pt-step { display: none; }
.pt-step.active { display: block; }

/* Typo des étapes */
.pt-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight); letter-spacing: var(--display-spacing);
  font-size: 30px; line-height: 1.1; margin: 0 0 12px;
  color: var(--ink);
}
.pt-lead { font-size: 19px; font-weight: 800; color: var(--primary-ink); margin: 0 0 12px; }
.pt-text { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 6px; }
.pt-text b { color: var(--ink); font-weight: 800; }
.pt-text em { font-style: italic; }

/* Hippo / pictogramme d'accroche */
.pt-hippo {
  font-size: 64px; line-height: 1; margin-bottom: 10px;
  filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--primary) 30%, transparent));
}
/* Étape 3 : pictogramme cadenas posé sur une tuile (charte icônes). */
.pt-hippo-sm {
  width: 84px; height: 84px; margin: 0 auto 12px;
  display: grid; place-items: center;
  border-radius: 24px; transform: rotate(-4deg);
  box-shadow: 0 12px 24px -12px rgba(70, 45, 20, .55);
  filter: none; font-size: 40px;
}

/* Étape 2 : mini-schéma 3 blocs */
.pt-flow {
  display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap;
  margin-top: 20px;
}
.pt-flow-block {
  flex: 1 1 0; min-width: 130px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 18px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.pt-flow-final {
  background: var(--gold-bg);
  border-color: color-mix(in srgb, var(--gold) 40%, transparent);
}
.pt-flow-ic {
  width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto;
  border-radius: 15px; transform: rotate(-4deg);
  box-shadow: 0 6px 14px -8px rgba(70, 45, 20, .5);
  font-size: 30px; line-height: 1;
}
/* Bloc « Popotam » du schéma : la frimousse, sans tuile. */
.pt-flow-ic.pt-flow-mascot {
  background: none; box-shadow: none; transform: none; border-radius: 0;
}
.pt-flow-mascot svg { width: 100%; height: 100%; display: block; }
.pt-flow-txt { display: flex; flex-direction: column; gap: 3px; }
.pt-flow-txt b { font-size: 15px; font-weight: 800; color: var(--ink); }
.pt-flow-txt span { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.pt-flow-arrow {
  align-self: center; font-size: 24px; font-weight: 800; color: var(--primary);
}

/* Étape 3 : badges de confiance */
.pt-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.pt-badge {
  font-size: 12.5px; font-weight: 800;
  padding: 6px 12px; border-radius: var(--pill);
  background: var(--green-bg); color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 24%, transparent);
}

/* Étape 4 : avantages */
.pt-perks { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.pt-perk {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 16px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.pt-perk-ic {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 14px; transform: rotate(-4deg);
  box-shadow: 0 6px 14px -8px rgba(70, 45, 20, .5);
  font-size: 26px; line-height: 1;
}
/* Tuiles colorées de la charte d'icônes (tangerine / soleil / vert). */
.pt-ic-tang { background: #E8643C; color: #fff; }
.pt-ic-sun { background: #FFC53D; color: #7A4A08; }
.pt-ic-green { background: #5FA877; color: #10402A; }
.pt-perk b { display: block; font-size: 15.5px; font-weight: 800; color: var(--ink); }
.pt-perk span { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; }

/* Étapes 5/6 : zones d'action */
.pt-promptbox {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px; line-height: 1.55;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px; margin: 14px 0;
  max-height: 200px; overflow-y: auto;
  white-space: pre-wrap; word-break: break-word;
  color: var(--ink-soft);
}
.pt-promptbox:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--primary); }
.pt-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.pt-copy.pt-ok, .btn.pt-ok { background: var(--green); border-color: var(--green); color: #fff; }
.pt-escape { margin: 16px 0 0; font-size: 13.5px; }
.pt-escape a { color: var(--primary-ink); font-weight: 700; text-decoration: underline; cursor: pointer; }
.pt-escape a:hover { color: var(--primary); }

.pt-paste { margin: 14px 0; }
.pt-error {
  margin: 12px 0 0; padding: 11px 14px;
  font-size: 13.5px; font-weight: 700;
  color: var(--primary-ink);
  background: var(--primary-bg);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: var(--radius);
}
.pt-hint { margin: 16px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.pt-hint b { color: var(--ink-soft); font-weight: 800; }

/* Étape 6 : distillation (le moment WOW) */
.pt-distill { overflow: hidden; }
.pt-distill:not(.pt-distill-show) { display: none; }
.pt-distill-show { display: block; margin: 14px 0; }
.pt-distill-pre {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px; line-height: 1.5;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px; margin: 0;
  max-height: 180px; overflow: hidden;
  white-space: pre-wrap; word-break: break-word;
  color: var(--muted);
  transition: color .3s;
}
.pt-distill-pre.pt-distill-keep {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 45%, transparent);
}

/* Pied : navigation */
.pt-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
}
.pt-skip {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  color: var(--muted); padding: 8px 4px;
}
.pt-skip:hover { color: var(--ink-soft); }
.pt-skip:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 8px; }
.pt-nav { display: flex; gap: 10px; }

/* Mobile : modal plein écran */
@media (max-width: 600px) {
  .pt-overlay { padding: 0; }
  .pt-card {
    max-width: none; width: 100%; height: 100%; max-height: 100%;
    border-radius: 0; border: none;
  }
  .pt-body { padding: 22px 18px 20px; }
  .pt-title { font-size: 25px; }
  .pt-lead { font-size: 17px; }
  .pt-text { font-size: 15px; }
  .pt-hippo { font-size: 54px; }
  .pt-flow { flex-direction: column; }
  .pt-flow-arrow { transform: rotate(90deg); }
  .pt-nav .btn { padding: 11px 14px; }
  /* Garde les boutons de navigation au-dessus de la barre d'accueil iOS. */
  .pt-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  /* Étape 4 : cartes plus compactes pour limiter le débordement (petits écrans / paysage). */
  .pt-perk { padding: 10px 12px; }
  .pt-perks { gap: 10px; margin-top: 14px; }
}

/* Mouvement réduit : pas de transitions superflues */
@media (prefers-reduced-motion: reduce) {
  .pt-dot, .pt-close, .pt-distill-pre { transition: none; }
}

/* Popotam space banner (public edition) */

/* =================== FEEDBACK / AVIS MODAL =================== */

.fb-overlay {
  position: fixed; inset: 0; z-index: 420;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--ink) 52%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s ease;
}
.fb-overlay.show { opacity: 1; }
.fb-overlay[hidden] { display: none; }

.fb-card {
  position: relative;
  width: 100%; max-width: 460px;
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 22px 22px 20px;
  transform: translateY(10px) scale(.98);
  transition: transform .2s cubic-bezier(.34,1.4,.6,1);
}
.fb-overlay.show .fb-card { transform: translateY(0) scale(1); }

.fb-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.fb-title {
  flex: 1; margin: 0;
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-style: var(--display-style); letter-spacing: var(--display-spacing);
  font-size: 22px; color: var(--ink);
}
.fb-close {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink-soft);
  font-size: 22px; line-height: 1; cursor: pointer; transition: .16s;
}
.fb-close:hover { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.fb-close:focus-visible { outline: none; box-shadow: var(--ring); }

.fb-lead { margin: 0 0 16px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }
.fb-note { margin: -6px 0 14px; font-size: 12px; color: var(--muted); }
.fb-attach { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 16px; font-size: 13px; color: var(--ink-soft); cursor: pointer; line-height: 1.4; }
.fb-attach input { width: 18px; height: 18px; flex: none; margin-top: 1px; }

.fb-label {
  display: block; margin: 0 0 6px; font-size: 12.5px; font-weight: 700;
  color: var(--ink-soft); letter-spacing: .01em;
}
.fb-textarea {
  font-family: var(--font-body); font-size: 14px; min-height: 110px; margin-bottom: 14px;
}
.fb-input {
  font-family: var(--font-body); font-size: 14px; resize: none; margin-bottom: 18px;
}

.fb-foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.fb-foot .btn { min-width: 110px; }

@media (max-width: 520px) {
  .fb-overlay { padding: 0; align-items: flex-end; }
  .fb-card {
    max-width: none; width: 100%; max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
  .fb-foot .btn { flex: 1; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fb-overlay, .fb-card, .fb-close { transition: none; }
}

/* =================== MASCOTTE POPOTAM =================== */
/* Conteneurs de mascotte : la SVG remplit son carre, sans deborder. */
.mascot { display: inline-flex; }
.mascot svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Topbar : la frimousse (toque) occupe le carre du logo.
   overflow:hidden = garde-fou : si une animation interne (zzz/coeurs) ou une
   respiration etait appliquee par erreur a une SVG frimousse, elle ne deborderait
   pas dans l'UI environnante. popotamFace() n'emet jamais la classe popotam-svg. */
.brand-logo .popotam-face { width: 100%; height: 100%; display: block; overflow: hidden; }

/* Hero d'onboarding : mascotte complete a cote du titre. */
.mascot-hero { width: 120px; height: 134px; flex: none; }

/* Moment generation : mascotte qui touille, ligne avec texte. */
.mascot-line { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.mascot-prompt { width: 96px; height: 107px; flex: none; }
.mascot-line-txt { font-weight: 700; color: var(--ink); font-size: 15px; }

/* Etat vide : Popotam endormi. */
.mascot-empty { width: 140px; height: 156px; margin: 0 auto; }

/* Hero du tutoriel : mascotte complete, remplace l'emoji 🦛. */
.pt-hippo.pt-mascot {
  width: 150px; height: 167px; margin: 0 auto 10px; font-size: 0;
}
.pt-hippo.pt-mascot svg { width: 100%; height: 100%; }

/* Frimousse du feedback : clin d'oeil a cote du titre.
   overflow:hidden = garde-fou pour cette SVG frimousse (face-only) : une animation
   interne ne deborde pas hors du carre de 40px dans la carte de feedback. */
.fb-face { width: 40px; height: 40px; flex: none; overflow: hidden; }

@media (max-width: 600px) {
  .mascot-hero { width: 96px; height: 107px; }
  .mascot-empty { width: 120px; height: 134px; }
  .pt-hippo.pt-mascot { width: 128px; height: 143px; }
}

/* ---- Animations en boucle (decoratives, coupees si mouvement reduit) ---- */
/* Pas de respiration haut/bas : la mascotte vit par le clignement des yeux et
   le coucou du bras (jamais de bob vertical, ca fait cheap). */

/* Clignement : les yeux restent ouverts presque tout le cycle, puis un bref
   clin d'oeil (scaleY). Signal universel "je suis vivant". Reserve aux yeux
   ouverts (expr "happy") : un sourire d'yeux fermes ne doit pas cligner. */
.pop-eyes-blink {
  transform-box: fill-box;
  transform-origin: center;
  animation: pop-blink 4.5s ease-in-out infinite;
}
@keyframes pop-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  94%           { transform: scaleY(.1); }
  97%           { transform: scaleY(1); }
}

/* Coucou : le bras leve (louche ou main nue) salue quelques degres au debut du
   cycle, puis se repose (maintien a 0) le reste du temps. Pivot a l'epaule. */
.pop-spoon,
.pop-wave {
  transform-box: view-box;
  transform-origin: 173px 182px;
  animation: pop-wave 3s ease-in-out infinite;
}
@keyframes pop-wave {
  0%   { transform: rotate(-3deg); }
  10%  { transform: rotate(-14deg); }
  20%  { transform: rotate(-3deg); }
  30%  { transform: rotate(-14deg); }
  40%  { transform: rotate(-3deg); }
  100% { transform: rotate(-3deg); }
}

/* Rayons de soleil : rotation lente autour du centre de la tete. */
.pop-rays {
  transform-box: view-box;
  transform-origin: 120px 98px;
  animation: pop-rays-rot 22s linear infinite;
}
@keyframes pop-rays-rot {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Vapeur de la louche : monte et se fond, puis reste invisible le temps de
   revenir en bas sans saut visible a la reprise de la boucle (0% et 100%
   partagent opacity:0 ; la montee occupe la premiere moitie du cycle). */
.pop-steam {
  animation: pop-steam-rise 3s ease-in-out infinite;
}
@keyframes pop-steam-rise {
  0%   { opacity: 0; transform: translateY(0); }
  15%  { opacity: .5; transform: translateY(-2px); }
  45%  { opacity: .15; transform: translateY(-6px); }
  60%  { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; transform: translateY(0); }
}

/* Coeurs (love) : battement au repos (env. 43 BPM), avec un court delai pour
   laisser respirer l'oeil avant la reprise de la boucle. */
.pop-heart {
  transform-box: fill-box;
  transform-origin: center;
  animation: pop-heartbeat 1.4s ease-in-out 0.6s infinite;
}
@keyframes pop-heartbeat {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Dodo : les z Z flottent vers le haut puis se fondent, puis restent invisibles
   le temps de redescendre sans saut visible a la reprise (0% et 100% partagent
   opacity:0 ; la montee occupe la premiere moitie du cycle). */
.pop-zzz {
  transform-box: view-box;
  animation: pop-zzz-float 3.2s ease-in-out infinite;
}
@keyframes pop-zzz-float {
  0%   { opacity: 0; transform: translateY(2px); }
  15%  { opacity: .7; transform: translateY(0); }
  45%  { opacity: .35; transform: translateY(-6px); }
  60%  { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 0; transform: translateY(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .pop-eyes-blink,
  .pop-spoon,
  .pop-wave,
  .pop-rays,
  .pop-steam,
  .pop-heart,
  .pop-zzz {
    animation: none !important;
  }
}

/* =================== VISITE GUIDEE (coachmark) =================== */
.pop-tour { position: fixed; inset: 0; z-index: 300; }
.pop-tour[hidden] { display: none; }
.pop-tour-locked { overflow: hidden; }

/* Couche cliquable plein ecran : un clic dessus ferme la visite. Elle reste
   transparente quand une cible existe (l'anneau dessine alors le voile via son
   box-shadow geant, ce qui menage une vraie « decoupe » lumineuse sur la cible).
   Sans cible, on lui rend une teinte visible pour assombrir le fond. */
.pop-tour-dim {
  position: fixed; inset: 0;
  background: transparent;
  opacity: 0; transition: opacity .18s ease, background .18s ease;
}
.pop-tour.is-open .pop-tour-dim { opacity: 1; }
.pop-tour.is-open .pop-tour-dim.is-bare { background: rgba(40, 28, 18, .46); }

/* Anneau de surbrillance + spot : la bordure et le halo dessinent l'anneau,
   le box-shadow geant assombrit tout SAUF la cible (effet projecteur). */
.pop-tour-highlight {
  position: fixed; top: 0; left: 0; width: 0; height: 0;
  border-radius: 12px;
  border: 2px solid var(--primary);
  box-shadow: 0 0 0 4px var(--primary-bg), 0 0 0 9999px rgba(40, 28, 18, .46);
  pointer-events: none;
  opacity: 0; transition: opacity .18s ease, top .2s ease, left .2s ease, width .2s ease, height .2s ease;
}
.pop-tour.is-open .pop-tour-highlight { opacity: 1; }

/* Bulle (tooltip). */
.pop-tour-bubble {
  position: fixed; max-width: 320px; width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 16px 16px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
.pop-tour.is-open .pop-tour-bubble { opacity: 1; transform: translateY(0); }
.pop-tour-bubble:focus { outline: none; }

/* Fleche pointant vers la cible. */
.pop-tour-arrow {
  position: absolute; width: 14px; height: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  transform: translateX(-50%) rotate(45deg);
}
.pop-tour-bubble--below .pop-tour-arrow { top: -8px; border-right: none; border-bottom: none; }
.pop-tour-bubble--above .pop-tour-arrow { bottom: -8px; border-left: none; border-top: none; }

.pop-tour-close {
  position: absolute; top: 8px; right: 10px;
  width: 28px; height: 28px; line-height: 1;
  border: none; background: transparent; cursor: pointer;
  font-size: 22px; color: var(--muted); border-radius: 8px;
}
.pop-tour-close:hover { background: var(--surface-2); color: var(--ink); }

.pop-tour-text {
  margin: 2px 26px 14px 0;
  font-size: 14.5px; line-height: 1.45; color: var(--ink);
}
.pop-tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pop-tour-counter { font-size: 12px; font-weight: 700; color: var(--muted); }
.pop-tour-nav { display: flex; gap: 8px; }

@media (max-width: 560px) {
  .pop-tour-bubble { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pop-tour-dim,
  .pop-tour-highlight,
  .pop-tour-bubble { transition: none !important; }
  .pop-tour-bubble { transform: none !important; }
}
.pop-tour--noanim .pop-tour-dim,
.pop-tour--noanim .pop-tour-highlight,
.pop-tour--noanim .pop-tour-bubble { transition: none !important; }
.pop-tour--noanim .pop-tour-bubble { transform: none !important; }