@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ============================================================
   Systeme visuel : clarte avant tout.
   - Une seule police (Inter), une echelle disciplinee a 4-5 tailles.
   - Une seule couleur d'accent, reservee aux actions et a l'etat
     selectionne. Succes/avertissement/erreur reserves au sens
     metier, jamais decoratifs.
   - Fond blanc, cartes a peine distinguees du fond, bordures fines,
     rayon discret (8px), pas d'ombre.
   ============================================================ */
:root {
  --bg: #FFFFFF;
  --surface: #FAFAFA;
  --ink: #111827;
  --muted: #6B7280;
  --line: #E5E7EB;
  --line-strong: #D1D5DB;
  --accent: #2563EB;
  --accent-soft: #EFF6FF;
  --success: #16A34A;
  --success-soft: #F0FDF4;
  --warning: #D97706;
  --warning-soft: #FFFBEB;
  --danger: #DC2626;
  --danger-soft: #FEF2F2;
  --radius: 8px;
  --max-w: 680px;          /* connexion, confirmation */
  --max-w-medium: 920px;   /* formulaires, guide */
  --max-w-wide: 1240px;    /* tableau de bord, fiche dossier, plateforme */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::placeholder { color: var(--muted); opacity: 1; }

.page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 40px 24px 96px;
}
.page--medium { max-width: var(--max-w-medium); }
.page--wide { max-width: var(--max-w-wide); padding-left: 32px; padding-right: 32px; }

/* Pages larges : on profite de la place pour les tableaux et les grilles
   d'indicateurs, mais le texte courant garde une longueur de ligne lisible
   et les graphiques ne grossissent pas indefiniment (leur hauteur suit leur
   largeur via le viewBox). */
.page--wide p, .page--wide li { max-width: 90ch; }
.page--wide .stat-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.page--wide svg { max-width: 980px; }

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 36px;
}

.masthead__title {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
}

.masthead__sub {
  font-size: 13px;
  color: var(--muted);
}

h1 {
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

h2 {
  font-weight: 600;
  font-size: 16px;
  margin: 0 0 6px;
}

p.lede {
  color: var(--muted);
  font-size: 14px;
  max-width: 60ch;
  margin: 0 0 32px;
}

.section {
  display: flex;
  gap: 16px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.section:first-of-type { border-top: none; padding-top: 0; }

.section__number {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  width: 26px;
  flex-shrink: 0;
  padding-top: 3px;
}

.section__body { flex: 1; min-width: 0; }

.section__hint {
  color: var(--muted);
  font-size: 13px;
  margin: 2px 0 16px;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 5px;
}

.field .unit {
  color: var(--muted);
  font-weight: 400;
  font-size: 12px;
}

.field-row {
  display: flex;
  gap: 14px;
}
.field-row .field { flex: 1; }

input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=password], select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
}
input:focus, select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
select:disabled, input:disabled {
  opacity: 1;
  color: var(--ink);
  background: var(--surface);
  -webkit-text-fill-color: var(--ink);
  cursor: default;
}

.field small.help {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 5px;
}

.radio-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.radio-pill {
  position: relative;
}
.radio-pill input {
  position: absolute;
  opacity: 0;
}
.radio-pill label {
  display: block;
  padding: 8px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--muted);
  margin: 0;
}
.radio-pill input:checked + label {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.radio-pill input:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.file-drop {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 18px;
  background: var(--surface);
}
.file-drop input[type=file] {
  font-size: 13px;
  width: 100%;
}

.error-text {
  color: var(--danger);
  font-size: 12px;
  margin-top: 5px;
}
.field.has-error input, .field.has-error .file-drop {
  border-color: var(--danger);
}

.conditional { display: none; }
.conditional.is-visible { display: block; }

.ai-extract-box {
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-top: 10px;
}
.extract-status {
  font-size: 12px;
  margin-top: 8px;
  min-height: 1em;
}
.extract-status--pending { color: var(--muted); }
.extract-status--success { color: var(--accent); font-weight: 500; }
.extract-status--error { color: var(--danger); }

.submit-row {
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

button.primary, a.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button.primary:hover, a.btn-primary:hover { background: #1D4ED8; }

button.secondary {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 9px 19px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
button.secondary:hover { border-color: var(--muted); }

a.link { color: var(--accent); font-size: 14px; text-decoration: none; font-weight: 500; }
a.link:hover { text-decoration: underline; }

.disclaimer {
  color: var(--muted);
  font-size: 12px;
  margin-top: 14px;
  max-width: 55ch;
}

/* Confirmation page */
.confirmation {
  text-align: left;
  padding: 50px 0;
}
.confirmation h1 { margin-bottom: 18px; }

/* Dashboard */
table.dossiers {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.dossiers th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  user-select: none;
  font-size: 12px;
  text-transform: none;
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--line);
}
table.dossiers th:hover { color: var(--ink); }
table.dossiers th:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
table.dossiers th[data-sort-dir="asc"]::after { content: " \25B2"; font-size: 9px; }
table.dossiers th[data-sort-dir="desc"]::after { content: " \25BC"; font-size: 9px; }
.chart-bar { cursor: pointer; transition: filter 0.15s; }
table.dossiers td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.dossiers tr:last-child td { border-bottom: none; }
table.dossiers tr:hover { background: var(--surface); }
table.dossiers a { color: var(--ink); text-decoration: none; font-weight: 500; }
table.dossiers a:hover { color: var(--accent); }
table.dossiers td.num, table.dossiers th.num { text-align: right; }

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}
/* Couleurs de texte legerement foncees par rapport aux tokens de base,
   verifiees a 4.5:1 minimum (AA, texte normal) sur leur fond teinte. */
.badge--ok { background: var(--success-soft); color: #12843C; }
.badge--erreur { background: var(--danger-soft); color: #DA2323; }
.badge--recue { background: #F3F4F6; color: var(--muted); }
.badge--attention { background: var(--warning-soft); color: #AC5F05; }

/* Result page */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 18px 0 28px;
}
.stat {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--surface);
}
.stat__label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 5px;
}
.stat__value {
  font-size: 22px;
  font-weight: 600;
}
.stat__value .unit {
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
}

.warning-box {
  background: var(--danger-soft);
  border: 1px solid #F9D2D2;
  color: var(--danger);
  padding: 13px 15px;
  border-radius: var(--radius);
  font-size: 13px;
  margin: 14px 0;
}
.info-box {
  background: var(--accent-soft);
  border: 1px solid #DBEAFE;
  padding: 13px 15px;
  border-radius: var(--radius);
  font-size: 13px;
  margin: 14px 0;
}

/* Panneau generique (formule de calcul, note technique) */
.calc-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 12px 0;
}
.calc-formula {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  background: #fff;
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 4px;
  display: inline-block;
  font-size: 13px;
  margin: 3px 0;
}

/* Tableau des sources et etapes de calcul */
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.data th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  font-size: 11.5px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-strong);
}
table.data td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data tr:last-child td { border-bottom: none; }
table.data td.num, table.data th.num { text-align: right; }
.table-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

details > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "+ "; color: var(--accent); }
details[open] > summary::before { content: "\2212 "; }
details[open] > summary { margin-bottom: 12px; }

dl.meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 20px;
  font-size: 14px;
}
dl.meta dt { color: var(--muted); }
dl.meta dd { margin: 0; }

@media (max-width: 520px) {
  .section { flex-direction: column; gap: 6px; }
  .stat-grid { grid-template-columns: 1fr; }
  .field-row { flex-direction: column; }
  .page--wide { padding-left: 24px; padding-right: 24px; }
}

/* Guide de demarrage */
.guide-hero {
  background: var(--accent-soft); border: 1px solid #DBEAFE; border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 28px;
}
.guide-step {
  display: flex; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line);
}
.guide-step:first-of-type { border-top: none; }
.guide-step.is-done { opacity: 0.55; }
.guide-step__badge {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.guide-step.is-done .guide-step__badge { background: var(--success); }
.guide-step__body { flex: 1; min-width: 0; }
.guide-step__why { color: var(--muted); font-size: 13.5px; margin: 6px 0 12px; }
.guide-chart-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 8px;
  margin: 16px 0; background: #fff;
}
.guide-chart-card__caption { font-size: 12px; color: var(--muted); margin: 8px 0 4px; }
.guide-reference {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-top: 12px;
}
.guide-reference dt { font-weight: 600; font-size: 13.5px; margin-top: 10px; }
.guide-reference dd { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
@media (max-width: 560px) {
  .guide-reference { grid-template-columns: 1fr; }
  .guide-step { flex-direction: column; gap: 8px; }
}

/* Connexion (page d'accueil du site) : présentation à gauche, carte de
   connexion à droite ; empilées sur téléphone. */
.page--auth { max-width: 1080px; padding-top: 0; padding-bottom: 0; }
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 64px;
  padding: 48px 0;
}
.auth__brand { font-weight: 600; font-size: 18px; letter-spacing: -0.01em; margin-bottom: 28px; }
.auth__headline { font-size: 30px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 32px; max-width: 18em; }
.auth__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.auth__points li { padding-left: 18px; border-left: 2px solid var(--line); }
.auth__point-title { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 2px; }
.auth__point-text { display: block; color: var(--muted); font-size: 14px; max-width: 34em; }
.auth__version { color: var(--muted); font-size: 11px; margin-top: 40px; }
.auth__panel { display: flex; flex-direction: column; align-items: center; }
.auth__brand--mobile { display: none; }
.auth__card {
  width: 100%;
  max-width: 400px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px;
  background: var(--bg);
}
.auth__title { font-size: 20px; margin: 0 0 4px; }
.auth__subtitle { color: var(--muted); font-size: 14px; margin: 0 0 24px; }
.auth__submit { width: 100%; padding: 11px 20px; margin-top: 8px; }
.auth__help { color: var(--muted); font-size: 12.5px; margin: 20px 0 0; text-align: center; }

@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; gap: 32px; min-height: 0; padding: 32px 0 56px; }
  .auth__panel { order: -1; align-items: stretch; }
  .auth__brand--mobile { display: block; margin-bottom: 16px; }
  .auth__intro .auth__brand { display: none; }
  .auth__headline { font-size: 24px; margin-bottom: 24px; }
  .auth__brand { margin-bottom: 16px; }
  .auth__card { max-width: none; padding: 24px; }
  .auth__version { margin-top: 24px; }
}