/* ============================================================
   Clickprint — LE DÉPÔT DE FICHIER CLIENT
   Créé le 2026-09-24.

   Le marquage vient de `outils/depot.html` (déplacé le 01/09), mais SON
   STYLE, lui, n'a jamais suivi : les 124 lignes qui l'habillaient sont
   restées dans l'outil d'atelier. Le client voyait donc des titres nus et
   l'`<input type="file">` brut du navigateur, au milieu d'une fiche produit
   entièrement habillée.

   🔴 TOUT est sous `#dep-bloc`. Les classes du marquage sont génériques —
      `.carte`, `.zone`, `.titre`, `.btn`, `.sous` — et `produit.html` fait
      3 800 lignes : une seule de ces règles laissée au niveau global
      repeindrait des morceaux de page sans rapport. C'est la discipline de
      `bc-shell.css`, qui ne sort jamais de `.bcs-*`.

   🔵 Transposé des trois éditeurs (habillage du 22/09) : rayons de 7 px,
      bordure 1 px, transitions de .14s, et le survol qui vire au rouge de
      la charte sur fond doux. On ne COPIE pas leur feuille — ils sont en
      iframe et leurs variables leur appartiennent ; on reprend leur langage.

   ⚠️ Aucune couleur en dur : tout pointe sur `charte.css` (règle 117 — les
      cousines en dur sont ce qui a laissé le bouton du Print en bleu).
   ⚠️ Servi `immutable` un an : incrémenter `?v=` si cette feuille change.

   🔴 24/09 — DÉJÀ PAYÉ, LE JOUR MÊME. Cette feuille est partie en `?v=1`,
      puis j'ai corrigé les règles de messages et repoussé SANS toucher au
      `?v=`. Le navigateur d'Arnaud a donc gardé la première version pendant
      que le serveur en servait une autre : les trois tons restaient gris, et
      la page « prouvait » que mon correctif ne marchait pas. Elle est en
      `?v=2` depuis. Le contrôle qui l'a montré, en une ligne :
        fetch(u,{cache:'no-store'})  →  12 825 o, porte `.msg.corriger`
        fetch(u,{cache:'force-cache'}) → 11 120 o, porte encore `.attention`
   ============================================================ */

#dep-bloc {
  font-family: var(--c-font-texte);
  color: var(--c-ink);
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 18px 0;
}

/* ── Les cartes ─────────────────────────────────────────── */

#dep-bloc .carte {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 18px;
}

#dep-bloc .carte h2 {
  font-family: var(--c-font-titre);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 0 0 12px;
  color: var(--c-ink);
}

/* ── Les aides, au-dessus de tout ───────────────────────── */
/* 🔵 24/09 — `aide-profil` ne parle plus en langue d'imprimeur : le détail
   chiffré est replié derrière « en savoir plus ». Le client lit ce qu'on
   fait pour lui ; l'imprimeur garde ses chiffres à un clic. */

#dep-bloc .aide {
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.5;
}

#dep-bloc .aide:empty { display: none; }        /* pas de trou dans la mise en page */

#dep-bloc .aide details { display: inline; }

#dep-bloc .aide summary {
  display: inline;
  cursor: pointer;
  color: var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

#dep-bloc .aide summary::-webkit-details-marker { display: none; }

#dep-bloc .aide details[open] summary { color: var(--c-muted); }

#dep-bloc .aide .detail-tech {
  display: block;
  margin-top: 6px;
  padding-left: 10px;
  border-left: 2px solid var(--c-border);
  color: var(--c-muted);
}

/* ── La zone de dépôt — la pièce maîtresse ──────────────── */

#dep-bloc .zone {
  border: 2px dashed var(--c-border);
  border-radius: 10px;
  background: var(--c-bg);
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .14s, background .14s;
}

#dep-bloc .zone:hover,
#dep-bloc .zone:focus-visible,
#dep-bloc .zone.survol {
  border-color: var(--c-primary);
  background: var(--c-primary-l);
  outline: none;
}

/* 🔵 Un <svg> qui hérite de `currentColor` : il suit la charte, contrairement
   à l'émoji qu'il remplace, que les polices système rendaient en bleu. */
#dep-bloc .zone .pict {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto 10px;
  color: var(--c-muted);
  transition: color .14s;
}

#dep-bloc .zone:hover .pict,
#dep-bloc .zone:focus-visible .pict,
#dep-bloc .zone.survol .pict { color: var(--c-primary); }

#dep-bloc .zone .titre {
  font-family: var(--c-font-titre);
  font-size: 15px;
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 4px;
}

#dep-bloc .zone .sous {
  font-size: 12.5px;
  color: var(--c-muted);
}

/* 🔴 L'`<input type="file">` reste dans le DOM — le script s'en sert et la
   zone le déclenche — mais il ne s'affiche plus : c'était lui, le « Choisir
   un fichier / Aucun fichier sélectionné » gris du navigateur, posé sous une
   zone de dépôt qui dit déjà la même chose en mieux.
   ⚠️ `display:none` le retirerait du parcours clavier de certains
      navigateurs : on le masque en le gardant focusable par la zone. */
#dep-bloc #dep-fichier {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── L'attente ──────────────────────────────────────────── */

#dep-bloc .attente {
  display: none;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--c-muted);
}

/* ⚠️ La classe est `.on`, posée par le script (`classList.add('on')`).
   J'avais écrit `.actif` : la roue d'attente ne serait jamais apparue. */
#dep-bloc .attente.on { display: flex; }

#dep-bloc .roue {
  width: 16px; height: 16px;
  border: 2px solid var(--c-border);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: dep-tourne .7s linear infinite;
  flex-shrink: 0;
}

@keyframes dep-tourne { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  #dep-bloc .roue { animation-duration: 2.4s; }
}

/* ── L'erreur ───────────────────────────────────────────── */

#dep-bloc .erreur {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--c-danger);
  border-left-width: 3px;
  border-radius: 8px;
  background: #fef2f2;
  color: var(--c-danger);
  font-size: 13.5px;
}

/* 🔴 `display:none` par défaut, et c'est le SCRIPT qui rouvre avec un
   `display` explicite — il le fait déjà, en le commentant : « jamais `''`,
   la règle CSS reprendrait le dessus ». Masquer sur `:empty` entrerait en
   conflit avec lui. */
#dep-bloc .erreur { display: none; }

/* ── L'épreuve ──────────────────────────────────────────── */
/* 🔴 Cachés au départ, rouverts par le script en `display` explicite. Sans
   ces deux lignes, trois cartes vides s'affichaient avant tout dépôt — c'est
   ce qu'on voit sur la capture : « Votre épreuve », « Ce qu'il faut savoir »
   et « Votre accord » posés là, sans rien dedans. */
#dep-bloc #dep-bloc-epreuve   { display: none; }
#dep-bloc #dep-carte-messages { display: none; }

#dep-bloc .epreuve-cadre {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#dep-bloc .epreuve-cadre canvas,
#dep-bloc .epreuve-cadre img {
  max-width: 100%;
  height: auto;
  display: block;
}

#dep-bloc .legende {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--c-muted);
}

#dep-bloc .legende span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Les repères d'imprimeur ne sont PAS de la marque (règle 118) : la ligne de
   coupe reste rouge vif et la zone de sécurité pointillée, parce que c'est ce
   que ces traits veulent dire dans le métier. */
#dep-bloc .legende .trait {
  width: 16px; height: 0;
  border-top: 2px solid var(--c-danger);
  display: inline-block;
}

#dep-bloc .legende .trait.fin {
  border-top: 1px dashed var(--c-muted);
}

#dep-bloc .tronque,
#dep-bloc .diag {
  font-size: 12.5px;
  color: var(--c-muted);
  text-align: center;
}

#dep-bloc .tronque:empty,
#dep-bloc .diag:empty { display: none; }

/* ── Les messages au client ─────────────────────────────── */
/* 🔴 24/09 — J'AVAIS SUPPOSÉ LES MAUVAISES CLASSES. Ma première version
   habillait `.grave`, `.attention`, `.ok`, `.info` : aucune de ces classes
   n'existe. `produit.html` écrit `<div class="msg TON">` avec un pictogramme
   dans `.p`, un titre dans `.t`, un texte dans `.x` et une consigne dans
   `.a`. Les trois tons viennent de `BCDepot.messagesClient` et il n'y en a
   que trois : `corriger`, `verifier`, `fait`.
   🔵 Rien ne m'aurait alerté : des règles qui ne visent rien ne cassent rien.
      Les messages seraient simplement restés gris, tous pareils, le bloquant
      comme le rassurant — sur l'écran qui dit au client si son fichier est
      imprimable.
   ⚠️ NE PAS confondre avec les classes `pf-*` de `preflight-vue.js` : celui-ci
      n'écrit QUE dans le rapport d'atelier, et il apporte sa propre feuille. */

#dep-bloc #dep-messages .msg {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 13px;
  border-radius: 8px;
  border: 1px solid var(--c-border);
  border-left-width: 3px;
  background: var(--c-bg);
  font-size: 13.5px;
  line-height: 1.5;
}

#dep-bloc #dep-messages .msg + .msg { margin-top: 8px; }

/* Le pictogramme reste un émoji, et c'est VOLONTAIRE — contrairement au « 📄 »
   de la zone de dépôt. ⛔ ⚠️ ✅ portent leur sens DANS leur couleur, et ce sens
   n'est pas de la marque (règle 118) : un rouge de charte sur un panneau
   d'interdiction ne dirait pas mieux « corriger ». */
#dep-bloc #dep-messages .msg .p {
  font-size: 16px;
  line-height: 1.4;
  flex: 0 0 auto;
}

#dep-bloc #dep-messages .msg .t {
  font-family: var(--c-font-titre);
  font-weight: 700;
  color: var(--c-ink);
}

#dep-bloc #dep-messages .msg .x {
  color: var(--c-muted);
  margin-top: 2px;
}

/* `.a` est la CONSIGNE — ce que le client doit faire. Elle ne doit pas se
   lire comme le texte d'explication au-dessus. */
#dep-bloc #dep-messages .msg .a {
  margin-top: 6px;
  font-weight: 600;
  color: var(--c-ink);
}

/* ── Le bouton « Ajuster mon visuel » ───────────────────────
   Il vit DANS un message, et doit se lire comme une issue proposée — pas
   comme l'action principale de la page, qui reste « Ajouter au panier ».
   D'où un bouton secondaire : bordé, pas plein. */
#dep-bloc #dep-messages .btn-ajuster {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  border: 1.5px solid var(--c-primary);
  border-radius: 8px;
  background: var(--c-surface);
  color: var(--c-primary);
  font-family: var(--c-font-titre);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .14s, color .14s;
}

#dep-bloc #dep-messages .btn-ajuster:hover {
  background: var(--c-primary);
  color: #fff;
}

#dep-bloc #dep-messages .msg.corriger {
  border-color: var(--c-danger);
  background: #fef2f2;
}

#dep-bloc #dep-messages .msg.verifier {
  border-color: var(--c-warning);
  background: #fffbeb;
}

#dep-bloc #dep-messages .msg.fait {
  border-color: var(--c-success);
  background: #f0fdf4;
}

/* ── Les consentements ──────────────────────────────────── */
/* ⚠️ Fabriqués en `innerHTML` par le script, ids `dep-acc-*`. On habille par
   la structure, pas par une classe que le script ne pose pas. */

#dep-bloc #dep-cases label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 0;
  font-size: 13.5px;
  line-height: 1.5;
  cursor: pointer;
}

#dep-bloc #dep-cases label + label {
  border-top: 1px solid var(--c-border);
}

#dep-bloc #dep-cases .txt { min-width: 0; }

#dep-bloc #dep-cases input[type="checkbox"] {
  margin-top: 2px;
  width: 16px; height: 16px;
  accent-color: var(--c-primary);
  flex-shrink: 0;
  cursor: pointer;
}

/* ── Le bouton ──────────────────────────────────────────── */

#dep-bloc .btn {
  margin-top: 14px;
  width: 100%;
  padding: 12px 18px;
  border: none;
  border-radius: 8px;
  background: var(--c-primary);
  color: #fff;
  font-family: var(--c-font-titre);
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .14s;
}

#dep-bloc .btn:hover:not(:disabled) { background: var(--c-primary-d); }

#dep-bloc .btn:disabled {
  background: var(--c-border);
  color: var(--c-muted);
  cursor: not-allowed;
}

#dep-bloc .pourquoi {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--c-muted);
  text-align: center;
}

#dep-bloc .pourquoi:empty { display: none; }

/* ── Le détail d'atelier ────────────────────────────────── */
/* 🔴 24/09 — ÉCRIT POUR L'ATELIER, et il s'affichait au client. Au mieux il
   l'intrigue, au pire il l'inquiète juste avant de payer. Le marquage reste
   en place (le script y écrit son rapport, et le back-office s'en servira) ;
   seul l'affichage est coupé côté client. */
#dep-bloc details.tech { display: none; }

/* ── Petits écrans ──────────────────────────────────────── */

@media (max-width: 600px) {
  #dep-bloc .carte { padding: 14px; }
  #dep-bloc .zone  { padding: 22px 14px; }
  #dep-bloc .legende { font-size: 11.5px; gap: 6px 12px; }
}