/* HYMAGE Encadrements - front */

.hym-enc {
	--hym-ink: #1b1b1b;
	--hym-text: #494a4b;
	--hym-soft: #f7f7f5;
	--hym-line: #e3e2de;
	--hym-mute: #8a8a8a;
	font-family: inherit;
	color: var(--hym-text);
}

.hym-enc *,
.hym-enc *::before,
.hym-enc *::after {
	box-sizing: border-box;
}

/* Scene : visuel + cartouche */
.hym-enc__stage {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	border-top: 2px solid var(--hym-accent, #a8905e);
	padding-top: 28px;
}

.hym-enc__visual {
	margin: 0;
	background: var(--hym-soft);
	min-height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .2s linear;
}

.hym-enc__visual.is-loading {
	opacity: .45;
}

.hym-enc__img {
	display: block;
	max-width: 100%;
	max-height: 460px;
	height: auto;
	object-fit: contain;
}

.hym-enc__visual.is-empty .hym-enc__img {
	display: none;
}

.hym-enc__caption {
	padding-top: 4px;
}

.hym-enc__gamme {
	margin: 0 0 6px;
	font-size: 9.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--hym-mute);
}

.hym-enc__ref {
	margin: 0 0 14px;
	font-size: 26px;
	line-height: 1.15;
	font-weight: 400;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hym-ink);
}

.hym-enc__note {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.6;
}

.hym-enc__specs {
	margin: 0 0 22px;
	padding: 0;
	border-top: 1px solid var(--hym-line);
}

.hym-enc__spec {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px solid var(--hym-line);
}

.hym-enc__spec dt {
	margin: 0;
	font-size: 9.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--hym-mute);
	align-self: center;
}

.hym-enc__spec dd {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--hym-ink);
}

.hym-enc__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hym-enc__btn {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 0;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .15s linear, color .15s linear;
}

.hym-enc__btn--solid {
	background: var(--hym-ink);
	color: #fff;
	border: 1px solid var(--hym-ink);
}

.hym-enc__btn--solid:hover,
.hym-enc__btn--solid:focus {
	background: var(--hym-accent, #a8905e);
	border-color: var(--hym-accent, #a8905e);
	color: #fff;
}

.hym-enc__btn--ghost {
	background: transparent;
	color: var(--hym-ink);
	border: 1px solid var(--hym-ink);
}

.hym-enc__btn--ghost:hover,
.hym-enc__btn--ghost:focus {
	background: var(--hym-ink);
	color: #fff;
}

/* Gammes */
.hym-enc__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	margin: 34px 0 0;
	border-bottom: 1px solid var(--hym-line);
}

.hym-enc__tab {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	margin: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #4a4a4a;
	font-weight: 500;
	padding: 0 0 12px;
	border-bottom-width: 3px;
}

.hym-enc__tab:hover {
	color: var(--hym-ink);
}

.hym-enc__tab.is-active {
	color: var(--hym-ink);
	border-bottom-color: var(--hym-accent, #a8905e);
	font-weight: 600;
}

/* Panneau de gamme */
.hym-enc__panel {
	display: none;
}

.hym-enc__panel.is-active {
	display: block;
}

.hym-enc__panel-title {
	margin: 22px 0 6px;
	font-family: var(--hym-serif, Georgia, serif);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hym-text);
}

.hym-enc__panel-intro {
	margin: 0 0 16px;
	max-width: 70ch;
	font-size: 13px;
	line-height: 1.7;
	color: var(--hym-muted, #6b6b6b);
}

/* Grille de baguettes */
.hym-enc__grid {
	display: grid;
	grid-template-columns: repeat(var(--hym-cols, 5), minmax(0, 1fr));
	gap: 0;
	background: #fff;
	border-left: 1px solid var(--hym-line);
	margin-top: 0;
}

.hym-enc__thumb-meta {
	display: block;
	margin-top: 3px;
	font-size: 9px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hym-muted, #6b6b6b);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hym-enc__thumb {
	appearance: none;
	border: 0;
	border-right: 1px solid var(--hym-line);
	border-bottom: 1px solid var(--hym-line);
	border-radius: 0;
	margin: 0;
	padding: 14px 10px 12px;
	background: #fff;
	cursor: pointer;
	font-family: inherit;
	text-align: center;
	transition: background-color .15s linear;
}

.hym-enc__thumb:hover {
	background: var(--hym-soft);
}

.hym-enc__thumb.is-active {
	background: var(--hym-soft);
	box-shadow: inset 0 -2px 0 0 var(--hym-accent, #a8905e);
}

.hym-enc__thumb img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto 8px;
}

.hym-enc__thumb-fallback {
	display: block;
	width: 100%;
	padding-top: 100%;
	margin-bottom: 8px;
	background: var(--hym-line);
}

.hym-enc__thumb-ref {
	display: block;
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hym-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hym-enc__thumb:focus-visible,
.hym-enc__tab:focus-visible {
	outline: 2px solid var(--hym-accent, #a8905e);
	outline-offset: 2px;
}

@media (max-width: 900px) {
	.hym-enc__stage {
		grid-template-columns: minmax(0, 1fr);
		gap: 22px;
	}

	.hym-enc__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hym-enc__tabs {
		gap: 20px;
	}

	.hym-enc__tab {
		font-size: 14px;
		letter-spacing: .1em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hym-enc__visual,
	.hym-enc__btn,
	.hym-enc__thumb {
		transition: none;
	}
}

/* ---- Scene miroir : cadre construit a l'echelle ---- */
.hym-enc__visual{margin:0;flex-direction:column;padding:22px 14px}
.hym-enc__miroir{position:relative;margin:0 auto;flex:0 0 auto}
/* Glace : reflet d une piece, floute et assombri, plutot qu un aplat gris.
   Une glace sans tain renvoie ce qui lui fait face : ouvertures claires en
   haut, mobilier sombre en bas. La texture est volontairement tres floue. */
.hym-enc__glace{position:absolute;overflow:hidden;
	background:
		linear-gradient(168deg, rgba(255,255,255,.22), rgba(150,162,176,.12) 90%),
		var(--hym-reflet) center/cover no-repeat,
		#b6bec6}

/* Reflets fins, sous l ecran */
.hym-enc__glace:before{content:"";position:absolute;inset:0;pointer-events:none;
	background:
		/* eclat franc en travers de la glace */
		linear-gradient(104deg, transparent 4%, rgba(255,255,255,.34) 11%, rgba(255,255,255,.05) 19%, transparent 27%),
		linear-gradient(76deg, transparent 2%, rgba(255,255,255,.14) 7%, transparent 16%),
		linear-gradient(0deg, rgba(70,80,92,.09), transparent 30%)}

/* Voile de verre, par-dessus l ecran : une glace reflete aussi quand elle diffuse */
.hym-enc__glace:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
	background:
		linear-gradient(118deg, rgba(255,255,255,.13) 0 20%, transparent 40%, rgba(255,255,255,.05) 62%, transparent 76%),
		radial-gradient(130% 100% at 50% 50%, transparent 66%, rgba(60,70,80,.10) 100%)}
.hym-enc__ecran{position:absolute;background:#0b0e12 center/cover no-repeat;
	box-shadow:0 0 0 1px rgba(255,255,255,.15),0 6px 22px rgba(0,0,0,.35)}
.hym-enc--anime .hym-enc__ecran{animation:hym-enc-cycle 7s ease-in-out infinite}
@keyframes hym-enc-cycle{0%,40%{opacity:0}50%,88%{opacity:1}100%{opacity:0}}
.hym-enc__feuillure{position:absolute;pointer-events:none;
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.26),inset 0 3px 11px rgba(0,0,0,.55)}
.hym-enc__mont{position:absolute;background-repeat:repeat-x;background-position:center}
.hym-enc__mention{margin-top:8px;font-size:10px;font-style:italic;color:var(--hym-muted,#6b6b6b);text-align:center}
@media (prefers-reduced-motion: reduce){
	.hym-enc--anime .hym-enc__ecran{animation:none;opacity:1}
}

/* ---- Noms commerciaux dans les vignettes ---- */
.hym-enc__thumb-ref {
	white-space: normal;
	overflow-wrap: break-word;
	hyphens: auto;
	line-height: 1.3;
}

@media (max-width: 600px) {
	.hym-enc__thumb-ref { font-size: 9px; letter-spacing: .04em; }
	/* La couleur et la collection sont deja dans les caracteristiques :
	   inutile de les repeter sous chaque vignette sur un ecran etroit. */
	.hym-enc__thumb-meta { display: none; }
	.hym-enc__panel-title { font-size: 13px; }
	.hym-enc__mention { font-size: 9px; }
}

/* Une image manquante affiche son texte alternatif : il ne doit pas
   elargir la vignette ni faire defiler la page horizontalement. */
.hym-enc__thumb {
	overflow: hidden;
	min-width: 0;
}

.hym-enc__thumb img {
	max-width: 100%;
}

/* ---- Coin de la baguette selectionnee, a cote des caracteristiques ---- */
.hym-enc__coin {
	margin: 0 0 14px;
	background: var(--hym-soft, #f4f3f0);
	border: 1px solid var(--hym-line, #e3e2de);
	padding: 10px;
	max-width: 190px;
}

.hym-enc__coin.is-empty {
	display: none;
}

.hym-enc__coin img {
	display: block;
	width: 100%;
	height: auto;
	/* Molgra photographie le L branches en haut ; la charte HYMAGE
	   les veut en bas : un retournement vertical suffit. */
	transform: scaleY(-1);
}

@media (max-width: 900px) {
	.hym-enc__coin { max-width: 150px; }
}

/* Baguette sans lame preparee : le miroir laisse la place au gros plan */
.hym-enc--sans-lame .hym-enc__miroir,
.hym-enc--sans-lame .hym-enc__mention {
	display: none;
}

.hym-enc--sans-lame .hym-enc__visual:before {
	content: attr(data-sans-lame);
	display: block;
	max-width: 34ch;
	font-size: 12px;
	line-height: 1.7;
	font-style: italic;
	color: var(--hym-muted, #6b6b6b);
	text-align: center;
}