/* ===== Bouton + sur les cartes ===== */
.card-plus{
  position:absolute; right:14px; bottom:14px;
  width:38px; height:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.75);
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(8px) saturate(140%);
  -webkit-backdrop-filter:blur(8px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 8px 18px rgba(0,0,0,.12);
  color:#0f172a; font-size:22px; line-height:1; cursor:pointer;
  display:grid; place-items:center; transition:.22s ease;
}
.card-plus:hover{ transform:translateY(-2px); background:rgba(255,255,255,.8) }
.card-plus:active{ transform:translateY(0) scale(.98) }

/* ===== Modal (overlay + fiche) ===== */
.native-modal{
  position:fixed; inset:0; z-index:6000; display:none;
}
.native-modal.open{ display:block }
.native-modal .backdrop{
  position:absolute; inset:0; background:rgba(15,23,42,.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; animation:modalFade .18s ease forwards;
}
@keyframes modalFade{ to{opacity:1} }

/* ===== Sheet centrée (style Apple) ===== */
.native-modal .sheet{
  position:absolute; left:50%;
  /* Espace haut/bas pour un centrage visuel (et safe-area iOS) */
  --sheet-top: clamp(32px, 8vh, 120px);
  --sheet-bottom: max(32px, calc(env(safe-area-inset-bottom) + 12px));
  top: var(--sheet-top);
  bottom: var(--sheet-bottom);
  width:min(980px, 92vw);

  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;                         /* arrondi partout */
  box-shadow:0 24px 60px rgba(0,0,0,.20);
  display:flex; flex-direction:column; overflow:hidden;

  /* état initial (légèrement en bas) pour le slide-in */
  opacity:0; transform:translate(-50%, 24px);
}

/* En-tête collant */
.sheet-head{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  border-bottom:1px solid rgba(0,0,0,.06);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.sheet-title{ font-size:1.25rem; font-weight:700; letter-spacing:.2px; margin:0 }
.sheet-close{
  width:36px; height:36px; border-radius:10px; border:1px solid rgba(0,0,0,.08);
  background:#fff; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}
.sheet-close svg{ width:18px; height:18px }

/* Corps scrollable */
.sheet-body{
  flex:1 1 auto;                /* occupe l’espace restant */
  overflow:auto;
  padding:18px 18px 24px 18px;
}

/* Mise en forme joli du contenu interne */
.detail-hero{ margin:0 0 14px; border-radius:14px; overflow:hidden }
.detail-hero img{ width:100%; display:block }
.detail-hero figcaption{ padding:10px 12px; font-size:.92rem; color:#475569; background:#f8fafc }

.detail-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:16px 0 }
.detail-grid article{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; padding:12px; box-shadow:0 8px 18px rgba(0,0,0,.05) }
.detail-quote{
  margin:18px 0 0; padding:14px 16px; font-style:italic; color:#334155;
  background:linear-gradient(0deg, rgba(255,255,255,1), rgba(255,255,255,.75));
  border:1px solid rgba(0,0,0,.06); border-radius:12px;
}
.sheet-body h3{ margin:10px 0 6px }
.sheet-body h4{ margin:8px 0 4px; font-size:1rem }

/* Responsive */
@media (max-width:860px){
  .sheet-body{ padding:14px }
  .detail-grid{ grid-template-columns:1fr }
}

/* ===== Animations (slide vers le haut à l’ouverture, vers le bas à la fermeture) ===== */
.native-modal.open .sheet{
  animation: sheetSlideIn .38s cubic-bezier(.22,.61,.36,1.15) forwards;
}
.native-modal.closing .sheet{
  animation: sheetSlideOut .28s cubic-bezier(.4,.0,.6,1) forwards;
}

@keyframes sheetSlideIn{
  0%   { transform:translate(-50%, 28px); opacity:0; }
  60%  { transform:translate(-50%, -4px); opacity:1; } /* petit rebond */
  100% { transform:translate(-50%, 0); opacity:1; }
}
@keyframes sheetSlideOut{
  from { transform:translate(-50%, 0); opacity:1; }
  to   { transform:translate(-50%, 28px); opacity:0; }
}