/* ==========================================================================
   Template produit NYRIX — fiche par sections (woocommerce/single-product-nyrix.php)

   Mobile d'abord. Couleurs : uniquement les jetons du thème.
   - Boutons : --nx-bouton (#BF8D62) et son encre sombre --nx-bouton-ink,
     les mêmes que tout le site (css/nyrix-v2.css), dans les deux thèmes.
   - Petits textes bronze (sur-titres, liens) : --nx-accent-ink, plus foncé en
     clair (#8A5229, 6,3:1 sur blanc) ; le bronze des boutons n'atteint que
     2,9:1 sur blanc, il reste réservé aux boutons et au graphisme.
   - Sections sombres (design, sport, batterie) : --nx-band-bg, qui reste
     sombre dans les deux thèmes ; encre --nx-cream-fixe, accent
     --nx-band-accent.
   Thème clair par défaut sur ces fiches (inc/produit-nyrix/activation.php).
   ========================================================================== */

.nxp {
	--nxp-fond: var(--nx-bg);
	--nxp-fond-alt: var(--nx-surface);
	--nxp-carte: var(--nx-surface2);
	--nxp-encre: var(--nx-ink);
	--nxp-encre2: var(--nx-ink2);
	--nxp-discret: var(--nx-muted);
	--nxp-ligne: var(--nx-line-strong);
	--nxp-accent: var(--nx-accent-ink);
	--nxp-graph: var(--nx-bouton);
	--nxp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--nxp-pad: 20px;
	--nxp-sy: 48px; /* Espace vertical des sections (haut et bas) : téléphone. */
	--nxp-r: 20px;
	--nxp-r-lg: 24px;
	background: var(--nxp-fond);
	color: var(--nxp-encre);
	font-family: 'Geist', system-ui, -apple-system, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
:root[data-theme="light"] .nxp {
	--nxp-fond: var(--nx-surface);
	--nxp-fond-alt: var(--nx-bg);
	--nxp-carte: var(--nx-bg);
}
html[dir="rtl"] .nxp,
body.rtl .nxp { font-family: 'IBM Plex Sans Arabic', 'Geist', system-ui, sans-serif; }

@media (min-width: 768px) {
	.nxp { --nxp-pad: 32px; --nxp-sy: 80px; --nxp-r: 24px; --nxp-r-lg: 28px; }
}

.nxp *, .nxp *::before, .nxp *::after { box-sizing: border-box; }
/* style.css donne aux <p> du site un gris clair fixe (#C9CCD1), illisible sur
   fond clair : ici ils suivent l'encre de leur section. :where() garde la
   spécificité d'un simple « p », pour que les classes de la page l'emportent. */
:where(.nxp) p, :where(.nxp) li, :where(.nxp) h1, :where(.nxp) h2, :where(.nxp) h3, :where(.nxp) summary, :where(.nxp) strong { color: inherit; }
.nxp img, .nxp video { max-width: 100%; display: block; }
.nxp img { height: auto; }

/* --- Mise en page ------------------------------------------------------ */
.nxp-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--nxp-pad); }
.nxp-wrap-etroit { max-width: 1100px; }
.nxp-sec { padding-block: var(--nxp-sy); background: var(--nxp-fond); scroll-margin-top: 72px; }
.nxp-alt { background: var(--nxp-fond-alt); }
/* Téléphone : deux sections consécutives de même fond (normal, alterné ou
   sombre) n'additionnent pas leurs marges, la seconde n'a pas d'espace en haut.
   Sauf après le Hero, qui n'a pas d'espace en bas (image collée au bord). */
@media (max-width: 767px) {
	.nxp-sec:not(.nxp-alt):not(.nxp-sombre) + .nxp-sec:not(.nxp-alt):not(.nxp-sombre),
	.nxp-alt:not(.nxp-hero) + .nxp-alt,
	.nxp-sombre + .nxp-sombre { padding-top: 0; }
}
.nxp-centre { display: flex; flex-direction: column; align-items: center; text-align: center; }
.nxp-pile { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 768px) { .nxp-pile { gap: 36px; } }

/* --- Sections sombres, dans les deux thèmes ---------------------------- */
.nxp-sombre {
	--nxp-fond: var(--nx-band-bg);
	--nxp-carte: color-mix(in srgb, var(--nx-cream-fixe) 7%, var(--nx-band-bg));
	--nxp-encre: var(--nx-cream-fixe);
	--nxp-encre2: color-mix(in srgb, var(--nx-cream-fixe) 74%, var(--nx-band-bg));
	--nxp-discret: color-mix(in srgb, var(--nx-cream-fixe) 60%, var(--nx-band-bg));
	--nxp-ligne: color-mix(in srgb, var(--nx-cream-fixe) 22%, var(--nx-band-bg));
	--nxp-accent: var(--nx-band-accent);
	--nxp-graph: var(--nx-band-accent);
	background: var(--nxp-fond);
	color: var(--nxp-encre);
	color-scheme: dark;
}

/* --- Typographie ------------------------------------------------------- */
.nxp-h1,
.nxp-h2,
.nxp-display {
	margin: 0;
	font-family: 'Archivo', 'Geist', system-ui, sans-serif;
	font-stretch: 112%;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--nxp-encre);
	text-wrap: balance;
}
html[dir="rtl"] .nxp-h1, html[dir="rtl"] .nxp-h2, html[dir="rtl"] .nxp-display,
body.rtl .nxp-h1, body.rtl .nxp-h2, body.rtl .nxp-display { font-family: 'Tajawal', 'Archivo', sans-serif; letter-spacing: 0; }
.nxp-h1 { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.1; }
.nxp-h2 { font-size: clamp(32px, 5.4vw, 56px); line-height: 1.06; }
.nxp-h2-moyen { font-size: clamp(28px, 4.4vw, 48px); }
.nxp-display { font-size: clamp(48px, 10vw, 104px); line-height: 0.98; letter-spacing: -0.03em; }
.nxp-lead { margin: 0; max-width: 62ch; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: var(--nxp-encre2); text-wrap: pretty; }
.nxp-sur { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nxp-accent); }
html[dir="rtl"] .nxp-sur, body.rtl .nxp-sur { letter-spacing: 0; }
.nxp-petit { margin: 0; font-size: 14px; line-height: 1.7; color: var(--nxp-encre2); }

/* --- Médias ------------------------------------------------------------ */
.nxp-media { width: 100%; border-radius: var(--nxp-r-lg); overflow: hidden; background: var(--nxp-carte); }
.nxp-media img { width: 100%; }
.nxp-media-max { max-width: 980px; }
.nxp-parallax { overflow: hidden; }
.nxp-parallax > img { will-change: transform; transform: translate3d(0, var(--nxp-py, 0px), 0) scale(1.08); }
/* Cadrage « image entière » (réglage Cadrage d'une image de section) : l'image
   garde son ratio, posée sur le fond de la section, ni recadrage ni parallax ;
   hauteur limitée sur ordinateur, pleine largeur sur téléphone. */
.nxp-sec .nxp-entiere { background: transparent; border-radius: 0; overflow: visible; } /* .nxp-sec : passe devant le fond des cadres (ex. .nxp-inclus-photo) */
.nxp-entiere img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(70vh, 620px); margin-inline: auto; object-fit: contain; transform: none; }
.nxp-hero-image.nxp-entiere { margin-bottom: clamp(48px, 6vw, 80px); }
/*
 * Coins arrondis des images de sections, comme la galerie et les cartes
 * (--nxp-r-lg) : Hero, Section mise en avant, et images « entières » (dont le
 * cadre n'a volontairement pas de fond ni d'arrondi). Les images dans un cadre
 * .nxp-media l'étaient déjà ; la carte claire du mode sombre garde son rayon
 * intérieur (règle plus précise plus bas).
 */
.nxp-hero-image img,
.nxp-image-capteurs img,
.nxp-entiere img { border-radius: var(--nxp-r-lg); }

/* Image rognée à l'affichage (bords noirs d'une photo, fichier intact). */
.nxp-rogne { position: relative; overflow: hidden; width: 100%; }
.nxp-rogne > img { position: absolute; max-width: none; width: var(--nxp-rw); height: auto; left: var(--nxp-rl); top: var(--nxp-rt); }

.nxp-video { position: relative; width: 100%; border-radius: var(--nxp-r-lg); overflow: hidden; background: #000; }
.nxp-video video { width: 100%; height: 100%; object-fit: cover; }
.nxp-video-btn {
	position: absolute;
	inset-inline-end: 14px;
	inset-block-end: 14px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	display: grid;
	place-items: center;
	/* Fond blanc translucide + icône sombre : lisible sur les images sombres
	   comme claires (icône ≥ 3:1 sur son fond ; ombre pour les fonds clairs). */
	background: rgba(255, 255, 255, 0.88);
	color: #0F0F10;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: background-color 0.18s ease, transform 0.18s ease;
}
.nxp-video-btn:hover { background: #FFFFFF; }
.nxp-video-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.55); }
.nxp-video-btn:active { transform: scale(0.95); }
.nxp-video-btn .i-pause { display: none; }
.nxp-video.is-lecture .nxp-video-btn .i-pause { display: block; }
.nxp-video.is-lecture .nxp-video-btn .i-play { display: none; }
.nxp-video-169 { aspect-ratio: 16 / 9; }
.nxp-video-916 { aspect-ratio: 9 / 16; }
/* Section Vidéo : 16:9 sur ordinateur, verticale sur téléphone (768 px et
   moins). La vidéo masquée n'est jamais téléchargée (preload="none", lecture
   seulement si visible, affiche posée par le JS). Hauteur de la verticale :
   80 % de l'écran au plus. */
.nxp-video-mobile { display: none; width: 100%; }
.nxp-video-mobile .nxp-video { width: min(100%, calc(80vh * 9 / 16)); width: min(100%, calc(80svh * 9 / 16)); margin-inline: auto; }
.nxp-video-mobile.nxp-video-seule { display: block; }
@media (max-width: 768px) {
	.nxp-video-sec .nxp-video-ordi { display: none; }
	/* Téléphone : verticale bord à bord (toute la largeur de l'écran, sans
	   marge ni coins arrondis ; le titre reste dans le conteneur), 9:16, au
	   plus 90 % de la hauteur d'écran visible (au-delà : recadrage haut / bas,
	   la vidéo est en object-fit: cover). Sortie du conteneur par ses marges
	   (= 100vw sur téléphone, sans défilement horizontal). */
	.nxp-video-mobile { display: block; width: calc(100% + 2 * var(--nxp-pad)); margin-inline: calc(-1 * var(--nxp-pad)); }
	.nxp-video-mobile .nxp-video { width: 100%; aspect-ratio: auto; height: min(calc(100vw * 16 / 9), 90vh); height: min(calc(100vw * 16 / 9), 90svh); border-radius: 0; }
	/* Bouton lecture / pause en bas à droite, remonté au-dessus de la zone
	   couverte par la barre d'onglets du site (68 px) et le bouton WhatsApp
	   flottant (jusqu'à ~132 px du bas) quand le bas de la vidéo atteint le
	   bas de l'écran. */
	.nxp-video-mobile .nxp-video-btn { inset-block-end: 148px; }
}

/* --- Focus ------------------------------------------------------------- */
.nxp :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--nxp-encre);
	outline-offset: 3px;
	border-radius: 6px;
}

/* --- Boutons (le bouton du site, .nx-bouton, porte la couleur) ---------- */
.nxp .nx-bouton { min-height: 48px; padding: 0 24px; text-decoration: none; }
.nxp-bouton-petit.nx-bouton { min-height: 40px; padding: 0 18px; font-size: 14px; }

/* --- Bandeau aperçu (éditeurs) ----------------------------------------- */
.nxp-apercu { margin: 0; padding: 10px var(--nxp-pad); background: var(--nx-bouton); color: var(--nx-bouton-ink); font-size: 14px; font-weight: 600; text-align: center; }

/* --- Sous-navigation produit -------------------------------------------
 * html et body ont overflow-x: hidden sur tout le site, ce qui rend
 * position: sticky inopérant. Le JS la fixe en haut de l'écran (.is-fixe)
 * une fois dépassée ; une réserve garde sa hauteur dans le flux. */
.nxp-nav-reserve { height: 57px; }
.nxp-nav {
	position: relative;
	z-index: 40;
	background: color-mix(in srgb, var(--nxp-fond) 90%, transparent);
	backdrop-filter: saturate(1.4) blur(12px);
	-webkit-backdrop-filter: saturate(1.4) blur(12px);
	border-bottom: 1px solid var(--nx-line);
}
.nxp-nav.is-fixe { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; animation: nxp-descente 0.25s var(--nxp-ease); }
/* Sous 600 px, la barre d'admin WordPress défile avec la page. */
@media (max-width: 600px) { .nxp-nav.is-fixe { top: 0; } }
@keyframes nxp-descente { from { transform: translateY(-100%); } to { transform: none; } }
.nxp-nav .nxp-wrap { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nxp-nav-nom { font-family: 'Archivo', sans-serif; font-stretch: 112%; font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nxp-nav-liens { display: flex; align-items: center; gap: 24px; font-size: 14px; }
.nxp-nav-liens a:not(.nx-bouton) { display: none; color: var(--nxp-encre2); text-decoration: none; padding-block: 18px; border-bottom: 2px solid transparent; }
.nxp-nav-liens a:not(.nx-bouton):hover { color: var(--nxp-encre); }
.nxp-nav-liens a[aria-current="true"] { color: var(--nxp-encre); border-bottom-color: var(--nxp-encre); }
@media (min-width: 768px) { .nxp-nav-liens a:not(.nx-bouton) { display: inline-block; } }

/* ==========================================================================
   1. Achat
   ========================================================================== */
.nxp-achat { padding-block: 24px var(--nxp-sy); }
.nxp-achat-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
@media (min-width: 900px) {
	.nxp-achat { padding-top: 48px; }
	.nxp-achat-grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; }
}

.nxp-galerie { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nxp-galerie-piste {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	border-radius: var(--nxp-r-lg);
	border: 1px solid var(--nx-line);
	background: var(--nxp-fond-alt);
}
:root[data-theme="light"] .nxp-galerie-piste { background: var(--nx-surface); }
.nxp-galerie-piste::-webkit-scrollbar { display: none; }
.nxp-galerie-slide { flex: 0 0 100%; aspect-ratio: 1 / 1; scroll-snap-align: center; display: grid; place-items: center; }
.nxp-galerie-slide img { width: 100%; height: 100%; object-fit: contain; }
.nxp-vignettes { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.nxp-vignettes::-webkit-scrollbar { display: none; }
.nxp-vignette {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	padding: 0;
	border-radius: 14px;
	overflow: hidden;
	cursor: pointer;
	border: 2px solid var(--nx-line);
	background: var(--nxp-fond-alt);
	transition: border-color 0.18s ease;
}
.nxp-vignette img { width: 100%; height: 100%; object-fit: cover; }
.nxp-vignette[aria-current="true"] { border-color: var(--nxp-encre); }
@media (min-width: 768px) { .nxp-vignette { flex-basis: 72px; width: 72px; height: 72px; } }

/*
 * Réglages par produit, mode sombre seulement (sans effet en clair).
 * - Galerie « fond éclairé » (section Achat) : gris moyen en dégradé doux,
 *   pour un produit noir sur fond transparent qui se perd sur le gris foncé.
 * - Cartes « fond éclairé » (carrousel) : même dégradé derrière chaque photo.
 * - « Carte claire » (case d'une section image) : une photo à fond blanc est
 *   posée sur une carte crème avec une marge, au lieu d'un carré blanc.
 */
:root[data-theme="dark"] .nxp-galerie-eclairee .nxp-galerie-piste,
:root[data-theme="dark"] .nxp-cartes-eclairees .nxp-carte-be .nxp-media {
	background:
		radial-gradient(70% 60% at 50% 45%, color-mix(in srgb, var(--nx-cream-fixe) 22%, var(--nx-surface)) 0%, color-mix(in srgb, var(--nx-cream-fixe) 12%, var(--nx-surface)) 55%, color-mix(in srgb, var(--nx-cream-fixe) 7%, var(--nx-surface)) 100%);
}
:root[data-theme="dark"] .nxp-galerie-eclairee .nxp-vignette { background: color-mix(in srgb, var(--nx-cream-fixe) 16%, var(--nx-surface)); }
:root[data-theme="dark"] .nxp-carte-claire {
	background: var(--nx-cream-fixe);
	padding: clamp(14px, 2.6vw, 28px);
	border-radius: var(--nxp-r-lg);
	overflow: hidden;
}
:root[data-theme="dark"] .nxp-carte-claire img { border-radius: calc(var(--nxp-r-lg) * 0.6); }
:root[data-theme="dark"] .nxp-carte-claire.nxp-entiere { width: fit-content; max-width: 100%; margin-inline: auto; }

.nxp-infos { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.nxp-prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nxp-prix del { order: 2; font-size: 17px; font-weight: 400; color: var(--nxp-discret); }
.nxp-prix ins { order: 1; text-decoration: none; }
/* style.css force la couleur des prix (!important) : on la remet à l'encre de la page. */
.nxp .nxp-prix .woocommerce-Price-amount, .nxp .nxp-prix bdi { color: inherit !important; }
.nxp-prix .screen-reader-text { position: absolute; }
.nxp-achat-points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--nxp-encre); }
.nxp-achat-points li { display: flex; align-items: baseline; gap: 10px; }
.nxp-achat-points li::before { content: ""; flex: none; width: 10px; height: 6px; border-inline-start: 2px solid var(--nxp-accent); border-block-end: 2px solid var(--nxp-accent); transform: translateY(-3px) rotate(-45deg); }
.nxp-stock { margin: -8px 0 0; font-size: 14px; color: var(--nxp-encre2); }
.nxp-stock.is-rupture { color: var(--nxp-encre); font-weight: 600; }
.nxp-court { margin: 0; color: var(--nxp-encre2); max-width: 60ch; }

/* Pastilles de couleur (radiogroup), pilotent les <select> des formulaires */
.nxp-couleur { display: flex; flex-direction: column; gap: 12px; }
.nxp-couleur-titre { margin: 0; font-size: 15px; color: var(--nxp-encre2); }
.nxp-couleur-titre strong { color: var(--nxp-encre); font-weight: 600; }
.nxp-pastilles { display: flex; flex-wrap: wrap; gap: 12px; }
.nxp-pastille {
	width: 44px;
	height: 44px;
	padding: 4px;
	border-radius: 50%;
	border: 2px solid var(--nxp-ligne);
	background: none;
	cursor: pointer;
	transition: border-color 0.18s ease, transform 0.18s ease;
}
.nxp-pastille span { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--nxp-teinte, var(--nx-line-strong)); box-shadow: inset 0 0 0 1px var(--nx-swatch-edge); }
.nxp-pastille:hover { transform: scale(1.05); }
.nxp-pastille[aria-checked="true"] { border-color: var(--nxp-encre); }
.nxp-pastilles-libelles .nxp-pastille-col { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; color: var(--nxp-encre2); }

/* Formulaire COD du thème, aux couleurs de la page */
.nxp .nyrix-cod {
	max-width: none;
	margin: 0;
	padding: 20px;
	gap: 12px;
	border-radius: var(--nxp-r);
	border: 1px solid var(--nx-line);
	background: var(--nxp-fond-alt);
	font-family: inherit;
	color: var(--nxp-encre);
}
:root[data-theme="light"] .nxp .nyrix-cod { background: var(--nx-bg); }
.nxp .nyrix-cod-head strong,
.nxp .nyrix-cod-summary b,
.nxp .nyrix-cod-h { color: var(--nxp-encre); font-family: inherit; text-transform: none; }
.nxp .nyrix-cod-field > span,
.nxp .nyrix-cod-summary > div,
.nxp .nyrix-cod-bar-text { color: var(--nxp-encre2); }
.nxp .nyrix-cod-note { color: var(--nxp-discret); }
.nxp .nyrix-cod-field input,
.nxp .nyrix-cod-field textarea,
.nxp .nyrix-cod-attr {
	min-height: 48px;
	font-size: 16px;
	border: 1px solid var(--nxp-ligne);
	background: var(--nx-field);
	color: var(--nxp-encre);
}
:root[data-theme="light"] .nxp .nyrix-cod-field input,
:root[data-theme="light"] .nxp .nyrix-cod-field textarea,
:root[data-theme="light"] .nxp .nyrix-cod-attr { background: var(--nx-surface); }
.nxp .nyrix-cod-field input:focus,
.nxp .nyrix-cod-field textarea:focus,
.nxp .nyrix-cod-attr:focus { border-color: var(--nxp-encre); outline: 2px solid color-mix(in srgb, var(--nxp-encre) 25%, transparent); outline-offset: 0; }
.nxp .nyrix-cod-field textarea::placeholder,
.nxp .nyrix-cod-field input::placeholder { color: var(--nxp-discret); }
.nxp .nyrix-cod-qty { border-color: var(--nxp-ligne); }
.nxp .nyrix-cod-qty button { min-height: 48px; background: var(--nxp-carte); color: var(--nxp-encre); }
.nxp .nyrix-cod-qty button:hover { background: var(--nx-line); }
.nxp .nyrix-cod-qty .nyrix-cod-qty-val { background: var(--nx-field); color: var(--nxp-encre); border: 0; }
:root[data-theme="light"] .nxp .nyrix-cod-qty .nyrix-cod-qty-val { background: var(--nx-surface); }
.nxp .nyrix-cod-summary { border-top-color: var(--nxp-ligne); }
.nxp .nyrix-cod-total-row b { color: var(--nxp-encre); }
.nxp .nyrix-cod-bar-track { background: var(--nx-line); }
.nxp .nyrix-cod-bar-fill { background: var(--nx-bouton); }
.nxp .nyrix-cod-submit { width: 100%; min-height: 54px; font-size: 16px; font-weight: 700; border-radius: 10px; background: var(--nx-bouton); color: var(--nx-bouton-ink); box-shadow: none; }
.nxp .nyrix-cod-submit:hover { transform: none; background: var(--nx-bouton-hover); }
.nxp .nyrix-cod-err { color: #B3261E; }
.nxp-sombre .nyrix-cod-err, :root:not([data-theme="light"]) .nxp .nyrix-cod-err { color: #F2B8B5; }
.nxp .nyrix-cod-msg.err { color: #B3261E; }
:root:not([data-theme="light"]) .nxp .nyrix-cod-msg.err { color: #F2B8B5; }
.nxp .nyrix-cod-attr[aria-invalid="true"],
.nxp .nyrix-cod-field [aria-invalid="true"] { border-color: currentColor; }
.nxp .nxp-masque { display: none !important; }
.nxp .nyrix-cod { scroll-margin-top: 80px; } /* sous la sous-navigation fixe */

/* Bloc « Code promo » (extension nyrix-influence, injecté en JS juste avant
   le message et le bouton) : ses couleurs par défaut sont celles d'un fond
   sombre. Ici, il prend les jetons de la page, en clair comme en sombre.
   Champ = mêmes réglages que les autres champs ; « Appliquer » = bouton
   secondaire (bordure et texte bronze foncé), à la hauteur du champ. */
.nxp .nyrix-cod .nxi {
	--nxi-texte: var(--nxp-encre);
	--nxi-doux: var(--nxp-encre2);
	--nxi-accent: var(--nxp-accent);
	--nxi-ligne: var(--nxp-ligne);
	--nxi-champ: var(--nx-field);
	--nxi-erreur: #F2B8B5;
	--nxi-succes: #8FD19E;
	margin: 0;
	color: var(--nxp-encre);
}
:root[data-theme="light"] .nxp .nyrix-cod .nxi {
	--nxi-champ: var(--nx-surface);
	--nxi-erreur: #B3261E;
	--nxi-succes: #1F7A3A;
}
.nxp .nyrix-cod .nxi-ouvrir { color: var(--nxp-encre); font-size: 15px; }
.nxp .nyrix-cod .nxi-ouvrir::before { color: var(--nxp-accent); border-color: var(--nxp-accent); }
.nxp .nyrix-cod .nxi-champ { min-height: 48px; padding: 0.85rem 1rem; border-radius: 10px; }
.nxp .nyrix-cod .nxi-champ:focus { border-color: var(--nxp-encre); outline: 2px solid color-mix(in srgb, var(--nxp-encre) 25%, transparent); outline-offset: 0; }
.nxp .nyrix-cod .nxi-champ::placeholder { color: var(--nxp-discret); }
.nxp .nyrix-cod .nxi-appliquer { min-height: 48px; border-color: var(--nxp-accent); color: var(--nxp-accent); background: transparent; }
.nxp .nyrix-cod .nxi-appliquer:hover { background: var(--nx-bouton); border-color: var(--nx-bouton); color: var(--nx-bouton-ink); }
.nxp-reassurance { margin: 0; font-size: 14px; line-height: 1.7; color: var(--nxp-encre2); }
.nxp-rupture { padding: 20px; border-radius: var(--nxp-r); border: 1px solid var(--nx-line); background: var(--nxp-fond-alt); }

/* ==========================================================================
   2. Hero
   ========================================================================== */
.nxp-hero { padding-bottom: 0; overflow: hidden; }
.nxp-hero .nxp-pile { gap: 20px; }
.nxp-points { display: flex; flex-wrap: wrap; justify-content: center; margin: 4px 0 0; padding: 0; list-style: none; font-size: clamp(16px, 1.5vw, 17px); color: var(--nxp-encre2); max-width: 760px; }
.nxp-points li { padding: 4px 12px; }
@media (min-width: 768px) {
	/* Deux points par ligne, séparés d'un filet. */
	.nxp-points { display: grid; grid-template-columns: auto auto; justify-content: center; row-gap: 6px; }
	.nxp-points li { padding: 2px 22px; }
	.nxp-points li:nth-child(even) { border-inline-start: 1px solid var(--nxp-ligne); }
}
.nxp-hero-image { margin: 40px auto 0; width: min(680px, 100%); }

/* ==========================================================================
   Carrousels (points forts, bien-être) — scroll-snap natif
   ========================================================================== */
.nxp-carrousel { position: relative; }
.nxp-piste {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scroll-padding-inline: var(--nxp-pad);
	padding-inline: var(--nxp-pad);
	padding-bottom: 4px;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	/* Pleine largeur sur téléphone : les cartes débordent pour montrer la suite. */
	margin-inline: calc(-1 * var(--nxp-pad));
}
.nxp-piste::-webkit-scrollbar { display: none; }
.nxp-piste > * { scroll-snap-align: start; flex: 0 0 auto; }
@media (min-width: 768px) { .nxp-piste { gap: 20px; } }

.nxp-commandes { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.nxp-pos { display: flex; gap: 8px; }
.nxp-pos span { display: block; width: 8px; height: 8px; border-radius: 4px; background: var(--nxp-ligne); transition: width 0.3s var(--nxp-ease), background-color 0.3s ease; }
.nxp-pos span.is-on { width: 28px; background: var(--nxp-encre); }
.nxp-fleches { display: flex; gap: 12px; margin-inline-start: auto; }
.nxp-fleche {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	display: grid;
	place-items: center;
	background: var(--nxp-carte);
	color: var(--nxp-encre);
	cursor: pointer;
	transition: background-color 0.18s ease, opacity 0.18s ease;
}
.nxp-alt .nxp-fleche { background: var(--nxp-fond); }
.nxp-fleche:hover:not(:disabled) { background: var(--nx-line-strong); }
.nxp-fleche:disabled { opacity: 0.35; cursor: default; }
html[dir="rtl"] .nxp-fleche svg, body.rtl .nxp-fleche svg { transform: scaleX(-1); }

/* Points forts : grandes cartes image + texte */
.nxp-carte-pf {
	position: relative;
	width: min(360px, 80vw);
	height: clamp(460px, 120vw, 560px);
	border-radius: var(--nxp-r-lg);
	overflow: hidden;
	background: var(--nxp-carte);
	display: flex;
	flex-direction: column;
}
.nxp-carte-pf p { position: relative; z-index: 1; margin: 0; padding: 28px 24px; font-size: 21px; line-height: 1.35; font-weight: 600; text-wrap: balance; }
.nxp-carte-pf:not(.a-image) img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Sans image : carte courte, la phrase seule, posée en bas. */
.nxp-carte-pf:not(.a-image) { height: auto; min-height: clamp(220px, 56vw, 280px); justify-content: flex-end; }
.nxp-carte-pf:not(.a-image) p { font-size: clamp(22px, 2.2vw, 26px); font-family: 'Archivo', 'Geist', sans-serif; font-stretch: 108%; letter-spacing: -0.01em; }
/* Avec image : l'image entière (sans recadrage) sur fond clair, la phrase dessous.
   Une carte + le début de la suivante sur téléphone (82vw). Le fond #FEFEFE est
   celui des captures de l'app (RGB 254) : la carte et l'image ne font qu'un,
   dans les deux thèmes. */
.nxp-carte-pf.a-image { width: min(360px, 82vw); height: auto; gap: 0; background: var(--nx-surface); border: 1px solid var(--nx-line); }
:root:not([data-theme="light"]) .nxp-carte-pf.a-image { background: #FEFEFE; border-color: transparent; }
.nxp-carte-pf-img { aspect-ratio: 1 / 1; background: #FEFEFE; display: grid; place-items: center; }
.nxp-carte-pf-img img { position: static; width: 100%; height: 100%; object-fit: contain; }
.nxp-carte-pf.a-image p { margin: 0; padding: 18px 22px 22px; font-size: 18px; line-height: 1.4; font-weight: 600; color: #0F0F10; background: none; text-wrap: balance; }
/* Sans image, texte « <strong>Titre</strong><br>Texte » : titre en gras, texte plus petit. */
.nxp-carte-pf.sans-image p { font-family: 'Geist', sans-serif; font-stretch: 100%; font-size: 16px; font-weight: 400; line-height: 1.55; letter-spacing: 0; color: var(--nxp-encre2); }
.nxp-carte-pf.sans-image p strong { display: block; margin-bottom: 8px; font-family: 'Archivo', 'Geist', sans-serif; font-stretch: 108%; font-size: clamp(22px, 2.2vw, 26px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--nxp-encre); }
.nxp-carte-pf.sans-image p strong + br { display: none; }
/* Titre facultatif (champ « Titre ») sur une carte avec image : titre en gras, texte dessous. */
.nxp-carte-pf.a-image p.a-titre { font-size: 16px; font-weight: 400; line-height: 1.5; color: #3A3A3D; }
.nxp-carte-pf.a-image p.a-titre strong { display: block; margin-bottom: 6px; font-size: 19px; font-weight: 700; line-height: 1.3; color: #0F0F10; }
/* Cadre « Portrait 4:5 rempli » (réglage de la section) : la photo remplit un
   cadre 4:5, la carte suit le thème (pas de carte blanche en mode sombre). */
.nxp-pf-portrait .nxp-carte-pf-img { aspect-ratio: 4 / 5; overflow: hidden; background: color-mix(in srgb, var(--nxp-encre) 6%, var(--nxp-carte)); }
.nxp-pf-portrait .nxp-carte-pf-img img { object-fit: cover; }
:root .nxp-pf-portrait .nxp-carte-pf.a-image { background: var(--nxp-carte); border-color: var(--nx-line); }
:root:not([data-theme="light"]) .nxp-pf-portrait .nxp-carte-pf.a-image { border-color: transparent; }
.nxp-pf-portrait .nxp-carte-pf.a-image p { color: var(--nxp-encre); }
.nxp-pf-portrait .nxp-carte-pf.a-image p.a-titre { color: var(--nxp-encre2); }
.nxp-pf-portrait .nxp-carte-pf.a-image p.a-titre strong { color: var(--nxp-encre); }
/* Toutes les cartes tiennent à l'écran (ex. 2 cartes sur ordinateur) : cartes
   centrées, flèches et points masqués (produit-nyrix.js). */
.nxp-points-forts .nxp-carrousel.is-tient .nxp-piste { justify-content: safe center; }
.nxp-points-forts .nxp-carrousel.is-tient .nxp-commandes { display: none; }
.nxp-pf-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--nxp-discret); }
@media (max-width: 767px) { .nxp-points-forts .nxp-fleches { display: none; } }

/* Bien-être : cartes larges image 4:3 + texte */
.nxp-carte-be { width: min(560px, 86vw); display: flex; flex-direction: column; gap: 20px; }
.nxp-carte-be .nxp-media { aspect-ratio: 4 / 3; background: var(--nxp-fond); }
.nxp-carte-be .nxp-media img { height: 100%; object-fit: contain; }
/* Les captures de l'app ont un fond clair (#FEFEFE) : la carte prend le même. */
.nxp-carte-be .nxp-media:has(img[src*="gband-"]) { background: #FEFEFE; }
.nxp-carte-be p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--nxp-encre2); max-width: 52ch; }
.nxp-carte-be p strong { color: var(--nxp-encre); font-weight: 600; }

/* ==========================================================================
   Vidéo
   ========================================================================== */
.nxp-clips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; width: 100%; }
.nxp-clip { display: flex; flex-direction: column; gap: 12px; text-align: start; }
.nxp-clip-legende { font-size: 17px; font-weight: 600; }
@media (max-width: 767px) {
	/* Téléphone : les clips verticaux défilent au doigt plutôt que de s'empiler. */
	.nxp-clips { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--nxp-pad)); padding-inline: var(--nxp-pad); scroll-padding-inline: var(--nxp-pad); scrollbar-width: none; }
	.nxp-clips::-webkit-scrollbar { display: none; }
	.nxp-clip { flex: 0 0 72vw; scroll-snap-align: start; }
}
@media (min-width: 768px) { .nxp-clips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ==========================================================================
   Inclus (bracelets, accessoires)
   ========================================================================== */
.nxp-inclus-photo { background: var(--nxp-fond-alt); }
.nxp-blocs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; max-width: 860px; }
@media (min-width: 640px) { .nxp-blocs { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 16px; } }
.nxp-bloc { border-radius: var(--nxp-r-lg); background: var(--nxp-carte); padding: 24px; display: flex; flex-direction: column; gap: 8px; text-align: start; }
.nxp-bloc h3 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; }
.nxp-bloc p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--nxp-encre2); }
.nxp-inclus-ligne { margin: 0; font-size: 15px; color: var(--nxp-encre2); }

/* ==========================================================================
   Cœur : tracé
   ========================================================================== */
.nxp-trace { width: 100%; max-width: 980px; border-radius: var(--nxp-r-lg); background: var(--nxp-fond-alt); padding: 40px 20px; }
@media (min-width: 768px) { .nxp-trace { padding: 56px 40px; } }
.nxp-trace svg { width: 100%; height: auto; display: block; overflow: visible; }
.nxp-trace path { fill: none; stroke: var(--nxp-graph); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.nxp-anim .nxp-trace path { stroke-dasharray: var(--nxp-long, 2000); stroke-dashoffset: var(--nxp-long, 2000); transition: stroke-dashoffset 1.8s cubic-bezier(0.45, 0, 0.2, 1) 0.15s; }
.nxp-anim .nxp-trace.is-in path { stroke-dashoffset: 0; }
.nxp-image-capteurs { max-width: 560px; width: 100%; }

/* ==========================================================================
   Sport
   ========================================================================== */
.nxp-sport { padding-top: 0; }
.nxp-banniere { position: relative; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; background: var(--nxp-fond); }
.nxp-banniere > .nxp-video,
.nxp-banniere > .nxp-banniere-img { position: absolute; inset: 0; border-radius: 0; }
.nxp-banniere > .nxp-banniere-img img { width: 100%; height: 100%; object-fit: cover; }
.nxp-banniere.a-media { min-height: clamp(440px, 70vw, 620px); }
.nxp-banniere:not(.a-media) .nxp-banniere-texte { padding-bottom: 8px; }
.nxp-banniere.a-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--nx-band-bg) 82%, transparent) 0%, color-mix(in srgb, var(--nx-band-bg) 10%, transparent) 55%, var(--nx-band-bg) 100%); pointer-events: none; }
.nxp-banniere-texte { position: relative; z-index: 1; padding: 72px var(--nxp-pad) 0; max-width: 820px; }
@media (min-width: 768px) { .nxp-banniere-texte { padding-top: 96px; } }
/* Bannière sans photo : l'espace au-dessus du titre est vide, il suit l'espace des sections. */
.nxp-banniere:not(.a-media) .nxp-banniere-texte { padding-top: var(--nxp-sy); }
.nxp-banniere .nxp-video-btn { z-index: 2; }

.nxp-onglets { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.nxp-onglet {
	min-height: 44px;
	padding: 0 22px;
	border-radius: 999px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--nxp-ligne);
	background: transparent;
	color: var(--nxp-encre);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.nxp-onglet:hover { border-color: var(--nxp-encre); }
.nxp-onglet[aria-selected="true"] { background: var(--nxp-encre); color: var(--nxp-fond); border-color: var(--nxp-encre); }
.nxp-panneau[hidden] { display: none; }
.nxp-panneau.is-entree { animation: nxp-fondu 0.4s var(--nxp-ease); }

/* ==========================================================================
   Grandes cartes (section « sport ») : carrousel de cartes larges. Photo à
   gauche, image détourée du produit à cheval sur la séparation, texte à
   droite (surface claire en clair, sombre en sombre). Téléphone : empilée.
   ========================================================================== */
.nxp-alt .nxp-banniere:not(.a-media) { background: transparent; }
.nxp-gc-zone { padding-top: 40px; }
@media (min-width: 768px) { .nxp-gc-zone { padding-top: 56px; } }
.nxp-gc {
	--nxp-gc-fond: var(--nx-surface2); /* gris très clair en clair, gris foncé en sombre */
	position: relative;
	width: 86%;
	display: flex;
	flex-direction: column;
	border-radius: var(--nxp-r-lg);
	overflow: hidden;
	background: var(--nxp-gc-fond);
}
.nxp-sombre .nxp-gc { --nxp-gc-fond: var(--nxp-carte); }
.nxp-gc-photo { position: relative; aspect-ratio: 4 / 3; overflow: visible; background: color-mix(in srgb, var(--nxp-encre) 6%, var(--nxp-gc-fond)); }
.nxp-gc-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nxp-gc.sans-photo .nxp-gc-photo { display: none; } /* ni photo ni détourée : pas de cadre vide */
.nxp-gc-detoure {
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 2;
	width: 150px;
	transform: translate(-50%, 45%);
	pointer-events: none;
	filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.28));
}
.nxp-gc-detoure img { display: block; width: 100%; height: auto; }
.nxp-gc-texte { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; text-align: start; }
.nxp-gc.a-detoure .nxp-gc-texte { padding-top: 92px; }
.nxp-gc-titre { margin: 0; font-family: 'Archivo', sans-serif; font-stretch: 112%; font-weight: 700; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -0.01em; color: var(--nxp-encre); }
.nxp-gc-texte p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--nxp-encre2); }
.nxp-gc-texte p.nxp-mention { padding: 0; font-size: 13px; }
@media (min-width: 900px) {
	.nxp-gc { --nxp-gc-det: clamp(170px, 17vw, 220px); width: 70%; height: 520px; flex-direction: row; }
	.nxp-gc.sans-photo { height: auto; min-height: 280px; }
	.nxp-gc-photo { flex: 0 0 46%; width: 46%; height: 100%; aspect-ratio: auto; }
	.nxp-gc-detoure { left: auto; bottom: auto; top: 50%; inset-inline-end: 0; width: var(--nxp-gc-det); transform: translate(50%, -50%); }
	html[dir="rtl"] .nxp-gc-detoure, body.rtl .nxp-gc-detoure { transform: translate(-50%, -50%); }
	.nxp-gc-texte { flex: 1 1 auto; justify-content: center; padding: 48px 40px; }
	/* Texte décalé de la moitié de l'image détourée, plus une marge. */
	.nxp-gc.a-detoure .nxp-gc-texte { padding-top: 48px; padding-inline-start: calc(var(--nxp-gc-det) / 2 + 28px); }
}
/* Glisser à la souris (js/produit-nyrix.js) : pas d'aimantation pendant le geste. */
@media (pointer: fine) { .nxp-gc-piste { cursor: grab; } }
.nxp-gc-piste.is-glisse { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.nxp-gc-piste img { -webkit-user-drag: none; user-select: none; }
@keyframes nxp-fondu { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.nxp-cartes3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 768px) { .nxp-cartes3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; } } /* une carte sans photo garde sa hauteur, sans grand vide */
.nxp-carte-sport { border-radius: var(--nxp-r-lg); background: var(--nxp-carte); overflow: hidden; display: flex; flex-direction: column; }
.nxp-carte-sport .nxp-carte-img { aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in srgb, var(--nxp-encre) 6%, var(--nxp-carte)); } /* overflow : sans lui, une photo portrait ignore le 4:3 et étire toute la rangée */
.nxp-carte-sport .nxp-carte-img img { width: 100%; height: 100%; object-fit: cover; }
.nxp-carte-sport p { margin: 0; padding: 22px 24px 24px; font-size: 16px; line-height: 1.6; color: var(--nxp-encre2); }
.nxp-carte-sport p strong { color: var(--nxp-encre); font-weight: 600; }
/* Mention sous la photo d'une carte (ex. accessoire vendu séparément). */
.nxp-carte-sport p.nxp-mention, .nxp-carte-be p.nxp-mention { margin: 0; padding: 10px 24px 0; font-size: 13px; line-height: 1.5; color: var(--nxp-encre2); }
.nxp-carte-be p.nxp-mention { padding-inline: 0; }
.nxp-mention a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--nxp-accent); }
.nxp-mention a:hover { color: var(--nxp-encre); }
.nxp-mention + p { padding-top: 12px; }

/* ==========================================================================
   Au quotidien
   ========================================================================== */
.nxp-cartes4 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; }
@media (min-width: 560px) { .nxp-cartes4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .nxp-cartes4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.nxp-carte-q { border-radius: var(--nxp-r-lg); background: var(--nxp-carte); padding: 24px; display: flex; flex-direction: column; gap: 12px; text-align: start; }
.nxp-carte-q .nxp-icone { color: var(--nxp-graph); }
.nxp-carte-q h3 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; }
.nxp-carte-q p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--nxp-encre2); }

/* ==========================================================================
   Batterie : compteurs
   ========================================================================== */
.nxp-compteurs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; width: 100%; max-width: 860px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .nxp-compteurs { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 48px; } }
.nxp-compteur { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* Un compteur a un « Au-dessus » : en petit, collé au-dessus de son chiffre, hors
   du flux ; la ligne des compteurs ne bouge pas. */
.nxp-compteurs.a-prefixe .nxp-compteur { position: relative; }
.nxp-compteurs.a-prefixe .nxp-compteur-pre { position: absolute; top: 0.6em; inset-inline: 0; transform: translateY(-100%); font-size: 13px; line-height: 1.2; text-align: center; }
.nxp-compteur-pre, .nxp-compteur-leg { font-size: 16px; line-height: 1.5; color: var(--nxp-encre2); }
.nxp-compteur-val { display: flex; align-items: baseline; gap: 10px; font-family: 'Archivo', sans-serif; font-stretch: 112%; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--nxp-graph); }
.nxp-compteur-nb { font-family: 'Geist Mono', 'Archivo', monospace; font-weight: 400; letter-spacing: -0.06em; font-size: clamp(80px, 16vw, 112px); font-variant-numeric: tabular-nums; }
.nxp-compteur-unite { font-size: clamp(26px, 4vw, 36px); font-weight: 600; letter-spacing: -0.01em; }
.nxp-sous-ligne { margin: 0; font-size: 17px; font-weight: 600; color: var(--nxp-encre); }

/* ==========================================================================
   Compatibilité
   ========================================================================== */
.nxp-captures { display: flex; justify-content: center; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.nxp-capture { width: min(220px, 42vw); aspect-ratio: 9 / 19; border-radius: 30px; overflow: hidden; background: var(--nxp-carte); }
.nxp-capture img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   L'essentiel
   ========================================================================== */
.nxp-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; width: 100%; max-width: 1080px; margin: 0; padding: 0; list-style: none; background: var(--nxp-ligne); border-radius: var(--nxp-r-lg); overflow: hidden; border: 1px solid var(--nxp-ligne); }
@media (min-width: 900px) { .nxp-chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nxp-chiffre { background: var(--nxp-fond); padding: 28px 16px; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.nxp-chiffre-val { font-family: 'Archivo', sans-serif; font-stretch: 112%; font-size: clamp(22px, 3vw, 30px); font-weight: 700; line-height: 1.15; }
.nxp-chiffre-lib { font-size: 14px; color: var(--nxp-encre2); }
.nxp-boite { margin: 0; max-width: 62ch; font-size: 15px; color: var(--nxp-encre2); text-align: center; }
.nxp-fiche { width: 100%; max-width: 860px; text-align: center; }
.nxp-fiche summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 600; color: var(--nxp-accent); list-style: none; }
.nxp-fiche summary::-webkit-details-marker { display: none; }
.nxp-fiche summary svg { transition: transform 0.25s var(--nxp-ease); }
.nxp-fiche[open] summary svg { transform: rotate(180deg); }
.nxp-fiche .nxp-media { margin-top: 16px; background: var(--nx-surface); }

/* ==========================================================================
   Fiche technique (tableau texte) et avis
   ========================================================================== */
.nxp-specs { width: 100%; max-width: 820px; margin: 0; border-top: 1px solid var(--nxp-ligne); text-align: start; }
.nxp-specs-ligne { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--nxp-ligne); }
.nxp-specs dt { margin: 0; font-size: 15px; color: var(--nxp-encre2); }
.nxp-specs dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--nxp-encre); }
@media (max-width: 559px) { .nxp-specs-ligne { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.nxp-avis-liste { width: 100%; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.nxp-faq-liste { width: 100%; max-width: 820px; border-top: 1px solid var(--nxp-ligne); text-align: start; }
.nxp-faq-q { border-bottom: 1px solid var(--nxp-ligne); }
.nxp-faq-q summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 16px 0; cursor: pointer; font-size: 17px; font-weight: 600; list-style: none; }
.nxp-faq-q summary::-webkit-details-marker { display: none; }
.nxp-faq-q summary::after { content: ""; flex: none; width: 10px; height: 10px; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform 0.25s var(--nxp-ease); }
.nxp-faq-q[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.nxp-faq-r { margin: 0; padding: 0 0 20px; color: var(--nxp-encre2); max-width: 68ch; }

/* ==========================================================================
   Commander (bas)
   ========================================================================== */
.nxp-commander .nxp-achat-grille { align-items: start; }
.nxp-commander-img { aspect-ratio: 1 / 1; border-radius: var(--nxp-r-lg); border: 1px solid var(--nx-line); background: var(--nx-surface); display: grid; place-items: center; overflow: hidden; }
.nxp-commander-img img { width: 88%; height: 88%; object-fit: contain; }
@media (max-width: 899px) { .nxp-commander-img { display: none; } }

/* Bloc court « Commander » : une ligne, pas de deuxième formulaire. */
.nxp-commander-court { padding-block: 48px; }
.nxp-cmd { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px; border-radius: var(--nxp-r-lg); border: 1px solid var(--nx-line); background: var(--nxp-fond-alt); }
:root[data-theme="light"] .nxp-cmd { background: var(--nx-bg); }
.nxp-cmd-img { flex: none; width: 72px; height: 72px; border-radius: 14px; overflow: hidden; background: var(--nx-surface); }
.nxp-cmd-img img { width: 100%; height: 100%; object-fit: cover; }
.nxp-cmd-txt { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nxp-cmd-nom { margin: 0; font-family: 'Archivo', sans-serif; font-stretch: 112%; font-size: 20px; font-weight: 700; }
.nxp-cmd .nxp-prix { font-size: 20px; }
.nxp-cmd .nx-bouton.nxp-cmd-bouton { flex: 1 1 100%; min-height: 52px; }
@media (min-width: 640px) { .nxp-cmd { padding: 18px 20px; } .nxp-cmd .nx-bouton.nxp-cmd-bouton { flex: 0 0 auto; min-width: 200px; } }

/* Formulaire du haut plus compact sur ordinateur : nom | téléphone, ville | quantité. */
@media (min-width: 900px) {
	.nxp-achat .nyrix-cod { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 12px; }
	.nxp-achat .nyrix-cod > *,
	.nxp-achat .nyrix-cod-body > *,
	.nxp-achat .nyrix-cod-foot > * { grid-column: 1 / -1; }
	.nxp-achat .nyrix-cod-field:has([name="full_name"]) { grid-column: 1; order: 4; }
	.nxp-achat .nyrix-cod-field:has([name="phone"]) { grid-column: 2; order: 5; }
	.nxp-achat .nyrix-cod-field:has([name="city"]) { grid-column: 1; order: 6; }
	.nxp-achat .nyrix-cod-field:has(.nyrix-cod-qty) { grid-column: 2; order: 7; }
	.nxp-achat .nyrix-cod-field:has([name="address"]) { order: 8; }
	.nxp-achat .nyrix-cod-head { order: 1; }
	.nxp-achat .nyrix-cod-bar { order: 2; }
	.nxp-achat .nyrix-cod-field:has(.nyrix-cod-attr) { order: 3; }
	.nxp-achat .nyrix-cod-option { order: 9; } /* produit en option : après l'adresse, juste avant le total (même ordre, placé avant dans le HTML) */
	.nxp-achat .nyrix-cod-summary { order: 9; }
	.nxp-achat .nyrix-cod .nxi { order: 10; } /* code promo : sous le total, comme dans le formulaire du bas */
	.nxp-achat .nyrix-cod-msg { order: 11; }
	.nxp-achat .nyrix-cod-submit { order: 12; }
	.nxp-achat .nyrix-cod-note { order: 13; }
	.nxp-achat .nyrix-cod-field textarea { min-height: 48px; }
	/* La galerie suit le formulaire (js/produit-nyrix.js, « galerie qui suit ») :
	   position: sticky est inopérant sur ce site. */
	.nxp-achat .nxp-galerie { will-change: transform; }
}

/* ==========================================================================
   Fil d'Ariane, En bref, Pour aller plus loin, fourchette des compteurs
   ========================================================================== */
.nxp-fil ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; color: var(--nxp-encre2); }
.nxp-fil li { display: inline-flex; align-items: center; min-width: 0; }
.nxp-fil li + li::before { content: "/"; margin-inline: 8px; opacity: 0.5; }
.nxp-fil a { color: inherit; text-decoration: underline; text-decoration-color: var(--nxp-ligne); text-underline-offset: 3px; }
.nxp-fil a:hover { color: var(--nxp-encre); }
.nxp-fil [aria-current] { color: var(--nxp-encre); overflow-wrap: anywhere; }
.nxp-resume .nxp-lead { text-align: center; }
.nxp-liens-liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.nxp-liens-liste a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border: 1px solid var(--nxp-ligne); border-radius: 999px; font-size: 15px; color: var(--nxp-encre); text-decoration: none; transition: border-color 0.2s, background-color 0.2s; }
.nxp-liens-liste a:hover { border-color: var(--nxp-encre2); }
.nxp-liens-liste a:focus-visible { outline: 2px solid var(--nxp-accent); outline-offset: 2px; }
.nxp-compteur-min { font-family: 'Geist Mono', 'Archivo', monospace; font-weight: 400; letter-spacing: -0.06em; font-size: clamp(80px, 16vw, 112px); font-variant-numeric: tabular-nums; margin-inline-end: -10px; }

/* ==========================================================================
   Notes
   ========================================================================== */
.nxp-notes { padding-block: 48px 64px; background: var(--nxp-fond-alt); border-top: 1px solid var(--nx-line); }
.nxp-notes ol { margin: 0; padding-inline-start: 1.4em; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.7; color: var(--nxp-encre2); max-width: 90ch; }

/* ==========================================================================
   Apparition au scroll (activée par le JS : .nxp-anim)
   ========================================================================== */
.nxp-anim [data-nxp-reveal] {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition: opacity 0.7s var(--nxp-ease), transform 0.7s var(--nxp-ease);
	transition-delay: calc(var(--i, 0) * 60ms);
}
.nxp-anim [data-nxp-reveal].is-in { opacity: 1; transform: none; }

/* Mouvement réduit : tout est là, tout de suite, sans déplacement. */
@media (prefers-reduced-motion: reduce) {
	.nxp *, .nxp *::before, .nxp *::after { scroll-behavior: auto !important; }
	.nxp-anim [data-nxp-reveal] { opacity: 1; transform: none; transition: none; }
	.nxp-anim .nxp-trace path { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
	.nxp-parallax > img { transform: none; }
	.nxp-panneau.is-entree, .nxp-nav.is-fixe { animation: none; }
	.nxp-pos span { transition: none; }
}

/* Description de la variante choisie (sous les pastilles). */
.nxp-couleur-desc { margin: -4px 0 0; font-size: 14px; color: var(--nxp-encre2); }
.nxp-couleur-desc:empty { display: none; }

/* Produit en option du formulaire COD (inc/produit-option.php) : tokens clair / sombre. */
.nxp .nyrix-cod-option { border-color: var(--nxp-ligne); background: var(--nxp-carte); }
.nxp .nyrix-cod-option-case { color: var(--nxp-encre); }
.nxp .nyrix-cod-option-vignette { border-color: var(--nxp-ligne); color: var(--nxp-encre2); background: var(--nxp-fond); }
.nxp .nyrix-cod-option-vignette:has(input:checked) { border-color: var(--nxp-encre); box-shadow: inset 0 0 0 1px var(--nxp-encre); color: var(--nxp-encre); }
.nxp .nyrix-cod-option-mention { color: var(--nxp-encre2); }