/* ============================================================================
   Budget < 1500 € — proposition de gammes. Bloc injecté sous le champ budget
   du formulaire sur-mesure (charte Hylæ : Montserrat héritée, gradient
   #6200FF -> #18C3C3, texte #16142B sur fond clair).

   ⚠️ !important PARTOUT (vérifié en live 02/07) : le bloc vit DANS
   form#acf-form, et acf.css applique des règles à ID ultra-larges
   (ex. `form#acf-form :not(input[type="submit"]) { font-size:15px; ... }`)
   qui écrasent toute classe simple. Widget autonome -> !important sans risque.
   ============================================================================ */

.hylae-bg:empty{ display:none !important; }

.hylae-bg{
	display:block !important;
	margin:16px 0 8px !important;
	padding:18px 16px 14px !important;
	background:#fff !important;
	border:1px solid #e6e4f0 !important;
	border-radius:14px !important;
	box-shadow:0 8px 28px -18px rgba(11,10,31,.35) !important;
	position:relative !important;
	overflow:hidden !important;
	text-align:left !important;
	line-height:1.45 !important;
}
.hylae-bg:before{
	content:"" !important;
	position:absolute !important;
	top:0 !important; left:0 !important; right:0 !important;
	height:4px !important;
	background:linear-gradient(90deg,#6200FF,#18C3C3) !important;
}

.hylae-bg .hbg-title{
	margin:0 0 2px !important;
	padding:0 !important;
	font-size:15px !important;
	font-weight:700 !important;
	color:#16142B !important;
	line-height:1.35 !important;
	text-transform:none !important;
}
.hylae-bg .hbg-sub{
	margin:0 0 12px !important;
	padding:0 !important;
	font-size:13px !important;
	font-weight:500 !important;
	color:#5a5670 !important;
	line-height:1.4 !important;
}

/* Cartes empilées en LIGNE (image à gauche, infos à droite). */
.hylae-bg .hbg-grid{
	display:flex !important;
	flex-direction:column !important;
	gap:12px !important;
	margin:0 !important;
	padding:0 !important;
}

.hylae-bg .hbg-card{
	display:flex !important;
	flex-direction:row !important;
	align-items:flex-start !important;
	gap:16px !important;
	margin:0 !important;
	padding:12px 14px !important;
	background:#faf9fd !important;
	border:1.5px solid #e6e4f0 !important;
	border-radius:12px !important;
	box-sizing:border-box !important;
	min-width:0 !important;
	overflow:hidden !important;
}

.hylae-bg .hbg-body{
	flex:1 1 auto !important;
	min-width:0 !important;
	display:flex !important;
	flex-direction:column !important;
	gap:3px !important;
}
.hylae-bg .hbg-card.is-best{
	border-color:transparent !important;
	background:
		linear-gradient(#faf9fd,#faf9fd) padding-box,
		linear-gradient(120deg,#6200FF,#18C3C3) border-box !important;
}

.hylae-bg .hbg-badge{
	display:inline-block !important;
	align-self:flex-start !important;
	width:auto !important;
	font-size:10px !important;
	font-weight:700 !important;
	letter-spacing:.04em !important;
	text-transform:uppercase !important;
	color:#fff !important;
	-webkit-text-fill-color:#fff !important;
	background:#0B0A1F !important;
	background-image:none !important;
	padding:3px 10px !important;
	border-radius:999px !important;
	margin:0 0 5px !important;
	line-height:1.5 !important;
}

/* Colonne gauche : image cliquable + bouton dessous, MEME largeur (l'anchor
   remplit la colonne, l'image prend 100% de large en hauteur auto -> ratio
   naturel, pas de crop, pas de letterbox ; l'image est aussi large que le bouton). */
.hylae-bg .hbg-media{
	flex:none !important;
	align-self:flex-start !important;
	display:flex !important;
	flex-direction:column !important;
	align-items:stretch !important;
	gap:8px !important;
	width:132px !important;
	margin:0 !important;
	padding:0 !important;
}
.hylae-bg .hbg-imglink{
	display:block !important;
	width:100% !important;
	box-sizing:border-box !important;
	line-height:0 !important;
	border-radius:8px !important;
	overflow:hidden !important;
	cursor:pointer !important;
	transition:transform .15s ease !important;
}
.hylae-bg .hbg-imglink:hover{ transform:scale(1.03) !important; }
.hylae-bg .hbg-img{
	display:block !important;
	width:100% !important;
	height:auto !important;
	margin:0 !important;
	padding:0 !important;
	border:0 !important;
	background:transparent !important;
}

/* Titres SOLIDES : le thème applique un dégradé -webkit-text-fill sur les
   headings/gras -> on force la couleur pleine + background:none. */
.hylae-bg .hbg-name{
	margin:0 !important;
	padding:0 !important;
	font-size:16px !important;
	font-weight:700 !important;
	color:#16142B !important;
	-webkit-text-fill-color:#16142B !important;
	background:none !important;
	background-image:none !important;
	line-height:1.3 !important;
}
.hylae-bg .hbg-gpu{
	margin:0 0 3px !important;
	padding:0 !important;
	font-size:13px !important;
	font-weight:700 !important;
	color:#6200FF !important;
	-webkit-text-fill-color:#6200FF !important;
	background:none !important;
	background-image:none !important;
	line-height:1.3 !important;
}
/* CPU · RAM : conteneur = 1 ligne en desktop (spans inline + separateur "·"),
   passe a 2 lignes en mobile (cf. @media : spans en block, separateur masque). */
.hylae-bg .hbg-specs{
	display:block !important;
	margin:0 !important;
	padding:0 !important;
	line-height:1.45 !important;
	white-space:nowrap !important;
	overflow:hidden !important;
	text-overflow:ellipsis !important;
}
.hylae-bg .hbg-spec{
	display:inline !important;
	margin:0 !important;
	padding:0 !important;
	font-size:11.5px !important;
	font-weight:500 !important;
	color:#5a5670 !important;
	-webkit-text-fill-color:#5a5670 !important;
	background:none !important;
	line-height:1.45 !important;
}
.hylae-bg .hbg-specs .hbg-spec + .hbg-spec::before{
	content:"·" !important;
	margin:0 6px !important;
	color:#9a97ad !important;
	-webkit-text-fill-color:#9a97ad !important;
}
.hylae-bg .hbg-fps{
	display:block !important;
	margin:6px 0 0 !important;
	padding:0 !important;
	font-size:12px !important;
	font-weight:600 !important;
	color:#16142B !important;
	line-height:1.4 !important;
}
.hylae-bg .hbg-fps + .hbg-fps{ margin-top:0 !important; }
.hylae-bg .hbg-price{
	margin:8px 0 9px !important;
	padding:0 !important;
	font-size:19px !important;
	font-weight:800 !important;
	color:#16142B !important;
	line-height:1.2 !important;
}

.hylae-bg .hbg-cta{
	display:inline-block !important;
	position:relative !important;
	align-self:flex-start !important;
	width:auto !important;
	box-sizing:border-box !important;
	text-align:center !important;
	margin:6px 0 0 !important;
	padding:7px 18px !important;
	border:0 !important;
	border-radius:9px !important;
	background:linear-gradient(90deg,#6200FF,#18C3C3) !important;
	color:#fff !important;
	-webkit-text-fill-color:#fff !important;
	font-size:12.5px !important;
	font-weight:700 !important;
	line-height:1.3 !important;
	text-decoration:none !important;
	text-transform:none !important;
	transition:filter .15s !important;
}
.hylae-bg .hbg-cta:hover{ filter:brightness(1.08) !important; color:#fff !important; }
/* Desktop : bouton sous le prix (--body). Mobile : sous l'image (--media, cf. @media). */
.hylae-bg .hbg-cta--media{ display:none !important; }

/* Effet glitch : on REUTILISE le @keyframes "glitch" du theme (hylae.css, boutons .btn),
   comme le selecteur (.hs-cta). Le :after reprend le libelle (data-text pose en JS), invisible
   au repos (slice-0 = inset total) et flicker au survol, avec les ombres jaune/cyan du site. */
.hylae-bg .hbg-cta:after{
	--slice-0: inset(50% 50% 50% 50%) !important;
	--slice-1: inset(80% -6px 0 0) !important;
	--slice-2: inset(50% -6px 30% 0) !important;
	--slice-3: inset(10% -6px 85% 0) !important;
	--slice-4: inset(40% -6px 43% 0) !important;
	--slice-5: inset(80% -6px 5% 0) !important;
	content: attr(data-text) !important;
	display:block !important;
	position:absolute !important;
	inset:0 !important;
	box-sizing:border-box !important;
	padding:7px 18px !important;
	border-radius:9px !important;
	background:linear-gradient(90deg,#6200FF,#18C3C3) !important;
	color:#fff !important;
	-webkit-text-fill-color:#fff !important;
	font-size:12.5px !important;
	font-weight:700 !important;
	line-height:1.3 !important;
	text-align:center !important;
	text-shadow:-3px -3px 0 #f8f005, 3px 3px 0 #00e6f6 !important;
	clip-path: var(--slice-0) !important;
	pointer-events:none !important;
}
.hylae-bg .hbg-cta:hover:after{ animation:1s glitch !important; animation-timing-function:steps(2, end) !important; }

.hylae-bg .hbg-empty{ margin:4px 0 2px !important; padding:0 !important; }
.hylae-bg .hbg-empty .hbg-cta{ display:inline-block !important; }

.hylae-bg .hbg-note{
	margin:10px 0 0 !important;
	padding:0 !important;
	font-size:11px !important;
	font-weight:400 !important;
	color:#8a86a0 !important;
	line-height:1.4 !important;
}

@media (max-width:560px){
	.hylae-bg .hbg-card{ gap:11px !important; padding:10px !important; align-items:flex-start !important; }
	.hylae-bg .hbg-media{ width:104px !important; gap:7px !important; }
	.hylae-bg .hbg-img{ height:auto !important; }
	.hylae-bg .hbg-name{ font-size:15px !important; }
	.hylae-bg .hbg-gpu{ font-size:12.5px !important; }
	.hylae-bg .hbg-cta{ font-size:11.5px !important; }
	/* CPU et RAM sur 2 lignes SEULEMENT en mobile : spans en block, separateur "·" masque */
	.hylae-bg .hbg-specs{ white-space:normal !important; }
	.hylae-bg .hbg-specs .hbg-spec{ display:block !important; }
	.hylae-bg .hbg-specs .hbg-spec + .hbg-spec::before{ content:none !important; margin:0 !important; }
	/* Bouton SOUS L'IMAGE en mobile : on affiche le --media (pleine largeur colonne) et on masque le --body. */
	.hylae-bg .hbg-cta--body{ display:none !important; }
	.hylae-bg .hbg-cta--media{ display:block !important; width:100% !important; align-self:stretch !important; margin:0 !important; padding:8px 6px !important; }
}