/* ================= LE CAHIER — Mes recettes ================= */
:root{
  --paper:#f7f4ee; --card:#fffdf9; --ink:#2a2b26; --ink-soft:#6f7269; --ink-faint:#9a9a8e;
  --line:#e7e2d6; --line-strong:#d8d2c3;
  --sage:#6b7d63; --sage-deep:#4e5f48; --sage-soft:#e8ece2;
  --terracotta:#c26a4a; --terracotta-soft:#f3e2d9;
  --ochre:#b98b3e; --easy:#5f8a5a;
  --shadow-sm:0 1px 2px rgba(42,43,38,.05);
  --shadow:0 4px 14px rgba(42,43,38,.07),0 1px 3px rgba(42,43,38,.05);
  --shadow-lg:0 12px 30px rgba(42,43,38,.12),0 4px 10px rgba(42,43,38,.08);
  --r-lg:18px; --r:14px; --r-sm:10px; --r-pill:999px;
  --serif:"New York",ui-serif,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
  --nav-h:64px;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#1a1c18; --card:#23261f; --ink:#ece8dd; --ink-soft:#a4a698; --ink-faint:#7c7e70;
  --line:#343830; --line-strong:#414539;
  --sage:#93a986; --sage-deep:#aec1a2; --sage-soft:#2b312505;
  --sage-soft:#2c3227; --terracotta:#d5805f; --terracotta-soft:#3a2a22;
  --ochre:#d1a457; --easy:#7fae78;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 4px 14px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.3);
  --shadow-lg:0 14px 34px rgba(0,0,0,.5),0 4px 10px rgba(0,0,0,.4);
}}
:root[data-theme="light"]{
  --paper:#f7f4ee; --card:#fffdf9; --ink:#2a2b26; --ink-soft:#6f7269; --ink-faint:#9a9a8e;
  --line:#e7e2d6; --line-strong:#d8d2c3; --sage:#6b7d63; --sage-deep:#4e5f48; --sage-soft:#e8ece2;
  --terracotta:#c26a4a; --terracotta-soft:#f3e2d9; --ochre:#b98b3e; --easy:#5f8a5a;
  --shadow-sm:0 1px 2px rgba(42,43,38,.05);
  --shadow:0 4px 14px rgba(42,43,38,.07),0 1px 3px rgba(42,43,38,.05);
  --shadow-lg:0 12px 30px rgba(42,43,38,.12),0 4px 10px rgba(42,43,38,.08);
}
:root[data-theme="dark"]{
  --paper:#1a1c18; --card:#23261f; --ink:#ece8dd; --ink-soft:#a4a698; --ink-faint:#7c7e70;
  --line:#343830; --line-strong:#414539; --sage:#93a986; --sage-deep:#aec1a2; --sage-soft:#2c3227;
  --terracotta:#d5805f; --terracotta-soft:#3a2a22; --ochre:#d1a457; --easy:#7fae78;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 4px 14px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.3);
  --shadow-lg:0 14px 34px rgba(0,0,0,.5),0 4px 10px rgba(0,0,0,.4);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* iOS/WebKit : la couleur du texte des champs n'est pas fiablement pilotée par `color`
   (le texte tapé peut rester invisible alors que la valeur existe). On force la couleur
   de remplissage du glyphe et du curseur, sinon la recherche « n'affiche rien » sur iPhone. */
input,textarea,select{-webkit-text-fill-color:var(--ink);caret-color:var(--sage-deep);opacity:1}
input::placeholder,textarea::placeholder{-webkit-text-fill-color:var(--ink-faint);opacity:1}
input:disabled,textarea:disabled,select:disabled{-webkit-text-fill-color:var(--ink-faint)}
input:-webkit-autofill{-webkit-text-fill-color:var(--ink)}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;color:inherit}
/* Toute icône SVG non dimensionnée par un composant prend une taille de texte
   (sinon un <svg> sans width/height s'affiche en taille par défaut, énorme). */
svg{width:1.1em;height:1.1em;flex:0 0 auto}
.eyebrow svg{width:16px;height:16px}
.logo svg{width:26px;height:26px}
::selection{background:var(--sage-soft);color:var(--ink)}
:focus-visible{outline:2.5px solid var(--sage);outline-offset:2px;border-radius:6px}
.serif{font-family:var(--serif)}
.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Shell ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.app{padding-bottom:calc(var(--nav-h) + var(--safe-b) + 24px)}
@media(min-width:860px){.app{padding-bottom:48px}}

/* ---------- Top bar ---------- */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:1px solid var(--line)}
/* La barre du haut peut être plus large que le corps (1120px) : sinon, chargée (logo +
   onglets + recherche + icônes + Ajouter), elle écrase le champ de recherche. */
.top-in{display:flex;align-items:center;gap:10px;height:66px;max-width:1360px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:22px;font-weight:600;
  letter-spacing:-.01em;cursor:pointer;flex:0 0 auto}
.logo .mark{width:30px;height:30px;color:var(--sage)}
.top-nav{display:none;gap:4px;margin-left:8px}
@media(min-width:860px){.top-nav{display:flex}}
.top-nav button{background:none;border:none;padding:8px 14px;border-radius:var(--r-pill);font-size:15px;
  font-weight:550;color:var(--ink-soft)}
.top-nav button:hover{color:var(--ink);background:var(--sage-soft)}
.top-nav button.on{color:var(--sage-deep);background:var(--sage-soft)}
.top-spring{flex:1}
.icon-btn{width:42px;height:42px;flex:0 0 42px;border:none;background:none;border-radius:var(--r-pill);
  display:grid;place-items:center;color:var(--ink-soft)}
.icon-btn:hover{background:var(--sage-soft);color:var(--ink)}
.icon-btn svg{width:22px;height:22px}
/* Réglage de la taille des vignettes (ordinateur uniquement) : petit groupe +/- en pilule. */
.grid-zoom{display:inline-flex;align-items:center;flex:0 0 auto;border:1px solid var(--line-strong);border-radius:var(--r-pill)}
.grid-zoom .icon-btn{width:34px;height:34px;flex:0 0 34px}
.grid-zoom .icon-btn svg{width:18px;height:18px}
.grid-zoom .icon-btn:first-child{border-radius:var(--r-pill) 0 0 var(--r-pill)}
.grid-zoom .icon-btn:last-child{border-radius:0 var(--r-pill) var(--r-pill) 0}
.btn-add-top{display:none}
@media(min-width:860px){.btn-add-top{display:inline-flex}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:var(--r);
  padding:12px 18px;font-size:15px;font-weight:600;transition:transform .1s,box-shadow .12s,background .15s}
.btn svg{width:19px;height:19px}
.btn-primary{background:var(--sage-deep);color:#fdfcf7;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--sage);box-shadow:var(--shadow)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--ink-soft)}
.btn-ghost:hover{background:var(--sage-soft);color:var(--ink)}
.btn-outline{background:var(--card);border:1px solid var(--line-strong);color:var(--ink)}
.btn-outline:hover{border-color:var(--sage)}
.btn-danger{background:transparent;color:var(--terracotta)}
.btn-danger:hover{background:var(--terracotta-soft)}
.btn-block{width:100%}
.btn-sm{padding:9px 13px;font-size:14px;border-radius:var(--r-sm)}

/* ---------- Search ---------- */
/* flex:1 faisait partager l'espace libre avec .top-spring : sur écran large chargé, le
   champ se retrouvait écrasé à ~60px (juste la loupe) et le texte tapé restait invisible.
   Base fixe + largeur minimale garantie pour qu'il reste toujours lisible. */
.searchbar{position:relative;flex:0 1 340px;min-width:200px;max-width:420px}
.searchbar svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--ink-faint)}
.searchbar input{width:100%;border:1px solid var(--line-strong);background:var(--card);color:var(--ink);
  border-radius:var(--r-pill);padding:11px 16px 11px 42px;font-size:15px;font-family:inherit}
.searchbar input::placeholder{color:var(--ink-faint)}
.searchbar input:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px var(--sage-soft)}
/* Mobile : la barre du haut est trop étroite pour tout aligner. On masque le texte du
   logo et on descend la recherche sur sa propre ligne, pleine largeur, pour qu'elle reste
   utilisable (sinon le champ est écrasé et « la recherche ne marche pas »). */
@media(max-width:859px){
  .top-in{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:10px;row-gap:10px}
  .logo-txt{display:none}
  /* La règle générique .btn (display:inline-flex) réactivait ce bouton sur mobile ;
     on le remasque ici pour ne pas encombrer la barre au-dessus de la recherche. */
  .btn-add-top{display:none}
  /* La taille des vignettes est fixe sur mobile (3 colonnes) : pas de réglage +/-. */
  .grid-zoom{display:none}
  .searchbar{order:10;flex:1 1 100%;max-width:none}
}
/* Largeurs bureau intermédiaires : la barre est trop chargée pour tout caser sans écraser
   la recherche. On masque « + Ajouter » (l'ajout reste possible via l'accueil) pour laisser
   toute sa largeur au champ. Placé après .btn pour l'emporter sur display:inline-flex. */
@media(min-width:860px) and (max-width:1320px){.btn-add-top{display:none}}

/* ---------- Eyebrow / section head ---------- */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sage);
  display:flex;align-items:center;gap:8px}
.sec{margin-top:40px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.sec-head h2{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.015em;text-wrap:balance}
.sec-head .more{background:none;border:none;color:var(--sage-deep);font-weight:600;font-size:14px}
.sec-head .more:hover{text-decoration:underline}

/* ---------- Home hero ---------- */
.hero{padding:34px 0 6px}
.hero .eyebrow{margin-bottom:14px}
.hero h1{font-family:var(--serif);font-size:clamp(30px,5.5vw,46px);font-weight:600;line-height:1.05;
  letter-spacing:-.02em;text-wrap:balance;max-width:16ch}
.hero p{margin-top:14px;color:var(--ink-soft);font-size:17px;max-width:52ch}
.hero-actions{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.stat-row{display:flex;gap:26px;margin-top:26px;flex-wrap:wrap}
.stat b{font-family:var(--serif);font-size:24px;font-weight:600;display:block;line-height:1}
.stat span{font-size:13px;color:var(--ink-soft)}

/* ---------- Rails ---------- */
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 8px;
  scrollbar-width:none;margin:0 -20px;padding-left:20px;padding-right:20px}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}
.rail .card{flex:0 0 180px}
@media(max-width:520px){.rail .card{flex:0 0 46%}}

/* ---------- Category chips ---------- */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.cat{position:relative;border:1px solid var(--line);background:var(--card);border-radius:var(--r);
  padding:18px 16px;text-align:left;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .12s,box-shadow .12s}
.cat:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.cat .emoji{font-size:26px}
.cat .cn{font-family:var(--serif);font-size:18px;font-weight:600;margin-top:8px}
.cat .cc{font-size:13px;color:var(--ink-soft)}

/* ---------- Recipe grid + card ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card-min,150px),1fr));gap:14px}
@media(max-width:640px){
  .grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .card-body{padding:8px 9px 10px;gap:5px}
  .card-title{font-size:13px;line-height:1.15}
  .card-meta{font-size:10.5px;gap:6px}
  .card-cat{font-size:9px;padding:3px 7px;left:6px;top:6px}
  .fav-btn{width:30px;height:30px;right:6px;top:6px}
  .fav-btn svg{width:16px;height:16px}
}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);text-align:left;display:flex;flex-direction:column;
  transition:transform .14s ease,box-shadow .14s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--sage-soft)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
/* Aperçu Instagram sur la vignette : rogné (en-tête/pied masqués), non cliquable (le clic ouvre la fiche). */
.card-embed{position:absolute;left:0;top:0;width:100%;height:520px;border:0;margin-top:-64px;background:#000;pointer-events:none}
.card:hover .card-media img{transform:scale(1.05)}
.card-cat{position:absolute;left:10px;top:10px;background:color-mix(in srgb,var(--card) 82%,transparent);
  backdrop-filter:blur(6px);border-radius:var(--r-pill);padding:4px 9px;font-size:10.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--sage-deep);box-shadow:var(--shadow-sm)}
.fav-btn{position:absolute;right:8px;top:8px;width:32px;height:32px;border:none;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--card) 80%,transparent);backdrop-filter:blur(6px);display:grid;place-items:center;
  box-shadow:var(--shadow-sm);color:var(--ink-soft);transition:transform .12s}
.fav-btn:hover{transform:scale(1.08)}
.fav-btn svg{width:18px;height:18px}
.fav-btn.on{color:var(--terracotta)}
.fav-btn.on svg{fill:var(--terracotta)}
.card-body{padding:11px 12px 13px;display:flex;flex-direction:column;gap:7px;flex:1}
.card-title{font-family:var(--serif);font-size:16px;font-weight:600;line-height:1.2;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{display:flex;align-items:center;gap:14px;color:var(--ink-soft);font-size:13.5px;margin-top:auto}
.card-meta .m{display:inline-flex;align-items:center;gap:5px}
.card-meta svg{width:15px;height:15px}
.diff{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.diff .dot{width:8px;height:8px;border-radius:50%}
.diff.facile{color:var(--easy)} .diff.facile .dot{background:var(--easy)}
.diff.moyen{color:var(--ochre)} .diff.moyen .dot{background:var(--ochre)}
.diff.difficile{color:var(--terracotta)} .diff.difficile .dot{background:var(--terracotta)}

/* ---------- Filters ---------- */
.filters{position:sticky;top:66px;z-index:20;background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:14px 20px;border-bottom:1px solid var(--line);
  transition:transform .22s ease,opacity .18s ease}
/* Effacée quand on descend dans les recettes (voir onScrollFilters) */
.filters.hidden{transform:translateY(-115%);opacity:0;pointer-events:none}
.chips{display:flex;flex-wrap:wrap;gap:9px;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
/* Barre repliée : une seule ligne qu'on fait défiler du doigt. Le padding compense
   les pastilles de comptage, qui débordent du chip et seraient rognées par l'overflow. */
.chips-bar{display:flex;align-items:center;gap:8px}
.chips-bar>.chips{flex:1;min-width:0}
.filters.compact .chips{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  padding:9px 8px 4px 0;margin:-9px 0 -4px;-webkit-overflow-scrolling:touch}
.filters.compact .filters-row2{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-top:10px}
.filters.compact .filters-row2::-webkit-scrollbar{display:none}
.filters.compact .filters-row2>*{flex:0 0 auto}
.chips-toggle{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--card);color:var(--ink-soft);display:grid;place-items:center;transition:transform .2s,color .2s}
.chips-toggle svg{width:17px;height:17px}
.chips-toggle.open{transform:rotate(180deg);color:var(--sage-deep);border-color:var(--sage)}
.chips-toggle:hover{border-color:var(--sage);color:var(--ink)}
.chip{flex:0 0 auto;border:1px solid var(--line-strong);background:var(--card);color:var(--ink-soft);
  border-radius:var(--r-pill);padding:8px 15px;font-size:14px;font-weight:550;white-space:nowrap;display:inline-flex;gap:7px;align-items:center}
.chip:hover{border-color:var(--sage);color:var(--ink)}
.chip.on{background:var(--sage-deep);border-color:var(--sage-deep);color:#fdfcf7}
.chip.on.fav{background:var(--terracotta);border-color:var(--terracotta)}
.chip svg{width:15px;height:15px}
.filters-row2{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}
.select{border:1px solid var(--line-strong);background:var(--card);color:var(--ink);border-radius:var(--r-sm);
  padding:8px 12px;font-size:14px;font-family:inherit}
.result-count{color:var(--ink-soft);font-size:14px;margin-left:auto}

/* ---------- Recipe detail ---------- */
.detail{padding-top:20px}
.back{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--ink-soft);font-weight:600;font-size:15px;margin-bottom:16px}
.back:hover{color:var(--ink)}
.detail-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:860px){.detail-grid{grid-template-columns:minmax(0,340px) 1fr;gap:44px;align-items:start}}
.detail-left{position:relative}
@media(min-width:860px){.detail-left{position:sticky;top:90px}}
.hero-img{aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--sage-soft)}
.hero-img img{width:100%;height:100%;object-fit:cover}
/* Aperçu Instagram intégré (app sans serveur) : on rogne l'en-tête (compte + « Voir le profil »)
   et le pied (likes/commentaires) en décalant l'iframe, pour ne montrer que l'image de la vidéo. */
.hero-embed{aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:#000}
.hero-embed iframe{width:100%;height:660px;border:0;display:block;margin-top:-64px}
.source-link{display:inline-flex;align-items:center;gap:6px;color:var(--sage-deep);font-weight:600;font-size:14px;text-decoration:none}
.source-link:hover{text-decoration:underline}
.source-link svg{width:16px;height:16px}
.detail h1{font-family:var(--serif);font-size:clamp(28px,4.5vw,40px);font-weight:600;line-height:1.08;letter-spacing:-.02em;text-wrap:balance;margin-bottom:10px}
.detail .desc{color:var(--ink-soft);font-size:17px;max-width:60ch;margin-bottom:20px}
.tag-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.tag{font-size:12.5px;font-weight:600;color:var(--sage-deep);background:var(--sage-soft);border-radius:var(--r-pill);padding:5px 12px}
/* Étiquette de catégorie retirable depuis la fiche : « Supprimer » au survol */
.tag-del{border:none;cursor:pointer;font-family:inherit;transition:background .12s,color .12s}
.tag-del .th-x{display:none}
.tag-del:hover,.tag-del:focus-visible{background:var(--terracotta-soft);color:var(--terracotta)}
.tag-del:hover .th-name,.tag-del:focus-visible .th-name{display:none}
.tag-del:hover .th-x,.tag-del:focus-visible .th-x{display:inline}
.metabar{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;margin-bottom:20px}
@media(min-width:520px){.metabar{grid-template-columns:repeat(4,1fr)}}
.metabar .mb{background:var(--card);padding:13px 14px;display:flex;flex-direction:column;gap:3px}
.metabar .mb .lbl{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.metabar .mb .val{font-family:var(--serif);font-size:19px;font-weight:600}
.actions-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}

/* portions stepper */
.portions{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:12px 16px;margin-bottom:26px}
.portions .p-lbl{font-weight:600}
.portions .p-lbl span{display:block;font-size:12.5px;color:var(--ink-soft);font-weight:400}
.stepper{display:flex;align-items:center;gap:4px;margin-left:auto;background:var(--paper);border-radius:var(--r-pill);padding:4px}
.stepper button{width:34px;height:34px;border:none;background:var(--card);border-radius:var(--r-pill);font-size:20px;
  display:grid;place-items:center;box-shadow:var(--shadow-sm);color:var(--sage-deep)}
.stepper button:hover{background:var(--sage-soft)}
.stepper .n{min-width:44px;text-align:center;font-family:var(--serif);font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}

.block{margin-bottom:34px}
.block>h3{font-family:var(--serif);font-size:22px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.block>h3::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--terracotta);flex:0 0 auto}
.ing{list-style:none;display:flex;flex-direction:column}
.ing li{display:flex;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.ing .q{font-variant-numeric:tabular-nums;font-weight:650;color:var(--sage-deep);min-width:88px;flex:0 0 auto}
.ing .nm{flex:1}
.steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:22px}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.steps li::before{counter-increment:s;content:counter(s);font-family:var(--serif);font-size:26px;font-weight:600;
  color:var(--sage);line-height:1;width:44px;height:44px;border:1.5px solid var(--sage);border-radius:var(--r-pill);
  display:grid;place-items:center;flex:0 0 auto}
.steps li .st{padding-top:8px;font-size:16.5px;line-height:1.6}
.notecard{background:var(--sage-soft);border-radius:var(--r);padding:16px 18px;font-size:15.5px;color:var(--ink)}
.notecard.tip{background:var(--terracotta-soft)}
.notecard h4{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sage-deep);margin-bottom:6px}
.notecard.tip h4{color:var(--terracotta)}
.note-stack{display:flex;flex-direction:column;gap:14px}

/* ---------- Forms ---------- */
.form-wrap{max-width:720px;margin:0 auto}
.field{margin-bottom:18px}
.field>label{display:block;font-size:13.5px;font-weight:650;color:var(--ink-soft);margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line-strong);background:var(--card);
  color:var(--ink);border-radius:var(--r-sm);padding:12px 14px;font-size:16px;font-family:inherit;resize:vertical}
.field textarea{min-height:90px;line-height:1.5}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px var(--sage-soft)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.hint{font-size:13px;color:var(--ink-faint);margin-top:6px}
.ing-row{display:grid;grid-template-columns:70px 96px 1fr 36px;gap:8px;margin-bottom:8px;align-items:center}
.ing-row input{padding:10px 11px;font-size:15px}
@media(max-width:560px){.ing-row{grid-template-columns:64px 82px 1fr 32px}}
.step-row{display:grid;grid-template-columns:auto 1fr 36px;gap:10px;margin-bottom:10px;align-items:start}
.step-row .num{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--sage);width:30px;text-align:center;padding-top:8px}
.row-del{width:36px;height:40px;border:none;background:none;color:var(--ink-faint);border-radius:var(--r-sm);display:grid;place-items:center}
.row-del:hover{background:var(--terracotta-soft);color:var(--terracotta)}
.add-row{background:none;border:1px dashed var(--line-strong);color:var(--sage-deep);border-radius:var(--r-sm);
  padding:10px;font-weight:600;font-size:14px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.add-row:hover{border-color:var(--sage);background:var(--sage-soft)}
.photo-drop{border:1.5px dashed var(--line-strong);border-radius:var(--r);padding:18px;display:flex;gap:16px;align-items:center}
.photo-thumb{width:96px;height:96px;border-radius:var(--r-sm);background:var(--sage-soft) center/cover;flex:0 0 96px;display:grid;place-items:center;color:var(--ink-faint);overflow:hidden}
.photo-thumb img{width:100%;height:100%;object-fit:cover}
.seg{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px}
.seg button{border:none;background:none;padding:8px 15px;border-radius:var(--r-pill);font-size:14px;font-weight:600;color:var(--ink-soft)}
.seg button.on{background:var(--card);color:var(--sage-deep);box-shadow:var(--shadow-sm)}
.form-foot{position:sticky;bottom:0;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);
  padding:14px 0;border-top:1px solid var(--line);display:flex;gap:12px;justify-content:flex-end;margin-top:12px}

/* ---------- Shopping ---------- */
.shop-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:860px){.shop-grid{grid-template-columns:1fr 1.1fr;gap:36px;align-items:start}}
.pick{border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:12px 14px;display:flex;
  align-items:center;gap:12px;margin-bottom:9px;cursor:pointer}
.pick:hover{border-color:var(--sage)}
.pick.on{border-color:var(--sage);background:var(--sage-soft)}
.pick .th{width:48px;height:48px;border-radius:var(--r-sm);object-fit:cover;flex:0 0 48px;background:var(--sage-soft)}
.pick .pn{font-weight:600;font-size:15px}
.pick .ps{font-size:13px;color:var(--ink-soft)}
.check{width:24px;height:24px;border-radius:7px;border:2px solid var(--line-strong);flex:0 0 24px;display:grid;place-items:center;color:transparent}
.pick.on .check,.shop-item.on .check{background:var(--sage-deep);border-color:var(--sage-deep);color:#fff}
.check svg{width:15px;height:15px}
.rayon{margin-bottom:20px}
.rayon h4{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sage);margin-bottom:8px;display:flex;gap:8px;align-items:center}
.shop-item{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line)}
.shop-item .si-q{font-variant-numeric:tabular-nums;font-weight:650;color:var(--sage-deep);min-width:74px}
.shop-item .si-n{flex:1}
.shop-item.on .si-n,.shop-item.on .si-q{text-decoration:line-through;color:var(--ink-faint)}
.shop-empty{text-align:center;padding:50px 20px;color:var(--ink-soft)}

/* ---------- Bottom nav (mobile) ---------- */
.botnav{position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(var(--nav-h) + var(--safe-b));
  padding-bottom:var(--safe-b);background:color-mix(in srgb,var(--card) 92%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);
  display:flex;align-items:stretch}
@media(min-width:860px){.botnav{display:none}}
.botnav button{flex:1;border:none;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:var(--ink-faint);font-size:10.5px;font-weight:600}
.botnav button svg{width:23px;height:23px}
.botnav button.on{color:var(--sage-deep)}
.botnav .fab{position:relative}
.botnav .fab .fabc{width:50px;height:50px;margin-top:-20px;border-radius:var(--r-pill);background:var(--sage-deep);
  color:#fdfcf7;display:grid;place-items:center;box-shadow:var(--shadow-lg)}
.botnav .fab .fabc svg{width:26px;height:26px}

/* ---------- Empty ---------- */
.empty{text-align:center;padding:70px 24px;color:var(--ink-soft)}
.empty .em{font-size:52px}
.empty h3{font-family:var(--serif);font-size:22px;color:var(--ink);margin-top:12px}
.empty p{margin-top:6px;max-width:40ch;margin-inline:auto}

/* ---------- Modal / sheet ---------- */
.overlay{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:20px}
.overlay.on{display:flex}
.ov-bg{position:absolute;inset:0;background:rgba(24,25,20,.5);backdrop-filter:blur(2px)}
.modal{position:relative;background:var(--card);border-radius:var(--r-lg);max-width:440px;width:100%;padding:26px 24px;box-shadow:var(--shadow-lg);animation:pop .2s ease;max-height:88vh;overflow-y:auto}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.modal h3{font-family:var(--serif);font-size:22px;font-weight:600;margin-bottom:10px}
.modal p{color:var(--ink-soft);margin-bottom:20px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}

/* ---------- Cooking mode ---------- */
.cook{position:fixed;inset:0;z-index:80;background:var(--paper);display:none;flex-direction:column}
.cook.on{display:flex}
.cook-top{display:flex;align-items:center;gap:14px;padding:calc(env(safe-area-inset-top,0px) + 16px) 22px 10px}
.cook-top .ct-title{font-family:var(--serif);font-size:17px;font-weight:600;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cook-progress{display:flex;gap:6px;padding:6px 22px 4px}
.cook-progress .pd{height:5px;flex:1;border-radius:3px;background:var(--line)}
.cook-progress .pd.on{background:var(--sage)}
.cook-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:20px 26px;max-width:760px;margin:0 auto;width:100%}
.cook-stage{flex:1;display:flex;min-height:0;width:100%}
.cook-main{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:20px 26px;max-width:760px;margin:0 auto;width:100%}
.cook-aside{flex-shrink:0;width:clamp(140px,26vw,250px);overflow-y:auto;border-left:1px solid var(--line);background:var(--sage-soft);padding:calc(env(safe-area-inset-top,0px) + 18px) 16px 18px}
.cook-aside .ca-title{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:15px;font-weight:600;color:var(--sage-deep);margin-bottom:10px}
.cook-aside .ca-title>span{flex:1;min-width:0}
.cook-aside .ca-portions{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink-soft)}
.cook-aside .ca-hide{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:transparent;color:var(--ink-soft);cursor:pointer;border-radius:8px}
.cook-aside .ca-hide:hover{background:var(--line);color:var(--ink)}
.cook-aside .ca-hide svg{width:1.1em;height:1.1em}
.cook-aside .ca-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cook-aside .ca-list li{font-size:13.5px;line-height:1.35;color:var(--ink);padding-left:14px;position:relative}
.cook-aside .ca-list li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--sage)}
.cook-ings-show{flex-shrink:0;align-self:center;display:flex;flex-direction:column;align-items:center;gap:4px;margin-right:10px;padding:12px 8px;border:1.5px solid var(--sage);border-radius:var(--r);background:var(--sage-soft);color:var(--sage-deep);font-size:11px;font-weight:600;cursor:pointer;writing-mode:vertical-rl}
.cook-ings-show svg{width:1.3em;height:1.3em;writing-mode:horizontal-tb}
.cook-num{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--sage);letter-spacing:.02em}
.cook-step{font-family:var(--serif);font-size:clamp(26px,5.2vw,40px);font-weight:500;line-height:1.28;margin-top:14px;letter-spacing:-.01em;text-wrap:pretty}
.cook-ings{margin-top:26px;color:var(--ink-soft);font-size:15px}
.cook-nav{display:flex;gap:12px;padding:18px 26px calc(env(safe-area-inset-bottom,0px) + 22px);max-width:760px;margin:0 auto;width:100%}
.cook-nav .btn{flex:1;padding:16px;font-size:16px}
.wake{display:flex;align-items:center;gap:9px;justify-content:center;padding:0 26px 12px;color:var(--ink-soft);font-size:13.5px}
.switch{width:42px;height:25px;border-radius:999px;background:var(--line-strong);border:none;position:relative;flex:0 0 42px}
.switch::after{content:"";position:absolute;top:2.5px;left:2.5px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .18s}
.switch.on{background:var(--sage)}
.switch.on::after{transform:translateX(17px)}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + var(--safe-b) + 18px);transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--paper);padding:13px 20px;border-radius:var(--r-pill);font-size:14.5px;font-weight:550;
  z-index:90;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;display:flex;gap:9px;align-items:center;max-width:90vw}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media(min-width:860px){.toast{bottom:28px}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Print ---------- */
@media print{
  .top,.botnav,.filters,.actions-row,.back,.fav-btn,.toast,.overlay,.cook,.play-badge,.hero-hint,
  .portions,.rating-row,.recipe-assign,.log-del,[data-act="add-cart"],.source-link{display:none!important}
  body{background:#fff;color:#000}
  .wrap{max-width:100%;padding:0}
  .detail{padding-top:0}
  .detail-grid{grid-template-columns:1fr;gap:14px}
  .detail-left{position:static}
  .hero-img{max-width:240px;box-shadow:none;border:1px solid #ccc;aspect-ratio:4/3}
  .detail h1{font-size:26px}
  .eyebrow{color:#555}
  .metabar{border-color:#999}
  .metabar .mb{border-color:#ccc}
  .metabar .mb .val{color:#000}
  .block>h3{color:#000}
  .block>h3::before{background:#666}
  .ing li{border-color:#ddd}
  .ing .nm,.steps li .st{color:#000}
  .steps li::before{border-color:#666;color:#000}
  .notecard{background:#f5f4f1!important;border:1px solid #ddd;color:#000}
  .notecard h4{color:#555}
  .tag{background:#eee;color:#333}
  .steps li,.ing li,.block,.card{break-inside:avoid}
}

/* ---------- Glisser-déposer une recette sur un onglet ---------- */
.card[draggable="true"]{cursor:grab}
.card.dragging{opacity:.45;cursor:grabbing}
.chip.drag-over,.cat.drag-over{border-color:var(--sage);background:var(--sage-soft);box-shadow:0 0 0 2px var(--sage) inset;color:var(--sage-deep)}
[data-drop-fav].drag-over{border-color:var(--terracotta);background:var(--terracotta-soft);box-shadow:0 0 0 2px var(--terracotta) inset;color:var(--terracotta)}
[data-drop-mine].drag-over{border-color:var(--ochre);background:color-mix(in srgb,var(--ochre) 16%,var(--card));box-shadow:0 0 0 2px var(--ochre) inset;color:var(--ochre)}
/* Le « + » qui apparaît quand on survole un onglet en glissant une recette */
[data-drop-tab].drag-over,[data-drop-fav].drag-over,[data-drop-mine].drag-over{position:relative;overflow:visible}
[data-drop-tab].drag-over::after,[data-drop-fav].drag-over::after,[data-drop-mine].drag-over::after{content:"+";position:absolute;top:-9px;right:-9px;width:21px;height:21px;border-radius:50%;background:var(--sage-deep);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:800;line-height:1;box-shadow:var(--shadow-sm);z-index:2}
[data-drop-fav].drag-over::after{background:var(--terracotta)}
[data-drop-mine].drag-over::after{background:var(--ochre)}

/* ---------- Rangement tactile (iPhone / iPad) : appui long puis glisser ---------- */
@media(pointer:coarse){.card,.card *{-webkit-user-drag:none;-webkit-touch-callout:none}}
html.dragging-touch{-webkit-user-select:none;user-select:none}
html.dragging-touch .card.dragging{opacity:.35;transform:scale(.97)}
.drag-ghost{position:fixed;left:0;top:0;z-index:100;pointer-events:none;display:flex;align-items:center;gap:9px;
  max-width:62vw;padding:6px 14px 6px 6px;border-radius:var(--r-pill);background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow-lg);will-change:transform}
.drag-ghost img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.drag-ghost .dg-em{width:34px;height:34px;border-radius:50%;background:var(--sage-soft);display:grid;place-items:center;flex:0 0 auto}
.drag-ghost .dg-t{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.droppal{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:12px 14px calc(14px + var(--safe-b));
  background:color-mix(in srgb,var(--paper) 96%,transparent);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);box-shadow:0 -10px 34px rgba(0,0,0,.16);animation:palup .18s ease-out}
/* Apparition discrète : pas de grand translate, sinon la palette reste hors d'atteinte
   du doigt tant que l'animation n'est pas finie. */
@keyframes palup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.droppal .dp-head{font-size:12.5px;color:var(--ink-soft);text-align:center;margin-bottom:10px}
.droppal .dp-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-height:44vh;overflow:auto}
.droppal .chip{font-size:14px}

/* ---------- Spinner (lecture de recette par photo) ---------- */
.spinner{width:15px;height:15px;border:2px solid var(--line-strong);border-top-color:var(--sage);border-radius:50%;animation:spin .7s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Synchronisation cloud (Réglages) ---------- */
.cloud-title{font-weight:700;font-size:14px;margin:14px 0 8px;color:var(--ink)}
.dbx-status{background:var(--sage-soft);border-radius:var(--r-sm);padding:12px 14px}
.dbx-line{display:flex;align-items:center;gap:8px;font-size:15px}
.dbx-dot{width:9px;height:9px;border-radius:50%;background:var(--sage-deep);flex:0 0 9px;box-shadow:0 0 0 3px color-mix(in srgb,var(--sage) 30%,transparent)}

/* ---------- Gestion des catégories (Réglages) ---------- */
.tabman-list{display:flex;flex-direction:column;gap:8px;max-height:42vh;overflow-y:auto;margin-top:6px}
.tabman-row{display:flex;align-items:center;gap:8px}
.tabman-add{display:flex;gap:8px;margin-top:12px}
.tabman-row input,#new-tab-name{flex:1;min-width:0;border:1px solid var(--line-strong);background:var(--card);color:var(--ink);border-radius:var(--r-sm);padding:9px 12px;font-size:15px;font-family:inherit}
.tabman-row input:focus,#new-tab-name:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px var(--sage-soft)}
.tabman-count{font-size:12px;color:var(--ink-faint);min-width:26px;text-align:right;flex:0 0 auto}

/* ---------- Notation par étoiles ---------- */
.rating-row{display:flex;align-items:center;gap:12px;margin:18px 0 2px}
.rating-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.stars{display:inline-flex;align-items:center;gap:2px}
.star{border:none;background:none;cursor:pointer;font-size:24px;line-height:1;color:var(--line-strong);padding:2px;transition:color .1s,transform .1s}
.star:hover{transform:scale(1.12)}
.star.on{color:var(--ochre)}
.star-clear{border:none;background:none;cursor:pointer;color:var(--ink-faint);font-size:14px;margin-left:6px}
.star-clear:hover{color:var(--terracotta)}
.card-stars{color:var(--ochre);letter-spacing:1px;font-size:12px}

/* ---------- Gestion des catégories : flèches monter/descendre ---------- */
.tab-moves{display:inline-flex;flex-direction:column;flex:0 0 auto;gap:2px}
.tab-move{border:1px solid var(--line-strong);background:var(--card);color:var(--ink-soft);border-radius:5px;width:24px;height:15px;font-size:9px;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0}
.tab-move:hover:not(:disabled){border-color:var(--sage);color:var(--sage-deep)}
.tab-move:disabled{opacity:.3;cursor:default}

/* ---------- Compression photos (segmenté) ---------- */
.seg3{display:flex;border:1px solid var(--line-strong);border-radius:var(--r-sm);overflow:hidden;margin:2px 0 6px}
.seg3 button{flex:1;border:none;border-left:1px solid var(--line-strong);background:var(--card);color:var(--ink-soft);padding:9px 6px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit}
.seg3 button:first-child{border-left:none}
.seg3 button.on{background:var(--sage-deep);color:#fdfcf7}

/* ---------- Réordonner un onglet (glisser sur la page Recettes) ---------- */
.chip-tab{cursor:grab}
.chip-tab:active{cursor:grabbing}
.chip-tab.dragging{opacity:.45}
.chip-tab.reorder-over{box-shadow:-3px 0 0 0 var(--sage-deep)}

/* ---------- Vidéo sur la fiche : lecture au survol (YouTube) ---------- */
.hero-img{position:relative}
.hero-video{cursor:pointer;overflow:hidden}
.hero-video img{width:100%;height:100%;object-fit:cover}
.hero-video .play-badge{position:absolute;inset:0;margin:auto;width:60px;height:60px;border-radius:50%;
  background:rgba(20,22,18,.55);color:#fff;display:grid;place-items:center;font-size:24px;padding-left:4px;
  backdrop-filter:blur(2px);pointer-events:none;transition:opacity .15s}
.hero-video .hero-hint{position:absolute;left:0;right:0;bottom:10px;text-align:center;color:#fff;font-size:12px;font-weight:600;
  text-shadow:0 1px 4px rgba(0,0,0,.6);pointer-events:none;transition:opacity .15s}
.hero-video.playing .play-badge,.hero-video.playing .hero-hint{opacity:0}
.hero-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}
/* Aperçu vidéo non-embarquable (Instagram, Pinterest…) : badge cliquable */
.hero-img .play-link{position:absolute;inset:0;margin:auto;width:60px;height:60px;border-radius:50%;
  background:rgba(20,22,18,.55);color:#fff;display:grid;place-items:center;font-size:24px;padding-left:4px;
  text-decoration:none;backdrop-filter:blur(2px)}
.hero-img .play-link:hover{background:rgba(20,22,18,.72)}

/* Lecture d'une vidéo fichier (Instagram…) au survol */
.hero-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:#000}
.hero-video.loading .play-badge{opacity:.35}
.hero-video.loading::after{content:"";position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;z-index:2}

/* ---------- Minuteurs du mode Cuisine ---------- */
.cook-timers{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.cook-timer{display:flex;align-items:center;gap:14px;margin-top:22px;padding:12px 16px;border:1.5px solid var(--sage);border-radius:var(--r);background:var(--sage-soft)}
.cook-timer .ct-lbl{font-weight:600;color:var(--sage-deep)}
.cook-timer .ct-rem{font-family:var(--serif);font-size:28px;font-weight:600;margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink)}

/* ---------- Journal par recette ---------- */
.log-list{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:2px}
.log-list li{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.log-date{font-weight:650;color:var(--sage-deep);flex:0 0 auto;min-width:120px}
.log-text{flex:1;color:var(--ink)}
.log-del{flex:0 0 auto;border:none;background:none;color:var(--ink-faint);cursor:pointer;border-radius:6px;padding:2px 6px}
.log-del:hover{background:var(--terracotta-soft);color:var(--terracotta)}
.log-del svg{width:15px;height:15px}

/* ---------- Planning de la semaine ---------- */
.plan-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0}
.plan-range{font-weight:600;color:var(--ink-soft)}
.plan-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:680px){.plan-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.plan-grid{grid-template-columns:repeat(4,1fr)}}
.plan-day{border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:12px}
.plan-day.today{border-color:var(--sage);box-shadow:0 0 0 2px var(--sage-soft)}
.plan-day-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.plan-dow{font-family:var(--serif);font-weight:600;font-size:16px}
.plan-date{color:var(--ink-faint);font-size:13px}
.plan-items{display:flex;flex-direction:column;gap:6px}
.plan-item{display:flex;align-items:center;gap:6px}
.plan-open{flex:1;display:flex;align-items:center;gap:8px;border:none;background:var(--paper);border-radius:var(--r-sm);padding:6px 8px;text-align:left;cursor:pointer;min-width:0}
.plan-open:hover{background:var(--sage-soft)}
.plan-open img,.plan-emoji{width:34px;height:34px;border-radius:7px;object-fit:cover;flex:0 0 34px;background:var(--sage-soft);display:grid;place-items:center;font-size:15px}
.plan-title{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-rm{flex:0 0 auto;border:none;background:none;color:var(--ink-faint);cursor:pointer;border-radius:6px;padding:4px}
.plan-rm:hover{background:var(--terracotta-soft);color:var(--terracotta)}
.plan-add{margin-top:8px;width:100%;border:1px dashed var(--line-strong);background:none;color:var(--sage-deep);border-radius:var(--r-sm);padding:8px;font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.plan-add:hover{border-color:var(--sage);background:var(--sage-soft)}
.plan-results{display:flex;flex-direction:column;gap:4px;max-height:44vh;overflow-y:auto;margin-top:4px}
.plan-res{display:flex;align-items:center;gap:10px;border:none;background:var(--paper);border-radius:var(--r-sm);padding:8px 10px;text-align:left;cursor:pointer;font-size:14px;font-weight:500;color:var(--ink)}
.plan-res:hover{background:var(--sage-soft)}
.plan-res img,.plan-res .plan-emoji{width:36px;height:36px;border-radius:7px;object-fit:cover;flex:0 0 36px}

/* ---------- Éditeur : lignes d'ingrédients structurées ---------- */
.ing-row{display:grid;grid-template-columns:66px 92px 1fr 34px;gap:8px;margin-bottom:8px;align-items:center}
@media(max-width:560px){.ing-row{grid-template-columns:54px 74px 1fr 30px;gap:6px}}
.ing-row input{width:100%;min-width:0;border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);border-radius:var(--r-sm);padding:10px 11px;font-size:15px;font-family:inherit}
.ing-row input:focus{outline:none;border-color:var(--sage);background:var(--card)}
.row-del{border:none;background:none;color:var(--ink-faint);border-radius:6px;cursor:pointer;display:grid;place-items:center;height:40px}
.row-del:hover{background:var(--terracotta-soft);color:var(--terracotta)}
.row-del svg{width:16px;height:16px}
.add-row{margin-top:2px;width:100%;border:1px dashed var(--line-strong);background:none;color:var(--sage-deep);border-radius:var(--r-sm);padding:10px;font-weight:600;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}
.add-row:hover{border-color:var(--sage);background:var(--sage-soft)}

/* Bouton « Générer la liste » collant en haut de la sélection des courses */
.shop-gen-top{position:sticky;top:74px;z-index:5;margin-bottom:12px;box-shadow:var(--shadow)}

/* En-tête de la page Recettes : titre + nombre total enregistré */
.list-head{display:flex;align-items:baseline;gap:12px;padding-top:20px;padding-bottom:2px;flex-wrap:wrap}
.list-title{font-family:var(--serif);font-size:28px;font-weight:600;letter-spacing:-.015em}
.list-count{color:var(--ink-soft);font-size:15px;font-weight:600}

/* Badge compteur en haut à droite de chaque bulle de catégorie */
.chip{position:relative}
.chip-badge{position:absolute;top:-7px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--sage-deep);color:#fdfcf7;font-size:10.5px;font-weight:700;display:grid;place-items:center;line-height:1;box-shadow:0 0 0 2px var(--paper);pointer-events:none}
.chip.drag-over .chip-badge,.chip.reorder-over .chip-badge{opacity:0}

/* ---------- Cuisiner avec ce que j'ai (frigo) ---------- */
.pantry-bar{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.pantry-bar input{flex:1;min-width:180px;border:1px solid var(--line-strong);background:var(--card);color:var(--ink);border-radius:var(--r-sm);padding:11px 14px;font-size:15px;font-family:inherit}
.pantry-bar input:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px var(--sage-soft)}
.pantry-chips{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 4px}
.pantry-chips .chip{cursor:pointer}
.pantry-mode{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.pantry-mode .pm-lbl{font-size:13px;font-weight:600;color:var(--ink-soft)}
.pantry-mode .chip{cursor:pointer}
.pantry-list{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.pantry-res{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:10px 12px;text-align:left;cursor:pointer}
.pantry-res:hover{border-color:var(--sage)}
.pantry-res .th{width:52px;height:52px;border-radius:var(--r-sm);object-fit:cover;flex:0 0 52px;background:var(--sage-soft)}
.pantry-emoji{display:grid;place-items:center;font-size:22px}
.pantry-info{flex:1;min-width:0}
.pantry-info .pn{font-weight:600;font-size:15px}
.pantry-info .ps{font-size:13px;color:var(--ink-soft)}
.pantry-count{flex:0 0 auto;font-weight:700;font-size:13px;color:var(--ink-soft);background:var(--paper);border-radius:999px;padding:4px 10px}
.pantry-count.full{background:var(--sage-deep);color:#fdfcf7}

/* ---------- Nettoyage des doublons ---------- */
.dupe-list{display:flex;flex-direction:column;gap:16px;max-height:52vh;overflow-y:auto;margin:6px 0}
.dupe-group{border:1px solid var(--line);border-radius:var(--r);padding:10px;background:var(--paper)}
.dupe-h{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.dupe-row{display:flex;align-items:center;gap:10px;width:100%;border:1.5px solid transparent;background:var(--card);border-radius:var(--r-sm);padding:8px 10px;text-align:left;cursor:pointer;margin-bottom:6px}
.dupe-row .th{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:0 0 44px;background:var(--sage-soft)}
.dupe-row.keep{border-color:var(--sage);background:var(--sage-soft)}
.dupe-row.del{opacity:.7}
.dupe-tag{flex:0 0 auto;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px}
.dupe-row.keep .dupe-tag{background:var(--sage-deep);color:#fdfcf7}
.dupe-row.del .dupe-tag{background:var(--terracotta-soft);color:var(--terracotta)}

/* Recherche dans la sélection des courses */
.shop-search{display:flex;gap:8px;align-items:center;margin:12px 0 4px}
.shop-search .searchbar{flex:1}
.shop-search .btn{flex:0 0 auto;white-space:nowrap}

/* Actions de la liste de courses (partager / imprimer / ajouter) */
.shop-list-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.shop-list-actions .more{display:inline-flex;align-items:center;gap:5px}
@media print{
  body.printing-shop .shop-pick-col,body.printing-shop .shop-list-actions,body.printing-shop .back,body.printing-shop .eyebrow,body.printing-shop .desc{display:none!important}
  body.printing-shop .shop-grid{display:block}
  body.printing-shop h1{font-size:24px}
  body.printing-shop .rayon h4{color:#000}
  body.printing-shop .shop-item{border-color:#ccc;break-inside:avoid}
  body.printing-shop .shop-item .check{border:1.5px solid #333!important;background:#fff!important;color:transparent!important}
  body.printing-shop .shop-item.on .si-n,body.printing-shop .shop-item.on .si-q{text-decoration:none;color:#000}
}

/* Icône panier sur les cartes (ajouter aux courses sans ouvrir) */
.cart-btn{position:absolute;right:8px;bottom:8px;width:34px;height:34px;border:none;border-radius:var(--r-pill);background:color-mix(in srgb,var(--card) 82%,transparent);backdrop-filter:blur(6px);display:grid;place-items:center;box-shadow:var(--shadow-sm);color:var(--ink-soft);transition:transform .12s;z-index:3}
.cart-btn:hover{transform:scale(1.08)}
.cart-btn svg{width:18px;height:18px}
.cart-btn.on{background:var(--sage-deep);color:#fdfcf7}
@media(max-width:640px){.cart-btn{width:30px;height:30px;right:6px;bottom:6px}.cart-btn svg{width:16px;height:16px}}

/* Courses : liste des recettes sélectionnées */
.shop-sel-list{display:flex;flex-direction:column;gap:8px}
.shop-sel-list .pick{cursor:default;padding:8px 10px}
.pick-open{flex:1;display:flex;align-items:center;gap:10px;border:none;background:none;text-align:left;cursor:pointer;min-width:0;padding:0}
.pick-open .th{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:0 0 44px;background:var(--sage-soft)}
.pick-open .pn{font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-rm{flex:0 0 auto;border:none;background:none;color:var(--ink-faint);cursor:pointer;border-radius:6px;padding:6px}
.pick-rm:hover{background:var(--terracotta-soft);color:var(--terracotta)}

/* Bouton « Ajouter aux courses » de la fiche quand la recette est déjà dans le panier */
.btn.on-cart{color:var(--sage-deep);background:var(--sage-soft)}

/* Bouton « courses » actif sur la fiche */
.btn.cart-on{color:var(--sage-deep);font-weight:700}

/* Minuteurs multiples (mode cuisine) */
.cook-timers-active{display:flex;flex-direction:column;gap:8px;margin-top:22px}
.cook-timers-active .cook-timer{margin-top:0}

/* Cocher ingrédients / étapes sur la fiche */
.ing li{cursor:pointer}
.ing li.done .nm{text-decoration:line-through;color:var(--ink-faint)}
.steps li{cursor:pointer}
.steps li.done .st{text-decoration:line-through;color:var(--ink-faint)}
.steps li.done::before{opacity:.4}
.conv-link{margin-left:auto;border:1px solid var(--line-strong);background:var(--card);color:var(--sage-deep);font-size:12px;font-weight:600;border-radius:999px;padding:4px 10px;cursor:pointer;text-transform:none;letter-spacing:0}
.conv-link:hover{border-color:var(--sage)}
/* Convertisseur d'unités */
.cv-result{font-family:var(--serif);font-size:26px;font-weight:600;text-align:center;padding:14px;background:var(--sage-soft);border-radius:var(--r);margin:2px 0 4px}

/* Estimation nutritionnelle sur la fiche */
.nutri-note{margin:14px 0 2px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);font-size:15px}
.nutri-note b{color:var(--sage-deep);font-size:16px}
.nutri-note span{color:var(--ink-faint);font-size:12.5px}

/* Écran « Ajouter une recette » : le choix de la méthode, puis le formulaire. */
.add-choices{display:flex;flex-direction:column;gap:12px}
.add-choice{display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:18px 20px;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);cursor:pointer;
  color:inherit;font:inherit;transition:border-color .15s,transform .12s,box-shadow .15s}
.add-choice:hover{border-color:var(--sage);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.add-choice:active{transform:scale(.99)}
.add-choice .ac-ico{display:flex;align-items:center;justify-content:center;flex:0 0 46px;height:46px;
  border-radius:50%;background:var(--sage-soft);color:var(--sage-deep);font-size:21px}
.add-choice .ac-ico svg{width:22px;height:22px}
.add-choice .ac-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.add-choice .ac-txt b{font-size:17px;font-weight:600}
.add-choice .ac-txt small{font-size:13.5px;color:var(--ink-faint);line-height:1.35}
.paste-box{margin-bottom:22px;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--card)}
.paste-box summary{cursor:pointer;font-weight:600;font-size:14px;color:var(--ink-soft)}
.paste-box[open] summary{margin-bottom:10px}