/* =========================================================
   REGISTRY INSTITUTIONAL LAYER
   Raffinement visuel institutionnel
   ========================================================= */

/* 1. Silence visuel général */
body{
  letter-spacing:.001em;
}

.card,
.hero,
.registryCanopy,
.signalCanon,
.statusBarPremium,
.metricsBox,
.paywallDialog,
.sdsImportPreviewPanel{
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

/* 2. Hiérarchie des sections */
.sectionBlock{
  position:relative;
}

.sectionBlock::before{
  content:"";
  display:block;
  width:100%;
  height:1px;
  margin:0 0 14px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(214,177,94,.12),
    transparent
  );
}

.sectionBlock:first-of-type::before{
  display:none;
}

/* 3. Titrage plus institutionnel */
.cardTitle{
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#f1ddb5;
}

.cardSub{
  max-width:78ch;
  color:#aeb7c7;
}

.registryCanopy-title,
.signalCanon-kicker,
.statusBarPremium-kicker,
.sdsLineKicker,
.paywallKicker{
  letter-spacing:.18em;
}

/* 4. Hero plus souverain */
.hero{
  border:1px solid rgba(214,177,94,.20);
  box-shadow:
    0 28px 72px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 0 1px rgba(214,177,94,.06);
}

.hero-title{
  max-width:16ch;
  font-size:34px;
  line-height:1.02;
  letter-spacing:.008em;
}

.hero-copy{
  max-width:78ch;
  color:#dbe2ee;
}

.hero-side{
  border-color:rgba(214,177,94,.20);
}

.hero-note{
  color:#b8c1d0;
}

/* 5. Boutons plus “registre souverain” */
button,
.headerAction,
.sdsEntryBtn,
.sdsCardBtn,
.payMethod{
  transition:
    transform .16s ease,
    filter .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

button:hover,
.headerAction:hover,
.sdsEntryBtn:hover,
.sdsCardBtn:hover,
.payMethod:hover{
  transform:translateY(-1px);
}

.primary,
button.primary{
  border-color:rgba(214,177,94,.30);
  background:
    linear-gradient(180deg, rgba(72,56,28,.98), rgba(37,28,16,.99));
  color:#fff2d4;
  box-shadow:
    0 16px 34px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(214,177,94,.12),
    0 0 30px rgba(214,177,94,.06);
}

.primary:hover,
button.primary:hover{
  filter:brightness(1.06);
  box-shadow:
    0 18px 38px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 34px rgba(214,177,94,.08);
}

.ghost{
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012));
}

/* 6. Registre : plus institutionnel, moins carte “catalogue classique” */
.registryCanopy{
  border-color:rgba(214,177,94,.22);
}

.registryCard{
  min-height:124px;
  border-radius:18px;
  border-color:rgba(255,255,255,.07);
  background:
    linear-gradient(180deg, rgba(16,21,33,.98), rgba(10,14,24,.99));
}

.registryCard-title{
  font-size:13px;
  line-height:1.35;
  color:#f6f1e8;
}

.registryCard-count{
  font-size:17px;
  color:#f2ddb2;
}

.registryCard-sub{
  color:#aeb7c7;
  max-width:44ch;
}

.registryCard.is-active{
  border-color:rgba(214,177,94,.30);
  box-shadow:
    0 0 0 3px rgba(214,177,94,.09),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 0 1px rgba(214,177,94,.05),
    0 16px 28px rgba(0,0,0,.20);
}

/* 7. Stats et état compact plus nobles */
.registryStat,
.statusCompactCard,
.statusPill{
  border-color:rgba(255,255,255,.07);
  background:
    linear-gradient(180deg, rgba(21,27,41,.94), rgba(12,16,26,.98));
}

.registryStat-label,
.statusCompactLabel,
.statusPill-label{
  color:#adb6c6;
}

.registryStat-value,
.statusCompactValue,
.statusPill-value{
  color:#f3f5fa;
  font-weight:700;
}

/* 8. Production documentaire = cœur noble */
.out{
  border-color:rgba(214,177,94,.20);
  background:
    linear-gradient(180deg, rgba(14,18,28,.96), rgba(8,11,18,.99));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 14px 34px rgba(0,0,0,.18);
}

.sdsLinePanel{
  border-color:rgba(214,177,94,.20);
}

.signalCanon{
  border-color:rgba(214,177,94,.20);
}

.signalCanon-text{
  color:#f5f7fb;
}

/* 9. Studio SDS : légèrement plus discret que la production */
#studioPanel .sdsUploadZone,
#studioPanel .sdsImportPreviewPanel,
#studioPanel .importPreviewCard,
#studioPanel .importPreviewEditorCard{
  background:
    linear-gradient(180deg, rgba(255,255,255,.024), rgba(255,255,255,.014));
}

#studioPanel{
  margin-top:14px;
  padding-top:2px;
}

/* 10. Outils avancés : volontairement plus froids et discrets */
#advancedPanel .metricsBox{
  border-color:rgba(255,255,255,.05);
  background:
    linear-gradient(180deg, rgba(15,19,29,.84), rgba(10,13,20,.92));
  box-shadow:
    0 10px 24px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.02);
}

#advancedPanel .pill{
  opacity:.92;
}

#advancedPanel .small{
  color:#97a1b3;
}

/* 11. Toggles d’ouverture plus nets */
.studioToggle,
.advancedToggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:48px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(214,177,94,.14);
  background:
    linear-gradient(180deg, rgba(23,29,43,.92), rgba(14,19,29,.96));
}

.studioToggle:hover,
.advancedToggle:hover{
  border-color:rgba(214,177,94,.24);
}

.studioPanel,
.advancedPanel{
  margin-top:14px;
}

/* 12. Header un peu plus prestigieux */
.sdsHeader{
  border-bottom:1px solid rgba(214,177,94,.18);
  box-shadow:
    0 10px 28px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -1px 0 rgba(214,177,94,.05);
}

.sdsHeader-title{
  letter-spacing:.015em;
}

.headerChip{
  border-color:rgba(214,177,94,.16);
}

/* 13. Paywall : rendre la modal plus premium */
.paywallDialog{
  border-color:rgba(214,177,94,.22);
  box-shadow:
    0 28px 80px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 0 1px rgba(214,177,94,.06);
}

.paywallPriceBox{
  border-color:rgba(214,177,94,.24);
  background:rgba(214,177,94,.08);
}

.payPlan.active,
.payMethod.active{
  border-color:rgba(214,177,94,.28);
}

/* 14. Barre mobile : plus compacte et plus noble */
.sdsBottomBar{
  border-color:rgba(214,177,94,.18);
  background:
    linear-gradient(180deg, rgba(15,20,31,.90), rgba(10,14,24,.96));
}

/* 15. QR canvas mieux intégré */
canvas{
  border-radius:18px;
  box-shadow:
    0 14px 30px rgba(0,0,0,.18),
    0 0 0 1px rgba(214,177,94,.10);
}

/* 16. Meilleure respiration verticale */
.productionHead{
  margin-bottom:14px;
}

.productionActions{
  margin-top:16px;
}

.registryLegend,
.metricsMeta,
.hero-pills,
.paywallMethods,
.paywallBenefits{
  gap:10px;
}

/* 17. Responsive prestige */
@media (max-width:980px){
  .hero-title{
    max-width:none;
    font-size:29px;
  }
}

@media (max-width:640px){
  .hero-title{
    font-size:23px;
    line-height:1.08;
  }

  .cardTitle{
    letter-spacing:.14em;
  }

  .registryCard{
    min-height:unset;
  }

  .studioToggle,
  .advancedToggle{
    min-height:46px;
  }
}