/* ==========================================================================
   Selecteur "Trouve ton PC" - styles Hylae (scopes sous .hylae-selecteur)
   Theme CLAIR (page blanche) : texte fonce, surfaces claires, accents gradient.
   Gradient signature #6200FF -> #18C3C3, Montserrat.
   ========================================================================== */

.hylae-selecteur{
	--hs-grad: linear-gradient(90deg,#6200FF,#18C3C3);
	--hs-surface: #F7F6FC;
	--hs-surface-2: #EEEBF9;
	--hs-border: rgba(20,18,43,.14);
	--hs-text: #16142B;
	--hs-muted: #6E6B8A;
	--hs-ok:#0E9E9E; --hs-warn:#B07A0B; --hs-bad:#D14343;
	font-family:"Montserrat",system-ui,sans-serif;
	color:var(--hs-text);
	max-width:880px; margin:0 auto; box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
}
.hylae-selecteur *{box-sizing:border-box;}
.hylae-selecteur .hs-hidden{display:none!important;}

/* Onglets */
.hs-tabs{display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap;}
.hs-tab{
	flex:1; min-width:160px; cursor:pointer;
	padding:12px 16px; border-radius:12px;
	background:var(--hs-surface); border:1px solid var(--hs-border);
	color:var(--hs-muted); font-size:15px; font-weight:600; font-family:inherit;
	transition:.15s; line-height:1.2;
	-webkit-appearance:none; appearance:none; background-clip:border-box!important; box-shadow:none; outline:none;
}
.hs-tab:focus, .hs-tab:focus-visible{outline:none!important; box-shadow:none!important;}
.hs-tab:hover{background:var(--hs-surface-2); color:var(--hs-text);}
.hs-tab.is-active{background:var(--hs-grad); color:#fff; border:0!important; box-shadow:none!important;}

/* Controles */
.hs-row{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:18px;}
.hs-field{flex:1; min-width:200px;}
.hs-label{display:block; font-size:13px; color:var(--hs-muted); margin-bottom:7px;}
.hs-select{
	width:100%; padding:11px 12px; border-radius:10px;
	background:#fff; border:1px solid var(--hs-border);
	color:var(--hs-text); font-size:15px; font-family:inherit; appearance:none;
	background-image:linear-gradient(45deg,transparent 50%,var(--hs-muted) 50%),linear-gradient(135deg,var(--hs-muted) 50%,transparent 50%);
	background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px; background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
.hs-select:focus{outline:none; border-color:#6200FF;}
.hs-select optgroup,.hs-select option{background:#fff; color:var(--hs-text);}

.hs-seg{display:inline-flex; border:1px solid var(--hs-border); border-radius:10px; overflow:hidden; background:#fff;}
.hs-seg button{
	cursor:pointer; padding:10px 16px; border:none; background:transparent;
	color:var(--hs-muted); font-size:14px; font-weight:600; font-family:inherit; transition:.12s;
}
.hs-seg button + button{border-left:1px solid var(--hs-border);}
.hs-seg button.is-active{background:var(--hs-grad); color:#fff;}

/* Reco (mode guide) */
.hs-reco{border:1px solid var(--hs-border); border-radius:16px; padding:18px 20px; background:#fff; position:relative;}
.hs-reco::before{content:""; position:absolute; inset:0; border-radius:16px; padding:1.5px; background:var(--hs-grad);
	-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;}
.hs-reco-tag{font-size:12px; color:var(--hs-muted); margin-bottom:6px;}
.hs-reco-card{font-size:24px; font-weight:700; margin:0 0 4px; color:var(--hs-text);}
.hs-reco-card .hs-price{font-size:15px; font-weight:600; color:var(--hs-ok); margin-left:8px;}
.hs-reco-sub{font-size:14px; color:var(--hs-muted); line-height:1.6;}
.hs-reco-sub b{color:var(--hs-text); font-weight:600;}

/* Boost technos */
.hs-boost{margin-top:14px; background:var(--hs-surface); border-radius:12px; padding:12px 14px;}
.hs-boost-h{font-size:12px; color:var(--hs-muted); margin-bottom:8px;}
.hs-badges{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;}
.hs-badge{font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; background:#EFEBFE; color:#5A3FC0; border:1px solid rgba(98,0,255,.25);}
.hs-tier{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px solid var(--hs-border);}
.hs-tier:first-of-type{border-top:none;}
.hs-tier-l{font-size:13px; color:var(--hs-muted);}
.hs-tier-v{font-size:16px; font-weight:700; color:var(--hs-text);}
.hs-tier-t{font-size:11px; color:var(--hs-muted); font-weight:400;}
.hs-note{font-size:11px; color:var(--hs-muted); margin-top:6px; line-height:1.5;}

.hs-cta{display:inline-block; margin-top:14px; padding:11px 18px; border-radius:10px; background:var(--hs-grad); color:#fff!important; font-weight:700; font-size:14px; text-decoration:none; cursor:pointer; border:none; font-family:inherit; position:relative;}
.hs-cta:hover{filter:brightness(1.08);}
/* Effet glitch : on REUTILISE le @keyframes "glitch" du theme (hylae.css, boutons .btn). Le :after
   reprend le meme principe (slices clip-path + ombres jaune/cyan), cale sur la box du .hs-cta ;
   data-text = le libelle (pose par selecteur.js). Declenche au survol, comme les boutons du site. */
.hs-cta:after{
	--slice-0: inset(50% 50% 50% 50%);
	--slice-1: inset(80% -6px 0 0);
	--slice-2: inset(50% -6px 30% 0);
	--slice-3: inset(10% -6px 85% 0);
	--slice-4: inset(40% -6px 43% 0);
	--slice-5: inset(80% -6px 5% 0);
	content: attr(data-text);
	display:block; position:absolute; inset:0; box-sizing:border-box;
	padding:11px 18px; border-radius:10px;
	background:var(--hs-grad); color:#fff;
	font-weight:700; font-size:14px;
	text-shadow:-3px -3px 0 #f8f005, 3px 3px 0 #00e6f6;
	clip-path: var(--slice-0); pointer-events:none;
}
.hs-cta:hover:after{animation:1s glitch; animation-timing-function:steps(2, end);}

/* Filtre de la grille produits (#shop-listing) */
.hs-filtered-out{display:none!important;}
.hs-hint{font-size:13px; color:var(--hs-muted); margin-top:2px;}
.hs-reset{display:inline-block; margin-left:10px; font-size:13px; color:#6200FF; cursor:pointer; text-decoration:underline; background:none; border:none; font-family:inherit; padding:0;}
.hs-reset:hover{color:#18C3C3;}

/* Resultats (mode composants) */
.hs-summary{margin-bottom:4px; font-size:14px; color:var(--hs-muted);}
.hs-summary b{color:var(--hs-text); font-weight:700; font-size:15px;}
.hs-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;}
.hs-card{display:block; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--hs-border); border-radius:12px; padding:12px 13px; transition:.13s;}
.hs-card:hover{background:var(--hs-surface); border-color:#6200FF; transform:translateY(-2px);}
.hs-card-n{font-size:15px; font-weight:600; margin-bottom:3px; color:var(--hs-text);}
.hs-card-p{font-size:14px; color:var(--hs-muted);}
.hs-card.is-best{border-color:#18C3C3; box-shadow:0 0 0 1px #18C3C3;}
.hs-card-best{font-size:11px; color:var(--hs-ok); margin-top:4px; font-weight:600;}
.hs-card-arrow{font-size:11px; color:var(--hs-muted); margin-top:6px;}

.hs-empty{font-size:14px; color:var(--hs-bad); padding:8px 0;}
.hs-foot{font-size:12px; color:var(--hs-muted); margin:16px 0 0; line-height:1.6;}

@media (max-width:560px){
	/* Polices mobile coherentes, calees sur les onglets a 11px. */
	.hs-tab{min-width:120px; font-size:11px; padding:9px 10px;}
	.hs-label{font-size:11px; margin-bottom:5px;}
	.hs-select{font-size:12px; padding:9px 12px;}
	.hs-reco{padding:14px 15px;}
	.hs-reco-tag{font-size:11px;}
	.hs-reco-card{font-size:16px;}
	.hs-reco-card .hs-price{font-size:12px;}
	.hs-reco-sub{font-size:12px;}
	.hs-boost{padding:10px 12px;}
	.hs-boost-h{font-size:11px;}
	.hs-badge{font-size:11px;}
	.hs-tier-l{font-size:11px;}
	.hs-tier-v{font-size:13px;}
	.hs-summary{font-size:11px;}
	.hs-summary b{font-size:12px;}
	.hs-foot{font-size:11px;}
	/* Layout : chaque champ sur sa ligne + segments PLEINE LARGEUR (boutons egaux), CTA pleine largeur. */
	.hs-row{gap:12px; margin-bottom:14px;}
	.hs-field{min-width:100%; flex-basis:100%;}
	.hs-seg{display:flex; width:100%;}
	.hs-seg button{flex:1; padding:9px 6px; font-size:11px; text-align:center;}
	.hs-cta{display:block; width:100%; text-align:center; font-size:12px;}
}