/* ==========================================================================
   Espace public ESURSI — composants (assistant, statistiques, procédure)
   Complète app.css (charte RDC) et tailwind.css (utilitaires compilés)
   ========================================================================== */

/* --- Accessibilité ------------------------------------------------------ */
.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--rdc-blue-navy); color: #fff; padding: .6rem 1rem; border-radius: 4px; font-weight: 600;
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--rdc-yellow); outline-offset: 2px; }
main:focus { outline: none; }
.sr-only-focusable { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* --- En-têtes de page --------------------------------------------------- */
.page-hero {
  background: linear-gradient(180deg, var(--rdc-sky-soft), var(--rdc-mist));
  border-bottom: 1px solid #e2e8f0;
}

/* --- Champs ------------------------------------------------------------- */
.field-help { font-size: .75rem; color: var(--rdc-muted); margin-top: .35rem; }
.field-error { font-size: .8rem; color: var(--rdc-red-dark); margin-top: .35rem; font-weight: 600; }

/* --- Assistant ---------------------------------------------------------- */
.wizard { display: flex; flex-direction: column; gap: 1.5rem; }
.wizard-panel { padding: 1.5rem; border: 0; min-width: 0; }
@media (min-width: 640px) { .wizard-panel { padding: 2rem; } }
.wizard-legend { display: flex; align-items: center; gap: .75rem; font-weight: 700; font-size: 1.15rem; color: var(--rdc-blue-deep); margin-bottom: .75rem; float: left; width: 100%; }
.wizard-legend + * { clear: both; }
.wizard-legend-num {
  display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--rdc-blue-deep); color: #fff; font-size: .9rem; flex-shrink: 0;
}
.wizard-help { color: var(--rdc-muted); font-size: .9rem; margin-bottom: 1rem; clear: both; }

/* Progressive enhancement : UI assistant uniquement avec Alpine */
.wizard:not(.is-enhanced) .wizard-js-only { display: none !important; }
.wizard.is-enhanced .wizard-nojs-only { display: none !important; }
/* Sans JS : masquer identité si anonyme, précision si pas « Autres » */
.wizard:has(input[name="type_signalement"][value="anonyme"]:checked) [data-identity-wrap] { display: none !important; }
.wizard:not(:has(input[name="categorie_id"][data-requiert-precision="1"]:checked)) [data-precision-wrap] { display: none !important; }

.wizard-steps { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem; position: relative; }
.wizard-progress { height: 4px; background: #e2e8f0; border-radius: 4px; margin-bottom: .9rem; overflow: hidden; }
.wizard-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--rdc-blue), var(--rdc-yellow)); transition: width .3s; }
.wizard-steps ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) { .wizard-steps ol { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.wizard-step-btn { display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 100%; padding: .25rem; background: none; border: 0; cursor: pointer; color: var(--rdc-muted); font-size: .72rem; text-align: center; }
.wizard-step-btn:disabled { cursor: not-allowed; opacity: .55; }
.wizard-step-num { width: 1.9rem; height: 1.9rem; border-radius: 999px; border: 2px solid #cbd5e1; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: #fff; }
.wizard-step-btn.is-done .wizard-step-num { border-color: var(--rdc-blue-deep); color: var(--rdc-blue-deep); }
.wizard-step-btn.is-current { color: var(--rdc-blue-deep); font-weight: 700; }
.wizard-step-btn.is-current .wizard-step-num { background: var(--rdc-blue-deep); border-color: var(--rdc-blue-deep); color: #fff; }
.wizard-step-label { line-height: 1.15; }
.wizard-nav { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.cat-choices { display: grid; gap: .75rem; }
@media (min-width: 640px) { .cat-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cat-choice, .mode-choice, .gravite-choice {
  display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border: 1.5px solid #e2e8f0; border-radius: 8px;
  cursor: pointer; background: #fff; transition: border-color .15s, background .15s;
}
.cat-choice:hover, .mode-choice:hover, .gravite-choice:hover { border-color: var(--rdc-blue); }
.cat-choice:has(input:checked), .mode-choice:has(input:checked), .gravite-choice:has(input:checked) { border-color: var(--rdc-blue-deep); background: var(--rdc-sky-soft); }
.cat-choice input, .mode-choice input, .gravite-choice input { margin-top: .2rem; accent-color: var(--rdc-blue-deep); }
.cat-choice-title { display: block; font-weight: 700; color: var(--rdc-blue-deep); }
.cat-choice-desc { display: block; font-size: .8rem; color: var(--rdc-muted); margin-top: .15rem; }
.gravite-critique:has(input:checked) { border-color: var(--rdc-red); background: #fef2f2; }
.gravite-elevee:has(input:checked) { border-color: #ea580c; background: #fff7ed; }

.choice-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border: 1.5px solid #e2e8f0; border-radius: 999px; cursor: pointer; font-size: .9rem; background: #fff; }
.choice-pill:has(input:checked) { border-color: var(--rdc-blue-deep); background: var(--rdc-sky-soft); color: var(--rdc-blue-deep); font-weight: 600; }

/* Combobox établissement (recherche + sélection) */
.etab-combobox { position: relative; }
.etab-combobox.is-enhanced .etab-combobox-select { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.etab-combobox:not(.is-enhanced) .etab-combobox-input,
.etab-combobox:not(.is-enhanced) .etab-combobox-list { display: none; }
.etab-combobox-input { width: 100%; }
.etab-combobox-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + .25rem);
  max-height: 16rem; overflow: auto; margin: 0; padding: .25rem;
  list-style: none; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}
.etab-combobox-option {
  display: block; width: 100%; text-align: left; padding: .55rem .75rem; border: 0; border-radius: 6px;
  background: transparent; cursor: pointer; font-size: .9rem; color: var(--rdc-blue-deep);
}
.etab-combobox-option:hover,
.etab-combobox-option.is-active { background: var(--rdc-sky-soft); }
.etab-combobox-option.is-selected { font-weight: 700; }
.etab-combobox-option .etab-option-meta { display: block; font-size: .75rem; color: var(--rdc-muted); font-weight: 400; margin-top: .1rem; }
.etab-combobox-empty { padding: .75rem; font-size: .85rem; color: var(--rdc-muted); }

.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; padding: 2rem 1rem; border: 2px dashed #94a3b8; border-radius: 8px; background: var(--rdc-mist); cursor: pointer; text-align: center; }
.dropzone:focus-within, .dropzone.is-dragover { border-color: var(--rdc-blue-deep); background: var(--rdc-sky-soft); }
.draft-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .85rem 1rem; border: 1px solid #fde68a; background: #fffbeb; border-radius: 8px;
  font-size: .875rem; color: #92400e;
}
.file-list { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.file-list li, .file-item {
  display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem;
  border: 1px solid #e2e8f0; border-radius: 6px; font-size: .875rem; background: #fff;
}
.file-preview {
  width: 3rem; height: 3rem; border-radius: 6px; overflow: hidden; flex-shrink: 0;
  background: var(--rdc-mist); border: 1px solid #e2e8f0;
  display: flex; align-items: center; justify-content: center;
}
.file-thumb { width: 100%; height: 100%; object-fit: cover; }
.file-ext {
  font-size: .65rem; font-weight: 700; letter-spacing: .04em; color: var(--rdc-blue-deep);
}

/* --- Messagerie Phase 3 ------------------------------------------------- */
.message-thread { display: flex; flex-direction: column; gap: .75rem; }
.message-bubble {
  max-width: min(100%, 36rem); padding: .75rem 1rem; border-radius: 10px;
  border: 1px solid #e2e8f0; background: #fff; font-size: .9rem;
}
.message-bubble.is-mine { align-self: flex-end; background: var(--rdc-sky-soft); border-color: #bfdbfe; }
.message-bubble.is-theirs { align-self: flex-start; background: #f8fafc; }
.message-meta { display: flex; justify-content: space-between; gap: 1rem; font-size: .72rem; color: var(--rdc-muted); margin-bottom: .35rem; }
.message-attachments { margin-top: .5rem; font-size: .8rem; list-style: disc; padding-left: 1.1rem; }
.message-attachments a { color: var(--rdc-blue-deep); text-decoration: underline; }

.recap { display: flex; flex-direction: column; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; }
.recap-row { display: grid; grid-template-columns: 1fr; gap: .2rem; padding: .75rem 1rem; border-top: 1px solid #f1f5f9; font-size: .9rem; }
.recap-row:first-child { border-top: 0; }
.recap-row dt { font-weight: 600; color: var(--rdc-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.recap-row dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
@media (min-width: 640px) { .recap-row { grid-template-columns: 11rem 1fr auto; align-items: start; } }

/* --- Statistiques publiques -------------------------------------------- */
.stat-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.25rem; }
.stat-card-value { font-size: 2rem; font-weight: 700; color: var(--rdc-blue-deep); line-height: 1.1; }
.stat-card-label { font-size: .85rem; color: var(--rdc-muted); margin-top: .25rem; }
.bar-list { display: flex; flex-direction: column; gap: .6rem; }
.bar-row { display: grid; grid-template-columns: minmax(7rem, 14rem) 1fr 3.5rem; gap: .75rem; align-items: center; font-size: .875rem; }
.bar-track { height: .7rem; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--rdc-blue-deep), var(--rdc-blue)); border-radius: 999px; }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.chart-cols { display: flex; align-items: flex-end; gap: .35rem; height: 160px; padding-top: 1rem; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .3rem; min-width: 0; }
.chart-col-bar { width: 100%; max-width: 2.25rem; background: var(--rdc-blue-deep); border-radius: 4px 4px 0 0; min-height: 2px; }
.chart-col-label { font-size: .65rem; color: var(--rdc-muted); white-space: nowrap; }

/* --- Procédure ---------------------------------------------------------- */
.timeline { position: relative; display: flex; flex-direction: column; gap: 1.25rem; padding-left: 2.75rem; }
.timeline::before { content: ''; position: absolute; left: 1rem; top: .5rem; bottom: .5rem; width: 2px; background: linear-gradient(var(--rdc-blue), var(--rdc-yellow)); }
.timeline-item { position: relative; }
.timeline-dot { position: absolute; left: -2.75rem; top: 0; width: 2rem; height: 2rem; border-radius: 999px; background: #fff; border: 2px solid var(--rdc-blue-deep); color: var(--rdc-blue-deep); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }

/* --- Impression (accusé de réception) ----------------------------------- */
@media print {
  .site-topbar, .site-header, .site-footer, .skip-link, .no-print, [data-flash] { display: none !important; }
  body { background: #fff !important; }
  .card-panel { box-shadow: none !important; border: 1px solid #94a3b8 !important; }
  a[href]::after { content: none !important; }
}