/* LA MODALE BASIQUE (29/10/2026, handoff design_handoff_modale_basique).
   Un seul modèle pour tout ce qui tient en une question : confirmer, prévenir, informer,
   féliciter. Même forme, quatre tons (mb-confirm, mb-danger, mb-info, mb-success).
   Construite par js/popotam-modale.js ; les modales riches (recette, planning, formulaires)
   gardent leur propre composant. Sur téléphone, elle devient une feuille du bas. */

.mb-ov {
  --mb-ink: #2A211B; --mb-ink2: #6A5C4C; --mb-muted: #9C8B79;
  --mb-cream: #FFF8EA; --mb-cream2: #FCEFD9; --mb-line: #F0E5CF; --mb-line2: #EEDFC2;
  --mb-spring: cubic-bezier(.3, 1.35, .45, 1); --mb-out: cubic-bezier(.2, .8, .2, 1);
  position: fixed; inset: 0; z-index: 460;
  display: grid; place-items: center; padding: 24px;
  background: rgba(60, 40, 20, .32);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: mbOvIn .3s var(--mb-out) both;
}
.mb-ov.mb-out { animation: mbOvOut .24s var(--mb-out) both; pointer-events: none; }
@keyframes mbOvIn { from { opacity: 0; } }
@keyframes mbOvOut { to { opacity: 0; } }

/* Les quatre tons : médaillon, anneau, badge, manuscrit, bouton principal. Le rouge est réservé
   à l'irréversible. */
.mb-confirm { --tb: #FFF1D2; --tr: #F6A609; --tc: #F0682F; --tk: #DA541E; --tp: #F0682F; --tpd: #DA541E; }
.mb-danger  { --tb: #FCE4EE; --tr: #E8A3BF; --tc: #D2452F; --tk: #AE3220; --tp: #D2452F; --tpd: #AE3220; }
.mb-info    { --tb: #E3EFFA; --tr: #9CC2E6; --tc: #3B82C4; --tk: #3B82C4; --tp: #2A211B; --tpd: #14100C; }
.mb-success { --tb: #E6F3E9; --tr: #9ED1AE; --tc: #33A15B; --tk: #2C8B4E; --tp: #33A15B; --tpd: #2C8B4E; }

.mb {
  position: relative; width: min(440px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto;
  padding: 30px 28px 24px; border-radius: 28px; background: #fff;
  box-shadow: 0 40px 80px -30px rgba(60, 30, 10, .55);
  text-align: center; color: var(--mb-ink); font-family: "Hanken Grotesk", system-ui, sans-serif;
  animation: mbIn .5s var(--mb-spring) both;
}
.mb-out .mb { animation: mbOut .22s var(--mb-out) both; }
@keyframes mbIn { from { opacity: 0; transform: translateY(24px) scale(.96); } }
@keyframes mbOut { to { opacity: 0; transform: translateY(14px) scale(.97); } }
.mb svg { display: block; }

.mb-g { display: none; }

.mb-x {
  position: absolute; right: 14px; top: 14px; z-index: 1;
  width: 40px; height: 40px; border: 0; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: var(--mb-cream2); color: var(--mb-ink2);
  transition: background .2s, color .2s, transform .3s var(--mb-spring);
}
.mb-x:hover { background: var(--mb-line2); color: var(--mb-ink); transform: rotate(90deg); }
.mb-x svg { width: 15px; height: 15px; }

.mb-art {
  position: relative; width: 92px; height: 92px; margin: 0 auto; border-radius: 50%;
  background: var(--tb); display: grid; place-items: center;
}
.mb-art::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px dashed var(--tr); opacity: .55;
}
.mb-art .mb-f { width: 74px; height: 74px; margin-top: 4px; }
.mb-art .mb-f svg { width: 100%; height: 100%; }
.mb-art .mb-bdg {
  position: absolute; right: -4px; bottom: 2px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--tc); color: #fff; display: grid; place-items: center; border: 3px solid #fff;
}
.mb-art .mb-bdg svg { width: 15px; height: 15px; }
.mb-art:hover .mb-f { animation: mbHop .6s var(--mb-spring); }
@keyframes mbHop { 30% { transform: translateY(-8px) scale(1.04, .96); } 60% { transform: scale(.97, 1.03); } }

.mb-k { display: block; margin-top: 14px; font: 700 19px/1 "Caveat", cursive; color: var(--tk); }
.mb-t {
  margin: 4px 0 0; font: 800 24px/1.15 "Bricolage Grotesque", system-ui, sans-serif;
  letter-spacing: -.02em; color: var(--mb-ink); text-wrap: balance;
}
.mb-d {
  margin: 8px auto 0; max-width: 34ch; font-size: 15px; line-height: 1.55;
  color: var(--mb-ink2); text-wrap: pretty;
}
.mb-d b { color: var(--mb-ink); }

.mb-fa { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
.mb-fa span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
  border-radius: 999px; background: var(--mb-cream); border: 1px solid var(--mb-line);
  font: 700 13px "Hanken Grotesk", system-ui, sans-serif; color: var(--mb-ink);
}
.mb-fa svg { width: 14px; height: 14px; color: var(--mb-muted); flex: none; }

.mb-a { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.mb-b {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  font: 800 15.5px "Bricolage Grotesque", system-ui, sans-serif; white-space: nowrap;
  transition: transform .3s var(--mb-spring), background .2s, box-shadow .2s;
}
.mb-b svg { width: 17px; height: 17px; flex: none; }
.mb-b:active { transform: translateY(2px) scale(.98); }
.mb-b:focus-visible, .mb-x:focus-visible { outline: 3px solid color-mix(in srgb, var(--tc) 45%, transparent); outline-offset: 2px; }
.mb-b.mb-sec { background: var(--mb-cream2); color: var(--mb-ink); }
.mb-b.mb-sec:hover { background: var(--mb-line2); }
.mb-b.mb-pri { background: var(--tp); color: #fff; box-shadow: 0 3px 0 var(--tpd); }
.mb-b.mb-pri:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--tpd); }
.mb-b.mb-pri:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tpd); }
.mb-b.mb-busy { pointer-events: none; }
.mb-b .mb-sp {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: mbSpin .7s linear infinite;
}
@keyframes mbSpin { to { transform: rotate(360deg); } }
.mb-b.mb-pri.mb-done { background: #33A15B; box-shadow: 0 3px 0 #2C8B4E; }

/* La cascade : chaque bloc monte à son tour, le médaillon tourne, le badge se tamponne. */
.mb > * { animation: mbP .5s var(--mb-spring) both; }
.mb > .mb-x, .mb > .mb-g { animation: none; }
.mb > .mb-art { animation: mbArt .6s var(--mb-spring) .08s both; }
.mb-art .mb-bdg { animation: mbBdg .45s var(--mb-spring) .45s both; }
.mb > .mb-k { animation-delay: .14s; }
.mb > .mb-t { animation-delay: .18s; }
.mb > .mb-d { animation-delay: .22s; }
.mb > .mb-fa { animation-delay: .26s; }
.mb > .mb-a { animation-delay: .3s; }
@keyframes mbP { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } }
@keyframes mbArt { 0% { opacity: 0; transform: scale(.4) rotate(-14deg); } 100% { opacity: 1; transform: none; } }
@keyframes mbBdg { 0% { transform: scale(0) rotate(-40deg); } 100% { transform: none; } }

/* Le défilement de la page est bloqué tant qu'elle est ouverte. */
html.mb-verrou, html.mb-verrou body { overflow: hidden; }

/* TÉLÉPHONE : la feuille du bas, le bouton principal au-dessus, à portée de pouce. */
@media (max-width: 600px) {
  .mb-ov { place-items: end stretch; padding: 0; }
  .mb {
    width: 100%; max-height: calc(100dvh - 24px);
    padding: 12px 20px calc(30px + env(safe-area-inset-bottom, 0px)); border-radius: 28px 28px 0 0;
    animation: mbShIn .55s var(--mb-spring) both;
  }
  .mb-out .mb { animation: mbShOut .25s var(--mb-out) both; }
  .mb.mb-tire { animation: none; transition: none; }
  .mb.mb-lache { animation: none; transition: transform .3s var(--mb-spring); }
  /* La poignée : la zone à saisir est plus grande que le trait. */
  .mb-g { display: block; width: 72px; height: 23px; margin: -8px auto 10px; padding: 8px 16px; cursor: grab; touch-action: none; }
  .mb-g::before { content: ""; display: block; width: 40px; height: 5px; border-radius: 5px; background: var(--mb-line2); }
  .mb-x { top: 22px; right: 16px; width: 36px; height: 36px; }
  .mb-art { width: 84px; height: 84px; }
  .mb-art .mb-f { width: 66px; height: 66px; }
  .mb-a { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mb-a .mb-pri { order: -1; }
  @keyframes mbShIn { from { transform: translateY(100%); } }
  @keyframes mbShOut { to { transform: translateY(100%); } }
}

@media (prefers-reduced-motion: reduce) {
  .mb-ov, .mb-ov *, .mb-ov *::before { animation: none !important; transition: none !important; }
}