/* Reprend la maquette Nap & Up. Les couleurs passent par des variables, surchargeables depuis le thème ou Elementor. La police est celle du thème. */
.napup {
	--napup-ink: #141414; --napup-muted: #666a6e; --napup-line: #dcdddf; --napup-ph: #f2f2f3; --napup-band: #f5f5f6; --napup-paper: #fff;
	--napup-thanks: #e2e2e3; --napup-err: #a32020; --napup-warn: #8a5a00; --napup-warn-soft: #fbf2df;
	color: var(--napup-ink); font-size: 15px; line-height: 1.5; box-sizing: border-box;
}
.napup *, .napup *::before, .napup *::after { box-sizing: border-box; }
.napup h1, .napup h2, .napup h3 { margin: 0; color: inherit; letter-spacing: -.01em; text-wrap: balance; }
.napup p { margin: 0; }
.napup a { color: inherit; }
.napup :focus-visible { outline: 2px solid var(--napup-ink); outline-offset: 2px; }
.napup [hidden] { display: none !important; }
.napup-muted { color: var(--napup-muted); }
.napup-small { font-size: 13px; }
.napup-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--napup-muted); }
.napup-crumb { font-size: 12px; color: var(--napup-muted); margin-bottom: 20px; }
.napup-crumb a { text-decoration: none; }
.napup-crumb a:hover { text-decoration: underline; }
.napup .napup-link { background: none; border: 0; padding: 0; color: inherit; font-weight: 600; font-size: 13px; text-decoration: none; cursor: pointer; }
.napup .napup-link:hover { background: none; color: inherit; text-decoration: underline; }
.napup-ph { background: var(--napup-ph); border-radius: 3px; }
.napup-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }

/* Boutons : les thèmes stylent souvent button et [type=submit], d'où la double classe. */
.napup .napup-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--napup-ink); border-radius: 4px; padding: 10px 14px; background: var(--napup-ink); color: #fff; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.4; text-decoration: none; text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; width: auto; }
.napup .napup-btn:hover, .napup .napup-btn:focus { background: var(--napup-ink); border-color: var(--napup-ink); color: #fff; opacity: .88; }
.napup .napup-btn--ghost, .napup .napup-btn--ghost:hover, .napup .napup-btn--ghost:focus { background: var(--napup-paper); color: var(--napup-ink); }
.napup .napup-btn--wide { width: 100%; justify-content: space-between; }
.napup .napup-btn[disabled] { opacity: .55; cursor: wait; }

/* Bouton Ma sélection */
.napup .napup-pill { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 6px 8px 6px 12px; background: var(--napup-band); color: var(--napup-ink); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.4; text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; }
.napup .napup-pill:hover, .napup .napup-pill:focus { background: var(--napup-line); color: var(--napup-ink); }
.napup-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--napup-ink); color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; }
.napup-floating { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 99990; }
.napup-floating .napup-pill { box-shadow: 0 2px 10px rgba(0, 0, 0, .18); background: var(--napup-paper); }

/* Catalogue */
.napup-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.napup .napup-chip { border: 1px solid var(--napup-line); border-radius: 999px; padding: 6px 13px; background: var(--napup-paper); color: var(--napup-ink); font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1.4; text-transform: none; letter-spacing: normal; box-shadow: none; cursor: pointer; }
.napup .napup-chip:hover, .napup .napup-chip:focus { background: var(--napup-band); color: var(--napup-ink); }
.napup .napup-chip[aria-pressed="true"] { background: var(--napup-ink); border-color: var(--napup-ink); color: #fff; font-weight: 600; }
.napup-result-count { margin-left: auto; font-size: 13px; color: var(--napup-muted); }
.napup-grid { display: grid; gap: 18px; }
.napup-grid--1 { grid-template-columns: minmax(0, 1fr); }
.napup-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.napup-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.napup-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.napup-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--napup-line); border-radius: 6px; padding: 12px; min-width: 0; }
.napup-card[hidden] { display: none; }
.napup-card__media { aspect-ratio: 2 / 1; margin-bottom: 8px; overflow: hidden; border-radius: 3px; }
.napup .napup-card__title { font-size: 16px; font-weight: 600; line-height: 1.3; }
.napup-card .napup-card__link { margin-top: auto; padding-top: 6px; }

/* Fiche */
.napup-fiche { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; }
.napup-gallery { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.napup-gallery__main { aspect-ratio: 5 / 4; overflow: hidden; border-radius: 3px; }
.napup-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 370px; }
.napup-thumb { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 3px; }
.napup-fiche__form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.napup .napup-fiche__title { font-size: 30px; font-weight: 700; line-height: 1.15; }
.napup .napup-fiche__subtitle { font-size: 17px; font-weight: 600; }
.napup-below { margin-top: 36px; }
.napup-single { max-width: 1040px; margin-inline: auto; padding: 36px 16px 56px; }

/* Champs */
.napup-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.napup-field label { font-size: 13px; font-weight: 600; margin: 0; }
.napup .napup-field input, .napup .napup-field select, .napup .napup-field textarea { width: 100%; max-width: 100%; border: 1px solid var(--napup-line); border-radius: 4px; padding: 8px 10px; background: var(--napup-paper); color: var(--napup-ink); font-family: inherit; font-size: 14px; line-height: 1.4; box-shadow: none; height: auto; margin: 0; }
.napup .napup-field textarea { min-height: 104px; resize: vertical; }
.napup .napup-field input[aria-invalid="true"] { border-color: var(--napup-err); }
.napup-err { color: var(--napup-err); font-size: 12px; }
.napup-row { display: flex; flex-wrap: wrap; gap: 14px; }
.napup-row > * { flex: 1 1 140px; min-width: 0; }
.napup-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.napup-estimate { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--napup-line); padding-top: 12px; }
.napup-estimate strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.napup-notice { background: var(--napup-warn-soft); color: var(--napup-warn); padding: 9px 12px; border-radius: 4px; font-size: 13px; }
.napup-check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--napup-muted); margin: 0; }
.napup-check input { margin: 3px 0 0; }
.napup-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Tiroir */
.napup-overlay { position: fixed; inset: 0; background: rgba(20, 20, 20, .45); z-index: 99998; }
.napup-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); z-index: 99999; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; background: var(--napup-paper); padding: calc(24px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) 24px; }
body.admin-bar .napup-drawer { top: 32px; }
.napup-drawer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.napup .napup-drawer__title { font-size: 24px; font-weight: 700; }
.napup .napup-close { border: 1px solid var(--napup-line); border-radius: 4px; padding: 3px 9px; background: none; color: var(--napup-ink); font-family: inherit; font-size: 13px; line-height: 1.4; text-transform: none; box-shadow: none; cursor: pointer; }
.napup .napup-close:hover, .napup .napup-close:focus { background: var(--napup-band); color: var(--napup-ink); }
.napup-sel-item, .napup-upsell { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; }
.napup-sel-item { padding-block: 14px; border-top: 1px solid var(--napup-line); }
.napup-sel-media { aspect-ratio: 5 / 4; overflow: hidden; border-radius: 3px; }
.napup .napup-sel-item h3, .napup .napup-upsell h3, .napup .napup-recap-item h3 { font-size: 15px; font-weight: 600; line-height: 1.3; }
.napup-sel-links { display: flex; gap: 6px; align-items: baseline; font-size: 12px; font-weight: 600; margin-top: 2px; }
.napup-sel-links a { text-decoration: none; }
.napup-sel-links a:hover { text-decoration: underline; }
.napup .napup-sel-links button { border: 0; padding: 0; background: none; color: inherit; font-family: inherit; font-size: 12px; font-weight: 600; line-height: inherit; text-transform: none; box-shadow: none; cursor: pointer; }
.napup .napup-sel-links button:hover, .napup .napup-sel-links button:focus { background: none; color: inherit; text-decoration: underline; }
.napup .napup-upsell-title { border-top: 1px solid var(--napup-line); padding-top: 14px; font-size: 15px; font-weight: 700; }
.napup-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 64px 18px; }
.napup-empty__icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--napup-band); font-size: 22px; }

/* Demande */
.napup .napup-devis__title { font-size: 34px; font-weight: 700; line-height: 1.15; margin-bottom: 8px; }
.napup-finalize { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 20px; }
.napup-box { position: relative; display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--napup-line); padding: 20px; min-width: 0; }
.napup .napup-box h2 { font-size: 20px; font-weight: 700; }
.napup-recap { display: flex; flex-direction: column; gap: 12px; background: var(--napup-band); padding: 18px; min-width: 0; }
.napup .napup-recap h2 { font-size: 18px; font-weight: 700; }
.napup-recap-item { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--napup-line); }
.napup-money { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-variant-numeric: tabular-nums; }
.napup-money--total { font-size: 15px; font-weight: 700; }
.napup-money span:last-child { white-space: nowrap; }

/* Remerciement */
.napup-thanks { display: flex; flex-direction: column; align-items: center; gap: 14px; background: var(--napup-thanks); padding: 90px 16px; text-align: center; }
.napup-thanks__tick { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--napup-ink); color: #fff; font-size: 22px; }
.napup .napup-thanks h2 { font-size: 30px; font-weight: 700; }
.napup-thanks p { max-width: 52ch; color: #484b4f; }
.napup-thanks .napup-actions { justify-content: center; }

@media (max-width: 820px) {
	.napup-fiche, .napup-finalize { grid-template-columns: minmax(0, 1fr); }
	.napup-grid--3, .napup-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.napup .napup-devis__title { font-size: 28px; }
	.napup-thanks { padding-block: 60px; }
}
@media (max-width: 600px) {
	.napup-grid--2, .napup-grid--3, .napup-grid--4 { grid-template-columns: minmax(0, 1fr); }
	body.admin-bar .napup-drawer { top: 46px; }
}