/**
 * Catalogue Renov'2CV — pages catégories, listing et fiche produit.
 * =============================================================================
 * Feuille unique et autonome. Trois principes.
 *
 * 1. Une échelle, pas des valeurs au cas par cas. Tous les espacements sont des
 *    multiples de 4 px pris dans la même liste, toutes les tailles de texte dans
 *    la même gamme. Aucune valeur n'est posée « à l'œil ».
 *
 * 2. Une frontière nette avec le thème. Le site empile Bootstrap, Nikstore et
 *    Elementor : sans remise à zéro à l'entrée de nos composants, un titre de
 *    filtre hérite du bandeau orange des widgets et une liste de produits des
 *    colonnes Bootstrap. La remise à zéro ci-dessous est explicite et bornée à
 *    nos conteneurs. Aucun !important n'est employé.
 *
 * 3. Le corail n'est pas une couleur de texte. Mesuré sur blanc, #FD604F donne
 *    un contraste de 3,02 : conforme pour une bordure ou un très grand texte,
 *    insuffisant pour du texte courant, et insuffisant pour du blanc posé
 *    dessus. Il reste donc une couleur de surface. Le texte corail descend à
 *    #CA4A3C (4,61) et le libellé des boutons corail passe en marine (5,40).
 */

/* =============================================================
 * 1. Jetons
 * ========================================================== */

.rn-catalogue,
.rn-fiche,
.rn-filtres,
.rn-achat-fixe,
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte{

	/* Corail — identité de marque. */
	--rn-corail-50:  #FFF1EE;
	--rn-corail-100: #FFE1DB;
	--rn-corail-200: #FFD0C7;
	--rn-corail-400: #FD604F;   /* 3.02 — surface uniquement */
	--rn-corail-500: #E45444;   /* 3.72 — bordures, icônes, grand texte */
	--rn-corail-600: #CA4A3C;   /* 4.61 — texte corail, prix appliqué */
	--rn-corail-700: #B14135;   /* 5.71 — survol */

	/* Marine — structure et texte. */
	--rn-encre:      #1A1D3E;   /* 16.29 */
	--rn-encre-2:    #3A4059;   /* 10.21 */
	--rn-doux:       #5B6178;   /*  6.13 */
	--rn-trait:      #E3E6ED;
	--rn-trait-fort: #CBD1DC;
	--rn-fond:       #FFFFFF;
	--rn-fond-2:     #F5F5F7;
	--rn-fond-3:     #EEF0F4;

	/* Sémantiques. */
	--rn-vert:       #0E7C4A;
	--rn-vert-50:    #E8F6EF;
	--rn-ambre:      #8A5209;
	--rn-ambre-50:   #FDF3E4;

	/* Espacement — base 4. */
	--rn-1:  4px;
	--rn-2:  8px;
	--rn-3: 12px;
	--rn-4: 16px;
	--rn-5: 20px;
	--rn-6: 24px;
	--rn-8: 32px;
	--rn-10: 40px;
	--rn-12: 48px;
	--rn-16: 64px;

	/* Typographie. */
	--rn-titre: 'Montserrat', system-ui, sans-serif;
	--rn-texte: 'Fredoka', system-ui, sans-serif;
	--rn-chiffres: 'Montserrat', system-ui, sans-serif;

	/* Rayons. */
	--rn-r-1:  4px;
	--rn-r-2:  8px;
	--rn-r-3: 12px;
	--rn-r-pill: 999px;

	/* Ombres, teintées marine. */
	--rn-ombre-1: 0 1px 2px rgba(26, 29, 62, .06);
	--rn-ombre-2: 0 2px 4px rgba(26, 29, 62, .07), 0 1px 2px rgba(26, 29, 62, .05);
	--rn-ombre-3: 0 8px 18px -6px rgba(26, 29, 62, .18), 0 2px 6px rgba(26, 29, 62, .07);
	--rn-ombre-4: 0 16px 32px -12px rgba(26, 29, 62, .28);

	/* Divers. */
	--rn-cible: 44px;
	--rn-rail: 264px;
	--rn-transition: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* =============================================================
 * 2. Frontière avec le thème
 * ========================================================== */

.rn-catalogue,
.rn-fiche,
.rn-filtres{
	font-family: var(--rn-texte);
	font-size: 15px;
	line-height: 1.45;
	color: var(--rn-encre-2);
	-webkit-font-smoothing: antialiased;
}

.rn-catalogue *,
.rn-fiche *,
.rn-filtres *{
	box-sizing: border-box;
}

/*
 * Remise à zéro de frontière.
 *
 * Le thème habille les titres de widget d'un bandeau corail, les boutons d'un
 * aplat orange et les listes de puces Bootstrap. Ses règles portent sur
 * .woocommerce h3, .widget h3 ou .woocommerce button : à portée égale, l'ordre
 * de chargement déciderait, et Elementor insère ses styles après les nôtres.
 * La portée est donc doublée une fois pour toutes, ici et dans tout le fichier.
 * C'est ce qui remplace l'accumulation de !important.
 */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) :is(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font-family: var(--rn-titre);
	font-weight: 600;
	line-height: 1.25;
	text-transform: none;
	letter-spacing: normal;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) :is(p, figure, blockquote, dl, dd) {
	margin: 0;
	padding: 0;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) :is(ul, ol) {
	margin: 0;
	padding: 0;
	list-style: none;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) li {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	border: 0;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) img {
	max-width: 100%;
	height: auto;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) :is(button, input, select) {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) button {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) a {
	color: inherit;
	text-decoration: none;
	background: none;
}

.rn-sr{
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Focus unique pour tout le catalogue : anneau marine, lisible sur blanc comme
   sur corail. Un seul traitement à maintenir. */
.rn-catalogue :focus-visible,
.rn-fiche :focus-visible,
.rn-filtres :focus-visible,
.rn-achat-fixe :focus-visible{
	outline: 2px solid var(--rn-encre);
	outline-offset: 2px;
	border-radius: var(--rn-r-1);
}

/* =============================================================
 * 3. Boutons
 * ========================================================== */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rn-2);
	min-height: var(--rn-cible);
	padding: 0 var(--rn-5);
	border: 1px solid transparent;
	border-radius: var(--rn-r-2);
	background: none;
	font-family: var(--rn-titre);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--rn-transition), border-color var(--rn-transition), color var(--rn-transition);
}

/* Corail en fond, marine en libellé : 5,40 de contraste. Le blanc sur corail
   n'en donnerait que 3,02, sous le seuil exigé pour un texte de cette taille. */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-btn--premier{
	background: var(--rn-corail-400);
	border-color: var(--rn-corail-500);
	color: var(--rn-encre);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-btn--premier:hover,
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-btn--premier:focus{
	background: var(--rn-corail-500);
	border-color: var(--rn-corail-600);
	color: var(--rn-encre);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-btn--second{
	background: var(--rn-fond);
	border-color: var(--rn-trait-fort);
	color: var(--rn-encre);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-btn--second:hover,
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-btn--second:focus{
	border-color: var(--rn-encre);
	background: var(--rn-fond-2);
	color: var(--rn-encre);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-btn--texte{
	min-height: 32px;
	padding: 0 var(--rn-2);
	color: var(--rn-corail-600);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 2px;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-btn--texte:hover{ color: var(--rn-corail-700); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-btn--large{ width: 100%; min-height: 52px; font-size: 16px; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-btn[disabled],
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-btn.is-inactif{
	opacity: .5;
	cursor: not-allowed;
	pointer-events: none;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-btn.is-charge{ position: relative; color: transparent; pointer-events: none; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-btn.is-charge::after{
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	color: var(--rn-encre);
	animation: rn-tourne .6s linear infinite;
}

@keyframes rn-tourne { to{ transform: rotate(360deg); } }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-btn-icone{ flex: 0 0 auto; }

/* =============================================================
 * 4. En-tête de catégorie
 * ========================================================== */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-entete{
	padding: var(--rn-5) 0 var(--rn-4);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fil{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rn-1) var(--rn-2);
	margin-bottom: var(--rn-3);
	font-size: 13px;
	color: var(--rn-doux);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fil a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--rn-doux);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fil a:hover{ color: var(--rn-corail-600); text-decoration: underline; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fil-sep{ color: var(--rn-trait-fort); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fil [aria-current]{ color: var(--rn-encre); font-weight: 500; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-titre-page{
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -.4px;
	color: var(--rn-encre);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-entete-compte{
	margin-top: var(--rn-1);
	font-size: 14px;
	color: var(--rn-doux);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-entete-desc{
	max-width: 72ch;
	margin-top: var(--rn-3);
	font-size: 14px;
	line-height: 1.55;
	color: var(--rn-encre-2);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-entete-desc p + p{ margin-top: var(--rn-2); }

/* Sous-catégories : rangée de liens compacts, pas un bloc décoratif. */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-souscats{
	margin-top: var(--rn-4);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-souscats-liste{
	display: flex;
	flex-wrap: wrap;
	gap: var(--rn-2);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-souscat{
	display: inline-flex;
	align-items: center;
	gap: var(--rn-2);
	min-height: 38px;
	padding: 0 var(--rn-3);
	background: var(--rn-fond);
	border: 1px solid var(--rn-trait);
	border-radius: var(--rn-r-pill);
	color: var(--rn-encre);
	font-size: 13.5px;
	font-weight: 500;
	white-space: nowrap;
	transition: border-color var(--rn-transition), background-color var(--rn-transition);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-souscat:hover,
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-souscat:focus-visible{
	border-color: var(--rn-corail-500);
	background: var(--rn-corail-50);
	color: var(--rn-encre);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-souscat.is-on{
	border-color: var(--rn-corail-500);
	background: var(--rn-corail-50);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-souscat-nb{
	color: var(--rn-doux);
	font-family: var(--rn-chiffres);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* Au-delà de dix, la rangée est repliée : on ne noie pas la page. */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-souscats.is-replie .rn-souscat:nth-child(n + 11){ display: none; }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-souscats-plus{ margin-top: var(--rn-2); }

/* =============================================================
 * 5. Ossature à deux colonnes
 * ========================================================== */

.rn-catalogue{
	display: block;
	padding-bottom: var(--rn-12);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-corps{
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rn-6);
	align-items: start;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-listing{ min-width: 0; }

/* Blocs du thème que notre barre d'outils remplace. */
.rn-catalogue .shop-top-bar,
.rn-catalogue .woocommerce-ordering,
.rn-catalogue .woocommerce-result-count,
.rn-catalogue .nikstore__product_view_style{
	display: none;
}

/* =============================================================
 * 6. Barre d'actions
 * ========================================================== */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-barre{
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rn-3);
	padding: var(--rn-2) 0;
	background: var(--rn-fond);
	border-bottom: 1px solid var(--rn-trait);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-barre-g,
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-barre-d{
	display: flex;
	align-items: center;
	gap: var(--rn-3);
	min-width: 0;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-resultats{
	font-family: var(--rn-chiffres);
	font-size: 14px;
	font-weight: 600;
	color: var(--rn-encre);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-btn-filtres{
	display: none;
	align-items: center;
	gap: var(--rn-2);
	min-height: var(--rn-cible);
	padding: 0 var(--rn-4);
	background: var(--rn-fond);
	border: 1px solid var(--rn-trait-fort);
	border-radius: var(--rn-r-2);
	color: var(--rn-encre);
	font-family: var(--rn-titre);
	font-size: 14px;
	font-weight: 600;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-btn-filtres-nb{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: var(--rn-corail-400);
	border-radius: var(--rn-r-pill);
	color: var(--rn-encre);
	font-size: 11.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-tri{ display: flex; align-items: center; gap: var(--rn-2); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-tri label{
	font-size: 13px;
	color: var(--rn-doux);
	white-space: nowrap;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-champ{
	min-height: var(--rn-cible);
	padding: 0 34px 0 var(--rn-3);
	background-color: var(--rn-fond);
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	border: 1px solid var(--rn-trait-fort);
	border-radius: var(--rn-r-2);
	color: var(--rn-encre);
	font-family: var(--rn-texte);
	font-size: 14px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-champ:hover{ border-color: var(--rn-encre); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-vue{ display: flex; gap: 2px; padding: 3px; background: var(--rn-fond-2); border-radius: var(--rn-r-2); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-vue-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: var(--rn-r-1);
	background: none;
	color: var(--rn-doux);
	transition: background-color var(--rn-transition), color var(--rn-transition);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-vue-btn:hover{ color: var(--rn-encre); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-vue-btn.is-on{
	background: var(--rn-fond);
	box-shadow: var(--rn-ombre-1);
	color: var(--rn-corail-600);
}

/* =============================================================
 * 7. Filtres actifs
 * ========================================================== */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-actifs{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--rn-2);
	padding: var(--rn-3) 0 0;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-actifs-titre{
	font-size: 12.5px;
	font-weight: 600;
	color: var(--rn-doux);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-chip{
	display: inline-flex;
	align-items: center;
	gap: var(--rn-2);
	min-height: 32px;
	padding: 0 var(--rn-2) 0 var(--rn-3);
	background: var(--rn-corail-50);
	border: 1px solid var(--rn-corail-200);
	border-radius: var(--rn-r-pill);
	color: var(--rn-encre);
	font-size: 13px;
	font-weight: 500;
	transition: background-color var(--rn-transition), border-color var(--rn-transition);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-chip:hover,
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-chip:focus-visible{
	background: var(--rn-corail-100);
	border-color: var(--rn-corail-500);
	color: var(--rn-encre);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-chip svg{ flex: 0 0 auto; opacity: .75; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-raz{
	min-height: 32px;
	padding: 0 var(--rn-2);
	color: var(--rn-corail-600);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	display: inline-flex;
	align-items: center;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-raz:hover{ color: var(--rn-corail-700); }

/* =============================================================
 * 8. Grille de produits
 * ========================================================== */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-grille{
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rn-3);
	margin-top: var(--rn-4);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-listing.is-charge .rn-grille{ opacity: .45; pointer-events: none; }

/* =============================================================
 * 9. Carte produit
 * ========================================================== */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte{
	position: relative;
	display: flex;
	flex-direction: row;
	gap: var(--rn-3);
	padding: var(--rn-3);
	background: var(--rn-fond);
	border: 1px solid var(--rn-trait);
	border-radius: var(--rn-r-3);
	transition: border-color var(--rn-transition), box-shadow var(--rn-transition);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte:hover,
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte:focus-within{
	border-color: var(--rn-trait-fort);
	box-shadow: var(--rn-ombre-3);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte-vignette{
	position: relative;
	flex: 0 0 96px;
	width: 96px;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-vignette {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--rn-fond);
	border: 1px solid var(--rn-trait);
	border-radius: var(--rn-r-2);
}

/*
 * Un dégradé animé occupe la tuile tant que l'image n'est pas peinte. Un aplat
 * gris muet laisse croire à une image manquante ; ce motif dit que quelque
 * chose arrive, et il disparaît dès que l'image est là.
 *
 * Le fondu enchaîné de l'image, lui, ne s'applique qu'aux vignettes différées :
 * les premières cartes sont chargées sans différé et doivent être opaques dès
 * le premier rendu, y compris si le script ne s'exécute pas.
 */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-vignette::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--rn-fond-2) 25%, var(--rn-fond-3) 37%, var(--rn-fond-2) 63%);
	background-size: 400% 100%;
	animation: rn-brille 1.4s ease infinite;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-vignette.is-prete::before { content: none; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-vignette-img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 6px;
	object-fit: contain;
	object-position: center;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) img.rn-vignette-img[loading="lazy"] {
	opacity: 0;
	transition: opacity 200ms ease;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-vignette.is-prete img.rn-vignette-img[loading="lazy"] { opacity: 1; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-vignette-img.is-vide {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--rn-1);
	padding: var(--rn-2);
	background: repeating-linear-gradient(-45deg, var(--rn-fond-2) 0 9px, var(--rn-fond-3) 9px 18px);
	color: var(--rn-doux);
	opacity: 1;
	text-align: center;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-vignette-txt {
	font-family: var(--rn-titre);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.2;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-badges{
	position: absolute;
	top: var(--rn-1);
	left: var(--rn-1);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	pointer-events: none;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-badge{
	padding: 2px 7px;
	border-radius: var(--rn-r-pill);
	font-family: var(--rn-titre);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .02em;
	white-space: nowrap;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-badge--kit{ background: var(--rn-encre); color: #fff; }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-badge--promo{ background: var(--rn-corail-400); color: var(--rn-encre); }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-badge--commande{ background: var(--rn-ambre-50); color: var(--rn-ambre); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte-corps{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	gap: var(--rn-1);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-ref{
	font-family: var(--rn-chiffres);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--rn-doux);
	font-variant-numeric: tabular-nums;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-ref-val{ user-select: all; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte-titre{
	font-family: var(--rn-titre);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--rn-encre);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte-titre a{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: inherit;
}

/* Toute la carte est cliquable sans imbriquer de liens. */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte-titre a::after{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte-vignette,
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte-actions{ position: relative; z-index: 2; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-compat{
	display: flex;
	flex-wrap: wrap;
	gap: var(--rn-1);
	font-size: 12px;
	color: var(--rn-doux);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-compat-item{
	padding: 1px 7px;
	background: var(--rn-fond-3);
	border-radius: var(--rn-r-pill);
	color: var(--rn-encre-2);
	font-weight: 500;
	line-height: 1.6;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-compat-plus{
	padding: 1px 6px;
	color: var(--rn-doux);
	line-height: 1.6;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-compat.is-vide{ font-style: normal; color: var(--rn-doux); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte-pied{
	display: flex;
	flex-direction: column;
	gap: var(--rn-2);
	margin-top: auto;
	padding-top: var(--rn-2);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte-actions{ display: flex; gap: var(--rn-2); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte-action{ flex: 1 1 auto; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte .added_to_cart{ display: none; }

/* Confirmation d'ajout : le bouton le dit lui-même, à l'endroit où le clic a
   eu lieu, plutôt qu'un bandeau en haut de page que personne ne voit. */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte-action.is-ajoute{
	background: var(--rn-vert-50);
	border-color: var(--rn-vert);
	color: var(--rn-vert);
}

/* =============================================================
 * 10. Bloc de prix
 * ========================================================== */

/*
 * Le moteur tarifaire produit une ligne par tarif visible et marque d'un
 * rp-active celui qui sera réellement facturé. On ne change ni le nombre de
 * lignes ni leur contenu : on leur donne une hiérarchie. Le tarif appliqué est
 * grand et corail, les autres sont des repères.
 */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-prix .rp-prices{ display: flex; flex-direction: column; gap: 1px; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-prix .rp-line{
	display: flex;
	align-items: baseline;
	gap: 5px;
	font-family: var(--rn-chiffres);
	font-size: 11.5px;
	font-weight: 500;
	color: var(--rn-doux);
	font-variant-numeric: tabular-nums;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-prix .rp-line .rp-label{ font-weight: 500; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-prix .rp-line .tax_label{ font-size: .85em; font-weight: 500; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-prix .rp-line.rp-active{
	flex-wrap: wrap;
	color: var(--rn-corail-600);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.3px;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-prix .rp-line.rp-active .rp-label{
	flex: 0 0 100%;
	color: var(--rn-doux);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .02em;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-prix .rp-line.rp-active .tax_label{
	color: var(--rn-doux);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0;
}

/* Pour un visiteur, la ligne Club n'est pas un second prix : c'est une offre. */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-prix .rp-line.rp-club:not(.rp-active){
	align-self: flex-start;
	margin-top: 2px;
	padding: 2px 8px;
	background: var(--rn-corail-50);
	border-radius: var(--rn-r-pill);
	color: var(--rn-corail-600);
	font-weight: 600;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-prix--vide{ font-size: 15px; font-weight: 600; color: var(--rn-doux); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-prix--fiche .rp-line.rp-active{ font-size: 30px; letter-spacing: -.6px; }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-prix--fiche .rp-line{ font-size: 13px; }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-prix--fiche .rp-line.rp-active .rp-label,
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-prix--fiche .rp-line.rp-active .tax_label{ font-size: 13px; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-economie{
	margin-top: var(--rn-1);
	color: var(--rn-vert);
	font-size: 13px;
	font-weight: 600;
}

/* =============================================================
 * 11. Disponibilité
 * ========================================================== */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-stock{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--rn-1) var(--rn-2);
	font-size: 12.5px;
	font-weight: 600;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-stock-point{
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-stock.is-ok{ color: var(--rn-vert); }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-stock.is-faible{ color: var(--rn-ambre); }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-stock.is-attente{ color: var(--rn-ambre); }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-stock.is-ko{ color: var(--rn-doux); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-stock-detail{ color: var(--rn-doux); font-weight: 400; }

/* =============================================================
 * 12. Squelettes de chargement
 * ========================================================== */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte--fantome{ pointer-events: none; border-color: var(--rn-trait); }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte--fantome .rn-carte-vignette{ background: var(--rn-fond-2); border-radius: var(--rn-r-2); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-os{
	display: block;
	height: 10px;
	border-radius: var(--rn-r-1);
	background: linear-gradient(90deg, var(--rn-fond-3) 25%, var(--rn-fond-2) 37%, var(--rn-fond-3) 63%);
	background-size: 400% 100%;
	animation: rn-brille 1.4s ease infinite;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-os--ref{ width: 64px; }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-os--titre{ width: 100%; height: 13px; margin-top: 6px; }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-os--titre.is-court{ width: 60%; }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-os--compat{ width: 45%; margin-top: 6px; }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-os--prix{ width: 90px; height: 20px; margin-top: 10px; }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-os--btn{ width: 100%; height: 40px; margin-top: 10px; border-radius: var(--rn-r-2); }

@keyframes rn-brille { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* =============================================================
 * 13. Aucun résultat
 * ========================================================== */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-vide{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rn-2);
	margin-top: var(--rn-4);
	padding: var(--rn-12) var(--rn-6);
	background: var(--rn-fond-2);
	border-radius: var(--rn-r-3);
	text-align: center;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-vide h2{ font-size: 19px; font-weight: 700; color: var(--rn-encre); }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-vide p{ max-width: 46ch; font-size: 14px; color: var(--rn-doux); }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-vide .rn-btn{ margin-top: var(--rn-2); }

/* =============================================================
 * 14. Pagination et chargement
 * ========================================================== */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-pagination{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rn-3);
	margin-top: var(--rn-8);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-pagination-info{ font-size: 13px; color: var(--rn-doux); font-variant-numeric: tabular-nums; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-pages{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--rn-1); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-page{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--rn-cible);
	height: var(--rn-cible);
	padding: 0 var(--rn-3);
	background: var(--rn-fond);
	border: 1px solid var(--rn-trait);
	border-radius: var(--rn-r-2);
	color: var(--rn-encre-2);
	font-family: var(--rn-chiffres);
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	transition: border-color var(--rn-transition), color var(--rn-transition);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-page:hover{ border-color: var(--rn-encre); color: var(--rn-encre); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-page.is-on{
	background: var(--rn-encre);
	border-color: var(--rn-encre);
	color: #fff;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-page.is-vide{ border-color: transparent; pointer-events: none; }

/* =============================================================
 * 15. Panneau de filtres
 * ========================================================== */

.rn-filtres{
	background: var(--rn-fond);
	border: 1px solid var(--rn-trait);
	border-radius: var(--rn-r-3);
	overflow: hidden;
}

.rn-filtres-tete{
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: var(--rn-2);
	padding: var(--rn-3) var(--rn-4);
	border-bottom: 1px solid var(--rn-trait);
}

.rn-filtres-tete h2{ font-size: 17px; font-weight: 700; color: var(--rn-encre); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fermer{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--rn-cible);
	height: var(--rn-cible);
	padding: 0;
	background: var(--rn-fond-2);
	border: 0;
	border-radius: 50%;
	color: var(--rn-encre);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fermer:hover{ background: var(--rn-fond-3); }

.rn-filtres-corps{ overflow-y: auto; overscroll-behavior: contain; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-groupe{ border-bottom: 1px solid var(--rn-trait); }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-groupe:last-child{ border-bottom: 0; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-groupe-titre{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rn-2);
	width: 100%;
	min-height: 48px;
	padding: var(--rn-3) var(--rn-4);
	background: none;
	border: 0;
	color: var(--rn-encre);
	font-family: var(--rn-titre);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	text-align: left;
	text-transform: uppercase;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-groupe-titre:hover{ color: var(--rn-corail-600); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-chevron{ flex: 0 0 auto; color: var(--rn-doux); transition: transform var(--rn-transition); }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-groupe-titre[aria-expanded="false"] .rn-chevron{ transform: rotate(-90deg); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-groupe-corps{ padding: 0 var(--rn-2) var(--rn-3); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-recherche-facette{
	display: block;
	width: calc(100% - var(--rn-4));
	min-height: 38px;
	margin: 0 var(--rn-2) var(--rn-2);
	padding: 0 var(--rn-3);
	background: var(--rn-fond-2);
	border: 1px solid var(--rn-trait);
	border-radius: var(--rn-r-2);
	color: var(--rn-encre);
	font-family: var(--rn-texte);
	font-size: 13.5px;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-groupe-liste{ max-height: 264px; overflow-y: auto; overscroll-behavior: contain; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-option{
	display: flex;
	align-items: center;
	gap: var(--rn-2);
	min-height: 38px;
	padding: var(--rn-1) var(--rn-2);
	border-radius: var(--rn-r-2);
	color: var(--rn-encre-2);
	font-size: 13.5px;
	line-height: 1.3;
	transition: background-color var(--rn-transition);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-option:hover{ background: var(--rn-fond-2); color: var(--rn-encre); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-case{
	position: relative;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: var(--rn-fond);
	border: 1.5px solid var(--rn-trait-fort);
	border-radius: var(--rn-r-1);
	transition: background-color var(--rn-transition), border-color var(--rn-transition);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-option.is-on{ color: var(--rn-encre); font-weight: 600; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-option.is-on .rn-case{
	background: var(--rn-corail-600);
	border-color: var(--rn-corail-600);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-option.is-on .rn-case::after{
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(42deg);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-option-nom{ flex: 1 1 auto; min-width: 0; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-option-nb{
	flex: 0 0 auto;
	color: var(--rn-doux);
	font-family: var(--rn-chiffres);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-option.is-zero{ opacity: .45; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-prix-libre{
	display: flex;
	align-items: center;
	gap: var(--rn-2);
	margin-top: var(--rn-2);
	padding: 0 var(--rn-2);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-prix-libre input{
	width: 100%;
	min-width: 0;
	min-height: 38px;
	padding: 0 var(--rn-2);
	background: var(--rn-fond);
	border: 1px solid var(--rn-trait-fort);
	border-radius: var(--rn-r-2);
	color: var(--rn-encre);
	font-family: var(--rn-chiffres);
	font-size: 13px;
	-moz-appearance: textfield;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-prix-libre input::-webkit-outer-spin-button,
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-prix-libre input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-prix-libre span{ color: var(--rn-doux); font-size: 13px; }

.rn-filtres-pied{ display: none; gap: var(--rn-2); padding: var(--rn-3) var(--rn-4); border-top: 1px solid var(--rn-trait); }
.rn-filtres-pied .rn-btn{ flex: 1 1 0; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fond{ display: none; }

/* =============================================================
 * 16. Paliers
 * ========================================================== */

/* — 540 px : la carte passe en vignette verticale sur deux colonnes. */
@media (min-width: 540px) {

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-grille{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rn-4); }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte{ flex-direction: column; gap: 0; padding: 0; }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte-vignette{ flex: none; width: auto; }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-vignette{ border-radius: var(--rn-r-3) var(--rn-r-3) 0 0; }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-vignette-img{ padding: var(--rn-3); }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte-corps{ padding: var(--rn-3); gap: var(--rn-1); }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-badges{ top: var(--rn-2); left: var(--rn-2); }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte-titre{ font-size: 15px; }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte-titre a{ min-height: 2.6em; }
}

/* — 768 px : trois colonnes, en-tête plus généreux. */
@media (min-width: 768px) {

	/* Tablette : deux colonnes. Trois ramènent la carte sous 230 px, largeur à
	   laquelle la ligne de prix et le bouton deviennent difficiles à lire. */
	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-entete { padding: var(--rn-6) 0 var(--rn-5); }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-titre-page{ font-size: 34px; }
}

/* — 1024 px : le rail de filtres apparaît, les filtres quittent le tiroir. */
@media (min-width: 1024px) {

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-corps { grid-template-columns: 240px minmax(0, 1fr); gap: var(--rn-6); }

	/* Écran intermédiaire : trois colonnes à côté du rail de filtres. */
	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.rn-filtres{
		position: sticky;
		top: var(--rn-4);
		max-height: calc(100vh - var(--rn-8));
		display: flex;
		flex-direction: column;
		box-shadow: var(--rn-ombre-1);
	}

	.rn-filtres-corps{ flex: 1 1 auto; }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-barre{ top: 0; }
}

/* — 1280 px : quatre colonnes. */
/*
 * Quatrième colonne à partir de 1360 px et non de 1280 : à 1280, quatre
 * colonnes ramènent la carte à 201 px, sous la largeur nécessaire pour lire
 * une référence, deux lignes de titre, un prix et un bouton. Trois colonnes de
 * 275 px y sont plus lisibles.
 */
@media (min-width: 1440px) {

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-corps { grid-template-columns: var(--rn-rail) minmax(0, 1fr); gap: var(--rn-8); }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-titre-page { font-size: 36px; }
}

/* — sous 1024 px : tiroir de filtres plein écran. */
@media (max-width: 1023px) {

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-btn-filtres{ display: inline-flex; }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fond{
		display: block;
		position: fixed;
		inset: 0;
		z-index: 9998;
		background: rgba(26, 29, 62, .5);
		opacity: 0;
		transition: opacity 220ms ease;
	}

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fond[hidden]{ display: none; }

	body.rn-tiroir .rn-fond{ opacity: 1; }

	.rn-filtres{
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 9999;
		display: flex;
		flex-direction: column;
		width: min(380px, 92vw);
		border: 0;
		border-radius: 0;
		transform: translateX(-101%);
		visibility: hidden;
		transition: transform 240ms cubic-bezier(.4, 0, .2, 1), visibility 240ms;
	}

	body.rn-tiroir .rn-filtres{
		transform: none;
		visibility: visible;
		box-shadow: var(--rn-ombre-4);
	}

	/* Verrouillage du défilement : le corps est figé et décalé de la position
	   courante, ce qui évite le saut en haut de page à l'ouverture du tiroir.
	   Le script remet ensuite la page exactement où elle était. */
	body.rn-tiroir{
		position: fixed;
		width: 100%;
		overflow: hidden;
	}

	.rn-filtres-tete,
.rn-filtres-pied{ display: flex; }

	.rn-filtres-corps{ flex: 1 1 auto; }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-groupe-liste{ max-height: none; }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-option{ min-height: var(--rn-cible); }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-vue{ display: none; }
}

/* — sous 540 px : une colonne, carte horizontale, barre compacte. */
@media (max-width: 539px) {

	/* Deux actions de même poids côte à côte, le compteur au-dessus : c'est le
	   schéma que les catalogues mobiles ont fini par adopter, et il tient sur
	   une largeur de 360 px sans rien tronquer. */
	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-barre {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--rn-2);
		align-items: center;
	}

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-barre-g,
	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-barre-d { display: contents; }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-resultats { grid-column: 1 / -1; grid-row: 1; }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-btn-filtres { grid-column: 1; grid-row: 2; justify-content: center; }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-tri { grid-column: 2; grid-row: 2; }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-tri label { display: none; }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-champ { width: 100%; }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-titre-page{ font-size: 24px; }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-entete{ padding: var(--rn-3) 0 var(--rn-2); }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-souscats {
		position: relative;
		margin-right: calc( var(--rn-4) * -1 );
		padding-right: var(--rn-4);
	}

	/* Un fondu en bout de rangée : sans lui, rien n'indique qu'elle défile. */
	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-souscats::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 28px;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--rn-fond));
		pointer-events: none;
	}

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-souscats-liste { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--rn-1); scrollbar-width: none; }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-souscats-liste::-webkit-scrollbar{ display: none; }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-souscat{ flex: 0 0 auto; }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte-titre{ font-size: 14px; }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-prix .rp-line.rp-active{ font-size: 18px; }
}



/* =============================================================
 * 17. Fiche produit
 * ========================================================== */

.rn-fiche {
	padding: var(--rn-5) 0 var(--rn-12);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-haut {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		"media"
		"achat"
		"confiance";
	gap: var(--rn-6);
	margin-top: var(--rn-4);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-media { grid-area: media; min-width: 0; }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-achat { grid-area: achat; min-width: 0; }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-confiance { grid-area: confiance; min-width: 0; }

/* — Galerie — */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-galerie { display: flex; flex-direction: column; gap: var(--rn-3); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-galerie-scene {
	position: relative;
	background: var(--rn-fond-2);
	border: 1px solid var(--rn-trait);
	border-radius: var(--rn-r-3);
	overflow: hidden;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-galerie-lien {
	display: block;
	aspect-ratio: 4 / 3;
	cursor: zoom-in;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-galerie-img {
	display: block;
	width: 100%;
	height: 100%;
	padding: var(--rn-5);
	object-fit: contain;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-galerie-loupe {
	position: absolute;
	right: var(--rn-3);
	bottom: var(--rn-3);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--rn-cible);
	height: var(--rn-cible);
	background: var(--rn-fond);
	border: 1px solid var(--rn-trait);
	border-radius: 50%;
	color: var(--rn-encre);
	box-shadow: var(--rn-ombre-2);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-galerie-compteur {
	position: absolute;
	left: var(--rn-3);
	bottom: var(--rn-3);
	padding: 4px 10px;
	background: rgba(26, 29, 62, .78);
	border-radius: var(--rn-r-pill);
	color: #fff;
	font-family: var(--rn-chiffres);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-galerie-vues {
	display: flex;
	gap: var(--rn-2);
	overflow-x: auto;
	padding-bottom: var(--rn-1);
	scrollbar-width: thin;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-galerie-vue {
	flex: 0 0 auto;
	width: 76px;
	height: 76px;
	padding: 4px;
	background: var(--rn-fond-2);
	border: 2px solid var(--rn-trait);
	border-radius: var(--rn-r-2);
	overflow: hidden;
	transition: border-color var(--rn-transition);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-galerie-vue img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-galerie-vue:hover { border-color: var(--rn-trait-fort); }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-galerie-vue.is-on { border-color: var(--rn-corail-500); }

/* — Colonne d'achat — */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-achat { display: flex; flex-direction: column; gap: var(--rn-3); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-titre {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.3px;
	color: var(--rn-encre);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-compat {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--rn-2);
	padding: var(--rn-2) var(--rn-3);
	background: var(--rn-fond-2);
	border-radius: var(--rn-r-2);
	font-size: 13px;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-compat-lib {
	color: var(--rn-doux);
	font-family: var(--rn-titre);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-compat .rn-compat-item {
	padding: 3px 10px;
	background: var(--rn-fond);
	border: 1px solid var(--rn-trait);
	font-size: 13px;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) a.rn-compat-item:hover { border-color: var(--rn-corail-500); color: var(--rn-corail-600); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-compat.is-vide {
	display: flex;
	gap: var(--rn-2);
	background: var(--rn-ambre-50);
	color: var(--rn-ambre);
	font-size: 13px;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-dispo .rn-stock { font-size: 14px; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-prix {
	padding: var(--rn-3) 0;
	border-top: 1px solid var(--rn-trait);
	border-bottom: 1px solid var(--rn-trait);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-accroche { font-size: 14px; line-height: 1.6; color: var(--rn-encre-2); }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-accroche p + p { margin-top: var(--rn-2); }

/* — Formulaire d'achat de WooCommerce — */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--rn-2);
	margin: 0;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form .quantity {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin: 0;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form .quantity input.qty {
	width: 76px;
	height: 52px;
	padding: 0 var(--rn-2);
	background: var(--rn-fond);
	border: 1px solid var(--rn-trait-fort);
	border-radius: var(--rn-r-2);
	color: var(--rn-encre);
	font-family: var(--rn-chiffres);
	font-size: 16px;
	font-weight: 600;
	text-align: center;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form button.single_add_to_cart_button {
	flex: 1 1 200px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 var(--rn-6);
	background: var(--rn-corail-400);
	border: 1px solid var(--rn-corail-500);
	border-radius: var(--rn-r-2);
	color: var(--rn-encre);
	font-family: var(--rn-titre);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	transition: background-color var(--rn-transition);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form button.single_add_to_cart_button:hover { background: var(--rn-corail-500); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form button.single_add_to_cart_button.disabled,
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form button.single_add_to_cart_button[disabled] {
	opacity: .5;
	cursor: not-allowed;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form .variations_form { width: 100%; }

/*
 * Le bloc d'achat d'un produit a variations est un bloc simple : la quantite
 * et le bouton s'y empilaient sur toute la largeur, chacun sur sa ligne, et
 * le selecteur de quantite prenait sept cents pixels pour trois caracteres.
 * On lui donne la meme rangee que sur un produit simple.
 */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form .woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--rn-2);
	width: 100%;
}

/* La consigne d'achat occupe sa propre ligne, au-dessus de la rangee. */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form .rn-var-aide { flex: 1 1 100%; order: -1; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form table.variations { width: 100%; margin-bottom: var(--rn-3); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form table.variations td { padding: var(--rn-1) 0; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form table.variations select {
	width: 100%;
	min-height: var(--rn-cible);
	padding: 0 var(--rn-3);
	border: 1px solid var(--rn-trait-fort);
	border-radius: var(--rn-r-2);
}

/* — Contrôle de quantité — */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form .quantity :is(.minus, .plus, .qty-minus, .qty-plus, button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--rn-cible);
	height: 52px;
	padding: 0;
	background: var(--rn-fond-2);
	border: 1px solid var(--rn-trait-fort);
	color: var(--rn-encre);
	font-family: var(--rn-titre);
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form .quantity :is(.minus, .qty-minus) {
	border-radius: var(--rn-r-2) 0 0 var(--rn-r-2);
	border-right: 0;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form .quantity :is(.plus, .qty-plus) {
	border-radius: 0 var(--rn-r-2) var(--rn-r-2) 0;
	border-left: 0;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form .quantity :is(.minus, .plus, .qty-minus, .qty-plus):hover {
	background: var(--rn-fond-3);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form .quantity:has(.minus) input.qty,
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form .quantity:has(.qty-minus) input.qty {
	border-radius: 0;
	width: 60px;
}

/* — Accroche repliée — */

/*
 * Une accroche de dix lignes repousse le bouton d'achat hors de l'écran. Elle
 * est bornée à quatre lignes, avec le texte intégral toujours accessible dans
 * la section Description juste dessous.
 */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-accroche {
	position: relative;
	max-height: 6.6em;
	overflow: hidden;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-accroche.is-ouvert { max-height: none; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-accroche:not(.is-ouvert)::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 2.2em;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--rn-fond));
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-accroche-plus {
	align-self: flex-start;
	margin-top: calc( var(--rn-2) * -1 );
}

/* — Actions secondaires — */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-actions-2 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--rn-4);
	padding-top: var(--rn-1);
	font-size: 13px;
	color: var(--rn-doux);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-actions-2 a { color: var(--rn-doux); }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-actions-2 a:hover { color: var(--rn-corail-600); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-lien-conseil { display: inline-flex; align-items: center; gap: var(--rn-2); min-height: 32px; }

/* — Réassurance — */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-reassurance {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--rn-3) var(--rn-4);
	margin-top: var(--rn-2);
	padding-top: var(--rn-4);
	border-top: 1px solid var(--rn-trait);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-reassurance li { display: flex; align-items: flex-start; gap: var(--rn-2); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-reassurance svg { flex: 0 0 auto; margin-top: 1px; color: var(--rn-corail-600); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-reassurance b,
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-reassurance em { display: block; font-style: normal; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-reassurance b { color: var(--rn-encre); font-size: 13px; font-weight: 600; line-height: 1.3; }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-reassurance em { color: var(--rn-doux); font-size: 11.5px; line-height: 1.35; }

/* — Sections repliables — */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-sections { margin-top: var(--rn-10); border-top: 1px solid var(--rn-trait); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-section { border-bottom: 1px solid var(--rn-trait); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-section-titre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rn-3);
	width: 100%;
	min-height: 56px;
	padding: var(--rn-3) 0;
	background: none;
	border: 0;
	color: var(--rn-encre);
	font-family: var(--rn-titre);
	font-size: 16px;
	font-weight: 700;
	text-align: left;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-section-titre:hover { color: var(--rn-corail-600); }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-section-titre[aria-expanded="false"] .rn-chevron { transform: rotate(-90deg); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-section-corps {
	padding: 0 0 var(--rn-5);
	max-width: 76ch;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--rn-encre-2);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-section-corps p { margin-bottom: var(--rn-3); }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-section-corps h2, :is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-section-corps h3 { margin: var(--rn-4) 0 var(--rn-2); font-size: 15px; }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-section-corps ul { margin: 0 0 var(--rn-3) var(--rn-5); list-style: disc; }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-section-corps li { list-style: disc; margin-bottom: var(--rn-1); }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-section-corps table { width: 100%; border-collapse: collapse; }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-section-corps th, :is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-section-corps td { padding: var(--rn-2) var(--rn-3); border-bottom: 1px solid var(--rn-trait); text-align: left; }

/* — Produits associés — */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-associes { margin-top: var(--rn-10); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-associes-titre {
	margin-bottom: var(--rn-4);
	font-size: 20px;
	font-weight: 700;
	color: var(--rn-encre);
}

/* — Zoom — */

.rn-zoom {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--rn-6, 24px);
	background: rgba(26, 29, 62, .92);
}

.rn-zoom[hidden] { display: none; }

.rn-zoom img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	background: #fff;
	border-radius: 8px;
}

.rn-zoom-fermer {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 0;
	border-radius: 50%;
	color: #1A1D3E;
	cursor: pointer;
}

/* =============================================================
 * 18. Barre d'achat fixe
 * ========================================================== */

.rn-achat-fixe { display: none; }

@media (max-width: 1023px) {

	.rn-achat-fixe.rn-achat-fixe {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 64px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .96);
		border-top: 1px solid var(--rn-trait);
		box-shadow: 0 -6px 20px rgba(26, 29, 62, .1);
		transform: translateY(102%);
		transition: transform 240ms cubic-bezier(.4, 0, .2, 1);
	}

	.rn-achat-fixe.rn-achat-fixe[hidden] { display: none; }

	.rn-achat-fixe.rn-achat-fixe.is-visible { transform: none; }

	.rn-achat-fixe.rn-achat-fixe .rn-achat-fixe-info { flex: 1 1 auto; min-width: 0; }

	.rn-achat-fixe.rn-achat-fixe .rn-achat-fixe-nom {
		display: block;
		overflow: hidden;
		color: var(--rn-doux);
		font-size: 12px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Un seul tarif dans la barre : elle est étroite, la grille complète reste
	   sur la fiche. */
	.rn-achat-fixe.rn-achat-fixe .rp-line:not(.rp-active) { display: none; }

	.rn-achat-fixe.rn-achat-fixe .rp-line.rp-active {
		display: flex;
		align-items: baseline;
		gap: 4px;
		color: var(--rn-corail-600);
		font-family: var(--rn-chiffres);
		font-size: 17px;
		font-weight: 700;
	}

	.rn-achat-fixe.rn-achat-fixe .rp-line.rp-active .rp-label { display: none; }
	.rn-achat-fixe.rn-achat-fixe .rp-line.rp-active .tax_label { color: var(--rn-doux); font-size: 11px; font-weight: 500; }

	.rn-achat-fixe.rn-achat-fixe .rn-btn { flex: 0 0 auto; min-height: 48px; padding: 0 20px; }

	/* Sans cette réserve, la barre masque le dernier élément focalisé et la
	   page échoue au critère 2.4.11 de WCAG. */
	body.rn-page-produit { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
	html { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* — Paliers de la fiche — */

@media (min-width: 768px) {

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-titre { font-size: 28px; }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-haut { gap: var(--rn-8); }
}

@media (min-width: 1024px) {

	/*
	 * Deux colonnes, trois zones.
	 *
	 * La colonne d'achat est toujours la plus haute : elle porte le titre, la
	 * compatibilité, la disponibilité, jusqu'à cinq tarifs, l'accroche, les
	 * options, la quantité et deux rangs de boutons. La galerie, elle, est une
	 * image. Laisser les deux côte à côte sur une seule rangée laissait trois
	 * cents pixels de blanc sous la galerie. La réassurance prend cette place,
	 * et la colonne de gauche se termine à peu près en même temps que l'autre.
	 *
	 * La colonne de gauche est aussi la plus étroite des deux : sur une pièce
	 * mécanique, l'information vaut plus que la photographie.
	 */
	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-haut {
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"media achat"
			"confiance achat";
		align-items: start;
		column-gap: var(--rn-8);
		row-gap: var(--rn-5);
	}

	/* Une pièce mécanique est plus large que haute : le 4/3 la montre mieux
	   qu'un carré, et évite l'immense zone vide d'une image carrée sur un
	   grand écran. */
	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-galerie-lien { aspect-ratio: 4 / 3; max-height: 520px; }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-reassurance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 539px) {

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-titre { font-size: 21px; }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-reassurance { grid-template-columns: 1fr; gap: var(--rn-2); }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-galerie-img { padding: var(--rn-3); }

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form button.single_add_to_cart_button { flex: 1 1 100%; }
}



/* =============================================================
 * 19. Finitions
 * ========================================================== */

/* — Cartes de hauteur régulière — */

/*
 * Trois postes faisaient varier la hauteur d'une carte à l'autre : le titre sur
 * une ou deux lignes, la ligne de compatibilité sur une ou deux rangées de
 * pastilles, et le bloc de prix selon le nombre de tarifs visibles. Chacun
 * reçoit une hauteur plancher, de sorte que les boutons s'alignent d'une carte
 * à l'autre sans dépendre du contenu.
 */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte-titre a {
	min-height: 2.6em;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-compat {
	min-height: 22px;
	max-height: 22px;
	overflow: hidden;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte-pied .rn-prix {
	min-height: 46px;
}

/* — Tarifs des gestionnaires, en grille compacte — */

/*
 * Un gestionnaire voit cinq tarifs. Empilés, ils allongent la carte de plus de
 * soixante pixels et noient le tarif applicable. Les quatre tarifs de contrôle
 * passent donc sur deux colonnes, sous le tarif appliqué qui garde toute sa
 * place. La règle ne se déclenche qu'au-delà de deux lignes : un visiteur, un
 * membre Club ou un professionnel n'est pas concerné.
 */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte .rn-prix .rp-prices:has(.rp-line:nth-child(3)) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--rn-2);
	row-gap: 0;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte .rn-prix .rp-prices:has(.rp-line:nth-child(3)) .rp-line.rp-active {
	grid-column: 1 / -1;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte .rn-prix .rp-prices:has(.rp-line:nth-child(3)) .rp-line:not(.rp-active) {
	display: flex;
	justify-content: space-between;
	gap: 4px;
	font-size: 11px;
	white-space: nowrap;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte .rn-prix .rp-prices:has(.rp-line:nth-child(3)) .rp-line:not(.rp-active) .rp-label {
	overflow: hidden;
	text-overflow: ellipsis;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte .rn-prix .rp-prices:has(.rp-line:nth-child(3)) .rp-line:not(.rp-active) .rp-amount {
	color: var(--rn-encre-2);
	font-weight: 600;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-carte .rn-prix .rp-prices:has(.rp-line:nth-child(3)) .rp-line.rp-club:not(.rp-active) {
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	color: var(--rn-doux);
	font-weight: 500;
}

/* — Pagination — */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-pagination { gap: var(--rn-4); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-page {
	min-width: 48px;
	height: 48px;
	font-size: 15px;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-page.prev,
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-page.next {
	gap: var(--rn-2);
	padding: 0 var(--rn-4);
	font-family: var(--rn-titre);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-page-mot { display: none; }

@media (min-width: 640px) {
	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-page-mot { display: inline; }
}

/* — Fiche produit : respiration et séparateurs — */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-achat > * + * { margin-top: 0; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-prix { margin: var(--rn-1) 0; padding: var(--rn-4) 0; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form { margin-top: var(--rn-2); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form form.cart { gap: var(--rn-3); }

/* La demande de conseil est une action, pas une mention de bas de page. */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-actions-2 {
	gap: var(--rn-2);
	margin-top: var(--rn-2);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-actions-2 > * {
	display: inline-flex;
	align-items: center;
	gap: var(--rn-2);
	min-height: var(--rn-cible);
	padding: 0 var(--rn-3);
	border: 1px solid var(--rn-trait);
	border-radius: var(--rn-r-2);
	color: var(--rn-encre-2);
	font-size: 13px;
	font-weight: 500;
	transition: border-color var(--rn-transition), color var(--rn-transition);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-actions-2 > *:hover {
	border-color: var(--rn-corail-500);
	color: var(--rn-corail-600);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-actions-2 .yith-wcwl-add-to-wishlist { margin: 0; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-reassurance {
	padding: var(--rn-4);
	background: var(--rn-fond-2);
	border: 0;
	border-radius: var(--rn-r-3);
}

/* — Galerie : vignettes exploitables — */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-galerie-vue {
	width: 88px;
	height: 88px;
	background: var(--rn-fond);
	border-color: var(--rn-trait);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-galerie-scene { background: var(--rn-fond); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-galerie-img { opacity: 1; }

/* — Questions fréquentes — */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-faq-groupe {
	margin: var(--rn-5) 0 var(--rn-2);
	color: var(--rn-doux);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-faq-groupe:first-child { margin-top: 0; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-faq-liste {
	border: 1px solid var(--rn-trait);
	border-radius: var(--rn-r-2);
	overflow: hidden;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-faq-item + .rn-faq-item { border-top: 1px solid var(--rn-trait); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rn-3);
	width: 100%;
	min-height: var(--rn-cible);
	padding: var(--rn-3) var(--rn-4);
	background: none;
	border: 0;
	color: var(--rn-encre);
	font-family: var(--rn-texte);
	font-size: 14.5px;
	font-weight: 500;
	text-align: left;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-faq-q:hover { background: var(--rn-fond-2); color: var(--rn-corail-600); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-faq-q[aria-expanded="false"] .rn-chevron { transform: rotate(-90deg); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-faq-r {
	padding: 0 var(--rn-4) var(--rn-4);
	color: var(--rn-encre-2);
	font-size: 14px;
	line-height: 1.6;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-faq-r p + p { margin-top: var(--rn-2); }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-faq-r ul { margin: var(--rn-2) 0 0 var(--rn-5); list-style: disc; }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-faq-r li { list-style: disc; }

/* — Liens vers les pages de référence — */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-liens-docs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rn-2);
	margin-top: var(--rn-4);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-lien-doc {
	display: inline-flex;
	align-items: center;
	gap: var(--rn-2);
	min-height: var(--rn-cible);
	padding: 0 var(--rn-4);
	background: var(--rn-fond-2);
	border-radius: var(--rn-r-2);
	color: var(--rn-encre);
	font-size: 13.5px;
	font-weight: 600;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-lien-doc:hover { background: var(--rn-fond-3); color: var(--rn-corail-600); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-prose { max-width: 76ch; font-size: 14.5px; line-height: 1.65; }
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-prose p + p { margin-top: var(--rn-3); }

/* — Pied de page en accordéons sous 768 px — */

/*
 * Le pied de page vient d'Elementor : ni son contenu ni sa structure ne sont
 * touchés. Le script insère seulement un bouton devant chaque colonne de liens
 * et déplace les liens dans un conteneur. C'est ici que se décide ce qui est
 * montré : au-dessus de 768 px, le bouton disparaît et la colonne retrouve
 * exactement son apparence d'origine.
 */
.rn-pied-titre { display: none; }

@media (min-width: 768px) {

	.rn-pied-corps { display: block; }
}

@media (max-width: 767px) {

	/*
	 * Les colonnes du pied restaient a moitie de largeur sur un telephone :
	 * les accordeons se retrouvaient sur deux colonnes de 183 px. La portee
	 * doublee suffit a passer devant la regle d'Elementor, sans !important.
	 */
	:is(.elementor-location-footer, footer) .elementor-column.elementor-column:has(> .rn-pied-accordeon.rn-pied-accordeon) {
		width: 100%;
		flex: 0 0 100%;
	}

	.rn-pied-accordeon > .rn-pied-origine { display: none; }

	.rn-pied-accordeon > .rn-pied-titre {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		min-height: 48px;
		margin: 0;
		padding: 10px 0;
		background: none;
		border: 0;
		border-top: 1px solid rgba(128, 128, 128, .22);
		color: inherit;
		font-family: var(--rn-titre, inherit);
		font-size: 15px;
		font-weight: 600;
		line-height: 1.3;
		text-align: left;
		cursor: pointer;
	}

	.rn-pied-accordeon > .rn-pied-titre .rn-chevron {
		flex: 0 0 auto;
		transition: transform .16s;
	}

	.rn-pied-accordeon > .rn-pied-titre[aria-expanded="false"] .rn-chevron {
		transform: rotate(-90deg);
	}

	.rn-pied-accordeon > .rn-pied-corps { display: none; }

	.rn-pied-accordeon.is-ouvert > .rn-pied-corps {
		display: block;
		padding-bottom: 12px;
	}

	/* Les liens du pied de page tombaient à dix pixels sur un téléphone. */
	.rn-pied-accordeon .rn-pied-corps :is(a, li, p) {
		font-size: 14px;
		line-height: 1.8;
	}

	.rn-pied-accordeon .rn-pied-corps .elementor-icon-list-item > a {
		display: flex;
		align-items: center;
		min-height: 40px;
	}
}



/* Sans photo, la scène garde la place et la forme qu'aurait eues l'image :
   sinon la colonne de gauche se réduit à une bande et la fiche se déséquilibre. */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-galerie-scene--vide {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	max-height: 520px;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-galerie-scene--vide .rn-vignette-img.is-vide {
	width: 100%;
	height: 100%;
	gap: var(--rn-2);
	border-radius: var(--rn-r-3);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-galerie-scene--vide .rn-vignette-txt { font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
	.rn-catalogue *,
.rn-fiche *,
.rn-filtres *{ transition: none !important; animation: none !important; }
}


/* Sur mobile, le libellé de la page courante dans le fil d'Ariane répète le
   titre juste dessous : il est tronqué plutôt que de prendre deux lignes. */
@media (max-width: 539px) {

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fil {
		flex-wrap: nowrap;
		overflow: hidden;
	}

	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fil [aria-current] {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* =============================================================
 * 20. Grilles de suggestion
 *
 * Une grille de suggestions compte autant de colonnes que de cartes : deux
 * cartes s'affichent sur deux colonnes larges, pas sur les deux premieres
 * d'une grille de quatre. Aucune rangee ne se termine par du vide.
 * ========================================================== */

@media (min-width: 768px) {
	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-grille--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-grille--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-grille--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Les cartes d'une meme rangee se terminent a la meme hauteur : sans cela, la
   ligne des boutons se decale d'une carte a l'autre. */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-associes .rn-grille{ grid-auto-rows: 1fr; }

/* =============================================================
 * 21. Options d'un produit a variations
 *
 * Le theme fournit des pastilles a la place du menu deroulant, mais notre
 * remise a zero les laissait sans bordure : deux mots nus poses a droite
 * d'une phrase grise, sans etat visible. On leur redonne la forme d'un
 * choix : une etiquette au-dessus, des boutons alignes en dessous, un etat
 * retenu en marine — le corail reste reserve au prix applique et a l'achat.
 *
 * Le tableau de WooCommerce est mis a plat : sur une fiche etroite, une
 * colonne d'etiquettes face a une colonne de valeurs ecrase les deux.
 * ========================================================== */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) table.variations,
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) table.variations tbody,
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) table.variations tr,
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) table.variations th,
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) table.variations td{
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	text-align: left;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) table.variations tr + tr{ margin-top: var(--rn-4); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) table.variations th.label label{
	display: block;
	margin-bottom: var(--rn-2);
	font-family: var(--rn-titre);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--rn-encre);
}

/* Le theme ajoute la valeur retenue a la suite de l'etiquette : elle se lit
   comme une reponse, pas comme la suite du libelle. */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .nikstore-variation-swatches__selected-label{
	margin-left: var(--rn-2);
	color: var(--rn-encre);
	letter-spacing: 0;
	text-transform: none;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .nikstore-variation-swatches__wrapper{
	display: flex;
	flex-wrap: wrap;
	gap: var(--rn-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .nikstore-variation-swatches__item{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	min-height: var(--rn-cible);
	min-width: 104px;
	margin: 0;
	padding: 0 var(--rn-4);
	background: var(--rn-fond);
	border: 1.5px solid var(--rn-trait-fort);
	border-radius: var(--rn-r-2);
	color: var(--rn-encre);
	font-family: var(--rn-titre);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--rn-transition), border-color var(--rn-transition), color var(--rn-transition), box-shadow var(--rn-transition);
}

/*
 * Le theme cache le nom en le sortant du cadre : ici, c'est le nom qu'on lit.
 *
 * Il lui pose aussi height:100%. Le libelle remplit donc les 42 px du bouton,
 * et comme c'est un bloc a interligne de 18 px, le texte se colle en haut :
 * le bouton parait mal centre. Le libelle devient donc lui-meme un centreur.
 */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .nikstore-variation-swatches--button .nikstore-variation-swatches__name,
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .nikstore-variation-swatches__item .nikstore-variation-swatches__name{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	line-height: 1.2;
	text-indent: 0;
	text-align: center;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .nikstore-variation-swatches__item:hover{
	border-color: var(--rn-encre);
	background: var(--rn-fond-2);
}


:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .nikstore-variation-swatches__item:focus-visible{
	outline: 2px solid var(--rn-encre);
	outline-offset: 2px;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .nikstore-variation-swatches__item.selected{
	background: var(--rn-encre);
	border-color: var(--rn-encre);
	color: #FFFFFF;
	box-shadow: 0 0 0 3px rgba(26, 29, 62, .12);
}

/* Une option qu'aucune combinaison ne sert reste lisible mais barree : la
   masquer ferait croire a une liste plus courte qu'elle ne l'est. */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .nikstore-variation-swatches__item.disabled{
	background: var(--rn-fond-2);
	border-color: var(--rn-trait);
	border-style: dashed;
	color: var(--rn-doux);
	text-decoration: line-through;
	box-shadow: none;
	cursor: not-allowed;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .reset_variations{
	display: inline-block;
	margin-top: var(--rn-2);
	color: var(--rn-corail-600);
	font-size: 13px;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* -- Consigne d'achat --------------------------------------------------- */

/* Les deux phrases sont dans le document, mais aucune ne s'affiche tant que
   WooCommerce n'a pas pose l'etat correspondant sur le bouton. */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-var-aide{
	display: none;
	margin: 0 0 var(--rn-3);
	padding: 10px 12px;
	border-radius: var(--rn-r-2);
	font-size: 14px;
	line-height: 1.45;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-var-aide--choix{
	background: var(--rn-fond-2);
	border-left: 3px solid var(--rn-trait-fort);
	color: var(--rn-encre-2);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-var-aide--indispo{
	background: var(--rn-ambre-50);
	border-left: 3px solid var(--rn-ambre);
	color: var(--rn-encre);
}

.rn-fiche form.variations_form:has(.single_add_to_cart_button.wc-variation-selection-needed) .rn-var-aide--choix{ display: block; }
.rn-fiche form.variations_form:has(.single_add_to_cart_button.wc-variation-is-unavailable) .rn-var-aide--indispo{ display: block; }
.rn-fiche form.variations_form:has(.single_add_to_cart_button.wc-variation-is-unavailable) .rn-var-aide--choix{ display: none; }

/* Un bouton inactif se voit : sans cela, le corail pale se lit comme un
   bouton normal un peu delave, et le clic reste sans effet ni explication. */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form button.single_add_to_cart_button.disabled,
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form button.single_add_to_cart_button[disabled],
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form .single_add_to_cart_button.disabled,
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form .single_add_to_cart_button[disabled]{
	background: var(--rn-fond-2);
	border-color: var(--rn-trait-fort);
	color: var(--rn-doux);
	cursor: not-allowed;
	opacity: 1;
}

/* Le bloc de variation de WooCommerce redit le prix et la disponibilite sous
   les options, alors que la fiche les porte deja en haut de colonne, ou ils
   sont maintenant mis a jour. On garde le bloc dans le document — il porte le
   champ cache de la variation — mais on n'affiche plus le doublon. */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form .woocommerce-variation-price,
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form .woocommerce-variation-availability{
	display: none;
}

/* =============================================================
 * 22. Page introuvable
 *
 * Trois blocs cote a cote sous un champ de recherche : on ne fait pas
 * patienter quelqu'un qui cherche une piece.
 * ========================================================== */

.rn-404{ padding: var(--rn-5) 0 var(--rn-12); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-404-tete{
	max-width: 640px;
	margin-top: var(--rn-5);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-404-code{
	margin: 0 0 var(--rn-2);
	font-family: var(--rn-titre);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rn-corail-600);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-404-texte{
	margin: var(--rn-3) 0 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--rn-encre-2);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-404-recherche{
	display: flex;
	flex-wrap: wrap;
	gap: var(--rn-2);
	margin-top: var(--rn-5);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-404-recherche input[type="search"]{
	flex: 1 1 260px;
	min-height: var(--rn-cible);
	padding: 0 var(--rn-4);
	background: var(--rn-fond);
	border: 1px solid var(--rn-trait-fort);
	border-radius: var(--rn-r-2);
	font-family: var(--rn-texte);
	font-size: 16px;
	color: var(--rn-encre);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-404-recherche input[type="search"]:focus-visible{
	outline: 2px solid var(--rn-encre);
	outline-offset: 1px;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-404-corps{
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rn-6);
	margin-top: var(--rn-8);
	padding-top: var(--rn-6);
	border-top: 1px solid var(--rn-trait);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-404-h2{
	margin: 0 0 var(--rn-3);
	font-family: var(--rn-titre);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--rn-doux);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-404-liste{
	margin: 0;
	padding: 0;
	list-style: none;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-404-liste li + li{ border-top: 1px solid var(--rn-trait); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-404-liste a{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rn-3);
	min-height: var(--rn-cible);
	padding: var(--rn-2) 0;
	color: var(--rn-encre);
	font-size: 15px;
	line-height: 1.35;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-404-liste a:hover{ color: var(--rn-corail-600); }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-404-nb{
	flex: 0 0 auto;
	color: var(--rn-doux);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

/* -- Vehicules ---------------------------------------------------------- */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-404-liste--puces{
	display: flex;
	flex-wrap: wrap;
	gap: var(--rn-2);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-404-liste--puces li + li{ border-top: 0; }

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-404-liste--puces a.rn-404-puce{
	display: inline-flex;
	align-items: center;
	min-height: var(--rn-cible);
	padding: 0 var(--rn-4);
	background: var(--rn-fond);
	border: 1px solid var(--rn-trait-fort);
	border-radius: var(--rn-r-2);
	color: var(--rn-encre);
	font-family: var(--rn-titre);
	font-size: 14px;
	font-weight: 600;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-404-liste--puces a.rn-404-puce:hover{
	border-color: var(--rn-encre);
	background: var(--rn-fond-2);
	color: var(--rn-encre);
}

@media (min-width: 768px) {
	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-404-corps{
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--rn-8);
	}
}

/* =============================================================
 * 23. Rythme du bloc d'achat a variations
 *
 * Trois choses se suivent : les options, la consigne, la rangee quantite et
 * achat. Elles etaient separees par des blancs inegaux, et la quantite
 * occupait toute la largeur.
 * ========================================================== */

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form table.variations{
	margin-bottom: var(--rn-4);
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form table.variations tr + tr{
	margin-top: var(--rn-5);
}

/* La valeur retenue se lit a la suite de l'etiquette, en casse normale. */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .nikstore-variation-swatches__selected-label{
	margin-left: 2px;
	color: var(--rn-corail-600);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

/* La consigne est un repere, pas un pave : une ligne, un filet, rien de plus. */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-var-aide{
	margin: 0 0 var(--rn-2);
	padding: 8px 12px;
	font-size: 13px;
}

/* Le selecteur de quantite tient en cent soixante pixels, jamais davantage. */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form .woocommerce-variation-add-to-cart .quantity{
	flex: 0 0 auto;
	width: auto;
	max-width: 160px;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form .woocommerce-variation-add-to-cart .quantity input.qty{
	width: 60px;
	max-width: 60px;
}

:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form .woocommerce-variation-add-to-cart button.single_add_to_cart_button{
	flex: 1 1 220px;
}

/* Sous 560 px, le bouton prend toute la largeur sous la quantite : deux
   elements de quarante-quatre pixels cote a cote ne tiennent pas. */
@media (max-width: 559px) {
	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form .woocommerce-variation-add-to-cart button.single_add_to_cart_button{ flex: 1 1 100%; }
	:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .nikstore-variation-swatches__item{ min-width: 0; flex: 1 1 calc(50% - var(--rn-2)); }
}

/* La chaine de largeur du bloc de variation.
 *
 * WooCommerce imbrique .single_variation_wrap dans le formulaire, qui est
 * lui-meme une rangee souple : sans consigne, l'enveloppe se dimensionne sur
 * son contenu et la rangee quantite plus achat se retrouvait a trois cent
 * trente-cinq pixels dans une colonne de cinq cents. */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form .single_variation_wrap{
	flex: 1 1 100%;
	width: 100%;
	min-width: 0;
}

/* Quand le nombre d'options depasse ce que le theme sert en pastilles, il
   retombe sur un menu deroulant : il doit alors pouvoir montrer son libelle
   le plus long sans le rogner. */
:is(.rn-catalogue,.rn-fiche,.rn-filtres):is(.rn-catalogue,.rn-fiche,.rn-filtres) .rn-fiche-form table.variations select{
	width: auto;
	min-width: 260px;
	max-width: 100%;
	min-height: var(--rn-cible);
	padding: 0 var(--rn-8) 0 var(--rn-3);
	background: var(--rn-fond);
	border: 1px solid var(--rn-trait-fort);
	border-radius: var(--rn-r-2);
	color: var(--rn-encre);
	font-family: var(--rn-texte);
	font-size: 15px;
}