/* ══════════════════════════════════════════════════════════════════
   Modales éditoriales : « Partager » (atelier), « Recette incomplète » et
   « Planifier » (globales). Maquette validée le 30/09 :
   .claude/design-drafts/2026-09-30-partager-corrections.html
   Autonome : chargée par base.html sur toutes les pages, elle ne lit que
   les jetons --ard-* de night_kitchen.css (saisie_recette.css n'est pas là).
   Ouverture par .active, comme les autres modales de base.js ; sous les
   toasts (9999).
   ══════════════════════════════════════════════════════════════════ */
.pm-overlay{position:fixed;inset:0;z-index:9000;display:none;place-items:center;padding:16px;background:rgba(4,8,6,.62)}
[data-theme="light"] .pm-overlay{background:rgba(20,29,23,.42)}
.pm-overlay.active{display:grid}
.pm{width:min(100%,480px);max-height:calc(100dvh - 32px);overflow:auto;padding:36px 36px 28px;background:var(--ard-bg);border:1px solid var(--ard-rule-strong);border-radius:3px;box-shadow:var(--ard-shadow);color:var(--ard-ink);font-family:var(--ard-sans);text-align:left}
.pm-kicker{display:inline-flex;align-items:center;gap:14px;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ard-gold-text);line-height:1}
.pm-kicker::before{content:"";width:28px;height:1px;background:currentColor;opacity:.75}
.pm-title{margin:18px 0 0;font-family:var(--ard-serif);font-weight:500;font-size:30px;line-height:1.12;letter-spacing:-.015em;color:var(--ard-ink)}
.pm-title em{font-style:italic;font-weight:400}
.pm-text{margin:14px 0 0;font-size:16px;line-height:1.6;color:var(--ard-ink-2)}
.pm-steps{margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--ard-rule);list-style:none;display:grid;gap:10px}
.pm-steps li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:baseline;font-size:15px;color:var(--ard-ink-2)}
.pm-steps b{font-family:var(--ard-serif);font-style:italic;font-weight:400;font-size:20px;line-height:1;color:var(--ard-gold-text)}
.pm-btns{display:flex;justify-content:flex-end;gap:12px;margin-top:28px}

/* Boutons : l'allure de .nr-btn (saisie_recette.css), recopiée ici pour
   rester autonome sur toutes les pages. */
.pm-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:2px;border:1px solid transparent;font:inherit;font-size:15px;font-weight:600;letter-spacing:.2px;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--ard-tr),color var(--ard-tr),border-color var(--ard-tr),filter var(--ard-tr)}
.pm-btn--solid{background:var(--ard-accent);color:var(--ard-on-accent);border-color:var(--ard-accent)}
.pm-btn--solid:hover{filter:brightness(1.08)}
.pm-btn--solid:active{filter:brightness(.95)}
.pm-btn--line{background:transparent;color:var(--ard-ink);border-color:var(--ard-rule-strong)}
.pm-btn--line:hover{border-color:var(--ard-gold-text);color:var(--ard-gold-text)}
.pm-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pm-i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:480px){
  .pm{padding:28px 22px 22px}
  .pm-title{font-size:26px}
  .pm-btns{flex-direction:column-reverse}
  .pm-btns .pm-btn{width:100%}
}

/* ── Modale « Planifier » (globale, #planningModal) : vignette, portions.
   Maquette validée le 14/10 : .claude/design-drafts/modale-planifier/ ── */
.pm-plan-recette{display:grid;grid-template-columns:72px 1fr;gap:16px;align-items:center;margin-top:20px}
.pm-plan-img,.pm-plan-vide{width:72px;height:72px;border-radius:2px;border:1px solid var(--ard-rule)}
.pm-plan-img{display:block;object-fit:cover}
.pm-plan-vide{display:grid;place-items:center;background:var(--ard-bg-2);color:var(--ard-ink-3)}
.pm-plan-img[hidden],.pm-plan-vide[hidden]{display:none}
.pm-plan-vide svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pm-title.pm-plan-titre{margin:0;font-size:24px;line-height:1.2;overflow-wrap:anywhere;text-wrap:balance}
.pm-plan-meta{display:flex;flex-wrap:wrap;margin:6px 0 0;font-size:14px;color:var(--ard-ink-3)}
.pm-plan-meta span:not([hidden])~span:not([hidden])::before{content:"·" / "";margin:0 8px}
.pm-plan-portions{margin-top:24px;padding-top:20px;border-top:1px solid var(--ard-rule)}
.pm.pm-plan{width:min(100%,420px)}
.pm-plan-question{display:block;font-size:16px;line-height:1.5;color:var(--ard-ink-2);text-align:center;text-wrap:balance}
.pm-plan-stepper{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px}
.pm-plan-pas{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--ard-rule-strong);border-radius:2px;background:transparent;color:var(--ard-ink);cursor:pointer;transition:border-color var(--ard-tr),color var(--ard-tr)}
.pm-plan-pas:hover{border-color:var(--ard-gold-text);color:var(--ard-gold-text)}
.pm-plan-pas:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pm-plan-pas svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.pm-plan-nb{width:72px;height:48px;padding:0;border:0;background:transparent;color:var(--ard-ink);font-family:var(--ard-serif);font-size:32px;font-weight:500;font-variant-numeric:lining-nums tabular-nums;text-align:center;-moz-appearance:textfield;appearance:textfield}
.pm-plan-nb::-webkit-inner-spin-button,.pm-plan-nb::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.pm-plan-nb:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.pm-plan .pm-btns{gap:10px;margin-top:24px}
.pm-plan .pm-btns .pm-btn{flex:1}
.pm-plan .pm-btns .pm-btn--solid{flex:2}

@media (max-width:480px){
  .pm-plan-recette{grid-template-columns:60px 1fr;gap:14px}
  .pm-plan-img,.pm-plan-vide{width:60px;height:60px}
  .pm-title.pm-plan-titre{font-size:21px}
  .pm-plan .pm-btns{flex-direction:row}
  .pm-plan .pm-btns .pm-btn{width:auto;padding:0 14px}
}