/* Exkave Contribution V2
   Une peau éditoriale proche de la landing et de la Bibliothèque.
   Le formulaire, ses identifiants et ses comportements restent intacts. */

body.submit-page {
  --submit-v2-gold: #d8b765;
  --submit-v2-cream: #fffdf7;
  --submit-v2-paper: rgba(255, 253, 247, .72);
  --submit-v2-quiet: rgba(255, 253, 247, .46);
  --submit-v2-line: rgba(216, 183, 101, .22);
  --submit-v2-panel: rgba(13, 13, 11, .94);
  --submit-v2-tile: rgba(255, 253, 247, .035);
  /* Le document racine porte déjà le clipping horizontal. Le répéter sur le
     body le transforme en faux conteneur de scroll et désactive le sticky de
     la colonne d'accompagnement dans Chromium. */
  overflow: visible !important;
  background:
    radial-gradient(circle at 12% 9%, rgba(216, 183, 101, .11), transparent 28rem),
    linear-gradient(180deg, #050505 0%, #080806 44%, #050505 100%) !important;
}

body.submit-page > .wrap {
  width: min(1440px, calc(100vw - 48px)) !important;
  padding-top: 0 !important;
}

body.submit-page .product-mark {
  display: none !important;
}

/* Hero — une vraie pièce de collectionneur, pas un faux disque flottant. */
body.submit-page .hero {
  position: relative;
  display: grid !important;
  grid-template-columns: minmax(350px, .82fr) minmax(500px, 1.18fr) !important;
  align-items: stretch !important;
  height: auto !important;
  min-height: 350px !important;
  margin: 22px 0 42px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(216, 183, 101, .24) !important;
  border-radius: 30px !important;
  background: #090908 !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .48) !important;
  isolation: isolate;
}

body.submit-page .hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, .08), rgba(5, 5, 5, .48)),
    url("/assets/exkave-collection-hifi-hero-v1.webp") center / cover no-repeat !important;
  filter: grayscale(1) contrast(1.08) brightness(.78);
  opacity: 1 !important;
}

body.submit-page .hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(9, 9, 8, .92) 0%, rgba(9, 9, 8, .82) 34%, rgba(9, 9, 8, .34) 58%, rgba(9, 9, 8, .1) 100%),
    repeating-linear-gradient(118deg, transparent 0 66px, rgba(216, 183, 101, .025) 67px 68px);
  opacity: 1 !important;
}

body.submit-page .submit-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  z-index: 2;
  padding: clamp(20px, 2.6vw, 34px) 0 clamp(20px, 2.6vw, 34px) clamp(30px, 5vw, 72px);
}

body.submit-page .hero .eyebrow {
  margin: 0 0 18px;
  color: var(--submit-v2-gold);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
}

body.submit-page .hero h1 {
  max-width: 650px !important;
  margin: 0 0 22px !important;
  color: var(--submit-v2-cream);
  font-size: clamp(40px, 3.65vw, 54px) !important;
  font-weight: 400 !important;
  line-height: .94 !important;
  letter-spacing: -.06em !important;
}

body.submit-page .hero .lead {
  max-width: 600px !important;
  margin: 0;
  color: var(--submit-v2-paper) !important;
  font-size: clamp(16px, 1.45vw, 19px) !important;
  line-height: 1.58 !important;
}

body.submit-page .submit-hero-object {
  position: relative;
  z-index: 2;
  min-height: 350px !important;
  pointer-events: none;
}

body.submit-page .submit-hero-sleeve,
body.submit-page .submit-hero-vinyl {
  display: none !important;
}

body.submit-page .submit-hero-caption {
  right: 32px !important;
  bottom: 28px !important;
  padding: 10px 0 0 46px !important;
  border-top-color: rgba(216, 183, 101, .72) !important;
  color: var(--submit-v2-gold) !important;
  font-family: var(--font-mono);
  font-size: 10px !important;
  letter-spacing: .19em !important;
}

/* Une reprise n'est pas une nouvelle acquisition. Elle annonce l'unique action
   bloquante avant le formulaire, sans remettre le grand discours d'accueil. */
body.submit-page .resume-crops {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  margin: 22px 0;
  padding: clamp(24px, 3vw, 38px) clamp(26px, 4vw, 54px);
  border: 1px solid rgba(216, 183, 101, .38);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(216, 183, 101, .13), rgba(13, 13, 11, .96) 58%);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
}

html.exkave-experience-native body.submit-page .resume-crops.is-revealed {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  filter: none;
}

body.submit-page .resume-crops[hidden] {
  display: none;
}

body.submit-page .resume-crops-kicker {
  margin: 0 0 10px;
  color: var(--submit-v2-gold);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

body.submit-page .resume-crops h1 {
  margin: 0 0 10px;
  color: var(--submit-v2-cream);
  font-size: clamp(30px, 3.3vw, 46px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
}

body.submit-page .resume-crops p:last-child {
  max-width: 720px;
  margin: 0;
  color: var(--submit-v2-paper);
  font-size: 16px;
  line-height: 1.5;
}

body.submit-page .resume-crops button {
  min-height: 50px;
  white-space: nowrap;
}

body.submit-page.is-resuming-crops .hero {
  display: none !important;
}

body.submit-page.is-resuming-crops .grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

body.submit-page.is-resuming-crops .grid > aside.card {
  display: none !important;
}

body.submit-page.is-resuming-crops .readiness {
  display: none !important;
}

/* Colonne de travail et aide persistante. */
body.submit-page .grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) !important;
  gap: 22px !important;
  align-items: stretch !important;
}

body.submit-page .grid::before {
  display: none !important;
}

body.submit-page #submitForm,
body.submit-page .grid > aside.card {
  border: 1px solid var(--submit-v2-line) !important;
  background:
    linear-gradient(145deg, rgba(255, 253, 247, .025), transparent 26%),
    var(--submit-v2-panel) !important;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .36) !important;
}

/* Le compagnon suit la progression dans le flux de la colonne d'aide. Il ne
   flotte jamais au-dessus du guide qui le suit. */
body.submit-page .submit-companion {
  --submit-companion-progress: 0%;
  position: relative;
  top: auto;
  z-index: 1;
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(216, 183, 101, .32);
  border-radius: 19px;
  background:
    radial-gradient(circle at 88% 12%, rgba(216, 183, 101, .13), transparent 34%),
    linear-gradient(145deg, rgba(216, 183, 101, .09), rgba(255, 253, 247, .025));
  box-shadow: 0 20px 50px rgba(0, 0, 0, .28);
}

body.submit-page .submit-companion::after {
  display: none;
}

body.submit-page .submit-companion-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

body.submit-page .submit-companion-head > div:last-child {
  min-width: 0;
}

body.submit-page .submit-companion-ring {
  position: relative;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--submit-v2-gold) var(--submit-companion-progress), rgba(255, 253, 247, .08) 0);
  box-shadow: 0 0 0 1px rgba(216, 183, 101, .16);
}

body.submit-page .submit-companion-ring::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  background: #0b0b09;
}

body.submit-page .submit-companion-value {
  position: relative;
  z-index: 1;
  color: var(--submit-v2-cream);
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 400;
}

body.submit-page .submit-companion-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--submit-v2-gold);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: uppercase;
}

body.submit-page .submit-companion-title {
  display: block;
  max-width: 100%;
  color: var(--submit-v2-cream);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

body.submit-page .submit-companion-copy {
  min-height: 0;
  margin: 14px 0 12px;
  color: var(--submit-v2-paper);
  font-size: 13px;
  line-height: 1.48;
  overflow-wrap: anywhere;
}

body.submit-page .submit-companion-track {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 253, 247, .09);
}

body.submit-page .submit-companion-track > span {
  display: block;
  width: var(--submit-companion-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b6721, #d8b765, #fff0bd);
  transition: width .28s ease;
}

body.submit-page .submit-companion-next {
  display: block;
  margin-top: 10px;
  color: var(--submit-v2-quiet);
  font-size: 11px;
  line-height: 1.4;
}

body.submit-page #submitForm {
  min-width: 0;
  padding: clamp(24px, 3vw, 42px) !important;
  border-radius: 28px !important;
}

body.submit-page #submitForm > h2 {
  margin: 0 0 24px !important;
  color: var(--submit-v2-cream);
  font-size: clamp(32px, 3.6vw, 48px) !important;
  font-weight: 400 !important;
  letter-spacing: -.045em !important;
}

/* Tableau de préparation compact, lisible dès l'arrivée. */
body.submit-page .readiness {
  margin: 0 0 28px !important;
  padding: 20px 22px !important;
  border: 1px solid rgba(216, 183, 101, .22) !important;
  border-radius: 18px !important;
  background: rgba(216, 183, 101, .055) !important;
}

body.submit-page .readiness-head {
  display: flex;
  align-items: baseline !important;
  justify-content: space-between;
  gap: 18px;
}

body.submit-page .readiness-head > span:first-child {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.submit-page .readiness-score {
  color: var(--submit-v2-gold) !important;
  font-family: var(--font-mono);
  font-size: 22px !important;
}

body.submit-page .readiness-bar {
  height: 3px !important;
  margin: 14px 0 12px !important;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 253, 247, .1) !important;
}

body.submit-page .readiness-copy {
  color: var(--submit-v2-paper);
}

body.submit-page .pill-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  max-height: 72px;
  margin-top: 13px !important;
  padding: 0 !important;
  overflow: auto !important;
}

body.submit-page .pill-grid > * {
  border: 1px solid rgba(255, 253, 247, .08) !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, .18) !important;
}

/* Le détail technique de préparation n'aide pas au dépôt des photos. */
body.submit-page #readinessPills {
  display: none !important;
}

/* Les preuves deviennent une planche contact, comme dans la Bibliothèque. */
body.submit-page .asset-section {
  margin: 0 0 26px !important;
  padding: 26px !important;
  border: 1px solid rgba(216, 183, 101, .18) !important;
  border-radius: 22px !important;
  background: rgba(255, 253, 247, .022) !important;
}

body.submit-page .asset-head {
  display: grid !important;
  grid-template-columns: minmax(170px, .62fr) minmax(280px, 1.38fr) !important;
  gap: 24px !important;
  align-items: start;
  margin: 0 0 22px !important;
  padding: 0 !important;
  border: 0 !important;
}

body.submit-page .asset-head label {
  color: var(--submit-v2-gold) !important;
  font-family: var(--font-mono);
  font-size: 19px !important;
  font-weight: 400 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase;
}

body.submit-page .asset-head p {
  max-width: 650px;
  margin: 0 !important;
  color: var(--submit-v2-paper);
  font-size: 15px;
  line-height: 1.5;
}

body.submit-page #minimalEvidenceSection {
  container-type: inline-size;
}

body.submit-page #submitForm > h2,
body.submit-page #submitForm > .readiness {
  display: none !important;
}

body.submit-page .drop-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  align-items: stretch;
  gap: 20px !important;
}

body.submit-page .drop {
  position: relative;
  min-width: 0;
  height: 100%;
  min-height: 180px !important;
  padding: 20px !important;
  overflow: hidden;
  border: 1px solid rgba(216, 183, 101, .18) !important;
  border-radius: 15px !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(216, 183, 101, .08), transparent 30%),
    rgba(4, 4, 4, .34) !important;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "badge"
    "title"
    "preview"
    "help";
  grid-template-rows: auto auto minmax(140px, 1fr) auto;
  gap: 12px;
  place-items: stretch !important;
  text-align: left !important;
}

body.submit-page .drop:hover,
body.submit-page .drop:focus-within {
  transform: translateY(-2px);
  border-color: rgba(216, 183, 101, .56) !important;
  background-color: rgba(216, 183, 101, .055) !important;
}

body.submit-page #minimalEvidenceSection .drop::before {
  position: relative !important;
  inset: auto !important;
  grid-area: preview;
  display: block;
  width: 100% !important;
  min-height: 140px;
  border: 1px solid rgba(216, 183, 101, .18);
  border-radius: 12px;
  opacity: 1;
  transform: none;
}

body.submit-page #minimalEvidenceSection .drop:not(.has-preview)::after {
  content: "";
  position: relative;
  inset: auto;
  z-index: 1;
  grid-area: preview;
  place-self: center;
  display: block;
  width: 72px;
  height: 72px;
  background: rgba(216, 183, 101, .82);
  -webkit-mask: var(--empty-proof-icon) center / contain no-repeat;
  mask: var(--empty-proof-icon) center / contain no-repeat;
  opacity: .9;
}

body.submit-page #minimalEvidenceSection .drop.has-preview::after {
  display: none;
}

body.submit-page #minimalEvidenceSection .drop[data-drop-for="coverFront"] {
  --empty-proof-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='50' height='50' rx='4'/%3E%3Cpath d='m12 47 13-15 9 9 7-8 11 14'/%3E%3Ccircle cx='43' cy='20' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

body.submit-page #minimalEvidenceSection .drop[data-drop-for="coverBack"] {
  --empty-proof-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Crect x='7' y='7' width='50' height='50' rx='4'/%3E%3Cpath d='M15 17h27M15 25h34M15 33h22M15 41h16'/%3E%3Cpath d='M39 40v10M43 40v10M48 40v10M52 40v10'/%3E%3C/g%3E%3C/svg%3E");
}

body.submit-page #minimalEvidenceSection .drop[data-drop-for="labelA"],
body.submit-page #minimalEvidenceSection .drop[data-drop-for="labelB"] {
  --empty-proof-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='3'%3E%3Ccircle cx='32' cy='32' r='25'/%3E%3Ccircle cx='32' cy='32' r='13'/%3E%3Ccircle cx='32' cy='32' r='3' fill='black'/%3E%3Cpath d='M12 25a22 22 0 0 1 12-13M52 39a22 22 0 0 1-12 13'/%3E%3C/g%3E%3C/svg%3E");
}

body.submit-page #minimalEvidenceSection .drop[data-drop-for="detailPhoto"] {
  --empty-proof-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='28' cy='28' r='17'/%3E%3Cpath d='m41 41 14 14M28 18v20M18 28h20'/%3E%3C/g%3E%3C/svg%3E");
}

body.submit-page .drop[data-guide-shape="runout"]::after {
  top: 26px !important;
  right: 26px !important;
  width: 26px !important;
}

/* Neutralise l'ancienne planche où la pochette avant occupait quatre cases. */
body.submit-page #minimalEvidenceSection .drop-grid > .drop:first-child {
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 180px !important;
}

body.submit-page #minimalEvidenceSection .drop-grid > .drop:first-child::before {
  width: 100% !important;
}

body.submit-page .drop b {
  grid-area: badge;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: rgba(255, 253, 247, .7) !important;
  background: transparent !important;
  text-shadow: none;
  justify-self: start;
}

body.submit-page #minimalEvidenceSection .drop.optional b {
  color: rgba(255, 253, 247, .7) !important;
}

body.submit-page .drop span {
  grid-area: title;
  display: block;
  max-width: calc(100% - 54px);
  color: var(--submit-v2-cream);
  font-size: clamp(12px, .9vw, 14px) !important;
  line-height: 1.28;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

body.submit-page #minimalEvidenceSection .drop span {
  align-self: start;
  justify-self: start;
  width: 100%;
  max-width: none;
  min-width: 0;
  padding-right: 0;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

body.submit-page .drop-grid.optional .drop span {
  font-weight: 400;
}

body.submit-page .drop small {
  grid-area: help;
  max-width: 100%;
  color: rgba(216, 183, 101, .76) !important;
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

body.submit-page #minimalEvidenceSection .drop small {
  min-height: calc(2.7em + 1px);
  font-size: 17px;
}

body.submit-page #minimalEvidenceSection .pf-run {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  margin-top: 28px;
}

body.submit-page #minimalEvidenceSection #pfAnalyse {
  font-size: 18px;
  width: min(100%, 400px);
}

body.submit-page #minimalEvidenceSection #pfStatus {
  width: 100%;
  text-align: center;
}

/* Champs — des tuiles stables, sans toucher au DOM ni aux validations. */
body.submit-page #submitForm > .asset-section + .row {
  margin-top: 76px !important;
}

body.submit-page #submitForm > .asset-section + .row::before {
  top: -45px !important;
  color: var(--submit-v2-gold) !important;
  font-family: var(--font-mono);
}

body.submit-page #submitForm > .row,
body.submit-page .physical-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border: 0 !important;
}

body.submit-page #submitForm > .row:not(.runout-pair) > div,
body.submit-page .physical-row > .physical-card {
  min-width: 0;
  padding: 18px 18px 16px !important;
  border: 1px solid rgba(255, 253, 247, .075) !important;
  border-radius: 15px !important;
  background: var(--submit-v2-tile) !important;
}

body.submit-page #submitForm label {
  color: rgba(255, 253, 247, .58);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .09em;
  text-transform: uppercase;
}

body.submit-page #submitForm input,
body.submit-page #submitForm textarea,
body.submit-page #submitForm select {
  min-height: 48px;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 253, 247, .19) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--submit-v2-cream) !important;
  box-shadow: none !important;
}

body.submit-page #submitForm input:focus,
body.submit-page #submitForm textarea:focus,
body.submit-page #submitForm select:focus {
  border-bottom-color: var(--submit-v2-gold) !important;
  outline: 0;
}

body.submit-page .physical-card,
body.submit-page .price-code-tools,
body.submit-page .runout-tools,
body.submit-page .runout-import-details {
  border-radius: 15px !important;
  background: rgba(255, 253, 247, .025) !important;
}

body.submit-page .price-code-tools,
body.submit-page .runout-import-details {
  margin: 0 0 10px;
  padding: 18px !important;
  border: 1px solid rgba(216, 183, 101, .18) !important;
}

body.submit-page .runout-pair {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
  margin: 78px 0 10px !important;
  padding: 22px !important;
  border: 1px solid rgba(216, 183, 101, .28) !important;
  border-radius: 20px !important;
  background: rgba(216, 183, 101, .045) !important;
}

body.submit-page .runout-pair::before {
  top: -44px;
  margin: 0 !important;
  font-family: var(--font-mono);
}

body.submit-page .runout-pair > div {
  min-width: 0;
}

body.submit-page .runout-tools {
  margin: 0 0 26px !important;
  padding: 18px !important;
  border: 1px solid rgba(255, 253, 247, .08) !important;
}

body.submit-page #submitForm > label[for="notes"] {
  display: block;
  margin: 32px 0 10px;
  color: var(--submit-v2-gold);
}

body.submit-page #submitForm #notes {
  min-height: 124px !important;
  margin-bottom: 28px;
  padding: 16px !important;
  border: 1px solid rgba(216, 183, 101, .42) !important;
  border-radius: 16px !important;
  background: rgba(8, 8, 7, .58) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 253, 247, .025);
}

body.submit-page #submitForm #notes:focus {
  border-color: rgba(244, 214, 126, .9) !important;
  box-shadow: 0 0 0 3px rgba(216, 183, 101, .14), inset 0 0 0 1px rgba(255, 253, 247, .04);
  outline: none;
}

body.submit-page [data-gatefold-only][hidden] {
  display: none !important;
}

body.submit-page #multiDiscEvidenceSection[hidden],
body.submit-page .multi-disc-block[hidden],
body.submit-page #multiDiscCoverageNote[hidden] {
  display: none !important;
}

body.submit-page .label-lesson > div {
  min-width: 0;
}

body.submit-page .label-lesson .label-lesson-multidisc {
  margin-top: 6px;
  color: var(--submit-v2-gold);
  font-size: 16px;
}

body.submit-page .multi-disc-evidence {
  display: grid;
  gap: 18px;
  margin-bottom: 28px;
}

body.submit-page .multi-disc-evidence .asset-head {
  margin-bottom: 0;
}

body.submit-page .multi-disc-evidence .asset-head label {
  display: block;
  margin-bottom: 6px;
}

body.submit-page .multi-disc-block {
  display: grid;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(216, 183, 101, .18);
}

body.submit-page .multi-disc-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.submit-page .multi-disc-block-head strong {
  color: var(--submit-v2-cream);
  font-weight: var(--font-weight-emphasis);
}

body.submit-page .multi-disc-block-head span {
  color: var(--submit-v2-gold);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body.submit-page .drop-grid.multi-disc-label-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.submit-page .multi-disc-coverage-note {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(216, 183, 101, .22);
  border-radius: 14px;
  background: rgba(216, 183, 101, .06);
}

/* Toutes les photos complémentaires restent visibles : pas de rail caché. */
body.submit-page .drop-grid.optional {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 16px !important;
  padding: 0 !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}

body.submit-page .drop-grid.optional .drop {
  min-height: 280px !important;
  grid-template-rows: auto auto minmax(120px, 1fr) auto;
  gap: 10px;
}

body.submit-page .drop-grid.optional .drop::before {
  position: relative !important;
  inset: auto !important;
  grid-area: preview;
  display: block;
  width: 100% !important;
  min-height: 120px;
  border: 1px solid rgba(216, 183, 101, .18);
  border-radius: 12px;
  background-color: rgba(0, 0, 0, .42);
  opacity: 1;
  transform: none;
}

body.submit-page .drop-grid.optional .drop:not(.has-preview)::before {
  background-image: none;
}

body.submit-page .drop-grid.optional .drop:not(.has-preview)::after {
  content: "";
  position: relative;
  inset: auto;
  z-index: 1;
  grid-area: preview;
  place-self: center;
  display: block;
  width: 64px;
  height: 64px;
  background: rgba(216, 183, 101, .78);
  -webkit-mask: var(--empty-proof-icon) center / contain no-repeat;
  mask: var(--empty-proof-icon) center / contain no-repeat;
  opacity: .82;
}

body.submit-page .drop-grid.optional .drop.has-preview::after {
  display: none;
}

body.submit-page .drop-grid.optional .drop span {
  width: 100%;
  max-width: none;
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

body.submit-page .drop-grid.optional .drop[data-drop-for="gatefoldLeft"],
body.submit-page .drop-grid.optional .drop[data-drop-for="gatefoldRight"] {
  --empty-proof-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'%3E%3Cpath d='M6 13h18l8 5 8-5h18v36H40l-8 5-8-5H6z'/%3E%3Cpath d='M32 18v36'/%3E%3C/g%3E%3C/svg%3E");
}

body.submit-page .drop-grid.optional .drop[data-drop-for="innerSleeveFront"],
body.submit-page .drop-grid.optional .drop[data-drop-for="innerSleeveBack"] {
  --empty-proof-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='3'%3E%3Crect x='8' y='8' width='48' height='48' rx='3'/%3E%3Ccircle cx='32' cy='32' r='11'/%3E%3Ccircle cx='32' cy='32' r='2' fill='black'/%3E%3C/g%3E%3C/svg%3E");
}

body.submit-page .drop-grid.optional .drop[data-drop-for="insertBooklet"] {
  --empty-proof-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'%3E%3Cpath d='M15 6h25l10 10v42H15z'/%3E%3Cpath d='M40 6v11h10M23 29h19M23 38h19M23 47h13'/%3E%3C/g%3E%3C/svg%3E");
}

body.submit-page .drop-grid.optional .drop[data-drop-for="stickerObi"] {
  --empty-proof-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='3' stroke-linejoin='round'%3E%3Cpath d='M10 20 28 6h26v26L34 54 10 30z'/%3E%3Ccircle cx='42' cy='18' r='4'/%3E%3C/g%3E%3C/svg%3E");
}

body.submit-page .drop-grid.optional .drop[data-drop-for="barcodePhoto"] {
  --empty-proof-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='black'%3E%3Cpath d='M8 12h3v40H8zM14 12h6v40h-6zM23 12h2v40h-2zM29 12h5v40h-5zM37 12h2v40h-2zM43 12h7v40h-7zM53 12h3v40h-3z'/%3E%3C/g%3E%3C/svg%3E");
}

body.submit-page .drop-grid.optional .drop[data-drop-for^="free"] {
  --empty-proof-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='13' width='50' height='38' rx='5'/%3E%3Ccircle cx='32' cy='32' r='9'/%3E%3Cpath d='M44 20h6M47 17v6'/%3E%3C/g%3E%3C/svg%3E");
}

body.submit-page .actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 6px !important;
  padding: 26px 0 4px !important;
  border-top: 1px solid rgba(216, 183, 101, .18) !important;
}

body.submit-page .actions button[type="submit"] {
  min-height: 54px !important;
  padding-inline: 24px;
  border-color: rgba(255, 253, 247, .22) !important;
  color: #090908 !important;
  background: linear-gradient(135deg, #fff0bd, #d8b765 48%, #8b6721) !important;
  box-shadow: 0 18px 42px rgba(216, 183, 101, .18) !important;
}

body.submit-page .actions .secondary {
  min-height: 54px !important;
}

body.submit-page .grid > aside.card {
  display: grid;
  grid-auto-rows: max-content;
  gap: 22px;
  position: relative !important;
  top: auto !important;
  align-self: start !important;
  height: max-content !important;
  max-height: none;
  padding: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* La colonne d'aide n'est pas une troisième carte. Seuls le compagnon et le
   guide gardent leur propre surface ; leur parent reste dans le flux normal
   afin que les deux tuiles défilent ensemble avec le formulaire. */
body.submit-page.exkave-shell-ready .grid > aside.card {
  position: relative !important;
  inset: auto !important;
  align-self: start !important;
  height: max-content !important;
  overflow: visible !important;
  background: none !important;
  background-image: none !important;
}

/* Tant que l'identification photo verrouille les étapes suivantes, les deux
   colonnes visibles forment une seule rangée et doivent fermer sur la même
   ligne basse. Hors de cet état compact, l'aide conserve sa hauteur naturelle
   pour ne pas s'étirer le long du formulaire complet. */
body.submit-page .grid:has(> #submitForm.pf-is-locked) > aside.card,
body.submit-page.exkave-shell-ready .grid:has(> #submitForm.pf-is-locked) > aside.card {
  grid-template-rows: max-content minmax(0, 1fr);
  align-self: stretch !important;
  height: auto !important;
}

body.submit-page .grid:has(> #submitForm.pf-is-locked) .submit-beginner-card {
  height: 100%;
}

body.submit-page .grid > aside.card::before {
  display: none;
}

body.submit-page .submit-beginner-card {
  padding: 24px;
  border: 1px solid var(--submit-v2-line);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 253, 247, .025), transparent 26%),
    var(--submit-v2-panel);
  box-shadow: 0 28px 72px rgba(0, 0, 0, .36);
}

body.submit-page .submit-beginner-card::before {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin-bottom: 22px;
  background: var(--submit-v2-gold);
}

body.submit-page .grid > aside.card h2 {
  margin: 0 0 22px !important;
  color: var(--submit-v2-cream);
  font-size: 26px !important;
  font-weight: 400 !important;
}

body.submit-page .plain-list {
  counter-reset: submit-help;
}

body.submit-page .plain-list > div {
  position: relative;
  counter-increment: submit-help;
  padding: 18px 0 18px 34px !important;
  border-top: 1px solid rgba(255, 253, 247, .08) !important;
}

body.submit-page .plain-list > div::before {
  content: "0" counter(submit-help);
  position: absolute;
  top: 20px;
  left: 0;
  color: var(--submit-v2-gold);
  font-family: var(--font-mono);
  font-size: 10px;
}

body.submit-page .plain-list strong {
  color: var(--submit-v2-cream);
}

body.submit-page .plain-list span {
  display: inline-block;
  margin-top: 6px;
  color: var(--submit-v2-paper) !important;
  line-height: 1.48;
}

body.submit-page .suggest-state {
  margin: 10px 14px 0;
  font-weight: 400;
  line-height: 1.4;
}

body.submit-page .suggest-state:not(.warn):not(.block) {
  color: var(--submit-v2-cream) !important;
  background: rgba(255, 253, 247, .035) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.submit-page #proofPrefillNotice {
  margin-bottom: 24px;
}

/* La colonne d'aide est un seul ensemble : compagnon et guide défilent dans
   le même flux sur desktop. Sous 1240 px, on retire l'ensemble plutôt que de
   laisser l'une des deux tuiles comprimer ou recouvrir le formulaire. */
@media (max-width: 1240px) {
  body.submit-page .hero {
    grid-template-columns: minmax(320px, .95fr) minmax(340px, 1.05fr) !important;
  }

  body.submit-page .grid {
    grid-template-columns: 1fr !important;
  }

  body.submit-page .grid > aside.card {
    display: none !important;
  }
}

/* La largeur utile dépend aussi de la colonne d'aide et du mode reprise : on
   décide donc sur le conteneur réel, pas seulement sur le viewport. */
@container (min-width: 500px) and (max-width: 820px) {
  body.submit-page #minimalEvidenceSection .drop-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
  }
}

/* Sur téléphone, la prise de preuves suit le parcours dans l'ordre du DOM :
   une preuve par ligne, sans mosaïque ni réordonnancement visuel. Le seuil de
   900 px couvre aussi les navigateurs mobiles qui exposent un viewport large. */
@media (max-width: 900px) {
  body.submit-page #minimalEvidenceSection .drop-grid {
    counter-reset: minimal-proof-step;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 18px !important;
  }

  body.submit-page #minimalEvidenceSection .drop-grid > .drop,
  body.submit-page #minimalEvidenceSection .drop-grid > .drop:first-child,
  body.submit-page #minimalEvidenceSection .drop-grid > .drop:nth-child(4),
  body.submit-page #minimalEvidenceSection .drop-grid > .drop:nth-child(5) {
    counter-increment: minimal-proof-step;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: 148px !important;
    padding: 20px !important;
    grid-template-rows: auto auto clamp(180px, 42vw, 320px) auto;
  }

  body.submit-page #minimalEvidenceSection .drop-grid > .drop::before,
  body.submit-page #minimalEvidenceSection .drop-grid > .drop:first-child::before {
    width: 100% !important;
    min-height: 180px;
  }

  body.submit-page #minimalEvidenceSection .drop-grid > .drop span {
    max-width: 100%;
    font-size: 17px !important;
    line-height: 1.25;
    overflow-wrap: normal;
    hyphens: none;
  }

  body.submit-page #minimalEvidenceSection .drop-grid > .drop span::before {
    content: counter(minimal-proof-step, decimal-leading-zero) " · ";
    color: var(--submit-v2-gold);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .08em;
  }

  body.submit-page #minimalEvidenceSection .drop-grid > .drop small {
    max-width: 34rem;
    margin-top: 8px;
    font-size: 17px;
  }

  body.submit-page #minimalEvidenceSection .pf-run {
    margin-top: 24px;
  }
}

@media (max-width: 760px) {
  body.submit-page > .wrap {
    width: min(100%, calc(100vw - 20px)) !important;
  }

  body.submit-page .submit-beginner-card {
    display: block;
  }

  body.submit-page .resume-crops {
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 12px 0;
    padding: 24px 20px;
  }

  body.submit-page .resume-crops button {
    width: 100%;
    white-space: normal;
  }

  body.submit-page .hero {
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 430px !important;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
  }

  body.submit-page .hero::before {
    inset: 43% 0 0;
    background:
      linear-gradient(180deg, #090908 0%, rgba(9, 9, 8, .28) 34%, rgba(9, 9, 8, .54)),
      url("/assets/exkave-collection-hifi-hero-v1.webp") center / cover no-repeat;
  }

  body.submit-page .hero::after {
    background: linear-gradient(180deg, rgba(9, 9, 8, .98) 0 36%, rgba(9, 9, 8, .58) 53%, transparent 82%);
  }

  body.submit-page .submit-hero-copy {
    justify-content: flex-start;
    padding: 24px 22px 110px !important;
  }

  body.submit-page .submit-hero-object {
    display: contents;
  }

  body.submit-page .submit-hero-caption {
    right: 22px !important;
    bottom: 20px !important;
  }

  body.submit-page .grid > aside.card {
    display: none !important;
  }

  body.submit-page .grid {
    opacity: 1 !important;
    filter: none !important;
    translate: none !important;
  }

  body.submit-page .plain-list {
    grid-template-columns: 1fr;
  }

  body.submit-page #submitForm {
    padding: 20px 14px 24px !important;
  }

  body.submit-page .asset-section {
    padding: 20px 14px !important;
  }

  body.submit-page .asset-head {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.submit-page .drop-grid,
  body.submit-page .drop-grid.optional {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.submit-page #minimalEvidenceSection .drop-grid {
    grid-template-columns: 1fr !important;
  }

  body.submit-page #minimalEvidenceSection .drop-grid > .drop,
  body.submit-page #minimalEvidenceSection .drop-grid > .drop:first-child,
  body.submit-page #minimalEvidenceSection .drop-grid > .drop:nth-child(4),
  body.submit-page #minimalEvidenceSection .drop-grid > .drop:nth-child(5) {
    grid-column: 1 / -1 !important;
  }

  body.submit-page #minimalEvidenceSection .drop span {
    max-width: 100%;
  }

  body.submit-page #submitForm > .row,
  body.submit-page .physical-row,
  body.submit-page .runout-pair {
    grid-template-columns: 1fr !important;
  }

  body.submit-page .runout-pair {
    padding: 18px 14px !important;
  }

  body.submit-page .actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 460px) {
  body.submit-page .hero h1 {
    font-size: 38px !important;
  }

  body.submit-page .hero .lead {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }

  body.submit-page .drop-grid,
  body.submit-page .drop-grid.optional {
    grid-template-columns: 1fr !important;
  }

  body.submit-page #minimalEvidenceSection .drop-grid {
    grid-template-columns: 1fr !important;
  }

  body.submit-page #minimalEvidenceSection .drop-grid > .drop:nth-child(5) {
    grid-column: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.submit-page .drop {
    transition: none;
  }

  body.submit-page .submit-companion-track > span {
    transition: none;
  }
}

:root { --ex-fin-exkave-submit-v2: 1; }

/* ---- Reservation de reprise -------------------------------------------- */
/* Quand l'URL porte `draft=<id>`, la page ROUVRE un depot. Le mode reprise
   n'etait applique qu'apres la lecture d'IndexedDB : le hero cedait sa place a
   la banniere, la grille passait a une colonne, l'aide laterale et la barre de
   preparation disparaissaient — et toute la page se reorganisait sous les yeux
   du contributeur.
   Les QUATRE regles du mode reprise sont donc appliquees des le premier peint,
   a l'identique. N'en refleter qu'une laissait une geometrie hybride, PIRE que
   le defaut d'origine : mesure a 0.473 contre 0.301.
   Le marqueur est retire si le brouillon se revele sans photo, pour rendre sa
   place au hero. */
html[data-exkave-reprise] body.submit-page .hero {
  display: none !important;
}

html[data-exkave-reprise] body.submit-page .grid {
  grid-template-columns: minmax(0, 1fr) !important;
}

html[data-exkave-reprise] body.submit-page .grid > aside.card {
  display: none !important;
}

html[data-exkave-reprise] body.submit-page .readiness {
  display: none !important;
}

/* La banniere tient sa place avant d'etre revelee : son texte par defaut est
   deja dans le markup, donc sa hauteur reservee est la bonne. */
html[data-exkave-reprise] body.submit-page .resume-crops[hidden] {
  display: grid;
  visibility: hidden;
}

/* Le statut de reprise hydrate un emplacement déjà présent. Le texte stable
   réserve sa propre hauteur, sans min-height arbitraire ni formulaire masqué. */
html[data-exkave-reprise] body.submit-page #resumeDraftNotice[hidden] {
  display: block;
  visibility: hidden;
}