/* ══════════════════════════════════════════════════════════════════
   Modales éditoriales : « Partager » (atelier) et « Recette incomplète »
   (globale). 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%}
}