/* ==========================================================
   Moteur de personnalisation des Docs ADMINISTRATIFS N.A.Z
   Style du panneau de configuration + mise en page responsive.
   Générique — partagé par tous les documents de la gamme.
   ========================================================== */

.ndp-shell {
  --ndp-panel-w: 340px;
  --ndp-bg: #ffffff;
  --ndp-border: #e2e2e4;
  --ndp-ink: #16171a;
  --ndp-ink-soft: #55575c;
  --ndp-ink-faint: #8a8c90;
  --ndp-warn: #b45309;
  --ndp-warn-bg: #fef3c7;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.ndp-panel {
  width: 100%;
  background: var(--ndp-bg);
  border: 1px solid var(--ndp-border);
  border-radius: 10px;
  padding: 18px;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ndp-ink);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.ndp-panel h2 {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 4px;
}
.ndp-panel-locked {
  border-color: var(--accent, var(--ndp-border));
}
.ndp-panel-locked .ndp-actions {
  border-top: none;
  padding-top: 0;
  position: static;
}
.ndp-panel .ndp-intro {
  font-size: 12px;
  color: var(--ndp-ink-soft);
  line-height: 1.5;
  margin: 0 0 16px;
}
.ndp-intro-steps {
  margin: 0 0 12px;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ndp-ink-soft);
}
.ndp-intro-steps li {
  margin-bottom: 6px;
}
.ndp-intro-steps li:last-child {
  margin-bottom: 0;
}
.ndp-intro-steps strong {
  color: var(--ndp-ink);
}

.ndp-group {
  margin-bottom: 16px;
}
.ndp-group h3 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ndp-ink-faint);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ndp-border);
}

.ndp-field {
  margin-bottom: 10px;
}
.ndp-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
}
.ndp-field input[type="text"] {
  width: 100%;
  font: inherit;
  /* 16px minimum : sous ce seuil, Safari iOS zoome automatiquement la
     page à chaque tap dans le champ — expérience cassante sur mobile. */
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--ndp-border);
  border-radius: 6px;
  color: var(--ndp-ink);
  background: #fff;
}
.ndp-field input[type="text"]:focus {
  outline: none;
  border-color: var(--accent, #16171a);
}

.ndp-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ndp-color-row input[type="color"] {
  width: 44px;
  height: 44px;
  border: 1px solid var(--ndp-border);
  border-radius: 6px;
  padding: 2px;
  background: #fff;
  cursor: pointer;
}
.ndp-color-row span {
  font-size: 12px;
  color: var(--ndp-ink-soft);
}

.ndp-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ndp-logo-preview {
  width: 56px;
  height: 56px;
  border: 1px solid var(--ndp-border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  flex-shrink: 0;
  overflow: hidden;
}
.ndp-logo-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.ndp-logo-row input[type="file"] {
  font-size: 11.5px;
  max-width: 100%;
}
.ndp-hint {
  font-size: 11px;
  color: var(--ndp-ink-faint);
  margin: 6px 0 0;
}
.ndp-warning {
  font-size: 11px;
  color: var(--ndp-warn);
  background: var(--ndp-warn-bg);
  border-radius: 5px;
  padding: 5px 8px;
  margin-top: 6px;
  display: none;
}
.ndp-warning.is-visible {
  display: block;
}

.ndp-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--ndp-border);
  position: sticky;
  bottom: 0;
  background: var(--ndp-bg);
}
.ndp-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 11px 14px;
  min-height: 44px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  text-align: center;
}
.ndp-btn-primary {
  background: var(--accent, #16171a);
  color: #fff;
}
.ndp-btn-primary:active {
  opacity: 0.85;
}
.ndp-btn-secondary {
  background: transparent;
  color: var(--ndp-ink-soft);
  border: 1px solid var(--ndp-border);
}
.ndp-status {
  font-size: 11px;
  color: var(--ndp-ink-faint);
  text-align: center;
  min-height: 14px;
}

.ndp-preview {
  width: 100%;
  /* "top left", pas "top center" : quand la page A4 (largeur fixe)
     déborde de ce conteneur plus étroit, elle se colle à gauche (le
     margin:auto de .page ne peut pas compenser un contenu plus large
     que son parent). Réduire autour du centre du CONTENEUR scalait
     alors autour d'un point différent du centre réel du contenu et
     décalait toute la prévisualisation vers la droite (page coupée à
     droite, bande vide à gauche — bug remonté par Gary sur mobile).
     Réduire depuis le coin gauche fait remplir exactement la largeur
     disponible, sans décalage ; sur desktop où il n'y a pas de
     débordement, ce choix ne change rien puisque .page est déjà
     centrée par margin:auto. */
  transform-origin: top left;
}

/* Verrouillage du contenu (achat à l'unité, document non entitled) — par
   défaut (avant tout JS), un document data-ndp-paid est verrouillé : page 1
   floutée et non interactive, pages suivantes cachées. buildPanel() (JS,
   uniquement une fois l'entitlement confirmé en base via resolveAccess())
   pose .ndp-unlocked sur <body> pour lever ce verrou. Fail-closed : si le JS
   ne charge pas ou échoue, le document RESTE verrouillé — jamais l'inverse.
   Documents sans data-ndp-paid : ces règles ne s'appliquent jamais. */
body[data-ndp-paid]:not(.ndp-unlocked) .ndp-preview .page:first-child {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}
body[data-ndp-paid]:not(.ndp-unlocked) .ndp-preview .page:not(:first-child) {
  display: none;
}
@media print {
  /* Jamais imprimable verrouillé, même dans le cas improbable où le
     bouton d'impression resterait accessible malgré pointer-events:none. */
  body[data-ndp-paid]:not(.ndp-unlocked) .ndp-preview {
    display: none !important;
  }
}

/* Champs à remplir à chaque envoi (client, date, lieu...) — édition
   directe au clic, texte natif du navigateur, aucun JS nécessaire. */
.fill-editable {
  cursor: text;
  border-bottom: 1px dashed currentColor;
  opacity: 0.85;
  border-radius: 2px;
  outline-offset: 2px;
}
.fill-editable:hover {
  opacity: 1;
}
.fill-editable:focus {
  outline: 2px solid var(--accent, #16171a);
  background: var(--accent-tint, rgba(0, 0, 0, 0.05));
  opacity: 1;
}
@media print {
  .fill-editable,
  .fill-editable:focus {
    border-bottom: none;
    outline: none;
    background: none;
    opacity: 1;
  }
}
/* Idem : sous 1000px (mode mobile empilé), les crochets à remplir dans
   le document passent aussi à 16px pour éviter le zoom automatique iOS
   au tap — écran uniquement, l'impression garde la vraie taille du
   document (règle @media print ci-dessus, plus prioritaire). */
@media screen and (max-width: 999px) {
  .fill-editable {
    font-size: 16px;
  }
}

@media (min-width: 1000px) {
  .ndp-shell {
    flex-direction: row;
    align-items: flex-start;
  }
  .ndp-panel {
    width: var(--ndp-panel-w);
    flex: 0 0 var(--ndp-panel-w);
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
  }
  .ndp-preview {
    flex: 1 1 auto;
    min-width: 0;
  }
}

@media print {
  .ndp-shell {
    display: block;
    padding: 0;
    max-width: none;
  }
  .ndp-panel {
    display: none;
  }
  .ndp-preview {
    transform: none !important;
    height: auto !important;
    width: auto !important;
  }
}