/* Le haut de la configuration d'espace (handoff Refontes/design_handoff_config_haut, 09/10/2026),
   dessiné par onboardingCard et mealimeCarteHTML (app.js). Écrit à la main d'après la maquette :
   toutes les classes portent le préfixe ch- (le handoff a des noms génériques : hero, back, mea,
   opt, rc...), les animations aussi. Au-dessus : l'accueil en trois colonnes ; dessous : UNE carte
   Mealime après un import, ou une ligne discrète qui le propose. La suite de la page ne change pas. */
.onboard-card { --ch-ink: #2A211B; --ch-ink2: #6A5C4C; --ch-muted: #9C8B79; --ch-line: #EEDFC2; --ch-line2: #E6D3AE; --ch-cream: #FFF8EA; --ch-cream2: #FCEFD9;
  --ch-orange: #F0682F; --ch-orange-d: #DA541E; --ch-green: #33A15B; --ch-green-d: #2C8B4E; --ch-green-line: #BFE0C9; --ch-dark: #33261B;
  --ch-fd: "Bricolage Grotesque", system-ui, sans-serif; --ch-fh: "Caveat", cursive; --ch-spring: cubic-bezier(.3,1.35,.45,1); }

/* ============ 1 · l'accueil ============ */
.ch-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; margin-bottom: 4px; }
.ch-pop { display: block; width: 96px; height: 96px; margin: -6px 0 -10px -4px; }
.ch-pop svg { width: 100%; height: 100%; display: block; }
.ch-hand { display: block; font: 600 22px/1 var(--ch-fh); color: var(--ch-orange-d); transform: rotate(-2deg); transform-origin: left; }
.ch-h1 { margin: 4px 0 0; font: 800 30px/1.08 var(--ch-fd); letter-spacing: -.025em; text-wrap: balance; color: var(--ch-ink); }
.ch-hero p { margin: 6px 0 0; font-size: 15px; color: var(--ch-ink2); }
/* « Déjà un planning ? » : une sortie, pas une étape */
.onboard-recover.ch-back { display: inline-flex; align-items: center; gap: 10px; width: auto; min-height: 52px; margin: 0; padding: 6px 14px 6px 6px; border-radius: 16px; border: 1.5px solid var(--ch-line);
  background: var(--ch-cream); color: var(--ch-ink); text-align: left; cursor: pointer; font: inherit; transition: transform .3s var(--ch-spring), border-color .2s, background .2s; }
.onboard-recover.ch-back:hover { transform: translateY(-2px); border-color: var(--ch-line2); background: #fff; }
.ch-back .ch-bi { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #fff; display: grid; place-items: center; color: #B07800; }
.ch-back b { display: block; font: 800 13.5px/1.15 var(--ch-fd); }
.ch-back small { display: block; font-size: 12px; color: var(--ch-muted); line-height: 1.25; }
.ch-back .ch-ar { color: var(--ch-muted); display: grid; transition: transform .3s var(--ch-spring), color .2s; }
.ch-back:hover .ch-ar { transform: translateX(3px); color: var(--ch-ink); }

/* ============ 2 · Mealime, après un import ============ */
.ch-mea { position: relative; margin-top: 22px; border-radius: 24px; border: 2px solid var(--ch-ink); box-shadow: 0 5px 0 var(--ch-ink); background: linear-gradient(135deg, #F0F9F2, #FFFDF6 60%); overflow: hidden; }
.ch-mea-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px 18px 14px; }
.ch-badge { position: relative; flex: none; width: 52px; height: 52px; border-radius: 16px; background: #7ED957; color: #fff; display: grid; place-items: center; font: 800 26px var(--ch-fd); transform: rotate(-5deg); border: 2px solid var(--ch-ink); }
.ch-badge i { position: absolute; right: -8px; bottom: -8px; width: 26px; height: 26px; border-radius: 50%; background: var(--ch-green); border: 2.5px solid #fff; display: grid; place-items: center; color: #fff; font-style: normal; }
.ch-mea-h h2 { margin: 0; font: 800 19px/1.2 var(--ch-fd); color: var(--ch-ink); }
.ch-mea-h p { margin: 3px 0 0; font-size: 13.5px; color: var(--ch-ink2); line-height: 1.4; }
.ch-mea-h .ml-pastille { margin-left: 0; vertical-align: 1px; }
.ch-stats { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ch-sx { display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 11px; border-radius: 999px; background: #fff; border: 1.5px solid var(--ch-line); font-size: 12.5px; color: var(--ch-ink2); white-space: nowrap; }
.ch-sx b { font: 800 15px var(--ch-fd); color: var(--ch-ink); }
/* l'option, dans la carte : un interrupteur, toute la ligne se touche */
.ch-opt { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; margin: 0; padding: 14px 18px; border: 0; border-top: 1.5px dashed var(--ch-green-line); border-radius: 0;
  background: rgba(255,255,255,.6); color: var(--ch-ink); text-align: left; font: inherit; cursor: pointer; transition: background .25s; }
.ch-opt:hover { background: #fff; }
.ch-ol { flex: 1; min-width: 0; }
.ch-opt b { display: block; font: 800 15px/1.25 var(--ch-fd); }
.ch-opt small { display: block; margin-top: 2px; font-size: 13px; color: var(--ch-ink2); line-height: 1.35; }
.ch-sw { position: relative; flex: none; width: 52px; height: 30px; border-radius: 999px; background: var(--ch-line2); transition: background .3s; }
.ch-sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.18); transition: transform .4s var(--ch-spring); }
.ch-opt[aria-checked="true"] .ch-sw { background: var(--ch-green); }
.ch-opt[aria-checked="true"] .ch-sw::after { transform: translateX(22px); }
.ch-picks { overflow: hidden; transition: height .45s var(--ch-spring); }
.ch-picks[hidden] { display: none; }
.ch-picks-in { padding: 0 18px 18px; background: rgba(255,255,255,.6); }
.ch-ph { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; color: var(--ch-ink2); }
.ch-hand.ch-hand-vert { display: inline-block; flex: none; white-space: nowrap; font-size: 19px; color: var(--ch-green-d); }
.ch-cnt { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--ch-green); color: #fff; font: 800 12px var(--ch-fd); font-variant-numeric: tabular-nums; }
.ch-rcs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ch-rc { position: relative; display: flex; flex-direction: column; margin: 0; padding: 0; border-radius: 16px; border: 1.5px dashed var(--ch-line2); background: #fff; color: var(--ch-ink); text-align: left; overflow: hidden; font: inherit; cursor: pointer;
  transition: border-color .3s, box-shadow .3s, transform .35s var(--ch-spring), opacity .3s; }
.ch-rc:hover { transform: translateY(-2px); }
.ch-im { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--ch-tt); transition: filter .3s; }
.ch-im svg { width: 42px; height: 42px; transition: transform .45s var(--ch-spring); }
.ch-rc:hover .ch-im svg { transform: rotate(-10deg) scale(1.08); }
.ch-rc b { padding: 8px 9px 10px; font: 700 12.5px/1.25 "Hanken Grotesk", system-ui, sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ch-ko { display: none; margin: -6px 9px 9px; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ch-orange-d); line-height: 1.25; }
.ch-ck { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--ch-line2); display: grid; place-items: center; color: transparent; transition: all .35s var(--ch-spring); }
.ch-rc.on { border-style: solid; border-color: var(--ch-green); box-shadow: 0 3px 0 var(--ch-green); }
.ch-rc.on .ch-ck { background: var(--ch-green); border-color: var(--ch-green); color: #fff; transform: scale(1.08); }
.ch-rc.off { opacity: .55; }
.ch-rc.off .ch-im { filter: grayscale(.8); }
.ch-rc.ko { cursor: not-allowed; }
.ch-rc.ko .ch-ko { display: block; }
.ch-rc.ko .ch-ck { display: none; }
.ch-full { margin: 10px 0 0; font-size: 12.5px; color: var(--ch-muted); }
.ch-full.warn { color: var(--ch-orange-d); font-weight: 700; }

/* ============ 3 · sans import : la proposition, en une ligne ============ */
.ch-mea-no { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 14px 16px; border-radius: 20px; border: 1.5px dashed var(--ch-line2); background: var(--ch-cream); }
.ch-mea-no .ch-badge { width: 44px; height: 44px; font-size: 22px; border-width: 1.5px; }
.ch-t { flex: 1; min-width: 0; }
.ch-t b { display: block; font: 800 15px var(--ch-fd); color: var(--ch-ink); }
.ch-t small { display: block; font-size: 13px; color: var(--ch-ink2); }
.ch-imp { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 16px; border: 0; border-radius: 14px; background: var(--ch-dark); color: #fff; font: 800 14px var(--ch-fd);
  box-shadow: 0 3px 0 #1C140D; cursor: pointer; transition: transform .3s var(--ch-spring); }
.ch-imp:hover { transform: translateY(-2px); }

.ch-suite { margin-top: 22px; }

/* l'entrée : les blocs arrivent en cascade, une seule fois */
.ch-in { animation: ch-monte .55s var(--ch-spring) both; animation-delay: calc(var(--ch-i, 0) * 70ms); }
@keyframes ch-monte { from { opacity: 0; transform: translateY(12px); } }

@media (max-width: 760px) {
  .ch-hero { grid-template-columns: auto minmax(0, 1fr); }
  .onboard-recover.ch-back { grid-column: 1 / -1; width: 100%; }
  .ch-back .ch-ar { margin-left: auto; }
  .ch-h1 { font-size: 24px; }
  .ch-pop { width: 76px; height: 76px; }
  .ch-mea-h { grid-template-columns: auto minmax(0, 1fr); }
  .ch-stats { grid-column: 1 / -1; justify-content: flex-start; }
  .ch-rcs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 132px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 2px 18px 6px; scroll-snap-type: x mandatory; }
  .ch-rcs::-webkit-scrollbar { display: none; }
  .ch-rc { scroll-snap-align: start; }
  .ch-mea-no { flex-wrap: wrap; }
  .ch-imp { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-in { animation: none; }
  .ch-hero *, .ch-mea *, .ch-mea-no * { transition-duration: .01ms !important; }
}

/* ============ « Quand veux-tu commencer ? » (handoff design_handoff_quand_commencer) ============
   Deux cartes, un calendrier de deux semaines (barre jaune = midi, violette = soir, la bande
   orange autour de la période), un résumé chiffré et UN bouton. Classes qc-. */
.qc { --qc-ink: #2A211B; --qc-ink2: #6A5C4C; --qc-muted: #9C8B79; --qc-line: #EEDFC2; --qc-line2: #E6D3AE; --qc-cream: #FFF8EA; --qc-cream2: #FCEFD9;
  --qc-orange: #F0682F; --qc-orange-d: #DA541E; --qc-orange-bg: #FCE3D8; --qc-green-d: #2C8B4E; --qc-green-bg: #E6F3E9;
  --qc-sun-d: #F6A609; --qc-sun-bg: #FFF1D2; --qc-violet: #6B53A8; --qc-violet-bg: #EDE8F6; --qc-dark: #33261B;
  --qc-fd: "Bricolage Grotesque", system-ui, sans-serif; --qc-fb: "Hanken Grotesk", system-ui, sans-serif; --qc-fh: "Caveat", cursive; --qc-spring: cubic-bezier(.3,1.35,.45,1);
  position: relative; margin-top: 26px; color: var(--qc-ink); }
.qc-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.qc-h h2 { margin: 0; font: 800 22px/1.15 var(--qc-fd); letter-spacing: -.01em; color: var(--qc-ink); }
.qc-hand { font: 600 21px/1 var(--qc-fh); color: var(--qc-orange-d); transform: rotate(-2deg); display: inline-block; }
.qc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.qc-op { position: relative; display: flex; align-items: center; gap: 12px; min-height: 76px; margin: 0; padding: 12px 44px 12px 12px; border-radius: 20px; border: 1.5px solid var(--qc-line); background: #fff; color: var(--qc-ink); text-align: left; font: inherit; cursor: pointer;
  transition: border-color .3s, box-shadow .3s, transform .35s var(--qc-spring), background .3s; }
.qc-op:hover { transform: translateY(-2px); border-color: var(--qc-line2); }
.qc-op:disabled { opacity: .5; cursor: default; transform: none; }
.qc-oi { flex: none; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--qc-tb); color: var(--qc-tc); transition: transform .45s var(--qc-spring); }
.qc-op-asap { --qc-tb: var(--qc-sun-bg); --qc-tc: #B07800; }
.qc-op-next { --qc-tb: var(--qc-violet-bg); --qc-tc: var(--qc-violet); }
.qc-op b { display: block; font: 800 16px/1.2 var(--qc-fd); }
.qc-op small { display: block; margin-top: 2px; font-size: 13px; color: var(--qc-ink2); }
.qc-ck { position: absolute; right: 14px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; border: 2px solid var(--qc-line2); background: #fff; display: grid; place-items: center; color: transparent; transition: all .35s var(--qc-spring); }
.qc-op[aria-checked="true"] { border: 2px solid var(--qc-ink); box-shadow: 0 4px 0 var(--qc-ink); background: var(--qc-cream); }
.qc-op[aria-checked="true"] .qc-oi { transform: rotate(-6deg) scale(1.05); }
.qc-op[aria-checked="true"] .qc-ck { background: var(--qc-orange); border-color: var(--qc-orange); color: #fff; transform: scale(1.1); }
/* le calendrier */
.qc-cal { margin-top: 14px; padding: 16px; border-radius: 24px; background: var(--qc-cream); border: 1.5px solid var(--qc-line); }
.qc-ch { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.qc-ch b { font: 800 15px var(--qc-fd); text-transform: capitalize; }
.qc-leg { margin-left: auto; display: flex; gap: 12px; font: 600 12px var(--qc-fb); color: var(--qc-muted); }
.qc-leg span { display: inline-flex; align-items: center; gap: 5px; }
.qc-leg i { width: 14px; height: 6px; border-radius: 3px; }
.qc-lm { background: var(--qc-sun-d); }
.qc-ls { background: var(--qc-violet); }
.qc-dow, .qc-wk { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); }
.qc-dow span { padding: 0 0 6px; text-align: center; font: 800 11px var(--qc-fb); letter-spacing: .08em; text-transform: uppercase; color: var(--qc-muted); }
/* 12 px au-dessus de chaque semaine : la pastille « aujourd'hui » ne passe pas sur les jours. */
.qc-wk { position: relative; align-items: stretch; margin-top: 12px; }
.qc-wk + .qc-wk { margin-top: 18px; }
.qc-wl { display: flex; align-items: center; font: 700 11.5px/1.2 var(--qc-fb); color: var(--qc-muted); }
.qc-band { position: absolute; top: 0; bottom: 0; border-radius: 16px; background: var(--qc-orange-bg); border: 2px solid var(--qc-orange); opacity: 0; pointer-events: none;
  transition: left .55s var(--qc-spring), width .55s var(--qc-spring), opacity .3s; }
.qc-band.qc-on { opacity: 1; }
.qc-dy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 66px; margin: 0; padding: 7px 2px 8px; border: 0; border-radius: 14px; background: none; color: var(--qc-ink); font: inherit; cursor: pointer; transition: transform .3s var(--qc-spring); }
.qc-dy:not(:disabled):hover { transform: translateY(-2px); }
.qc-dy:disabled { cursor: default; }
.qc-n { font: 800 17px/1 var(--qc-fd); font-variant-numeric: tabular-nums; }
.qc-past .qc-n { color: var(--qc-line2); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.qc-today .qc-n { display: grid; place-items: center; width: 30px; height: 30px; margin: -6px 0 -1px; border-radius: 50%; background: var(--qc-dark); color: #fff; font-size: 15px; }
.qc-ml { display: flex; flex-direction: column; gap: 3px; width: min(34px, 80%); }
.qc-ml i { height: 6px; border-radius: 3px; background: var(--qc-line); transform: scaleX(.35); opacity: .6; transition: transform .45s var(--qc-spring), opacity .3s, background .3s; }
.qc-past .qc-ml i { opacity: .25; }
.qc-ml i.qc-in { transform: none; opacity: 1; }
.qc-ml i.qc-m.qc-in { background: var(--qc-sun-d); }
.qc-ml i.qc-s.qc-in { background: var(--qc-violet); }
.qc-tag { position: absolute; top: -9px; left: 50%; translate: -50% 0; z-index: 2; padding: 2px 7px; border-radius: 999px; background: var(--qc-dark); color: #fff; font: 800 9.5px var(--qc-fb); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.qc-go { position: absolute; bottom: -12px; left: 50%; translate: -50% 0; padding: 2px 8px; border-radius: 999px; background: var(--qc-orange); color: #fff; font: 800 10px var(--qc-fb); white-space: nowrap; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .4s var(--qc-spring); }
.qc-start .qc-go { opacity: 1; transform: none; }
/* le résumé */
.qc-sum { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.qc-big { display: flex; align-items: baseline; gap: 6px; }
.qc-big b { font: 800 34px/1 var(--qc-fd); font-variant-numeric: tabular-nums; }
.qc-big span { font: 700 14px var(--qc-fb); color: var(--qc-ink2); }
.qc-rng { font-size: 14px; color: var(--qc-ink2); line-height: 1.35; }
.qc-rng b { color: var(--qc-ink); }
.qc-shop { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: var(--qc-green-bg); color: var(--qc-green-d); font: 700 12.5px var(--qc-fb); white-space: nowrap; }
.qc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* le bouton */
.qc-foot { margin-top: 22px; padding-top: 20px; border-top: 1.5px dashed #EEDFC2; }
.qc-create { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; margin: 0; padding: 8px 22px 8px 10px; border: 0; border-radius: 22px; background: #F0682F; color: #fff; text-align: left; font: inherit; cursor: pointer;
  box-shadow: 0 5px 0 #DA541E; overflow: hidden; transition: transform .3s cubic-bezier(.3,1.35,.45,1), box-shadow .2s; }
.qc-create:hover { transform: translateY(-3px); box-shadow: 0 8px 0 #DA541E; color: #fff; }
.qc-create:active { transform: translateY(2px); box-shadow: 0 2px 0 #DA541E; }
.qc-cf { flex: none; width: 54px; height: 54px; border-radius: 17px; background: rgba(255,255,255,.2); overflow: hidden; transition: transform .45s cubic-bezier(.3,1.35,.45,1); }
.qc-cf svg { width: 100%; height: 100%; display: block; }
.qc-create:hover .qc-cf { transform: rotate(-8deg) scale(1.06); }
.qc-ct { flex: 1; min-width: 0; }
.qc-create b { display: block; font: 800 19px/1.15 "Bricolage Grotesque", system-ui, sans-serif; }
.qc-create small { display: block; margin-top: 2px; font: 600 13.5px "Hanken Grotesk", system-ui, sans-serif; color: #FFE3D4; }
.qc-ar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #DA541E; display: grid; place-items: center; }
.qc-create:hover .qc-ar { animation: qc-nudge .5s cubic-bezier(.3,1.35,.45,1); }
.qc-create::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 28%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); transform: skewX(-20deg); animation: qc-shine 5s ease-in-out 1.5s infinite; }
@keyframes qc-shine { 0%, 82% { left: -40%; } 100% { left: 130%; } }
@keyframes qc-nudge { 50% { transform: translateX(5px); } }
.qc-after { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: #9C8B79; }
@media (max-width: 640px) {
  .qc-opts { grid-template-columns: 1fr; }
  .qc-cal { padding: 12px 8px; }
  .qc-dow, .qc-wk { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .qc-wl, .qc-dow .qc-x { display: none; }
  .qc-leg { margin-left: 0; width: 100%; }
  .qc-dy { min-height: 60px; }
  .qc-n { font-size: 15px; }
  .qc-shop { margin-left: 0; }
  .qc-create b { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .qc *, .qc-foot * { animation: none !important; transition-duration: .01ms !important; }
}