/* « J'arrive de Mealime » : la fenêtre par étapes, dessinée par popotam-mealime-ui.js.
   Reprise à la main du handoff Refontes/design_handoff_import_mealime (09/10/2026) : chaque
   classe du handoff porte ici le préfixe ml- (le handoff a des noms génériques : chip, rc,
   pri, bar...), chaque animation aussi, et tout vit sous .ml-racine, qui porte ses propres
   couleurs. Le calque est plein écran comme le Vide-frigo (z-index 415) et passe SOUS la modale
   « Ajouter au planning » (425). En bas de feuille : le bouton de l'écran de lancement et les
   pastilles « depuis Mealime » de la personnalisation, dessinés par app.js. */
.ml-racine { position: fixed; inset: 0; z-index: 415; display: grid; place-items: center; padding: 24px;
  --ml-card: #fff; --ml-cream: #FFF8EA; --ml-cream2: #FCEFD9; --ml-ink: #2A211B; --ml-ink2: #6A5C4C; --ml-muted: #9C8B79; --ml-line: #EEDFC2; --ml-line2: #E6D3AE;
  --ml-orange: #F0682F; --ml-orange-d: #DA541E; --ml-orange-bg: #FCE3D8; --ml-green: #33A15B; --ml-green-d: #2C8B4E; --ml-green-bg: #E6F3E9;
  --ml-sun: #FFC53D; --ml-sun-bg: #FFF1D2; --ml-pink: #E0578F; --ml-violet-bg: #EDE8F6; --ml-dark: #33261B;
  --ml-fd: "Bricolage Grotesque", system-ui, sans-serif; --ml-fb: "Hanken Grotesk", system-ui, sans-serif; --ml-fh: "Caveat", cursive;
  --ml-spring: cubic-bezier(.3,1.35,.45,1);
  font-family: var(--ml-fb); color: var(--ml-ink); }
.ml-racine *, .ml-racine *::before, .ml-racine *::after { box-sizing: border-box; }
.ml-racine [hidden] { display: none !important; }
.ml-racine button { font: inherit; color: inherit; cursor: pointer; }
body.ml-ouvert { overflow: hidden; }
.ml-back { position: absolute; inset: 0; background: rgba(51,38,27,.34); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* ================= LA FENÊTRE ================= */
.ml-racine .ml { position: relative; width: min(620px, 100%); max-height: calc(100dvh - 48px); display: flex; flex-direction: column; border-radius: 30px; background: var(--ml-card);
  border: 1.5px solid var(--ml-line); box-shadow: 0 40px 90px -30px rgba(80,45,15,.6); overflow: hidden; }
.ml-racine .ml-h { display: flex; align-items: center; gap: 14px; padding: 20px 22px 0; }
.ml-racine .ml-fc { flex: none; width: 52px; height: 52px; border-radius: 17px; background: var(--ml-orange); overflow: hidden; transform: rotate(-5deg); box-shadow: 0 8px 16px -10px rgba(218,84,30,.8); }
.ml-racine .ml-fc svg { width: 100%; height: 100%; display: block; }
.ml-racine .ml-tt { flex: 1; min-width: 0; }
.ml-racine .ml-tt small { display: block; font: 800 11px var(--ml-fb); letter-spacing: .12em; text-transform: uppercase; color: var(--ml-orange-d); }
.ml-racine .ml-tt h2 { margin: 2px 0 0; font: 800 23px/1.1 var(--ml-fd); letter-spacing: -.02em; color: var(--ml-ink); }
.ml-racine .ml-x { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--ml-cream2); display: grid; place-items: center; color: var(--ml-ink2); transition: transform .35s var(--ml-spring), background .2s; }
.ml-racine .ml-x:hover { transform: rotate(90deg); background: var(--ml-line); color: var(--ml-ink); }

/* le rail des 4 étapes */
.ml-racine .ml-rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 18px 22px 0; --ml-p: 0; }
.ml-racine .ml-rail::before, .ml-racine .ml-rail::after { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 13px; height: 3px; border-radius: 2px; background: var(--ml-line); }
.ml-racine .ml-rail::after { right: auto; width: calc(75% * var(--ml-p)); background: var(--ml-green); transition: width .7s var(--ml-spring); }
.ml-racine .ml-rs { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; font: 700 12px var(--ml-fb); color: var(--ml-muted); text-align: center; }
.ml-racine .ml-rs em { font-style: normal; }
.ml-racine .ml-rs i { width: 29px; height: 29px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--ml-line2); font: 800 12.5px var(--ml-fd); font-style: normal; color: var(--ml-muted); transition: all .45s var(--ml-spring); }
.ml-racine .ml-rs.ml-cur { color: var(--ml-ink); }
.ml-racine .ml-rs.ml-cur i { border-color: var(--ml-orange); background: var(--ml-orange); color: #fff; transform: scale(1.12); box-shadow: 0 0 0 5px var(--ml-orange-bg); }
.ml-racine .ml-rs.ml-done i { border-color: var(--ml-green); background: var(--ml-green); color: #fff; }
.ml-racine .ml-rs.ml-done i span { display: none; }
.ml-racine .ml-rs i svg { display: none; }
.ml-racine .ml-rs.ml-done i svg { display: block; }
.ml-racine .ml-rs.ml-bad i { background: var(--ml-sun); border-color: var(--ml-sun); color: var(--ml-dark); box-shadow: 0 0 0 5px var(--ml-sun-bg); }

.ml-racine .ml-b { flex: 1; min-height: 0; overflow: auto; padding: 20px 22px 6px; transition: height .4s var(--ml-spring); scrollbar-width: thin; overscroll-behavior: contain; }
.ml-racine .ml-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 22px 18px; border-top: 1.5px solid var(--ml-line); background: linear-gradient(#fff, var(--ml-cream)); }
.ml-racine .ml-f:has(> :only-child) { justify-content: flex-end; }
.ml-racine .ml-pri { display: inline-flex; align-items: center; gap: 9px; min-height: 52px; padding: 0 20px; border: 0; border-radius: 16px; background: var(--ml-orange); color: #fff; font: 800 15.5px var(--ml-fd);
  box-shadow: 0 4px 0 var(--ml-orange-d); transition: transform .3s var(--ml-spring), box-shadow .2s, opacity .2s; }
.ml-racine .ml-pri:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ml-orange-d); color: #fff; }
.ml-racine .ml-pri:hover svg { animation: ml-nudge .5s var(--ml-spring); }
.ml-racine .ml-pri:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ml-orange-d); }
.ml-racine .ml-pri:disabled { opacity: .4; pointer-events: none; }
@keyframes ml-nudge { 50% { transform: translateX(4px); } }
.ml-racine .ml-sec { display: inline-flex; align-items: center; gap: 7px; min-height: 48px; padding: 0 16px; border: 1.5px solid var(--ml-line2); border-radius: 14px; background: #fff; font: 700 14px var(--ml-fb); color: var(--ml-ink2); transition: background .2s, border-color .2s; }
.ml-racine .ml-sec:hover { border-color: var(--ml-ink2); color: var(--ml-ink); }
.ml-racine .ml-sec:disabled { opacity: .5; pointer-events: none; }
.ml-racine .ml-lnk { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; border: 0; background: none; font: 700 14px var(--ml-fb); color: var(--ml-orange-d); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.ml-racine .ml-lnk:hover { color: var(--ml-orange); }
.ml-racine .ml-wp { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--ml-cream2); font: 700 13px var(--ml-fb); color: var(--ml-ink2); }
.ml-racine .ml-wp i { width: 9px; height: 9px; border-radius: 50%; background: var(--ml-orange); animation: ml-blink 1.2s ease-in-out infinite; }
.ml-racine .ml-wp.ml-on i { background: var(--ml-green); }
@keyframes ml-blink { 50% { opacity: .25; transform: scale(.7); } }

.ml-racine .ml-hand { display: inline-block; font: 600 23px/1 var(--ml-fh); color: var(--ml-orange-d); transform: rotate(-2deg); }
.ml-racine .ml-st + .ml-st { margin-top: 16px; }
.ml-racine .ml-lead p, .ml-racine .ml-rvh p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ml-ink2); text-wrap: pretty; outline: none; }
.ml-racine .ml-lead b { color: var(--ml-ink); }
.ml-racine [tabindex="-1"]:focus { outline: none; }
.ml-racine .ml-alt { margin: 0; font-size: 13.5px; color: var(--ml-ink2); text-align: center; }

/* intro : ce qu'on emporte */
.ml-racine .ml-take { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ml-racine .ml-tk { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 16px 8px 13px; border-radius: 20px; background: var(--ml-tb); border: 2px solid var(--ml-ink); box-shadow: 0 4px 0 var(--ml-ink); transform: rotate(var(--ml-r)); transition: transform .4s var(--ml-spring); }
.ml-racine .ml-tk:hover { transform: rotate(0) translateY(-3px); }
.ml-racine .ml-tk .ml-ti { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--ml-ink); color: var(--ml-tc); }
.ml-racine .ml-tk b { font: 800 14px/1.15 var(--ml-fd); }
.ml-racine .ml-tk small { font-size: 12px; color: var(--ml-ink2); line-height: 1.25; }
.ml-racine .ml-tk-a { --ml-tb: #FFD66B; --ml-tc: #B07800; --ml-r: -2deg; }
.ml-racine .ml-tk-b { --ml-tb: #9ED7AE; --ml-tc: var(--ml-green-d); --ml-r: 1.5deg; }
.ml-racine .ml-tk-c { --ml-tb: #F9B6CB; --ml-tc: var(--ml-pink); --ml-r: -1deg; }
.ml-racine .ml-tk-d { --ml-tb: #D2C6EC; --ml-tc: #6B53A8; --ml-r: 2deg; }
.ml-racine .ml-how { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--ml-green-bg); font-size: 14px; line-height: 1.45; color: var(--ml-ink2); }
.ml-racine .ml-how b { color: var(--ml-ink); }
.ml-racine .ml-how .ml-how-i { flex: none; width: 30px; height: 30px; border-radius: 10px; background: #fff; display: grid; place-items: center; color: var(--ml-green-d); }
.ml-racine .ml-how.ml-warn { background: var(--ml-sun-bg); }
.ml-racine .ml-how.ml-warn .ml-how-i { color: #B07800; }

/* en-tête d'étape */
.ml-racine .ml-sh { display: flex; gap: 12px; align-items: flex-start; }
.ml-racine .ml-sh .ml-n { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ml-dark); color: #fff; font: 800 14px var(--ml-fd); }
.ml-racine .ml-sh h3 { margin: 3px 0 0; font: 800 17px/1.25 var(--ml-fd); color: var(--ml-ink); outline: none; }
.ml-racine .ml-sh p { margin: 3px 0 0; font-size: 14px; color: var(--ml-ink2); line-height: 1.4; }

/* étape 1 : le favori */
.ml-racine .ml-favz { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; align-items: center; margin-left: 44px; }
.ml-racine .ml-favcol { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ml-racine .ml-bm { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 18px; border: 2px dashed var(--ml-orange); background: var(--ml-orange-bg); color: var(--ml-ink); text-decoration: none; cursor: grab;
  transition: transform .3s var(--ml-spring), border-color .3s, background .3s; animation: ml-breathe 2.4s ease-in-out infinite; -webkit-user-drag: element; }
.ml-racine .ml-bm:hover { color: var(--ml-ink); transform: translateY(-2px) rotate(-1deg); }
.ml-racine .ml-bm.ml-drag { cursor: grabbing; opacity: .6; }
.ml-racine .ml-bm .ml-bmi { flex: none; width: 40px; height: 40px; border-radius: 13px; background: var(--ml-orange); overflow: hidden; }
.ml-racine .ml-bm .ml-bmi svg { width: 100%; height: 100%; display: block; }
.ml-racine .ml-bm .ml-bmt { flex: 1; min-width: 0; }
.ml-racine .ml-bm b { display: block; font: 800 15px var(--ml-fd); }
.ml-racine .ml-bm small { display: block; font-size: 12.5px; color: var(--ml-orange-d); font-weight: 700; }
/* La ligne du dessous n'est PAS du texte du lien (sinon elle entrerait dans le nom du favori). */
.ml-racine .ml-bm small::before { content: attr(data-sous); }
.ml-racine .ml-bm .ml-grip { color: var(--ml-orange-d); opacity: .6; transform: rotate(90deg); display: grid; }
.ml-racine .ml-bm.ml-ok { border-style: solid; border-color: var(--ml-green); background: var(--ml-green-bg); animation: none; }
.ml-racine .ml-bm.ml-ok small { color: var(--ml-green-d); }
@keyframes ml-breathe { 50% { box-shadow: 0 0 0 6px rgba(240,104,47,.12); } }
.ml-racine .ml-kbd { margin: 0; font-size: 12.5px; color: var(--ml-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ml-racine kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; border: 1.5px solid var(--ml-line2); border-bottom-width: 3px; background: #fff; font: 700 11px var(--ml-fb); color: var(--ml-ink2); }
/* le mini navigateur : le geste en boucle */
.ml-racine .ml-demo { position: relative; height: 150px; border-radius: 16px; border: 2px solid var(--ml-ink); background: #fff; overflow: hidden; box-shadow: 0 4px 0 var(--ml-ink); }
.ml-racine .ml-demo-br { display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; background: var(--ml-cream2); border-bottom: 1.5px solid var(--ml-line); }
.ml-racine .ml-demo-br i { width: 7px; height: 7px; border-radius: 50%; background: var(--ml-line2); }
.ml-racine .ml-demo-url { flex: 1; height: 10px; margin-left: 6px; border-radius: 5px; background: #fff; }
.ml-racine .ml-demo-bkb { display: flex; gap: 5px; height: 20px; padding: 5px 8px; border-bottom: 1.5px dashed var(--ml-line); }
.ml-racine .ml-demo-bkb span { width: 30px; border-radius: 4px; background: var(--ml-cream2); }
.ml-racine .ml-demo-bkb .ml-demo-slot { width: 58px; background: transparent; border-radius: 5px; animation: ml-slot 4s ease-in-out infinite; }
.ml-racine .ml-demo-pg { padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.ml-racine .ml-demo-pg span { height: 8px; border-radius: 4px; background: var(--ml-cream2); width: 80%; }
.ml-racine .ml-demo-pg span + span { width: 60%; }
.ml-racine .ml-demo-ghost { position: absolute; left: 50%; top: 108px; display: flex; align-items: center; gap: 4px; padding: 3px 7px 3px 3px; border-radius: 7px; background: var(--ml-orange-bg); border: 1.5px dashed var(--ml-orange);
  font: 800 9px var(--ml-fd); white-space: nowrap; translate: -50% 0; animation: ml-ghost 4s cubic-bezier(.5,0,.3,1) infinite; }
.ml-racine .ml-demo-gi { width: 14px; height: 14px; border-radius: 4px; background: var(--ml-orange); overflow: hidden; }
.ml-racine .ml-demo-gi svg { width: 100%; height: 100%; display: block; }
.ml-racine .ml-demo-cur { position: absolute; left: 50%; top: 116px; width: 14px; height: 18px; background: var(--ml-ink); clip-path: polygon(0 0,0 100%,30% 75%,50% 100%,65% 92%,47% 68%,85% 68%); animation: ml-curs 4s cubic-bezier(.5,0,.3,1) infinite; }
@keyframes ml-ghost { 0%, 14% { transform: none; opacity: 0; } 20% { opacity: 1; transform: none; } 55% { transform: translate(28px,-78px) rotate(-4deg); opacity: 1; } 62%, 86% { transform: translate(28px,-78px) scale(.92); opacity: 1; } 100% { transform: translate(28px,-78px) scale(.92); opacity: 0; } }
@keyframes ml-curs { 0% { transform: translate(30px,20px); opacity: 0; } 10% { opacity: 1; transform: translate(6px,4px); } 18% { transform: translate(6px,4px) scale(.85); } 55% { transform: translate(34px,-74px) scale(.85); } 62% { transform: translate(34px,-74px) scale(1); } 80% { transform: translate(60px,-30px); opacity: 1; } 100% { transform: translate(60px,-30px); opacity: 0; } }
@keyframes ml-slot { 0%, 55% { background: transparent; } 60%, 86% { background: var(--ml-green-bg); box-shadow: 0 0 0 2px var(--ml-green); } 100% { background: transparent; } }

/* étape 2 : ouvrir Mealime et attendre */
.ml-racine .ml-openm { margin-left: 44px; }
.ml-racine .ml-mbtn { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 380px; min-height: 62px; padding: 8px 16px 8px 8px; border: 2px solid var(--ml-ink); border-radius: 18px; background: #fff; text-align: left; box-shadow: 0 4px 0 var(--ml-ink);
  transition: transform .3s var(--ml-spring), box-shadow .2s, background .3s; }
.ml-racine .ml-mbtn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ml-ink); }
.ml-racine .ml-mbtn > span:nth-child(2) { flex: 1; }
.ml-racine .ml-mbtn b { display: block; font: 800 15.5px var(--ml-fd); }
.ml-racine .ml-mbtn small { display: block; font-size: 12.5px; color: var(--ml-muted); }
.ml-racine .ml-mbtn .ml-mlogo { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: #7ED957; color: #fff; font: 800 22px var(--ml-fd); }
.ml-racine .ml-mbtn.ml-opened { background: var(--ml-green-bg); }
.ml-racine .ml-mbtn.ml-opened small { color: var(--ml-green-d); font-weight: 700; }
.ml-racine .ml-wait { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 22px; background: var(--ml-cream); }
.ml-racine .ml-radar { position: relative; flex: none; width: 80px; height: 80px; display: grid; place-items: center; }
.ml-racine .ml-radar i { position: absolute; inset: 0; border-radius: 50%; border: 2.5px solid var(--ml-orange); opacity: 0; animation: ml-ping 2.4s cubic-bezier(.2,.6,.4,1) infinite; }
.ml-racine .ml-radar i:nth-child(2) { animation-delay: .8s; }
.ml-racine .ml-radar i:nth-child(3) { animation-delay: 1.6s; }
@keyframes ml-ping { 0% { transform: scale(.55); opacity: .8; } 100% { transform: scale(1.15); opacity: 0; } }
.ml-racine .ml-radar .ml-rf { position: relative; width: 52px; height: 52px; border-radius: 17px; background: var(--ml-orange); overflow: hidden; animation: ml-peek 3s ease-in-out infinite; }
.ml-racine .ml-radar .ml-rf svg { width: 100%; height: 100%; display: block; }
@keyframes ml-peek { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.ml-racine .ml-wt { min-width: 0; }
.ml-racine .ml-wt b { display: block; font: 800 16px var(--ml-fd); }
.ml-racine .ml-wt .ml-dots i { font-style: normal; animation: ml-blink 1.2s infinite; }
.ml-racine .ml-wt .ml-dots i:nth-child(2) { animation-delay: .2s; }
.ml-racine .ml-wt .ml-dots i:nth-child(3) { animation-delay: .4s; }
.ml-racine .ml-wt small { display: block; margin-top: 3px; font-size: 13px; color: var(--ml-muted); }
.ml-racine .ml-wmsg { display: inline; }
.ml-racine .ml-help { border-radius: 16px; border: 1.5px solid var(--ml-line); }
.ml-racine .ml-help summary { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; cursor: pointer; list-style: none; font: 700 14px var(--ml-fb); color: var(--ml-ink2); }
.ml-racine .ml-help summary::-webkit-details-marker { display: none; }
.ml-racine .ml-help summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .3s var(--ml-spring); }
.ml-racine .ml-help[open] summary::after { transform: rotate(-135deg); }
.ml-racine .ml-help ul { margin: 0; padding: 0 16px 14px 36px; font-size: 13.5px; line-height: 1.5; color: var(--ml-ink2); }
.ml-racine .ml-help li + li { margin-top: 4px; }
.ml-racine .ml-help b { color: var(--ml-ink); }

/* réception */
.ml-racine .ml-arrive { display: flex; align-items: center; gap: 14px; }
.ml-racine .ml-arrive .ml-af { flex: none; width: 90px; height: 90px; }
.ml-racine .ml-arrive .ml-af svg, .ml-racine .ml-donez .ml-df svg { width: 100%; height: 100%; display: block; }
.ml-racine .ml-arrive h3, .ml-racine .ml-savez h3, .ml-racine .ml-donez h3 { margin: 2px 0 0; font: 800 21px/1.15 var(--ml-fd); color: var(--ml-ink); outline: none; }
.ml-racine .ml-rl { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ml-racine .ml-rl li { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 14px 0 8px; border-radius: 16px; background: var(--ml-cream); font: 700 14.5px var(--ml-fb); opacity: .35; transform: translateX(-8px);
  transition: opacity .35s, transform .45s var(--ml-spring), background .35s; }
.ml-racine .ml-rl li.ml-go { opacity: 1; transform: none; }
.ml-racine .ml-rl li.ml-ok { background: var(--ml-green-bg); }
.ml-racine .ml-rl .ml-ri { flex: none; width: 34px; height: 34px; border-radius: 11px; background: #fff; display: grid; place-items: center; color: var(--ml-ink2); transition: color .3s; }
.ml-racine .ml-rl li.ml-ok .ml-ri { color: var(--ml-green-d); }
.ml-racine .ml-sp { margin-left: auto; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--ml-line2); border-top-color: var(--ml-orange); opacity: 0; }
.ml-racine li.ml-go .ml-sp { opacity: 1; animation: ml-spin .7s linear infinite; }
.ml-racine li.ml-ok .ml-sp { animation: ml-popin .45s var(--ml-spring); border: 0; opacity: 1;
  background: var(--ml-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center/16px no-repeat; }
.ml-racine li.ml-ko .ml-sp { animation: ml-popin .45s var(--ml-spring); border: 0; opacity: 1;
  background: var(--ml-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E") center/16px no-repeat; }
@keyframes ml-spin { to { transform: rotate(360deg); } }
@keyframes ml-popin { from { transform: scale(0); } }
.ml-racine .ml-rl .ml-trw { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ml-racine .ml-trn, .ml-racine .ml-ct-g, .ml-racine .ml-ct-r { font-variant-numeric: tabular-nums; }
.ml-racine .ml-trb { width: 0; }
.ml-racine .ml-bar { display: block; height: 7px; border-radius: 4px; background: #fff; overflow: hidden; }
.ml-racine .ml-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--ml-green); transition: width .4s var(--ml-spring); }
.ml-racine .ml-bar.ml-big { height: 10px; width: min(320px, 100%); margin: 6px auto 0; background: var(--ml-cream2); }

/* vérifier */
.ml-racine .ml-rvh .ml-hand { margin-bottom: 4px; }
.ml-racine .ml-grp { padding: 16px; border-radius: 22px; background: var(--ml-cream); }
.ml-racine .ml-grp header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ml-racine .ml-grp h4 { display: flex; align-items: center; gap: 7px; margin: 0; font: 800 16px var(--ml-fd); color: var(--ml-ink); }
.ml-racine .ml-grp h4 svg { color: var(--ml-orange-d); }
.ml-racine .ml-grp .ml-cnt { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: #fff; font: 800 12.5px var(--ml-fd); color: var(--ml-ink2); font-variant-numeric: tabular-nums; }
.ml-racine .ml-grp .ml-all + .ml-cnt { margin-left: 0; }
.ml-racine .ml-all { margin-left: auto; min-height: 32px; padding: 0 6px; border: 0; background: none; font: 700 13px var(--ml-fb); color: var(--ml-orange-d); text-decoration: underline; text-underline-offset: 3px; }
.ml-racine .ml-all.ml-plus { display: block; margin: 10px auto 0; min-height: 44px; }
.ml-racine .ml-gsub { margin: -6px 0 12px; font-size: 13.5px; color: var(--ml-ink2); }
.ml-racine .ml-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ml-racine .ml-chip { position: relative; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px 36px 8px 8px; border-radius: 16px; border: 1.5px dashed var(--ml-line2); background: transparent; text-align: left; color: var(--ml-ink);
  transition: background .3s, border-color .3s, box-shadow .3s; }
.ml-racine .ml-chip.ml-on { border-style: solid; border-color: var(--ml-ink); background: #fff; box-shadow: 0 3px 0 var(--ml-ink); }
.ml-racine .ml-chip.ml-large { grid-column: 1 / -1; }
.ml-racine .ml-chip.ml-replie { display: none; }
.ml-racine .ml-chip .ml-ct { position: relative; flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ml-tt); color: var(--ml-ink2); overflow: hidden; transition: filter .3s, opacity .3s; }
.ml-racine .ml-chip .ml-ct svg { width: 32px; height: 32px; }
.ml-racine .ml-chip .ml-ct svg[width="18"] { width: 18px; height: 18px; }
.ml-racine .ml-chip .ml-ct .ml-no { position: absolute; left: -4px; right: -4px; top: 50%; height: 3px; margin-top: -1.5px; background: var(--ml-orange-d); border-radius: 2px; transform: rotate(-40deg) scaleX(0); transition: transform .4s var(--ml-spring); }
.ml-racine .ml-chip.ml-on .ml-ct .ml-no { transform: rotate(-40deg) scaleX(1); }
.ml-racine .ml-chip:not(.ml-on) .ml-ct { filter: grayscale(1); opacity: .55; }
.ml-racine .ml-chip .ml-cl { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.ml-racine .ml-chip b { font: 800 14px var(--ml-fd); }
.ml-racine .ml-chip small { font-size: 12.5px; color: var(--ml-ink2); margin-top: 2px; }
.ml-racine .ml-chip em { font-style: normal; font-size: 11.5px; color: var(--ml-muted); margin-top: 2px; }
.ml-racine .ml-chip:not(.ml-on) b { color: var(--ml-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ml-racine .ml-ck { position: absolute; right: 9px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; border: 2px solid var(--ml-line2); background: #fff; display: grid; place-items: center; color: transparent; transition: all .35s var(--ml-spring); }
.ml-racine .ml-on > .ml-ck { border-color: var(--ml-green); background: var(--ml-green); color: #fff; transform: scale(1.05); }
.ml-racine .ml-pp { display: flex; align-items: center; gap: 10px; margin-top: 10px; min-height: 58px; padding: 8px; border-radius: 16px; background: #fff; border: 1.5px solid var(--ml-line); }
.ml-racine .ml-pp .ml-ti { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ml-violet-bg); color: #6B53A8; }
.ml-racine .ml-pp .ml-pl { flex: 1; min-width: 0; line-height: 1.2; }
.ml-racine .ml-pp b { font: 800 14px var(--ml-fd); }
.ml-racine .ml-pp small { display: block; font-size: 12px; color: var(--ml-muted); }
.ml-racine .ml-step { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 14px; background: var(--ml-cream2); }
.ml-racine .ml-step button { width: 40px; height: 40px; border: 0; border-radius: 11px; background: #fff; font: 800 18px var(--ml-fd); color: var(--ml-ink); }
.ml-racine .ml-step button:hover { background: var(--ml-orange-bg); color: var(--ml-orange-d); }
.ml-racine .ml-step .ml-ppv { min-width: 30px; text-align: center; font: 800 18px var(--ml-fd); display: inline-block; font-variant-numeric: tabular-nums; }
.ml-racine .ml-recs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ml-racine .ml-rc { position: relative; display: flex; flex-direction: column; gap: 0; padding: 0; border-radius: 18px; border: 1.5px dashed var(--ml-line2); background: transparent; text-align: left; overflow: hidden; color: var(--ml-ink);
  transition: background .3s, border-color .3s, box-shadow .3s, transform .3s var(--ml-spring); }
.ml-racine .ml-rc.ml-on { border-style: solid; border-color: var(--ml-ink); background: #fff; box-shadow: 0 3px 0 var(--ml-ink); }
.ml-racine .ml-rc:hover { transform: translateY(-2px); }
.ml-racine .ml-rc.ml-echec { cursor: default; opacity: .8; }
.ml-racine .ml-rc.ml-echec:hover { transform: none; }
.ml-racine .ml-rc .ml-ph { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--ml-tt); transition: filter .3s, opacity .3s; overflow: hidden; }
.ml-racine .ml-rc .ml-ph svg { width: 52px; height: 52px; transition: transform .5s var(--ml-spring); }
.ml-racine .ml-rc .ml-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ml-spring); }
.ml-racine .ml-rc:hover .ml-ph svg { transform: rotate(-10deg) scale(1.1); }
.ml-racine .ml-rc:hover .ml-ph img { transform: scale(1.05); }
.ml-racine .ml-rc:not(.ml-on) .ml-ph { filter: grayscale(1); opacity: .5; }
.ml-racine .ml-rc .ml-rt { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; }
.ml-racine .ml-rc b { font: 800 14px/1.25 var(--ml-fd); text-wrap: pretty; }
.ml-racine .ml-rc:not(.ml-on) b { color: var(--ml-muted); }
.ml-racine .ml-rc small { font-size: 12.5px; color: var(--ml-muted); }
.ml-racine .ml-rc em { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: 3px; padding: 2px 8px; border-radius: 999px; background: var(--ml-green-bg); color: var(--ml-green-d); font: 700 11px var(--ml-fb); font-style: normal; }
.ml-racine .ml-rc em.ml-em-langue { background: var(--ml-sun-bg); color: #8A5A00; }
.ml-racine .ml-rc .ml-sig { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35; color: #B5452A; }
.ml-racine .ml-rc .ml-ck { top: 10px; margin-top: 0; }
.ml-racine .ml-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ml-muted); }
.ml-racine .ml-encore { margin-top: 10px; display: flex; justify-content: center; }
.ml-racine .ml-err { margin: 0; padding: 10px 12px; border-radius: 14px; background: #FDE6DE; color: #8E3A22; font-size: 13.5px; line-height: 1.45; }
.ml-racine .ml-sum { font-size: 14px; color: var(--ml-ink2); }
.ml-racine .ml-sum b { font: 800 16px var(--ml-fd); color: var(--ml-ink); }

/* rangement */
.ml-racine .ml-savez { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 84px 0 18px; } /* de la place au-dessus du livre : les recettes y volent */
.ml-racine .ml-savez .ml-sv { margin: 6px 0 0; font: 700 14px var(--ml-fb); color: var(--ml-ink2); font-variant-numeric: tabular-nums; }
.ml-racine .ml-book { position: relative; width: 110px; height: 96px; margin-bottom: 14px; }
.ml-racine .ml-bk { position: absolute; inset: 0; border-radius: 14px 22px 22px 14px; background: var(--ml-orange); border: 2.5px solid var(--ml-ink); box-shadow: 0 5px 0 var(--ml-ink), inset 10px 0 0 var(--ml-orange-d); display: grid; place-items: center; color: #fff; }
.ml-racine .ml-bf { position: absolute; left: 50%; top: 40%; }
.ml-racine .ml-fly { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 14px; background: var(--ml-tt); border: 2px solid var(--ml-ink); display: grid; place-items: center; }
.ml-racine .ml-fly svg { width: 38px; height: 38px; }
.ml-racine .ml-svb { width: 0; }

/* c'est prêt */
.ml-racine .ml-donez { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 0 8px; }
.ml-racine .ml-donez .ml-df { width: 120px; height: 120px; animation: ml-hop .9s var(--ml-spring); }
@keyframes ml-hop { 0% { transform: translateY(20px) scale(.8); opacity: 0; } 60% { transform: translateY(-8px); } 100% { transform: none; opacity: 1; } }
.ml-racine .ml-donez p { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--ml-ink2); max-width: 42ch; }
.ml-racine .ml-stats { display: grid; gap: 10px; width: 100%; margin-top: 16px; }
.ml-racine .ml-sx { display: flex; flex-direction: column; align-items: center; padding: 14px 8px; border-radius: 18px; background: var(--ml-sb); border: 2px solid var(--ml-ink); box-shadow: 0 4px 0 var(--ml-ink); }
.ml-racine .ml-sx b { font: 800 32px/1 var(--ml-fd); font-variant-numeric: tabular-nums; }
.ml-racine .ml-sx small { margin-top: 4px; font-size: 12.5px; line-height: 1.25; color: var(--ml-ink2); }
.ml-racine .ml-sx-a { --ml-sb: #FFD66B; }
.ml-racine .ml-sx-b { --ml-sb: #9ED7AE; }
.ml-racine .ml-sx-c { --ml-sb: #D2C6EC; }
.ml-racine .ml-cf { position: fixed; z-index: 2; width: 8px; height: 8px; margin: -4px 0 0 -4px; pointer-events: none; }

/* téléphone : les PDF */
.ml-racine .ml-dl { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--ml-sun-bg); font-size: 14px; line-height: 1.45; color: #6B4A0E; }
.ml-racine .ml-dl b { color: var(--ml-ink); }
.ml-racine .ml-dl .ml-dli { flex: none; width: 30px; height: 30px; border-radius: 10px; background: #fff; display: grid; place-items: center; color: #B07800; }
.ml-racine .ml-psteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ml-racine .ml-ps { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.ml-racine .ml-ps:not(:last-child)::after { content: ""; position: absolute; top: 30px; left: calc(50% + 38px); width: calc(100% - 54px); height: 2px;
  background: repeating-linear-gradient(90deg, var(--ml-line2) 0 5px, transparent 5px 10px); background-size: 10px 2px; animation: ml-dash 1s linear infinite; }
@keyframes ml-dash { to { background-position: 10px 0; } }
.ml-racine .ml-ps .ml-pi { width: 60px; height: 60px; border-radius: 19px; display: grid; place-items: center; background: var(--ml-tb); color: var(--ml-tc); border: 2px solid var(--ml-ink); box-shadow: 0 4px 0 var(--ml-ink); transform: rotate(var(--ml-r)); margin-bottom: 6px; transition: transform .4s var(--ml-spring); }
.ml-racine .ml-ps:hover .ml-pi { transform: rotate(0) translateY(-3px); }
.ml-racine .ml-ps em { position: absolute; top: -8px; left: calc(50% + 18px); z-index: 1; width: 22px; height: 22px; border-radius: 50%; background: var(--ml-ink); color: #fff; font: 800 11.5px/22px var(--ml-fd); font-style: normal; }
.ml-racine .ml-ps b { font: 800 14px/1.2 var(--ml-fd); }
.ml-racine .ml-ps small { font-size: 12.5px; color: var(--ml-ink2); line-height: 1.3; }
.ml-racine .ml-ps-a { --ml-tb: #FFD66B; --ml-tc: #B07800; --ml-r: -3deg; }
.ml-racine .ml-ps-b { --ml-tb: #F9B6CB; --ml-tc: var(--ml-pink); --ml-r: 2deg; }
.ml-racine .ml-ps-c { --ml-tb: #9ED7AE; --ml-tc: var(--ml-green-d); --ml-r: -2deg; }
.ml-racine .ml-drop { position: relative; display: flex; align-items: center; gap: 14px; min-height: 92px; padding: 16px; border-radius: 22px; border: 2px dashed var(--ml-orange); background: var(--ml-orange-bg); cursor: pointer;
  transition: background .3s, border-color .3s, transform .35s var(--ml-spring); }
.ml-racine .ml-drop:hover { transform: translateY(-2px); }
.ml-racine .ml-drop:focus-within { outline: 3px solid var(--ml-orange); outline-offset: 2px; }
.ml-racine .ml-drop.ml-over { border-style: solid; background: #FFD9C7; transform: scale(1.02); }
.ml-racine .ml-drop.ml-got { border-style: solid; border-color: var(--ml-green); background: var(--ml-green-bg); }
/* Caché à l'œil, pas au navigateur : un clic par programme doit encore l'ouvrir partout. */
.ml-racine .ml-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.ml-racine .ml-drop .ml-dpi { flex: none; width: 56px; height: 56px; border-radius: 17px; background: #fff; display: grid; place-items: center; color: var(--ml-orange-d); animation: ml-float 2.4s ease-in-out infinite; transition: transform .35s var(--ml-spring); }
.ml-racine .ml-drop.ml-over .ml-dpi { animation: none; transform: translateY(-4px) scale(1.08); }
@keyframes ml-float { 50% { transform: translateY(-5px); } }
.ml-racine .ml-drop b { display: block; font: 800 16px var(--ml-fd); }
.ml-racine .ml-drop small { display: block; margin-top: 2px; font-size: 13px; color: var(--ml-ink2); }
.ml-racine .ml-drop u { color: var(--ml-orange-d); text-underline-offset: 3px; }
.ml-racine .ml-drop .ml-mob { display: none; }
.ml-racine .ml-fl { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ml-racine .ml-fl li { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 8px 14px 8px 8px; border-radius: 16px; background: var(--ml-cream); opacity: .45; transition: opacity .35s, background .35s; }
.ml-racine .ml-fl li.ml-go { opacity: 1; }
.ml-racine .ml-fl li.ml-ok { background: var(--ml-green-bg); }
.ml-racine .ml-fl li.ml-ko { background: #FDE6DE; }
.ml-racine .ml-fl li.ml-ko .ml-bar i { background: var(--ml-orange); }
.ml-racine .ml-fl .ml-fi { position: relative; flex: none; width: 44px; height: 44px; border-radius: 12px; background: #fff; display: grid; place-items: center; color: var(--ml-ink2); }
.ml-racine .ml-fl .ml-fi i { position: absolute; bottom: -4px; right: -6px; padding: 1px 4px; border-radius: 4px; background: #E5484D; color: #fff; font: 800 8.5px var(--ml-fb); font-style: normal; letter-spacing: .04em; }
.ml-racine .ml-fl .ml-fw { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ml-racine .ml-fl .ml-fw b { font: 700 14px var(--ml-fb); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-racine .ml-fl .ml-fs { font-size: 12.5px; color: var(--ml-muted); }
.ml-racine .ml-fl li.ml-ok .ml-fs { color: var(--ml-green-d); font-weight: 700; }
.ml-racine .ml-fl li.ml-ko .ml-fs { color: #B5452A; font-weight: 700; }
.ml-racine .ml-rien { margin-top: 16px; }

/* le téléphone : une feuille qui monte du bas */
@media (max-width: 640px) {
  .ml-racine { place-items: end center; padding: 0; }
  .ml-racine .ml { width: 100%; max-height: calc(100dvh - 40px); border-radius: 28px 28px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .ml-racine .ml::before { content: ""; display: block; flex: none; width: 44px; height: 5px; margin: 10px auto 0; border-radius: 3px; background: var(--ml-line2); }
  .ml-racine .ml-h { padding: 10px 18px 0; }
  .ml-racine .ml-tt h2 { font-size: 21px; }
  .ml-racine .ml-rail { margin: 16px 12px 0; }
  .ml-racine .ml-rs { font-size: 11px; }
  .ml-racine .ml-b { padding: 18px 16px 6px; }
  .ml-racine .ml-f { padding: 12px 16px 14px; flex-wrap: wrap; }
  .ml-racine .ml-f .ml-pri { flex: 1; justify-content: center; }
  .ml-racine .ml-take { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ml-racine .ml-favz { grid-template-columns: 1fr; margin-left: 0; }
  .ml-racine .ml-demo { display: none; }
  .ml-racine .ml-openm { margin-left: 0; }
  .ml-racine .ml-chips, .ml-racine .ml-recs { grid-template-columns: 1fr; }
  .ml-racine .ml-psteps { gap: 10px; }
  .ml-racine .ml-ps:not(:last-child)::after { display: none; }
  .ml-racine .ml-ps .ml-pi { width: 52px; height: 52px; }
  .ml-racine .ml-ps b { font-size: 13px; }
  .ml-racine .ml-drop .ml-dsk { display: none; }
  .ml-racine .ml-drop .ml-mob { display: block; }
  .ml-racine .ml-rc { flex-direction: row; align-items: center; }
  .ml-racine .ml-rc .ml-ph { flex: none; width: 76px; aspect-ratio: 1; margin: 8px 0 8px 8px; border-radius: 12px; }
  .ml-racine .ml-rc .ml-ph svg { width: 44px; height: 44px; }
  .ml-racine .ml-rc .ml-rt { padding-right: 40px; }
  .ml-racine .ml-rc .ml-ck { top: 50%; margin-top: -11px; }
}
@media (prefers-reduced-motion: reduce) {
  .ml-racine *, .ml-racine *::before, .ml-racine *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ================= DESSINÉS PAR APP.JS ================= */
/* Le bouton de l'écran de lancement */
.ml-lanc { width: 100%; height: 44px; justify-content: center; gap: 8px; margin-top: 10px; }
.ml-lanc-ligne { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }

/* La pastille « depuis Mealime » de la personnalisation préremplie */
.ml-pastille { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  background: color-mix(in srgb, var(--primary) 14%, var(--card, #fff)); color: var(--primary); vertical-align: middle; pointer-events: none; }
.chip .ml-pastille { background: color-mix(in srgb, var(--card, #fff) 85%, transparent); }
.ml-premiere { margin: 10px 0 0; }
.ml-case { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 12px; background: var(--surface, #f6f1ea); cursor: pointer; min-height: 44px; font-size: 14px; line-height: 1.4; }
.ml-case input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--primary); }
.ml-premiere .ml-case { background: var(--card, #fff); border: 1px solid var(--line); }