/* ═══════════════════════════════════════════════════════
   WP Signalement Citoyen — Frontend v1.0.7
   ═══════════════════════════════════════════════════════ */
:root {
  --wsc-color:        #185FA5;
  --wsc-color-dark:   #0f4a82;
  --wsc-color-light:  #E8F2FB;
  --wsc-color-mid:    #b5d4f4;
  --wsc-success:      #1e8449;
  --wsc-success-bg:   #eafaf1;
  --wsc-error:        #a93226;
  --wsc-error-bg:     #fdedec;
  --wsc-radius:       10px;
  --wsc-radius-lg:    14px;
  --wsc-border:       1px solid #e2e8f0;
  --wsc-shadow:       0 2px 8px rgba(0,0,0,.07);
  --wsc-shadow-focus: 0 0 0 3px rgba(24,95,165,.18);
  --wsc-text:         #1a202c;
  --wsc-text-muted:   #64748b;
  --wsc-bg:           #f8fafc;
}

.wsc-wrap { max-width: 860px; margin: 0 auto; font-family: inherit; color: var(--wsc-text); }

.wsc-form-card {
  background: var(--wsc-bg, #fff);
  border: var(--wsc-border);
  border-radius: var(--wsc-radius-lg);
  box-shadow: var(--wsc-shadow);
  padding: 2rem 2.5rem;
}

.wsc-form-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: var(--wsc-border);
}
.wsc-form-header-icon {
  width: 46px; height: 46px; background: var(--wsc-color);
  border-radius: 12px; display: flex; align-items: center;
  justify-content: center; font-size: 22px; flex-shrink: 0;
}
.wsc-form-header-title { font-size: 20px; font-weight: 600; margin: 0 0 2px; }
.wsc-form-header-sub   { font-size: 13px; color: var(--wsc-text-muted); margin: 0; }

.wsc-field { margin-bottom: 1.5rem; }
.wsc-label {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--wsc-text-muted); margin-bottom: 8px;
}
.wsc-req      { color: #e53e3e; }
.wsc-optional { font-weight: 400; color: #a0aec0; font-size: 11px; text-transform: none; letter-spacing: 0; }

.wsc-input, .wsc-textarea {
  width: 100%; padding: 11px 14px;
  border: 1.5px solid #e2e8f0; border-radius: var(--wsc-radius);
  font-size: 15px; box-sizing: border-box;
  transition: border-color .18s, box-shadow .18s;
  background: #fff; color: var(--wsc-text);
}
.wsc-input:focus, .wsc-textarea:focus {
  outline: none; border-color: var(--wsc-color); box-shadow: var(--wsc-shadow-focus);
}
.wsc-input::placeholder, .wsc-textarea::placeholder { color: #c0cada; }
.wsc-textarea { resize: vertical; min-height: 100px; line-height: 1.6; }
.wsc-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.wsc-section-sep {
  display: flex; align-items: center; gap: 12px;
  margin: 1.75rem 0 1.5rem;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--wsc-text-muted);
}
.wsc-section-sep::before, .wsc-section-sep::after {
  content: ''; flex: 1; height: 1px; background: #e2e8f0;
}

.wsc-cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.wsc-cat-item {
  display: flex; flex-direction: column; align-items: center;
  border: 1.5px solid #e2e8f0; border-radius: var(--wsc-radius);
  padding: 14px 6px 10px; cursor: pointer;
  transition: all .18s; text-align: center; background: var(--wsc-bg, #fff);
}
.wsc-cat-item:hover {
  border-color: var(--wsc-color-mid); background: var(--wsc-color-light);
  transform: translateY(-2px); box-shadow: 0 4px 12px rgba(24,95,165,.12);
}
.wsc-cat-item input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.wsc-cat-item:has(input:checked), .wsc-cat-item.selected {
  border-color: var(--wsc-color); background: var(--wsc-color-light);
  box-shadow: 0 0 0 3px rgba(24,95,165,.15);
}
.wsc-cat-icon { font-size: 28px; margin-bottom: 6px; line-height: 1; display: block; }
.wsc-cat-name { font-size: 11px; font-weight: 600; color: var(--wsc-text-muted); }

.wsc-adresse-row { display: flex; gap: 8px; margin-bottom: 8px; }
.wsc-adresse-row .wsc-input { flex: 1; }
.wsc-btn-geo {
  padding: 0 14px; border: 1.5px solid #e2e8f0;
  border-radius: var(--wsc-radius); background: #f8fafc;
  cursor: pointer; font-size: 18px; transition: all .15s; min-width: 46px;
}
.wsc-btn-geo:hover { border-color: var(--wsc-color); background: var(--wsc-color-light); }
#wsc-geo-feedback { min-height: 20px; margin-bottom: 6px; font-size: 12px; }
.wsc-map {
  height: 280px; border-radius: var(--wsc-radius);
  border: 1.5px solid #e2e8f0; margin-bottom: 8px; overflow: hidden;
}
.wsc-hint { font-size: 12px; color: var(--wsc-text-muted); margin: 0; line-height: 1.6; }

.wsc-upload-zone {
  border: 2px dashed #d1dde8; border-radius: var(--wsc-radius);
  padding: 32px 20px; text-align: center; background: var(--wsc-bg, #f8fafc);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  transition: all .18s;
}
.wsc-upload-zone:hover { border-color: var(--wsc-color-mid); background: var(--wsc-color-light); }
.wsc-upload-icon { font-size: 36px; line-height: 1; opacity: .65; }
.wsc-upload-text { font-size: 14px; color: var(--wsc-text-muted); font-weight: 500; }
.wsc-photo-btns  { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.wsc-photo-btn-wrap {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  border-radius: 30px;
}
.wsc-photo-btn-wrap .wsc-photo-btn {
  pointer-events: none;
}
.wsc-photo-input-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}
.wsc-photo-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 22px; border: 1.5px solid var(--wsc-color);
  border-radius: 30px; color: var(--wsc-color);
  font-size: 13px; font-weight: 600; cursor: pointer;
  background: #fff; transition: all .18s;
}
.wsc-photo-btn:hover {
  background: var(--wsc-color); color: #fff;
  box-shadow: 0 4px 14px rgba(24,95,165,.28);
}
.wsc-drop-zone {
  border: 1.5px dashed #d1dde8; border-radius: var(--wsc-radius);
  padding: 10px 16px; text-align: center;
  font-size: 12px; color: #a0aec0; margin-top: 6px; transition: all .18s;
}
.wsc-drop-zone.wsc-drag-over { border-color: var(--wsc-color); background: var(--wsc-color-light); color: var(--wsc-color); }
.wsc-photo-preview-img {
  max-width: 100%; max-height: 240px;
  border-radius: var(--wsc-radius); margin-bottom: 10px; display: block;
  box-shadow: var(--wsc-shadow);
}
.wsc-btn-remove {
  background: #fff; border: 1.5px solid #fca5a5; color: #dc2626;
  border-radius: 30px; padding: 7px 18px; cursor: pointer;
  font-size: 13px; font-weight: 500; transition: all .15s;
}
.wsc-btn-remove:hover { background: #fef2f2; }

.wsc-details { border: 1.5px solid #e2e8f0; border-radius: var(--wsc-radius); overflow: hidden; margin-bottom: 1.5rem; }
.wsc-summary {
  cursor: pointer; padding: 14px 16px; background: var(--wsc-bg, #f8fafc);
  list-style: none; display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--wsc-text-muted);
}
.wsc-summary::-webkit-details-marker { display: none; }
.wsc-summary::before { content: '▶'; font-size: 9px; transition: transform .2s; }
details[open] .wsc-summary::before { transform: rotate(90deg); }
.wsc-details-inner { padding: 16px 16px 4px; }

.wsc-btn-submit {
  width: 100%; padding: 16px; background: var(--wsc-color); color: #fff;
  border: none; border-radius: var(--wsc-radius);
  font-size: 16px; font-weight: 600; cursor: pointer;
  transition: all .2s; letter-spacing: .02em;
  box-shadow: 0 4px 14px rgba(24,95,165,.3);
}
.wsc-btn-submit:hover {
  background: var(--wsc-color-dark);
  box-shadow: 0 6px 20px rgba(24,95,165,.4);
  transform: translateY(-1px);
}
.wsc-btn-submit:active { transform: none; }
.wsc-btn-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }
.wsc-rgpd { font-size: 12px; color: var(--wsc-text-muted); text-align: center; margin-top: 10px; }

.wsc-notice {
  padding: 14px 18px; border-radius: var(--wsc-radius);
  margin-bottom: 1.25rem; font-size: 14px; line-height: 1.6;
}
.wsc-notice--success { background: var(--wsc-success-bg); border: 1px solid #a9dfbf; color: var(--wsc-success); }
.wsc-notice--error   { background: var(--wsc-error-bg);   border: 1px solid #f5b7b1; color: var(--wsc-error); }
.wsc-notice--info    { background: var(--wsc-color-light); border: 1px solid var(--wsc-color-mid); color: var(--wsc-color); }

.wsc-badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.wsc-badge--new    { background:#E6F1FB; color:#185FA5; }
.wsc-badge--wip    { background:#FAEEDA; color:#854F0B; }
.wsc-badge--done   { background:#EAF3DE; color:#3B6D11; }
.wsc-badge--closed { background:#F1EFE8; color:#5F5E5A; }

.wsc-suivi-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.25rem; }
.wsc-suivi-title  { font-size:22px; font-weight:700; margin:0 0 4px; }
.wsc-suivi-meta   { font-size:13px; color:var(--wsc-text-muted); margin:0; }
.wsc-suivi-desc   { font-size:15px; line-height:1.75; margin-bottom:1.25rem; color:#374151; }
.wsc-suivi-photo  { margin-bottom:1.25rem; }
.wsc-suivi-photo-img { max-width:100%; border-radius:var(--wsc-radius); box-shadow:var(--wsc-shadow); }
.wsc-suivi-section { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--wsc-text-muted); margin-bottom:.75rem; }
.wsc-progress-bar  { height:8px; background:#e2e8f0; border-radius:4px; overflow:hidden; margin-bottom:4px; }
.wsc-progress-fill { height:100%; background:linear-gradient(90deg, var(--wsc-color), #378ADD); border-radius:4px; transition:width .6s ease; }
.wsc-progress-label { font-size:12px; color:var(--wsc-text-muted); text-align:right; margin-bottom:1.25rem; }
.wsc-timeline { display:flex; flex-direction:column; }
.wsc-tl-item { display:flex; gap:14px; padding-bottom:20px; position:relative; }
.wsc-tl-item:not(:last-child)::before { content:''; position:absolute; left:12px; top:30px; bottom:0; width:2px; background:#e2e8f0; border-radius:1px; }
.wsc-tl-dot { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.wsc-tl-done   .wsc-tl-dot { background:#EAF3DE; color:#3B6D11; border:2px solid #639922; }
.wsc-tl-active .wsc-tl-dot { background:#E6F1FB; color:#185FA5; border:2px solid #378ADD; box-shadow:0 0 0 3px rgba(24,95,165,.12); }
.wsc-tl-pending .wsc-tl-dot { background:#f8fafc; color:#cbd5e1; border:2px solid #e2e8f0; }
.wsc-tl-title  { font-size:14px; font-weight:600; }
.wsc-tl-date   { font-size:12px; color:var(--wsc-text-muted); margin-top:3px; }
.wsc-tl-pending-txt { font-style:italic; }
.wsc-note-mairie { background:#fffbe6; border:1px solid #f5d87e; border-radius:var(--wsc-radius); padding:14px 16px; margin-top:1rem; font-size:14px; line-height:1.6; }

@media (max-width: 860px) {
  .wsc-form-card { padding: 1.5rem; }
  .wsc-cat-grid  { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .wsc-form-card { padding: 1.25rem 1rem; }
  .wsc-cat-grid  { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .wsc-row-2     { grid-template-columns: 1fr; }
  .wsc-suivi-header { flex-direction: column; gap: 10px; }
  .wsc-map { height: 220px; }
  .wsc-btn-submit { font-size: 15px; padding: 14px; }
}
@media (max-width: 380px) {
  .wsc-photo-btns { flex-direction: column; align-items: stretch; }
  .wsc-photo-btn  { justify-content: center; }
}