/* ============================================================
   Clickprint — la modale « peau neuve »
   Annonce aux clients de l'ancienne boutique que le site a
   changé. Affichée sur l'ACCUEIL SEULEMENT, entre deux dates,
   une fois par navigateur.

   Couleurs : AUCUNE valeur en dur — tout vient de charte.css.
   Servi immutable : incrementer ?v= si cette feuille change.
   ============================================================ */

.pn-voile {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(29, 29, 27, .62);
  /* Pas d'animation d'entree : la modale doit etre lisible tout de
     suite, y compris pour qui a demande moins de mouvement. */
}
.pn-voile[hidden] { display: none; }

.pn-boite {
  background: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  max-width: 540px; width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 28px 28px 24px;
  box-shadow: 0 18px 48px rgba(29, 29, 27, .28);
  font-family: var(--c-font-texte);
  position: relative;
}

.pn-fermer {
  position: absolute; top: 10px; right: 12px;
  background: none; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1;
  color: var(--c-muted);
  padding: 6px 10px; border-radius: 8px;
}
.pn-fermer:hover { color: var(--c-ink); background: var(--c-primary-l); }

.pn-boite h2 {
  font-family: var(--c-font-titre);
  font-size: 26px; font-weight: 800;
  letter-spacing: -.4px;
  margin: 0 0 14px;
  color: var(--c-ink);
  padding-right: 32px;
}
.pn-boite p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.55; }
.pn-boite strong { color: var(--c-ink); }
.pn-boite a { color: var(--c-primary); }

.pn-actions {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 20px;
}
.pn-cta {
  background: var(--c-primary); color: #fff;
  border: 0; border-radius: 9px;
  padding: 12px 22px; font-size: 15px; font-weight: 600;
  font-family: var(--c-font-texte);
  cursor: pointer;
}
.pn-cta:hover { background: var(--c-primary-d); }
.pn-lien { color: var(--c-primary); font-size: 15px; }

@media (max-width: 480px) {
  .pn-boite  { padding: 24px 18px 20px; }
  .pn-boite h2 { font-size: 22px; }
  .pn-actions { gap: 10px; }
  .pn-cta { width: 100%; text-align: center; }
}