/* =========================================================================
   Epreuve de plateforme, /platform (page publique).
   S'appuie sur les jetons de assets/base.css (--mb-*).

   Feuille SEPAREE de vector-check.css a dessein : les deux outils partagent
   l'apparence, pas le code. Fusionner les deux obligerait a toucher la feuille
   d'une page deja en ligne pour livrer l'autre, et une regression y serait
   invisible jusqu'a ce qu'un client la voie.
   ========================================================================= */

.pf-body {
  /* Le rouge de marque Atlantis remplace l'accent du socle, sur cette page. */
  --mb-accent-hot: #c22032;
  background: var(--mb-bg, #060608);
  color: var(--mb-ink, #f4f2ee);
  font-family: var(--mb-font-sans, "DM Sans", system-ui, sans-serif);
  min-height: 100vh;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
.pf-body em { font-style: normal; color: var(--mb-accent-hot, #c22032); }
.pf-body a { color: var(--mb-accent-hot, #c22032); }

/* ---------- Barre du haut ---------- */
.pf-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px clamp(18px, 5vw, 56px);
  border-bottom: 1px solid var(--mb-line, rgba(255,255,255,.08));
}
.pf-brand { display: inline-flex; align-items: center; }
.pf-brand-logo { height: 30px; width: auto; display: block; }
.pf-brand-tag {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mb-ink-faint, rgba(244,242,238,.48));
  padding-left: 16px; border-left: 1px solid var(--mb-line, rgba(255,255,255,.08));
}
.pf-beta {
  font-size: 10px; letter-spacing: .16em; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--mb-accent-warm, #ffd08a);
  color: var(--mb-accent-warm, #ffd08a);
}
.pf-lang { margin-left: auto; display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--mb-bg-card, #121217); }
.pf-lang button {
  border: 0; background: transparent; cursor: pointer;
  color: var(--mb-ink-faint, rgba(244,242,238,.48));
  font: 600 12px/1 var(--mb-font-sans, sans-serif);
  letter-spacing: .08em; padding: 8px 14px; border-radius: 999px;
  transition: background .2s var(--mb-ease-cinema), color .2s;
}
.pf-lang button.is-active { background: var(--mb-accent-hot, #c22032); color: #fff; }

/* ---------- Coquille ---------- */
.pf-shell { max-width: 1180px; margin: 0 auto; padding: clamp(28px, 6vw, 64px) clamp(18px, 5vw, 56px) 80px; }

/* ---------- Chapeau ---------- */
.pf-hero { max-width: 780px; margin-bottom: 32px; }
.pf-eyebrow { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--mb-ink-faint, rgba(244,242,238,.48)); }
.pf-hero h1 {
  font-family: var(--mb-font-display, "Archivo Black", sans-serif);
  font-size: clamp(30px, 5.2vw, 52px); line-height: 1.03;
  margin: 14px 0 18px; letter-spacing: -.01em;
}
.pf-lede { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.65; color: var(--mb-ink-dim, rgba(244,242,238,.7)); margin: 0; }

/* ---------- Avertissement ---------- */
.pf-disclaimer {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--mb-bg-card, #121217);
  border: 1px solid var(--mb-line, rgba(255,255,255,.08));
  border-left: 3px solid var(--mb-accent-warm, #ffd08a);
  border-radius: var(--mb-radius, 14px);
  padding: 18px 20px; margin-bottom: 28px;
}
.pf-disc-icon { flex: none; color: var(--mb-accent-warm, #ffd08a); margin-top: 2px; }
.pf-disc-text p { margin: 0 0 6px; font-size: 14px; line-height: 1.6; }
.pf-disc-lead { color: var(--mb-ink, #f4f2ee); }
.pf-disc-help { color: var(--mb-ink-dim, rgba(244,242,238,.7)); }
.pf-disc-text p:last-child { margin-bottom: 0; }

/* ---------- Depot et reglages ---------- */
.pf-form { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 26px; }
.pf-drop {
  border: 1.5px dashed var(--mb-line-strong, rgba(255,255,255,.16));
  border-radius: var(--mb-radius-lg, 22px);
  background: var(--mb-bg-card, #121217);
  padding: clamp(26px, 5vw, 48px);
  text-align: center; cursor: pointer; outline: none;
  transition: border-color .2s, background .2s;
}
.pf-drop:hover, .pf-drop:focus-visible, .pf-drop.is-over {
  border-color: var(--mb-accent-hot, #c22032);
  background: var(--mb-bg-elev, #17171d);
}
.pf-drop-icon { color: var(--mb-ink-faint, rgba(244,242,238,.48)); margin-bottom: 10px; }
.pf-drop-title { margin: 0 0 6px; font-size: 16px; }
.pf-drop-pick { color: var(--mb-accent-hot, #c22032); text-decoration: underline; cursor: pointer; }
.pf-drop-hint { margin: 0; font-size: 13px; color: var(--mb-ink-faint, rgba(244,242,238,.48)); }
.pf-drop-chosen {
  margin: 12px 0 0; font: 500 13px/1.4 "JetBrains Mono", ui-monospace, monospace;
  color: var(--mb-accent-warm, #ffd08a); word-break: break-all;
}

.pf-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.pf-field { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--mb-ink-dim, rgba(244,242,238,.7)); }
.pf-field select, .pf-field input {
  background: var(--mb-bg-card, #121217);
  border: 1px solid var(--mb-line-strong, rgba(255,255,255,.16));
  border-radius: 10px; color: var(--mb-ink, #f4f2ee);
  font: 500 15px/1 var(--mb-font-sans, sans-serif);
  padding: 12px 14px; min-width: 170px;
}
.pf-field select:focus, .pf-field input:focus { outline: 2px solid var(--mb-accent-hot, #c22032); outline-offset: 1px; }
/* La case « Le creuser » (blanc du logo), habillee comme un champ pour
   s'aligner sur la longueur et la quantite. */
.pf-check-box {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--mb-bg-card, #121217);
  border: 1px solid var(--mb-line-strong, rgba(255,255,255,.16));
  border-radius: 10px; color: var(--mb-ink, #f4f2ee);
  font: 500 15px/1 var(--mb-font-sans, sans-serif);
  padding: 11px 14px; min-width: 170px;
}
/* « .pf-field input » habille les champs texte : la case n'en veut rien. */
.pf-field .pf-check-box input {
  width: 18px; height: 18px; margin: 0; padding: 0; min-width: 0;
  border: 0; border-radius: 0; background: none;
  accent-color: var(--mb-accent-hot, #c22032);
}
.pf-go {
  margin-left: auto; border: 0; cursor: pointer;
  background: var(--mb-accent-hot, #c22032); color: #fff;
  font: 700 14px/1 var(--mb-font-sans, sans-serif); letter-spacing: .04em;
  padding: 15px 26px; border-radius: 10px;
  transition: opacity .2s, transform .1s;
}
.pf-go:disabled { opacity: .35; cursor: not-allowed; }
.pf-go:not(:disabled):hover { opacity: .9; }
.pf-go:not(:disabled):active { transform: translateY(1px); }

/* ---------- Etat et erreur ---------- */
.pf-status { margin-bottom: 22px; }
.pf-progress { height: 3px; background: var(--mb-line, rgba(255,255,255,.08)); border-radius: 999px; overflow: hidden; }
.pf-progress-bar { height: 100%; width: 0; background: var(--mb-accent-hot, #c22032); transition: width .3s var(--mb-ease-cinema, ease); }
.pf-status-text { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--mb-ink-dim, rgba(244,242,238,.7)); }

.pf-error {
  display: flex; align-items: center; gap: 12px;
  background: rgba(194,32,50,.1); border: 1px solid rgba(194,32,50,.35);
  color: #e89aa1; border-radius: var(--mb-radius, 14px);
  padding: 16px 18px; margin-bottom: 24px; font-size: 14px;
}
.pf-error svg { flex: none; }

/* ---------- Avertissement matriciel ---------- */
.pf-warn {
  display: flex; gap: 13px; align-items: flex-start;
  background: rgba(255, 208, 138, .08);
  border: 1px solid rgba(255, 208, 138, .32);
  border-radius: var(--mb-radius, 14px);
  padding: 16px 18px; margin-bottom: 20px;
  color: var(--mb-accent-warm, #ffd08a);
}
.pf-warn svg { flex: none; margin-top: 1px; }
.pf-warn p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--mb-ink-dim, rgba(244,242,238,.7)); }
.pf-warn strong { color: var(--mb-accent-warm, #ffd08a); }

/* ---------- Le blanc du logo ---------- */
/* Neutre, comme la note « bascule en noir » de /gabarit : on informe d'un
   choix, on n'alerte de rien. */
.pf-note {
  display: flex; gap: 13px; align-items: flex-start;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--mb-line-strong, rgba(255,255,255,.16));
  border-radius: var(--mb-radius, 14px);
  padding: 16px 18px; margin-bottom: 20px;
  color: var(--mb-ink, #f4f2ee);
}
.pf-note svg { flex: none; margin-top: 1px; }
.pf-note-corps { display: grid; gap: 12px; justify-items: start; }
.pf-note p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--mb-ink-dim, rgba(244,242,238,.7)); }
.pf-note strong { color: var(--mb-ink, #f4f2ee); }
.pf-note-action {
  border: 1px solid var(--mb-line-strong, rgba(255,255,255,.16));
  background: transparent; color: var(--mb-ink, #f4f2ee);
  font: 700 13px/1 var(--mb-font-sans, sans-serif);
  padding: 11px 16px; border-radius: 10px; cursor: pointer;
}
.pf-note-action:hover { border-color: var(--mb-ink-faint, rgba(244,242,238,.48)); }

/* ---------- Resultat ---------- */
.pf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 20px; align-items: start; }
.pf-side { display: grid; gap: 20px; }
.pf-card {
  background: var(--mb-bg-card, #121217);
  border: 1px solid var(--mb-line, rgba(255,255,255,.08));
  border-radius: var(--mb-radius-lg, 22px);
  padding: 20px 22px;
}
.pf-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pf-card-head h3 { margin: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--mb-ink-faint, rgba(244,242,238,.48)); font-weight: 600; }

.pf-preview-stage {
  background: #fff; border-radius: var(--mb-radius, 14px);
  padding: 14px; display: flex; align-items: center; justify-content: center;
  min-height: 300px;
}
/* La planche est tres haute (jusqu'a 42 x 120 po) : on la borne en hauteur
   d'ecran, sinon elle pousse tout le reste hors de vue. */
.pf-preview-stage img { max-width: 100%; max-height: 76vh; width: auto; height: auto; display: block; }

.pf-header-block {
  margin: 0 0 16px; padding: 14px 16px;
  background: var(--mb-bg-elev, #17171d);
  border-radius: var(--mb-radius, 14px);
  font: 500 13px/1.65 "JetBrains Mono", ui-monospace, monospace;
  color: var(--mb-ink, #f4f2ee);
  white-space: pre-wrap; word-break: break-word;
}
.pf-meta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13px; }
.pf-meta dt { color: var(--mb-ink-faint, rgba(244,242,238,.48)); }
.pf-meta dd { margin: 0; text-align: right; font-family: "JetBrains Mono", ui-monospace, monospace; }

.pf-card-get { display: grid; gap: 12px; }
.pf-pdf {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--mb-accent-hot, #c22032); color: #fff !important;
  text-decoration: none !important; font-weight: 700; font-size: 14px;
  padding: 15px 20px; border-radius: 10px;
  transition: opacity .2s;
}
.pf-pdf:hover { opacity: .9; }
.pf-get-note { margin: 0; font-size: 12px; line-height: 1.55; color: var(--mb-ink-faint, rgba(244,242,238,.48)); }
.pf-reset {
  border: 1px solid var(--mb-line-strong, rgba(255,255,255,.16));
  background: transparent; color: var(--mb-ink-dim, rgba(244,242,238,.7));
  font: 600 13px/1 var(--mb-font-sans, sans-serif);
  padding: 12px 18px; border-radius: 10px; cursor: pointer;
}
.pf-reset:hover { border-color: var(--mb-ink-faint, rgba(244,242,238,.48)); color: var(--mb-ink, #f4f2ee); }

/* ---------- Les regles ---------- */
.pf-explainer { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--mb-line, rgba(255,255,255,.08)); }
.pf-explainer h2 { margin: 0 0 20px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--mb-ink-faint, rgba(244,242,238,.48)); font-weight: 600; }
.pf-rules { margin: 0; padding-left: 20px; display: grid; gap: 12px; max-width: 820px; }
.pf-rules li { font-size: 14px; line-height: 1.65; color: var(--mb-ink-dim, rgba(244,242,238,.7)); }
.pf-rules strong { color: var(--mb-ink, #f4f2ee); }

/* ---------- Pied ---------- */
.pf-footer {
  max-width: 1180px; margin: 0 auto;
  padding: 28px clamp(18px, 5vw, 56px) 48px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  font-size: 12px; color: var(--mb-ink-faint, rgba(244,242,238,.48));
  border-top: 1px solid var(--mb-line, rgba(255,255,255,.08));
}

/* ---------- Adaptatif ---------- */
@media (max-width: 900px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-go { margin-left: 0; width: 100%; }
  .pf-field { flex: 1 1 160px; }
}