/* scopemy.city : fiche d'un signalement (signalement.php). Extrait du <style> en ligne (#33). */
main{max-width:900px;margin:0 auto;padding:2rem 1.5rem}
.back{font-size:13px;color:var(--muted);text-decoration:none;margin-bottom:1rem;display:inline-block}
.back:hover{color:var(--teal)}
.main-card{background:#fff;border:1.5px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:1.5rem}
.main-photo{width:100%;max-height:500px;object-fit:cover;display:block;background:var(--teal-light);cursor:zoom-in}
.thumbs-row{display:flex;gap:8px;padding:8px;background:#fafafa;border-top:1px solid #e5e7eb}
.thumb-photo{width:120px;height:90px;object-fit:cover;border-radius:6px;cursor:zoom-in;border:1px solid #e5e7eb;flex-shrink:0}
.thumb-photo:hover{border-color:var(--teal)}
.body{padding:1.8rem}
.cat-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:.8rem}
.cat-pill{font-size:13px;padding:4px 12px;border-radius:100px;font-weight:500}
.status-pill{font-size:13px;font-weight:500;padding:4px 12px;border-radius:100px;border:1.5px solid}
h1{font-family:'Syne',sans-serif;font-size:1.6rem;line-height:1.25;margin-bottom:.6rem}
.meta{font-size:13px;color:var(--muted);margin-bottom:1.2rem}
.meta span+span::before{content:' · '}
/* #2 Barre de progression signalé → en cours → résolu */
.progress-track{display:flex;align-items:flex-start;margin:0 0 1.4rem;padding:0}
.pt-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;min-width:0}
.pt-step:not(:last-child)::after{content:"";position:absolute;top:11px;left:50%;width:100%;height:3px;background:var(--border);z-index:0}
.pt-step.done:not(:last-child)::after{background:var(--teal)}
.pt-dot{width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;position:relative;z-index:1;line-height:1}
.pt-step.done .pt-dot{background:var(--teal);border-color:var(--teal)}
.pt-step.current .pt-dot{box-shadow:0 0 0 4px var(--teal-light)}
.pt-label{font-size:12px;font-weight:600;margin-top:6px;color:var(--muted);line-height:1.3}
.pt-step.done .pt-label{color:var(--ink)}
.pt-date{font-size:12px;color:var(--muted);margin-top:2px}
@media(max-width:520px){.pt-label{font-size:12px}}
.commentaire{background:var(--cream);border-left:4px solid var(--teal-mid);padding:14px 18px;border-radius:0 8px 8px 0;font-style:italic;margin-bottom:1rem}
.share-row{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.3rem}
.share-btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:7px 14px;border-radius:100px;border:1.5px solid var(--border);background:#fff;color:var(--ink);cursor:pointer;text-decoration:none;font-family:inherit;transition:border-color .15s,color .15s}
.share-btn:hover{border-color:var(--teal);color:var(--teal)}
.share-btn:focus-visible{outline:2px solid var(--teal-mid);outline-offset:2px}
.share-btn svg{opacity:.85}
.reponse{background:#f0fdf4;border-left:4px solid var(--green);padding:14px 18px;border-radius:0 8px 8px 0;margin-bottom:1rem}
.reponse strong{color:var(--green)}
.section{background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:1.5rem;margin-bottom:1.5rem}
.section h2{font-family:'Syne',sans-serif;font-size:1.1rem;margin-bottom:1rem}
.conf-item{display:grid;grid-template-columns:60px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--border)}
.conf-item:last-child{border-bottom:none}
.conf-item .avatar{width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Syne',sans-serif}
.conf-item .nom{font-weight:600;font-size:14px}
.conf-item .date{font-size:12px;color:var(--muted);margin-left:8px;font-weight:400}
.conf-item .comm{font-size:14px;margin-top:4px}
.conf-item img{margin-top:8px;max-width:200px;border-radius:8px;cursor:zoom-in}
.form-row{margin-bottom:1rem}
label{display:block;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;font-weight:600}
textarea,input[type=file]{width:100%;padding:10px;border:1.5px solid var(--border);border-radius:8px;font-family:inherit;font-size:14px}
textarea{min-height:80px;resize:vertical}
button{background:var(--teal);color:#fff;padding:10px 22px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;font-family:'Syne',sans-serif}
button:hover{background:var(--teal-mid)}
.ok{background:#f0fdf4;color:var(--green);padding:10px;border-radius:8px;margin-bottom:1rem;font-size:13px;border-left:3px solid var(--green)}
/* #8 suivre un signalement */
.follow-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 1.2rem}
.follow-btn{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;padding:8px 16px;border-radius:100px;border:1.5px solid var(--teal);background:#fff;color:var(--teal);cursor:pointer;font-family:inherit;text-decoration:none;transition:all .15s;min-height:40px}
.follow-btn:hover{background:var(--teal-light)}
.follow-btn.following{background:var(--teal);color:#fff}
.follow-count{font-size:13px;color:var(--muted);font-weight:500}
.follow-hint{font-size:12px;color:var(--muted);flex-basis:100%}
/* #7 bandeau de remerciement */
.thankyou-banner{display:flex;gap:12px;align-items:flex-start;background:#ecfdf5;border:1.5px solid #6ee7b7;border-radius:12px;padding:14px 16px;margin-bottom:1.2rem;color:#065f46;line-height:1.5}
.thankyou-banner .ty-icon{font-size:1.6rem;line-height:1;flex-shrink:0}
.thankyou-banner strong{font-family:'Syne',sans-serif;font-size:1rem}
.err{background:#fef2f2;color:var(--red);padding:10px;border-radius:8px;margin-bottom:1rem;font-size:13px;border-left:3px solid var(--red)}
.fiche-banner{padding:14px 16px;border-radius:10px;margin-bottom:1rem;font-size:13.5px;display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.fiche-banner .icon{font-size:18px;flex-shrink:0}
.fiche-banner.pending{background:#fefce8;color:#713f12;border-left:3px solid #eab308}
.fiche-banner.rejected{background:#fef2f2;color:#7f1d1d;border-left:3px solid #dc2626}
.fiche-banner strong{font-weight:600}
.login-prompt{background:var(--teal-light);padding:1rem;border-radius:10px;text-align:center;font-size:14px}
.login-prompt a{color:var(--teal);font-weight:600;text-decoration:none}
/* Timeline (Lot 3) */
.timeline{position:relative;padding-left:8px}
.tl-item{display:grid;grid-template-columns:14px 1fr;gap:14px;padding:12px 0;position:relative}
.tl-item:not(:last-child)::before{content:"";position:absolute;left:6px;top:22px;bottom:-6px;width:2px;background:var(--border)}
.tl-dot{width:14px;height:14px;border-radius:50%;margin-top:6px;border:3px solid #fff;box-shadow:0 0 0 2px var(--border);position:relative;z-index:1}
.tl-body{padding-left:4px}
.tl-header{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}
.tl-status{font-weight:600;font-size:14px}
.tl-date{font-size:12px;color:var(--muted)}
.tl-comment{margin-top:6px;font-size:13.5px;color:var(--ink);background:var(--cream);padding:8px 12px;border-radius:0 8px 8px 0;border-left:2px solid var(--teal-mid);font-style:italic}
.resolution-block{background:#d1fae5;border:1.5px solid #6ee7b7;border-radius:12px;padding:1rem 1.2rem;margin:1.2rem 0;color:#065f46}
.resolution-header{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:.8rem}
.resolution-icon{font-size:1.6rem;line-height:1}
.resolution-title{font-family:'Syne',sans-serif;font-size:1.1rem;margin:0;color:#065f46}
.resolution-subtitle{font-size:12px;color:#047857;margin-top:2px}
.resolution-photo{display:block;width:100%;max-width:520px;border-radius:8px;cursor:zoom-in;border:2px solid #6ee7b7}
.resolution-comment{font-size:13.5px;color:#047857;font-style:italic;margin-top:.7rem;line-height:1.5}
/* #16 mini-carte + #20 liens cartographie */
.mini-map{height:220px;border-radius:12px;border:1.5px solid var(--border);margin:.4rem 0 .8rem;overflow:hidden;background:var(--teal-light)}
.mini-map .leaflet-control-attribution{font-size:12px}
.map-links{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:13px;margin-bottom:.4rem}
.map-links-label{color:var(--muted)}
.map-links a{color:var(--teal);text-decoration:none;font-weight:500;min-height:24px;display:inline-flex;align-items:center}
.map-links a:hover{text-decoration:underline}
.gps-coords{font-size:12px;color:var(--muted)}
.gps-coords span{font-family:monospace}
/* Styles auparavant en attributs style= (#33) */
.cat-pill{color:var(--cat,var(--ink));color:color-mix(in srgb,var(--cat,#1A1A18) 80%,#000);background:color-mix(in srgb,var(--cat,#000) 8%,#fff)}
.status-pill{color:var(--st,var(--ink));border-color:color-mix(in srgb,var(--st,#000) 20%,#fff);background:color-mix(in srgb,var(--st,#000) 7%,#fff)}
.tl-dot{background:var(--st,#4B5563)}
.tl-status{color:var(--st,#4B5563)}
.ref-code{font-family:monospace;font-size:12px}
.follow-form{display:inline}
.muted{color:var(--muted)}
.form-hint{color:var(--muted);font-size:12px;display:block;margin-top:4px}
.badge-emoji{font-size:14px}
.tl-delete-form{margin-top:6px;display:inline}
.tl-delete-btn{background:none;border:1px solid #fca5a5;color:#991B1B;cursor:pointer;font-size:12px;padding:3px 8px;border-radius:4px;margin-top:4px;font-family:inherit;font-weight:500}
.tl-delete-btn:hover{background:#fef2f2}
.main-photo-btn,.thumb-btn,.resolution-photo-btn,.conf-photo-btn{border-radius:0}
.thumb-btn{border-radius:6px;flex-shrink:0}
.resolution-photo-btn{border-radius:8px}
.conf-photo-btn{margin-top:8px;border-radius:8px}
.conf-item .conf-photo-btn img{margin-top:0}
.scp-pin-mini{width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:3px solid #fff;box-shadow:0 0 0 1.5px rgba(17,24,39,.85),0 3px 8px rgba(0,0,0,.45);background:var(--cat,#6B6B63)}
.scp-marker{background:none!important;border:none!important}

.main-photo-btn{width:100%}