/*
 * Collections : composants de la charte (16/10/2026, maquette validée par Yoann).
 * Chargé sur les pages collections uniquement. Aucune largeur : la rangée Uncode
 * décide ; police du thème ; couleurs de la charte (#6200FF -> #18C3C3).
 * Suit le style de la colonne Uncode (.style-dark / .style-light).
 * Listes : classe « no-list » (exception prévue par Uncode à ses puces de .post-content ul) ;
 * tailles de texte posées sur li / dt / dd (style-custom.css les fixe à 16 px).
 */

.hyc { text-align: left; line-height: 1.55; }
.hyc *, .hyc *::before, .hyc *::after { box-sizing: border-box; }
.hyc p, .hyc ul, .hyc dl { margin: 0; }

/* --- Cartes PC ---------------------------------------------------------- */
.hyc-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.hyc-carte { position: relative; display: flex; flex-direction: column; border: 1px solid #ECEAF5; border-radius: 22px; overflow: hidden; background: #fff; color: #16142B; box-shadow: 0 12px 32px rgba(22, 20, 43, .08); }
.hyc-visuel { display: block; background: #F6F4FC; }
.hyc-visuel img { display: block; width: 100%; height: 250px; object-fit: cover; }
.hyc-badge { position: absolute; top: 14px; left: 14px; padding: 6px 12px; border-radius: 999px; background: #16142B; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.3; }
.hyc-corps { display: flex; flex-direction: column; gap: 10px; padding: 18px; flex-grow: 1; }
.hyc .hyc-carte .hyc-nom { margin: 0; font-size: 23px; font-weight: 800; line-height: 1.2; color: #16142B; }
.hyc-slogan { font-size: 14px; font-style: italic; font-weight: 500; color: #5E5A73; }
.hyc .hyc-specs { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.hyc .hyc-specs li { margin: 0; padding: 0; font-size: 14px; line-height: 1.45; }
.hyc-gris { color: #5E5A73; }
.hyc-prix { margin-top: auto; padding-top: 8px; font-size: 13px; color: #5E5A73; }
.hyc-prix span { font-size: 25px; font-weight: 800; color: #16142B; }
.hyc-economie { display: block; margin-top: 2px; font-style: normal; font-size: 13px; font-weight: 700; color: #0E9F8F; }
.hyc-ligne-texte .hyc-economie { margin: 0; font-size: 12px; }
.hyc .hyc-corps .btn { display: block; width: 100%; margin: 4px 0 0; text-align: center; white-space: normal; }
/* Prix en face du nom (20/10/2026) ; le bouton reste aligné en bas des cartes d'une même rangée */
.hyc-carte-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.hyc .hyc-carte-tete .hyc-prix { margin: 0; padding: 0; white-space: nowrap; }
.hyc .hyc-corps > .btn-container { margin-top: auto; padding-top: 8px; }

/* --- Liste compacte « au choix » ---------------------------------------- */
.hyc .hyc-liste { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 12px; }
.hyc .hyc-ligne { font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; padding: 12px 14px; border: 1px solid #ECEAF5; border-radius: 16px; background: #fff; color: #16142B; }
.hyc-ligne img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: #F6F4FC; flex: none; }
.hyc-ligne-texte { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #5E5A73; }
.hyc-ligne-texte strong { font-size: 17px; font-weight: 800; color: #16142B; }
.hyc-ligne-prix { font-size: 19px; font-weight: 800; white-space: nowrap; }
.hyc .hyc-ligne .btn { margin: 0; }

/* --- En bref : chiffres clés + pastilles -------------------------------- */
.hyc-bref { padding: 28px; border-radius: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; background: linear-gradient(90deg, rgba(98, 0, 255, .08), rgba(24, 195, 195, .08)); }
.hyc-bref strong { display: block; font-size: 30px; font-weight: 800; line-height: 1.2; color: #6200FF; }
.hyc-bref span { font-size: 13px; color: #4A4660; }
.hyc .hyc-pastilles { margin-top: 18px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; font-weight: 600; }
.hyc .hyc-pastilles li { font-size: 13px; line-height: 1.3; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 8px 14px; border-radius: 999px; background: #F6F4FC; color: #16142B; }
.style-dark .hyc-bref { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.style-dark .hyc-bref strong { color: #B79BFF; }
.style-dark .hyc-bref span { color: #C9C6DE; }
.style-dark .hyc .hyc-pastilles li { background: rgba(255, 255, 255, .08); color: #fff; }

/* --- Comparatif --------------------------------------------------------- */
.hyc-comparatif { display: flex; flex-wrap: wrap; gap: 22px; }
.hyc-comp { flex: 1 1 280px; min-width: 0; padding: 26px; border-radius: 22px; display: flex; flex-direction: column; gap: 14px; color: #16142B; background: linear-gradient(90deg, rgba(98, 0, 255, .08), rgba(24, 195, 195, .08)); }
.hyc-comp--ici { background: #fff; border: 2px solid #16142B; }
.hyc .hyc-comp h3 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; color: #16142B; }
.hyc-comp-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hyc-comp-tete span { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: #16142B; color: #fff; }
.hyc-comp dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; font-size: 14px; }
.hyc .hyc-comp dt, .hyc .hyc-comp dd { margin: 0; padding: 0; font-size: 14px; line-height: 1.45; }
.hyc-comp dt { color: #5E5A73; font-weight: 400; }
.hyc-comp dd { font-weight: 700; }
.hyc .hyc-comp .btn { align-self: flex-start; margin: auto 0 0; }
.hyc .hyc-lien { margin-top: 24px; font-size: 16px; text-align: center; }
.hyc-lien a { font-weight: 700; }

/* --- Tableau des FPS (bandeau sombre) ----------------------------------- */
.hyc-fps { overflow-x: auto; text-align: left; }
.hyc-fps table { width: 100%; min-width: 620px; margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hyc-fps th, .hyc-fps td { padding: 14px 18px; text-align: right; border: 0; border-top: 1px solid rgba(255, 255, 255, .12); background: transparent; }
.hyc-fps thead th { border-top: 0; font-weight: 400; opacity: .7; }
.hyc-fps th[scope=row], .hyc-fps thead th:first-child { text-align: left; font-weight: 600; }
.hyc-fps .hyc-fort { font-weight: 700; }
.hyc-fps .hyc-court { display: none; }
.hyc-fps .hyc-sans-dlss { font-size: 12px; font-weight: 400; opacity: .7; } /* CS2 : jeu sans DLSS (20/10/2026) */
.hyc-fps-note { margin-top: 24px; font-size: 13px; opacity: .7; text-align: left; }

/* Rangée Uncode dont l'élément calculé est vide (ex. aucune version plus abordable) : masquée */
.row-container:has(.hyc-vide) { display: none; }

.hyc a:focus-visible { outline: 2px solid #6200FF; outline-offset: 3px; }

/* En-tête sous 960 px : les 2 colonnes s'empilent, mais Uncode ajoute la hauteur du menu
   (padding-top en ligne sur .uncont) aux DEUX colonnes : 68 px de vide en trop au-dessus de
   l'encadré « en bref » (remarque Yoann 20/10/2026). Écarts harmonisés à 36 px, comme entre
   les éléments de la colonne de gauche. */
@media (max-width: 959px) {
	#page-header .wpb_row > .wpb_column + .wpb_column .uncont { padding-top: 0 !important; }
	.hyc .hyc-pastilles { margin-top: 36px; }
}

@media (max-width: 640px) {
	.hyc-bref { padding: 22px; }
	.hyc-bref strong { font-size: 24px; }
	.hyc-visuel img { height: 220px; }
	/* Liste « au choix » (20/10/2026, demande Yoann) : prix EN FACE du nom, caractéristiques sur
	   toute la largeur, bouton en dessous sur toute la largeur. Le bloc texte s'efface (display: contents) pour
	   que nom, lignes et prix se placent dans la même grille. */
	.hyc .hyc-ligne { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 2px 12px; }
	.hyc-ligne img { grid-column: 1; grid-row: 1 / span 3; width: 56px; height: 56px; align-self: start; }
	.hyc-ligne-texte { display: contents; font-size: 12px; }
	.hyc-ligne-texte strong { grid-column: 2; grid-row: 1; align-self: center; }
	.hyc-ligne-prix { grid-column: 3; grid-row: 1; align-self: center; }
	.hyc-ligne-texte span { grid-column: 2 / 4; }
	.hyc-ligne > .btn-container { grid-column: 1 / 4; margin-top: 10px; } /* bouton pleine largeur (Yoann 20/10/2026) */
	.hyc .hyc-ligne .btn { display: block; width: 100%; text-align: center; }
	/* Tableau FPS : 5 colonnes lisibles sans défilement horizontal */
	.hyc-fps table { min-width: 0; }
	.hyc-fps th, .hyc-fps td { padding: 10px 6px; font-size: 13px; }
	.hyc-fps .hyc-long { display: none; }
	.hyc-fps .hyc-court { display: inline; }
}