/* Fiche d'une sortie : fenêtre centrée (ordinateur), feuille montante (téléphone).
   Commune au Coin des sorties, au Coin du plongeur, au Coin du bureau et au calendrier participatif.
   Sélecteurs sur les identifiants : la page du bureau charge aussi documents.css, qui a son propre .asptt-modal-overlay. */
#asptt-modal-overlay     { display:none; position:fixed; inset:0; background:rgba(10,20,35,.5);
                           z-index:100010; align-items:center; justify-content:center; padding:20px; }
#asptt-modal-overlay.open{ display:flex; }
#asptt-modal             { background:#fff; border-radius:14px; padding:24px 28px;
                           max-width:540px; width:100%; position:relative; box-sizing:border-box;
                           box-shadow:0 8px 32px rgba(0,0,0,.18); max-height:90vh; overflow-y:auto; }
#asptt-modal h3          { margin:0 0 6px; font-size:19px; color:#1e3a5f; padding-right:36px; line-height:1.3; }
#asptt-modal #asptt-modal-statut { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px; }
#asptt-modal #asptt-modal-statut:empty { display:none; }
#asptt-modal-overlay .asptt-modal-close { all:unset; box-sizing:border-box; position:absolute; top:12px; right:12px; z-index:2;
                           width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer;
                           border-radius:50% !important; background:rgba(255,255,255,.92) !important; color:#4b5563 !important;
                           box-shadow:0 1px 4px rgba(0,0,0,.15) !important; }
#asptt-modal-overlay .asptt-modal-close:hover { color:#111827 !important; }
#asptt-modal-overlay .asptt-modal-close:focus-visible { outline:2px solid #0e7490; outline-offset:2px; }
#asptt-modal-overlay .asptt-modal-close svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
.asptt-modal-img-wrap    { margin:-24px -28px 16px; border-radius:14px 14px 0 0; overflow:hidden; height:180px; }
.asptt-modal-img-wrap[hidden] { display:none !important; }
.asptt-modal-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.asptt-modal-poignee     { display:none; }
.asptt-modal-action      { display:flex; margin-top:16px; }
.asptt-modal-action:empty { display:none; }

/* Grille div-based : 2 colonnes, jamais de décalage */
.asptt-modal-grid        { display:grid; grid-template-columns:150px 1fr;
                           gap:6px 12px; font-size:14px; align-items:start; }
.am-lbl                  { color:#6b7280; font-weight:600; padding:3px 0; }
.am-val                  { color:#1f2937; padding:3px 0; min-width:0; overflow-wrap:anywhere; }
.am-sep                  { grid-column:1 / -1; border-top:1px solid #f0f0f0; margin:6px 0; }

@keyframes asptt-monte   { from { transform:translateY(100%); } to { transform:none; } }
@media (max-width:720px) {
    #asptt-modal-overlay { align-items:flex-end; padding:0; }
    #asptt-modal         { max-width:none; max-height:85vh; border-radius:16px 16px 0 0;
                           padding:8px 18px calc(18px + env(safe-area-inset-bottom,0px));
                           animation:asptt-monte .22s ease-out; }
    .asptt-modal-poignee { display:block; width:40px; height:4px; border-radius:2px; background:#d1d5db; margin:0 auto 10px; }
    .asptt-modal-img-wrap { margin:-8px -18px 14px; border-radius:16px 16px 0 0; height:150px; }
    .asptt-modal-img-wrap:not([hidden]) + h3 { margin-top:0; }
    .asptt-modal-grid    { grid-template-columns:110px 1fr; font-size:14px; }
    .asptt-modal-action  { position:sticky; bottom:calc(-18px - env(safe-area-inset-bottom,0px)); background:#fff;
                           margin:16px -18px 0; padding:10px 18px; border-top:1px solid #eef1f5; }
}
@media (prefers-reduced-motion: reduce) { #asptt-modal { animation:none; } }