/* Atelier de chiffrage — curseurs travaux + statut fiscal.
   Réutilise les tokens de dossier_v2.css (--c-*, --rad, --f-mono) : l'atelier
   est une section de la fiche, pas un widget à part. Écrit à la main plutôt
   qu'en Tailwind, comme le reste du dossier. */

.atelier {
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  /* Même rayon que les autres cartes du dossier ; overflow hidden pour que
     le bandeau d'en-tête épouse les coins sans encoche. */
  border-radius: var(--blk-radius, var(--rad));
  overflow: hidden;
  padding: 16px 18px;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.atelier__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  /* En-tête blanc intégré (2026-08-23 soir), à bord perdu : les marges
     négatives compensent le padding de la carte (16px 18px). Filet doux +
     court trait émeraude, hauteur réduite. */
  /* la carte espace ses enfants par gap:16px — le -9px ramène l'espace sous
     l'en-tête au rythme commun de 7px sans toucher le gap des blocs. */
  margin: -16px -18px -9px;
  padding: 10px 20px 6px;
  background: var(--c-panel);
}
.atelier__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--c-accent-strong); }
.atelier__sub {
  margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--c-muted);
  max-width: 62ch;
}
.atelier__reset {
  flex: none; font-size: 11px; font-weight: 600;
  color: var(--c-muted); background: var(--c-bg);
  border: 1px solid var(--c-border); border-radius: var(--rad);
  padding: 5px 10px; cursor: pointer;
}
.atelier__reset:hover { color: var(--c-ink); border-color: var(--c-border-strong); }
.atelier__reset.is-hidden { display: none; }

.atelier__block {
  border: 1px solid var(--c-border); border-radius: var(--rad);
  padding: 13px 14px; background: var(--c-bg);
}
.atelier__block-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.atelier__block-t { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--c-ink); }
.atelier__millesime {
  font-family: var(--f-mono); font-size: 10px; color: var(--c-muted);
}
.atelier__total {
  font-family: var(--f-mono); font-size: 15px; font-weight: 700; color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

/* --- Statut fiscal --- */
.atelier__profils { display: flex; flex-wrap: wrap; gap: 8px; }
.atelier__profil {
  flex: 1 1 220px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; background: var(--c-panel);
  border: 1px solid var(--c-border); border-radius: var(--rad);
}
.atelier__profil:hover { border-color: var(--c-border-strong); }
/* Sélection : contour + encre, sans aplat (arbitrage 2026-08-22). Le trait
   passe à 2px pour rester lisible sans le renfort du fond. */
.atelier__profil.is-on { border-color: var(--c-accent); border-width: 2px; }
.atelier__profil.is-on .atelier__profil-n { color: var(--c-accent); }
.atelier__profil-n { font-size: 12.5px; font-weight: 700; color: var(--c-ink); }
.atelier__profil-d { font-size: 11.5px; color: var(--c-muted); }
.atelier__profil-r {
  font-family: var(--f-mono); font-size: 10.5px; color: var(--c-muted); margin-top: 2px;
}
.atelier__profil.is-on .atelier__profil-r { color: var(--c-accent); }

.atelier__tva { display: block; margin-top: 12px; }
.atelier__tva-lab {
  display: block; font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--c-muted); margin-bottom: 4px;
}
.atelier__tva-sel {
  width: 100%; padding: 7px 9px; font-size: 12px; color: var(--c-ink);
  background: var(--c-panel); border: 1px solid var(--c-border);
  border-radius: var(--rad);
}
.atelier__tva-help {
  display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.45;
  color: var(--c-muted);
}

/* --- Postes de travaux --- */
.atelier__postes { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 9px; }
.atelier__poste { display: flex; flex-direction: column; gap: 4px; }
.atelier__poste.is-off { opacity: 0.45; }
.atelier__poste-head { display: flex; align-items: center; gap: 8px; }
.atelier__poste-on {
  display: flex; align-items: center; gap: 7px; cursor: pointer; min-width: 0;
}
.atelier__poste-lab {
  font-size: 12px; color: var(--c-ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.atelier__poste-prov {
  flex: none; font-size: 9.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 1px 6px; border-radius: 999px;
  background: var(--c-bg-2); color: var(--c-muted); cursor: help;
}
/* La provenance n'est pas décorative : « barème » et « analyse » n'engagent
   pas la même confiance, et l'utilisateur doit savoir lequel il déplace. */
.atelier__poste-prov--analyse { background: var(--c-ok-bg); color: var(--c-ok); }
.atelier__poste-prov--diagnostic { background: var(--c-accent-soft); color: var(--c-accent); }
.atelier__poste-prov--regle { background: var(--c-warn-bg); color: var(--c-warn); }
.atelier__poste-val {
  margin-left: auto; flex: none; font-family: var(--f-mono); font-size: 12px;
  font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums;
}
.atelier__poste-range { width: 100%; accent-color: var(--c-accent); cursor: pointer; }

.atelier__alea {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-border);
}
.atelier__alea-lab { flex: 1 1 240px; font-size: 12px; color: var(--c-ink); }
.atelier__alea-help { display: block; font-size: 11px; color: var(--c-muted); margin-top: 2px; }
.atelier__alea input[type="range"] { flex: 1 1 160px; accent-color: var(--c-accent); }
.atelier__alea-val {
  flex: none; font-family: var(--f-mono); font-size: 12px; font-weight: 600;
  color: var(--c-ink); min-width: 3.5ch; text-align: right;
}
.atelier__decomp {
  margin: 8px 0 0; font-size: 11.5px; color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Résultat ---
   Les deux plafonds côte à côte : l'écart entre eux EST l'information. */
.atelier__resultat {
  display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap;
}
.atelier__plafond {
  flex: 1 1 200px; display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; border-radius: var(--rad);
  border: 1px solid var(--c-border); background: var(--c-bg);
}
.atelier__plafond--net { border-color: var(--c-accent); border-width: 2px; }
.atelier__plafond-lab {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--c-muted);
}
.atelier__plafond-hint { display: block; text-transform: none; letter-spacing: 0; margin-top: 1px; }
.atelier__plafond-val {
  font-family: var(--f-mono); font-size: 20px; font-weight: 700; color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.atelier__plafond--net .atelier__plafond-val { color: var(--c-accent); }
.atelier__plafond-ecart { font-size: 11px; color: var(--c-muted); }
.atelier__fleche { align-self: center; color: var(--c-muted); font-size: 18px; }

.atelier__ref, .atelier__note {
  margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--c-muted);
}
.atelier__ref strong { color: var(--c-ink); font-family: var(--f-mono); }

.atelier__avertissements { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
.atelier__av {
  padding: 9px 11px; border-radius: var(--rad); background: var(--c-bg);
  border: 1px solid var(--c-border); border-left: 3px solid var(--c-border-strong);
}
.atelier__av--alerte { border-left-color: var(--c-warn); }
.atelier__av-t { display: block; font-size: 12px; color: var(--c-ink); }
.atelier__av-d { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.5;
  color: var(--c-muted); }
.atelier__av-s { display: block; margin-top: 3px; font-family: var(--f-mono);
  font-size: 10px; color: var(--c-muted-2, var(--c-muted)); }

@media (max-width: 640px) {
  .atelier__head { flex-direction: column; }
  .atelier__fleche { display: none; }
}

/* Le curseur reste utilisable sans souris ; on ne supprime jamais l'anneau
   de focus, on l'assume visuellement. */
.atelier input[type="range"]:focus-visible,
.atelier__profil:focus-visible,
.atelier__tva-sel:focus-visible {
  outline: 2px solid var(--c-accent); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .atelier * { transition: none !important; }
}

/* Échec d'enregistrement (audit 2026-08-21) : le plafond à l'écran repose
   alors sur des hypothèses que le serveur n'a pas retenues. */
.atelier__err {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--c-danger-bg, #FDECEC);
  color: var(--c-danger, #A32C2C);
  font-size: 12.5px;
  font-weight: 600;
}