/**
 * Recherche Live — Habillage « Touchy Idea ».
 *
 * Valeurs relevées une à une dans le projet Claude Design « Touchy Idea Design
 * System », pas approximées :
 *
 *   champ            preview/components-fields.html
 *                    bordure 1.5px #DDD7C8 · rayon 14px · fond blanc ·
 *                    padding 12/14 · texte 15px Plus Jakarta Sans ·
 *                    focus : bordure plum-500 + halo cerise rgba(255,111,165,.20)
 *   bouton loupe     ui_kits/ecommerce/styles.css · .ti-icon-btn
 *                    42px · rond · plum-700 · survol fond plum-100
 *   carte / panneau  .ti-prod-card · rayon 24px · ombre 0 16px 36px rgba(102,68,143,.16)
 *   ligne de résultat .ti-cart-item · rayon 18px · vignette rayon 14px
 *   sur-titre        .ti-prod-eyebrow · DM Sans 700 · 10px · +0.08em · cerise
 *   titre            .ti-prod-name · DM Sans 700 · -0.015em · encre
 *   prix             .ti-prod-price · DM Sans 700 · plum-600 ·
 *                    promo cherry-600 · ancien prix mauve-400 barré
 *   badge promo      .ti-prod-tag-hot · cerise · blanc · DM Sans 800 · 10px
 *   ressorts         240–320ms cubic-bezier(0.34, 1.56, 0.64, 1)
 *
 * Pour habiller un autre site : dupliquer ce fichier sous un nouveau nom dans
 * assets/skins/, changer les valeurs, puis le choisir dans Réglages ▸ Recherche
 * Live. Aucune autre modification n'est nécessaire.
 */

.rl-search,
.rl-page,
.rl-skin-touchy-idea {
	/* ---------- Couleurs ---------- */
	--rl-bg: #ffffff;
	--rl-fg: #2d1b47;              /* encre */
	--rl-fg-soft: #6b5b82;         /* mauve-500 */
	--rl-fg-mute: #a99cb7;         /* mauve-400 */
	--rl-border: #efece3;          /* mist-100 */
	--rl-border-strong: #ddd7c8;   /* mist-200 — bordure du champ */
	--rl-focus-border: #8662b0;    /* plum-500 — bordure au focus */
	--rl-field-bg: #f8f7f1;        /* crème — fond des vignettes */
	--rl-field-bg-open: #ffffff;
	--rl-primary: #66448f;         /* prune */
	--rl-accent: #ff6fa5;          /* cerise */
	--rl-accent-fg: #ffffff;
	--rl-hover-bg: #f7eefc;        /* plum-50 */
	--rl-mark-bg: #ffe7ee;         /* cherry-100 */
	--rl-mark-fg: #c84372;         /* cherry-700 */

	--rl-toggle-color: #4a2f70;    /* plum-700, comme .ti-icon-btn */
	--rl-toggle-hover-bg: #eeddf8; /* plum-100 */

	--rl-eyebrow: #ff6fa5;         /* cerise, comme .ti-prod-eyebrow */
	--rl-price: #66448f;           /* plum-600 */
	--rl-price-sale: #e85890;      /* cherry-600 */
	--rl-price-old: #a99cb7;       /* mauve-400 */

	/* ---------- Formes — « Touchy Idea est ROND. Toujours. » ---------- */
	--rl-size: 42px;
	/* 24px = la taille de l'icône panier de l'en-tête de touchy-idea.com
	   (.et-pb-icon, font-size 24px, rendu 21×24). */
	--rl-icon-size: 24px;
	--rl-field-height: 46px;
	--rl-field-radius: 14px;
	--rl-field-border-width: 1.5px;
	--rl-panel-radius: 24px;
	--rl-item-radius: 18px;
	--rl-media-radius: 14px;
	--rl-pill: 999px;

	--rl-shadow: 0 16px 36px rgba(102, 68, 143, 0.16), 0 2px 8px rgba(45, 27, 71, 0.06);
	--rl-shadow-field: 0 1px 2px rgba(45, 27, 71, 0.05);
	--rl-focus-ring: 0 0 0 4px rgba(255, 111, 165, 0.20);

	/* ---------- Typographie ----------
	   Les polices ne sont chargées que si l'option est cochée dans les réglages ;
	   sinon la pile retombe sur les polices système. */
	--rl-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--rl-font-title: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--rl-fs: 15px;
	--rl-fs-sm: 13px;
	--rl-fs-xs: 11px;
	--rl-title-weight: 700;
	--rl-title-ls: -0.015em;
	--rl-eyebrow-ls: 0.08em;

	--rl-page-max: 1240px;         /* largeur des conteneurs du kit e-commerce */

	/* ---------- Mouvement ---------- */
	--rl-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--rl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--rl-dur-fast: 180ms;
	--rl-dur: 280ms;
	--rl-dur-slow: 360ms;
}

/* Le sur-titre de groupe reprend l'eyebrow du design system : DM Sans 700, 10px. */
.rl-group__label {
	font-size: 10px;
	font-weight: 700;
}

/* Les cartes du design system se soulèvent au survol. Dans une liste dense, on
   se contente du fond teinté — sauf sur la page de résultats, plus aérée. */
.rl-list--page .rl-item {
	transition: background-color var(--rl-dur-fast) ease-out, transform var(--rl-dur) var(--rl-ease-spring);
}

.rl-list--page .rl-item:hover {
	transform: translateY(-2px);
}

/* Bouton « Voir les N résultats » : prune, survol lilas très clair. */
.rl-footer:hover,
.rl-footer.is-active {
	background: #f7eefc;
	color: #4a2f70;
}

/* Onglets de la page de résultats : prune plein pour l'onglet actif. */
.rl-tab.is-active {
	background: #66448f;
	box-shadow: 0 2px 6px rgba(102, 68, 143, 0.24);
}

.rl-page-link.is-active {
	background: #66448f;
}