/* ============================================================================
   H12 IMPRESSIONS — LES COMBOS
   Deux blocs distincts :
     .h12-pack*  cartes de packs, rendues par PHP (accueil + /combos/)
     .h12-cc*    le créateur, monté par assets/js/combo-creator.js
   Chargée sur l'accueil ET sur /combos/ : tout ce qui sert aux deux vit ici,
   jamais dans home.css (leçon des cartes produit, cf. README du thème).
   ========================================================================== */

/* La texture de grain est `position:absolute; inset:0` (theme.css). Sans
   ancrage, elle s'étale sur TOUTE la page et voile le contenu. Ces sections
   portent donc leur propre `position:relative` : ne jamais compter sur
   home.css, qui ne se charge que sur l'accueil. */
.h12-combos,
.h12-cc-sec {
	position: relative;
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
   1. LES CARTES DE PACKS
   ------------------------------------------------------------------------ */

.h12-packs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	align-items: stretch;
}

.h12-pack {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #1E1E1E;
	border: 1.5px solid #333;
	border-radius: var(--h12-radius-lg);
	overflow: hidden;
	transition: border-color var(--h12-t-card) ease, transform var(--h12-t-card) ease, box-shadow var(--h12-t-card) ease;
}

.h12-pack:hover {
	border-color: var(--h12-red);
	transform: translateY(-4px);
	box-shadow: var(--h12-shadow-dark);
}

/* Le pack mis en avant : liseré rouge permanent, sans changer sa taille. */
.h12-pack--vedette { border-color: var(--h12-red); }

.h12-pack__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: #111 center / cover no-repeat;
	overflow: hidden;
}

.h12-pack__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s var(--h12-ease);
}

.h12-pack:hover .h12-pack__img { transform: scale(1.05); }

/* Voile bas : le prix doit rester lisible quelle que soit l'affiche. */
.h12-pack__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 10, 10, .95) 0%, rgba(10, 10, 10, .55) 38%, rgba(10, 10, 10, .05) 72%);
	z-index: 1;
}

.h12-pack__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	background: var(--h12-red);
	color: #fff;
	font-family: var(--h12-font-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 6px 10px;
	border-radius: var(--h12-radius-sm);
}

.h12-pack__prix {
	position: absolute;
	left: 18px;
	bottom: 12px;
	z-index: 3;
	font-family: var(--h12-font-display);
	font-size: clamp(38px, 4vw, 52px);
	line-height: .9;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .7);
}

.h12-pack__morceaux {
	position: absolute;
	right: 18px;
	bottom: 18px;
	z-index: 3;
	font-family: var(--h12-font-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #C4C4C4;
}

.h12-pack__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px;
}

.h12-pack__nom {
	font-family: var(--h12-font-display);
	font-size: 22px;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 6px;
	line-height: 1;
}

.h12-pack__accroche {
	font-size: 13px;
	line-height: 1.55;
	color: var(--h12-text-3);
	margin: 0 0 14px;
}

.h12-pack__liste {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: grid;
	gap: 7px;
}

.h12-pack__liste li {
	display: flex;
	gap: 9px;
	align-items: baseline;
	font-size: 13.5px;
	color: #D7D7D7;
	line-height: 1.4;
}

.h12-pack__liste b {
	font-family: var(--h12-font-display);
	font-size: 16px;
	color: var(--h12-red);
	min-width: 30px;
	flex: none;
}

.h12-pack__perks {
	list-style: none;
	margin: 0 0 18px;
	padding: 14px 0 0;
	border-top: 1px solid #2E2E2E;
	display: grid;
	gap: 6px;
}

.h12-pack__perks li {
	position: relative;
	padding-left: 20px;
	font-family: var(--h12-font-mono);
	font-size: 10.5px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #9FD9B2;
}

.h12-pack__perks li::before {
	content: '✓';
	position: absolute;
	left: 0;
	top: -1px;
	color: #6FCF8B;
	font-size: 12px;
}

.h12-pack__eco {
	margin: 0 0 14px;
	font-size: 12.5px;
	color: var(--h12-text-3);
}

.h12-pack__eco b { color: #6FCF8B; }

.h12-pack__eco s {
	color: var(--h12-text-4);
	margin-right: 6px;
}

/* Le CTA reste collé en bas, quelles que soient les longueurs de liste. */
.h12-pack__cta { margin-top: auto; width: 100%; }

/* ---------------------------------------------------------------------------
   2. LE CRÉATEUR
   ------------------------------------------------------------------------ */

.h12-cc {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 24px;
	align-items: start;
	max-width: var(--h12-maxw-content);
	margin: 0 auto;
}

.h12-cc__col { min-width: 0; }

.h12-cc__step {
	font-family: var(--h12-font-mono);
	font-size: 11px;
	letter-spacing: .2em;
	text-transform: uppercase;
	/* #C4161C sur le noir des sections passe sous le seuil de contraste :
	   illisible pour un libellé d'étape. Éclairci ICI seulement, sans toucher
	   au token de marque. */
	color: #FF6B70;
	margin: 0 0 14px;
}

.h12-cc__etapes > .h12-cc__step { margin-top: 34px; }

/* --- choix du pack --- */

.h12-cc__packs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.h12-cc__pack {
	display: flex;
	flex-direction: column;
	text-align: left;
	background: #1A1A1A;
	border: 1.5px solid #333;
	border-radius: var(--h12-radius-lg);
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	transition: border-color var(--h12-t-fast), background var(--h12-t-fast);
}

.h12-cc__pack:hover { border-color: #555; }

.h12-cc__pack.is-active {
	border-color: var(--h12-red);
	background: #221415;
}

.h12-cc__pack-media {
	display: block;
	aspect-ratio: 16 / 9;
	background: #111 center / cover no-repeat;
}

.h12-cc__pack-body {
	display: block;
	padding: 12px 14px 14px;
}

.h12-cc__pack-prix {
	display: block;
	font-family: var(--h12-font-display);
	font-size: 26px;
	line-height: 1;
	color: #fff;
}

.h12-cc__pack.is-active .h12-cc__pack-prix { color: var(--h12-red); }

.h12-cc__pack-nom {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #E4E4E4;
	margin-top: 4px;
}

.h12-cc__pack-qte {
	display: block;
	font-family: var(--h12-font-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--h12-text-3);
	margin-top: 3px;
}

/* --- carte d'article --- */

.h12-cc__art {
	background: #1A1A1A;
	border: 1.5px solid #2E2E2E;
	border-radius: var(--h12-radius-lg);
	padding: 20px 22px 22px;
	margin-bottom: 14px;
}

.h12-cc__art-head {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin-bottom: 16px;
}

.h12-cc__art-num {
	flex: none;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	background: var(--h12-red);
	color: #fff;
	border-radius: var(--h12-radius-sm);
	font-family: var(--h12-font-mono);
	font-size: 12px;
}

.h12-cc__art-titre { display: flex; flex-direction: column; gap: 2px; }

.h12-cc__art-titre strong {
	font-size: 16px;
	font-weight: 800;
	color: #fff;
	line-height: 1.25;
}

.h12-cc__art-meta {
	font-family: var(--h12-font-mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--h12-text-3);
}

.h12-cc__lab {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin: 16px 0 9px;
	font-family: var(--h12-font-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--h12-text-3);
}

.h12-cc__lab-val {
	font-family: var(--h12-font-body);
	font-size: 12.5px;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
}

.h12-cc__lab-val.is-ok { color: #6FCF8B; }
.h12-cc__lab-val.is-trop { color: #FF8A7A; }

/* --- pastilles de couleur --- */

.h12-cc__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.h12-cc__sw {
	position: relative;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 2px solid #3A3A3A;
	border-radius: 50%;
	background: #333 center / cover no-repeat;
	cursor: pointer;
	transition: transform var(--h12-t-fast), border-color var(--h12-t-fast);
}

.h12-cc__sw.has-img { border-radius: var(--h12-radius); }

.h12-cc__sw:hover { transform: scale(1.12); border-color: #7A7A7A; }

.h12-cc__sw.is-active {
	border-color: var(--h12-red);
	box-shadow: 0 0 0 2px rgba(196, 22, 28, .35);
}

.h12-cc__sw-sup {
	position: absolute;
	right: -4px;
	bottom: -4px;
	background: var(--h12-ink);
	color: #FFD166;
	border: 1px solid #4A4A4A;
	border-radius: 999px;
	font-family: var(--h12-font-mono);
	font-size: 8px;
	line-height: 1;
	padding: 2px 4px;
}

/* --- grille de grandeurs --- */

.h12-cc__sizes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
	gap: 8px;
}

.h12-cc__size {
	display: flex;
	flex-direction: column;
	gap: 5px;
	background: #141414;
	border: 1.5px solid #333;
	border-radius: var(--h12-radius);
	padding: 9px 10px 10px;
	cursor: text;
	transition: border-color var(--h12-t-fast);
}

.h12-cc__size.is-on { border-color: var(--h12-red); }

.h12-cc__size-nom {
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-family: var(--h12-font-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--h12-text-3);
}

.h12-cc__size-sup {
	font-style: normal;
	font-size: 9px;
	color: #FFD166;
}

.h12-cc__size input {
	width: 100%;
	background: transparent;
	border: none;
	color: #fff;
	font-family: var(--h12-font-display);
	font-size: 22px;
	line-height: 1;
	padding: 0;
	-moz-appearance: textfield;
}

.h12-cc__size input::-webkit-outer-spin-button,
.h12-cc__size input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.h12-cc__size input:focus { outline: none; }
.h12-cc__size:focus-within { border-color: var(--h12-red); }

.h12-cc__quick {
	margin-top: 10px;
	background: transparent;
	border: 1.5px solid #3A3A3A;
	border-radius: var(--h12-radius-sm);
	color: #C4C4C4;
	font-family: var(--h12-font-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 7px 12px;
	cursor: pointer;
	transition: border-color var(--h12-t-fast), color var(--h12-t-fast);
}

.h12-cc__quick:hover { border-color: var(--h12-red); color: #fff; }

.h12-cc__unique {
	margin: 12px 0 0;
	font-family: var(--h12-font-mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--h12-text-3);
}

/* --- dépôt de fichiers --- */

.h12-cc__files {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.h12-cc__drop {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 132px;
	background: #141414;
	border: 1.5px dashed #3A3A3A;
	border-radius: var(--h12-radius);
	padding: 14px;
	transition: border-color var(--h12-t-fast), background var(--h12-t-fast);
}

.h12-cc__drop.is-over { border-color: var(--h12-red); background: #1D1416; }
.h12-cc__drop.is-filled { border-style: solid; border-color: #3F7F55; }

.h12-cc__drop-lab {
	font-family: var(--h12-font-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--h12-text-3);
}

.h12-cc__drop-zone {
	flex: 1;
	display: grid;
	place-items: center;
	cursor: pointer;
}

.h12-cc__drop-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.h12-cc__drop-btn {
	display: inline-block;
	border: 1.5px solid #4A4A4A;
	border-radius: var(--h12-radius-sm);
	padding: 9px 16px;
	font-family: var(--h12-font-body);
	font-weight: 800;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #E4E4E4;
	transition: border-color var(--h12-t-fast), color var(--h12-t-fast);
}

.h12-cc__drop-zone:hover .h12-cc__drop-btn { border-color: var(--h12-red); color: #fff; }

.h12-cc__drop-vig {
	display: block;
	height: 56px;
	background: #0E0E0E center / contain no-repeat;
	border-radius: var(--h12-radius-sm);
}

.h12-cc__drop-nom {
	font-size: 12px;
	color: #D7D7D7;
	word-break: break-all;
	line-height: 1.35;
}

.h12-cc__drop-del {
	align-self: flex-start;
	margin-top: auto;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: var(--h12-font-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--h12-text-3);
	text-decoration: underline;
}

.h12-cc__drop-del:hover { color: var(--h12-red); }

.h12-cc__drop-etat {
	font-family: var(--h12-font-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--h12-red);
}

/* --- « je n'ai pas de visuel » + notes --- */

.h12-cc__info {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-top: 14px;
	background: #141414;
	border: 1.5px solid #333;
	border-radius: var(--h12-radius);
	padding: 14px 16px;
	cursor: pointer;
	transition: border-color var(--h12-t-fast);
}

.h12-cc__info.is-on { border-color: var(--h12-red); }
.h12-cc__info input { margin-top: 3px; accent-color: var(--h12-red); flex: none; }
.h12-cc__info strong { display: block; font-size: 13.5px; color: #fff; }

.h12-cc__info-desc {
	display: block;
	font-size: 12.5px;
	color: var(--h12-text-3);
	line-height: 1.5;
	margin-top: 3px;
}

.h12-cc__notes {
	width: 100%;
	background: #141414;
	border: 1.5px solid #333;
	border-radius: var(--h12-radius);
	color: #fff;
	font-family: var(--h12-font-body);
	font-size: 13.5px;
	padding: 11px 13px;
	resize: vertical;
}

.h12-cc__notes:focus { outline: none; border-color: var(--h12-red); }

/* --- résumé collant --- */

.h12-cc__summary {
	position: sticky;
	top: 96px;
	background: #1E1E1E;
	border: 1.5px solid #333;
	border-radius: var(--h12-radius-lg);
	padding: 22px;
}

.h12-cc__sum-nom {
	font-family: var(--h12-font-display);
	font-size: 24px;
	text-transform: uppercase;
	color: #fff;
	line-height: 1;
	margin-bottom: 14px;
}

.h12-cc__sum-lignes {
	list-style: none;
	margin: 0 0 16px;
	padding: 0 0 14px;
	border-bottom: 1px solid #2E2E2E;
	display: grid;
	gap: 9px;
}

.h12-cc__sum-lignes li {
	display: grid;
	gap: 2px;
	font-size: 12.5px;
	color: var(--h12-text-3);
	line-height: 1.4;
}

.h12-cc__sum-lignes b {
	color: #E4E4E4;
	font-weight: 600;
	word-break: break-word;
}

.h12-cc__row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	color: var(--h12-text-3);
	margin-bottom: 7px;
}

.h12-cc__row b { color: #E4E4E4; flex: none; }
.h12-cc__row--sup { font-size: 12px; }
.h12-cc__row--sup b { color: #FFD166; }

.h12-cc__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid #2E2E2E;
	font-family: var(--h12-font-mono);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--h12-text-3);
}

.h12-cc__total-num {
	font-family: var(--h12-font-display);
	font-size: 40px;
	line-height: 1;
	color: var(--h12-red);
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
}

.h12-cc__eco {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 8px;
	text-align: right;
	font-size: 12px;
}

.h12-cc__eco-was { color: var(--h12-text-4); text-decoration: line-through; }
.h12-cc__eco b { color: #6FCF8B; }

.h12-cc__perks {
	list-style: none;
	margin: 16px 0 18px;
	padding: 0;
	display: grid;
	gap: 6px;
}

.h12-cc__perks li {
	position: relative;
	padding-left: 20px;
	font-family: var(--h12-font-mono);
	font-size: 10px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #9FD9B2;
}

.h12-cc__perks li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: #6FCF8B;
	font-size: 12px;
}

.h12-cc__cta { width: 100%; }

.h12-cc__cta:disabled {
	background: #3A3A3A;
	color: #8A8A8A;
	cursor: not-allowed;
}

.h12-cc__manque {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: grid;
	gap: 5px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--h12-text-3);
}

.h12-cc__manque li { position: relative; padding-left: 16px; }

.h12-cc__manque li::before {
	content: '•';
	position: absolute;
	left: 3px;
	color: var(--h12-red);
}

.h12-cc__err {
	margin: 12px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: #FF8A7A;
}

/* Repli sans JavaScript : le créateur ne se monte pas, on dit quoi faire. */
.h12-cc__nojs {
	max-width: 560px;
	margin: 0 auto;
	text-align: center;
	color: var(--h12-text-3);
}

/* ---------------------------------------------------------------------------
   3. RESPONSIVE
   ------------------------------------------------------------------------ */

@media (max-width: 1100px) {
	.h12-packs { grid-template-columns: repeat(2, 1fr); }
	.h12-cc { grid-template-columns: 1fr; }
	.h12-cc__summary { position: static; }
}

@media (max-width: 860px) {
	.h12-cc__packs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
	.h12-packs { grid-template-columns: 1fr; }
	.h12-cc__files { grid-template-columns: 1fr; }
	.h12-cc__art { padding: 16px 16px 18px; }
	.h12-cc__sizes { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
	.h12-cc__total-num { font-size: 34px; }
}