/* Calendrier de l'Avent Hâpy-Com 2026
 * Un seul univers visuel, volontairement nocturne : nuit d'hiver bleu encre, or Hâpy-Com, givre.
 * Tout est préfixé .hca- pour ne jamais toucher au thème Flatsome. */
.hca-root, .hca-pop, .hca-badge, .hca-toast {
	--hca-nuit: #0b1530;
	--hca-nuit-2: #13224a;
	--hca-nuit-3: #1d3266;
	--hca-or: #e0a23a;
	--hca-or-fonce: #ca831c;
	--hca-or-clair: #f6d48b;
	--hca-givre: #eef3ff;
	--hca-givre-2: #b9c7e8;
	--hca-houx: #b3263a;
	--hca-encre: #1a1408;
	--hca-display: "Marcellus", "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--hca-texte: "Figtree", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
	font-family: var(--hca-texte);
	color: var(--hca-givre);
	-webkit-font-smoothing: antialiased;
}
.hca-root *, .hca-pop *, .hca-badge *, .hca-toast * { box-sizing: border-box; }
.hca-pop button, .hca-root button, .hca-badge { font-family: var(--hca-texte); }
/* neutralise les styles de bouton du thème (majuscules, marges, hauteur minimale) */
:where(.hca-root, .hca-pop) button { margin: 0; text-transform: none; letter-spacing: normal; min-height: 0; line-height: 1.2; box-shadow: none; }

/* ------------------------------------------------------------------ boutons */
.hca-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 46px; padding: 0 20px; border-radius: 999px; border: 0; cursor: pointer;
	font: 700 15px/1.1 var(--hca-texte); letter-spacing: .01em; text-decoration: none !important;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.hca-btn:focus-visible, .hca-porte:focus-visible, .hca-x:focus-visible, .hca-son:focus-visible, .hca-badge:focus-visible {
	outline: 3px solid var(--hca-or-clair); outline-offset: 3px;
}
.hca-btn-or {
	color: var(--hca-encre) !important;
	background: linear-gradient(180deg, var(--hca-or-clair), var(--hca-or) 55%, var(--hca-or-fonce));
	box-shadow: 0 6px 22px rgba(224, 162, 58, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.hca-btn-or:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(224, 162, 58, .5), inset 0 1px 0 rgba(255, 255, 255, .6); }
.hca-btn-ligne { color: var(--hca-givre) !important; background: rgba(238, 243, 255, .06); box-shadow: inset 0 0 0 1px rgba(238, 243, 255, .35); }
.hca-btn-ligne:hover { background: rgba(238, 243, 255, .12); }
[data-hca-zone] { display: grid; gap: 26px; }
.hca-btn { white-space: nowrap; }
.hca-btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.hca-lien { color: var(--hca-or-clair) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; padding: 0; font-size: 14px; }

/* ------------------------------------------------------------------ pop-up */
.hca-pop {
	position: fixed; inset: 0; z-index: 999990; display: grid; place-items: center;
	padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
	background:
		radial-gradient(120% 80% at 50% 0%, rgba(77, 112, 196, .35), transparent 60%),
		radial-gradient(90% 60% at 50% 110%, rgba(224, 162, 58, .18), transparent 60%),
		linear-gradient(180deg, rgba(8, 15, 36, .97), rgba(11, 21, 48, .97));
	opacity: 0; transition: opacity .6s ease; overflow: hidden;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hca-pop.hca-on { opacity: 1; }
.hca-pop.hca-sort { opacity: 0; transition: opacity .5s ease .25s; }
.hca-ciel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hca-aurore {
	position: absolute; inset: -20% -10% auto; height: 60%; pointer-events: none; opacity: .55; filter: blur(40px);
	background: conic-gradient(from 200deg at 50% 60%, transparent, rgba(110, 200, 190, .35), rgba(120, 140, 255, .3), transparent 40%);
	animation: hca-aurore 14s ease-in-out infinite alternate;
}
@keyframes hca-aurore { from { transform: translateX(-6%) rotate(-4deg); } to { transform: translateX(6%) rotate(4deg); } }

.hca-x, .hca-son {
	position: absolute; z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(238, 243, 255, .08); color: var(--hca-givre); display: grid; place-items: center;
	box-shadow: inset 0 0 0 1px rgba(238, 243, 255, .25);
}
.hca-x { top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)); }
.hca-son { top: calc(14px + env(safe-area-inset-top, 0px)); right: calc(66px + env(safe-area-inset-right, 0px)); }
.hca-x:hover, .hca-son:hover { background: rgba(238, 243, 255, .16); }
.hca-x svg, .hca-son svg { width: 20px; height: 20px; }

.hca-scene { position: relative; z-index: 2; width: min(560px, 100%); display: grid; justify-items: center; text-align: center; gap: 18px; }
.hca-surtitre { font: 600 12px/1 var(--hca-texte); letter-spacing: .28em; text-transform: uppercase; color: var(--hca-or-clair); margin: 0; }
.hca-titre { font: 400 clamp(28px, 6vw, 44px)/1.05 var(--hca-display); margin: 0; color: var(--hca-givre); text-wrap: balance; letter-spacing: .01em; }
.hca-titre em { font-style: normal; color: var(--hca-or); }
.hca-consigne { margin: 0; font-size: 15px; color: var(--hca-givre-2); }
.hca-consigne b { color: var(--hca-givre); }

/* --- la boîte cadeau --- */
.hca-boite {
	--s: min(220px, 52vw);
	position: relative; width: var(--s); height: calc(var(--s) * 1.02); margin: 18px 0 8px;
	background: none; border: 0; padding: 0; cursor: pointer; perspective: 900px;
	animation: hca-flotte 3.6s ease-in-out infinite;
}
.hca-boite::before { /* halo */
	content: ""; position: absolute; inset: -38%; border-radius: 50%;
	background: radial-gradient(circle, rgba(246, 212, 139, .38), rgba(224, 162, 58, .12) 40%, transparent 66%);
	animation: hca-halo 2.4s ease-in-out infinite; pointer-events: none;
}
.hca-boite::after { /* ombre au sol */
	content: ""; position: absolute; left: 12%; right: 12%; bottom: -14%; height: 12%; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); pointer-events: none;
}
@keyframes hca-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes hca-halo { 0%, 100% { opacity: .7; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.04); } }

.hca-corps {
	position: absolute; left: 6%; right: 6%; bottom: 0; height: 66%; border-radius: 6px 6px 12px 12px;
	background:
		radial-gradient(circle at 20% 30%, rgba(246, 212, 139, .55) 0 1.2px, transparent 1.6px) 0 0 / 22px 22px,
		radial-gradient(circle at 70% 75%, rgba(246, 212, 139, .35) 0 1px, transparent 1.4px) 0 0 / 30px 30px,
		linear-gradient(160deg, #24407e, #10204a 60%, #0a1533);
	box-shadow: inset 0 -18px 30px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .08), 0 18px 40px rgba(0, 0, 0, .45);
	overflow: hidden;
}
.hca-corps::before, .hca-couvercle::before { /* ruban vertical */
	content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 16%; transform: translateX(-50%);
	background: linear-gradient(90deg, var(--hca-or-fonce), var(--hca-or-clair) 45%, var(--hca-or) 60%, var(--hca-or-fonce));
	box-shadow: 0 0 0 1px rgba(26, 20, 8, .25);
}
.hca-medaillon {
	position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
	width: 40%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; z-index: 2;
	background: radial-gradient(circle at 35% 30%, #fffaf0, var(--hca-givre) 60%, #d8deef);
	box-shadow: 0 0 0 3px var(--hca-or), 0 0 0 6px rgba(26, 20, 8, .35), 0 8px 18px rgba(0, 0, 0, .35);
	color: var(--hca-nuit); font: 400 calc(var(--s) * .17)/1 var(--hca-display);
}
.hca-medaillon small { display: block; font: 700 calc(var(--s) * .042)/1 var(--hca-texte); letter-spacing: .14em; text-transform: uppercase; color: var(--hca-or-fonce); margin-top: 2px; }
.hca-couvercle {
	position: absolute; left: 0; right: 0; top: 18%; height: 20%; border-radius: 6px; z-index: 3;
	background: linear-gradient(180deg, #2c4c92, #172d63);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 6px 14px rgba(0, 0, 0, .4);
	transform-origin: 50% 100%; transition: transform .25s ease;
}
.hca-noeud { position: absolute; left: 50%; top: 2%; width: 56%; height: 22%; transform: translateX(-50%); z-index: 4; }
.hca-noeud i {
	position: absolute; top: 10%; width: 46%; height: 90%; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
	background: radial-gradient(circle at 50% 40%, transparent 32%, var(--hca-or) 34%, var(--hca-or-clair) 52%, var(--hca-or-fonce) 72%);
	box-shadow: inset 0 0 0 2px rgba(26, 20, 8, .2);
}
.hca-noeud i:first-child { left: 2%; transform: rotate(-22deg); }
.hca-noeud i:nth-child(2) { right: 2%; transform: rotate(22deg); }
.hca-noeud b { position: absolute; left: 50%; top: 52%; width: 18%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--hca-or-clair), var(--hca-or-fonce)); }
.hca-boite:focus { outline: none; }
.hca-boite:focus-visible .hca-corps { box-shadow: 0 0 0 3px var(--hca-or-clair), inset 0 -18px 30px rgba(0, 0, 0, .45), 0 18px 40px rgba(0, 0, 0, .45); }
.hca-boite:hover .hca-couvercle { transform: translateY(-4px) rotate(-1.5deg); }

/* rayons de lumière (révélés à l'ouverture) */
.hca-rayons {
	position: absolute; left: 50%; top: 40%; width: 260%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0); z-index: 1; pointer-events: none;
	background: repeating-conic-gradient(from 0deg, rgba(246, 212, 139, .55) 0deg 6deg, transparent 6deg 22deg);
	-webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .6) 25%, transparent 62%); mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .6) 25%, transparent 62%);
	opacity: 0;
}

/* séquence d'ouverture */
.hca-boite.hca-trac { animation: hca-trac .55s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes hca-trac {
	0%, 100% { transform: translate(0, 0) rotate(0); }
	15% { transform: translate(-3px, 0) rotate(-3deg); } 30% { transform: translate(4px, -2px) rotate(3deg); }
	45% { transform: translate(-4px, 0) rotate(-4deg); } 60% { transform: translate(4px, -3px) rotate(4deg); }
	75% { transform: translate(-2px, 0) rotate(-2deg) scale(1.03); } 90% { transform: translate(0, -4px) scale(1.06); }
}
.hca-boite.hca-ouverte { animation: none; cursor: default; }
.hca-boite.hca-ouverte::before { animation: none; opacity: 0; transition: opacity .6s; }
.hca-boite.hca-ouverte .hca-couvercle { transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .9s ease .2s; transform: translate(-30%, -230%) rotate(-38deg); opacity: 0; }
.hca-boite.hca-ouverte .hca-noeud { transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .7s; transform: translate(10%, -420%) rotate(160deg) scale(.6); opacity: 0; }
.hca-boite.hca-ouverte .hca-rayons { transition: transform 1.2s cubic-bezier(.15, .8, .2, 1), opacity .5s; transform: translate(-50%, -50%) scale(1) rotate(25deg); opacity: 1; }
.hca-boite.hca-ouverte .hca-corps, .hca-boite.hca-ouverte .hca-medaillon { transition: transform .8s ease .55s, opacity .6s ease .7s; transform: translateY(28%) scale(.9); opacity: 0; }
.hca-boite.hca-ouverte::after { transition: opacity .6s .6s; opacity: 0; }
.hca-intro.hca-cache { transition: opacity .35s, transform .35s; opacity: 0; transform: translateY(-10px); pointer-events: none; }

/* --- la carte du trésor --- */
.hca-carte {
	position: relative; width: min(440px, 100%); padding: 22px 22px 20px; border-radius: 22px; text-align: center;
	background: linear-gradient(180deg, rgba(29, 50, 102, .92), rgba(13, 24, 54, .96));
	box-shadow: 0 0 0 1px rgba(246, 212, 139, .45), 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(224, 162, 58, .25);
	display: grid; gap: 12px; justify-items: center;
}
.hca-carte::before { /* liseré doré qui court */
	content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
	background: conic-gradient(from var(--hca-a, 0deg), transparent 0 70%, var(--hca-or-clair) 80%, transparent 90%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
	animation: hca-liseret 4s linear infinite;
}
@property --hca-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes hca-liseret { to { --hca-a: 360deg; } }
.hca-carte.hca-surgit { animation: hca-surgit 1.15s cubic-bezier(.18, .9, .22, 1.08) both; }
@keyframes hca-surgit {
	0% { opacity: 0; transform: translateY(120px) scale(.35) rotateY(80deg); filter: brightness(3); }
	55% { opacity: 1; filter: brightness(1.4); }
	100% { opacity: 1; transform: none; filter: none; }
}
.hca-vignette {
	position: relative; width: min(220px, 62vw); aspect-ratio: 1; max-width: 100%;
}
.hca-photo { position: absolute; inset: 0; border-radius: 18px; background: #fff; display: grid; place-items: center; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(26, 20, 8, .06); }
.hca-photo img { width: 88%; height: 88%; object-fit: contain; }
.hca-photo .hca-sans-img { font: 400 54px/1 var(--hca-display); color: var(--hca-or-fonce); }
.hca-photo::after { /* éclat qui balaie la photo */
	content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .85) 45%, transparent 60%);
	transform: translateX(-120%); animation: hca-eclat 1.4s ease .9s 1 both;
}
@keyframes hca-eclat { to { transform: translateX(120%); } }
.hca-sceau {
	position: absolute; top: -14px; right: -14px; width: 92px; aspect-ratio: 1; border-radius: 50%; z-index: 3; display: grid; place-items: center;
	background: radial-gradient(circle at 35% 30%, #d8394f, var(--hca-houx) 55%, #7d1424);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 0 0 4px rgba(255, 255, 255, .08), inset 0 0 0 6px rgba(125, 20, 36, .8), inset 0 0 0 7px rgba(255, 215, 180, .35);
	color: #fff4e6; font: 400 26px/1 var(--hca-display); transform: rotate(-12deg);
}
.hca-sceau small { display: block; font: 700 9px/1.2 var(--hca-texte); letter-spacing: .12em; text-transform: uppercase; margin-top: 3px; }
.hca-carte.hca-surgit .hca-sceau { animation: hca-tampon .55s cubic-bezier(.3, 1.6, .4, 1) 1.05s both; }
@keyframes hca-tampon { 0% { opacity: 0; transform: rotate(-30deg) scale(2.4); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }
.hca-carte .hca-surtitre { margin-top: 6px; }
.hca-nom { font: 700 clamp(18px, 4vw, 21px)/1.3 var(--hca-texte); margin: 0; color: var(--hca-givre); text-wrap: balance; }
.hca-prix { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; font-variant-numeric: tabular-nums; }
.hca-prix s { color: var(--hca-givre-2); font-size: 15px; }
.hca-prix strong { font: 700 24px/1 var(--hca-texte); color: var(--hca-or-clair); }
.hca-prix span { width: 100%; font-size: 12px; color: var(--hca-givre-2); }
.hca-offre { margin: 0; font-size: 14px; line-height: 1.45; color: var(--hca-givre-2); max-width: 36ch; }
.hca-offre b { color: var(--hca-givre); }
.hca-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; }
.hca-actions .hca-btn { flex: 1 1 180px; }
.hca-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; font-size: 13px; color: var(--hca-givre-2); }
.hca-pied .hca-cd { font-variant-numeric: tabular-nums; color: var(--hca-givre); font-weight: 600; }
.hca-msg { min-height: 1.2em; margin: 0; font-size: 13px; font-weight: 600; color: #9be3b0; }
.hca-msg.hca-err { color: #ffb4b4; }

/* ------------------------------------------------------------------ badge flottant */
.hca-badge {
	position: fixed; left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 99990;
	display: flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px; cursor: pointer; text-decoration: none !important;
	background: linear-gradient(180deg, var(--hca-nuit-3), var(--hca-nuit)); color: var(--hca-givre) !important;
	box-shadow: 0 0 0 1px rgba(246, 212, 139, .55), 0 10px 30px rgba(11, 21, 48, .45);
	transform: translateY(140%); opacity: 0; transition: transform .6s cubic-bezier(.2, .9, .3, 1.2), opacity .4s;
}
.hca-badge.hca-on { transform: none; opacity: 1; }
.hca-badge-ico {
	position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
	background: radial-gradient(circle at 35% 30%, var(--hca-or-clair), var(--hca-or) 55%, var(--hca-or-fonce)); color: var(--hca-encre);
	font: 400 17px/1 var(--hca-display);
}
.hca-badge-ico::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(246, 212, 139, .6); animation: hca-pouls 2s ease-out infinite; }
.hca-badge.hca-vu .hca-badge-ico::after { animation: none; opacity: 0; }
@keyframes hca-pouls { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
.hca-badge-txt { display: grid; line-height: 1.15; text-align: left; }
.hca-badge-txt b { font: 700 13px/1.2 var(--hca-texte); }
.hca-badge-txt span { font-size: 12px; color: var(--hca-or-clair); }
.hca-badge.hca-pop-in { animation: hca-recoit .7s cubic-bezier(.3, 1.6, .4, 1); }
@keyframes hca-recoit { 0% { transform: scale(1); } 35% { transform: scale(1.25) rotate(-6deg); } 100% { transform: scale(1); } }

.hca-volant { position: fixed; z-index: 999995; pointer-events: none; border-radius: 22px; overflow: hidden; }

.hca-toast {
	position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 999996; transform: translate(-50%, 20px); opacity: 0;
	padding: 12px 18px; border-radius: 14px; max-width: min(92vw, 420px); text-align: center; font: 600 14px/1.4 var(--hca-texte);
	background: var(--hca-nuit); color: var(--hca-givre); box-shadow: 0 0 0 1px rgba(246, 212, 139, .5), 0 14px 36px rgba(0, 0, 0, .4);
	transition: opacity .3s, transform .3s; pointer-events: none;
}
.hca-toast.hca-on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------------ page Calendrier */
.hca-root {
	position: relative; overflow: hidden; border-radius: 18px; margin: 0 0 30px;
	background:
		radial-gradient(100% 50% at 50% 0%, rgba(77, 112, 196, .4), transparent 70%),
		linear-gradient(180deg, var(--hca-nuit-2), var(--hca-nuit) 45%, #070e22);
}
.hca-root .hca-ciel { position: absolute; }
.hca-interieur { position: relative; z-index: 1; padding-block: 34px 30px; padding-left: max(16px, 4vw); padding-right: max(16px, 4vw); display: grid; gap: 28px; }
.hca-tete { display: grid; gap: 10px; justify-items: center; text-align: center; }
.hca-tete .hca-titre { font-size: clamp(30px, 5.4vw, 54px); }
.hca-tete p { margin: 0; max-width: 60ch; color: var(--hca-givre-2); font-size: 16px; line-height: 1.55; }
.hca-jauge { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; align-items: center; font-size: 14px; color: var(--hca-givre-2); }
.hca-jauge b { color: var(--hca-givre); font-variant-numeric: tabular-nums; }
.hca-barre { width: 160px; height: 6px; border-radius: 3px; background: rgba(238, 243, 255, .12); overflow: hidden; }
.hca-barre i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--hca-or-fonce), var(--hca-or-clair)); border-radius: inherit; transition: width .8s ease; }

.hca-grille { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1.4vw, 16px); perspective: 1400px; }
@media (max-width: 900px) { .hca-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hca-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hca-porte {
	position: relative; aspect-ratio: 4 / 5; border-radius: 12px; border: 0; padding: 0; cursor: pointer; background: none;
	transform-style: preserve-3d; color: inherit;
}
.hca-porte.hca-grande .hca-battant { background: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .5) 0 1px, transparent 1.4px) 0 0 / 18px 18px, linear-gradient(155deg, var(--hca-or-clair), var(--hca-or) 55%, var(--hca-or-fonce)) !important; }
.hca-porte.hca-grande .hca-num { color: var(--hca-nuit); text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.hca-porte.hca-grande .hca-poignee { background: var(--hca-nuit); }
.hca-fond { /* ce qui se cache derrière la porte */
	position: absolute; inset: 0; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
	background: radial-gradient(circle at 50% 40%, #fff, #f2ecdf); box-shadow: inset 0 0 0 1px rgba(26, 20, 8, .1), inset 0 8px 18px rgba(0, 0, 0, .25);
}
.hca-fond img { width: 82%; height: 72%; object-fit: contain; margin-top: -8%; }
.hca-fond em { position: absolute; left: 6px; right: 6px; bottom: 6px; font: 700 10px/1.25 var(--hca-texte); font-style: normal; color: #2a2210; text-align: center;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hca-fond .hca-mini-sceau { position: absolute; top: 6px; right: 6px; padding: 3px 6px; border-radius: 999px; background: var(--hca-houx); color: #fff; font: 700 10px/1 var(--hca-texte); }
.hca-battant {
	position: absolute; inset: 0; border-radius: 12px; transform-origin: 0 50%; backface-visibility: hidden; display: grid; place-items: center;
	transition: transform 1.1s cubic-bezier(.3, .9, .25, 1), box-shadow .3s;
	background:
		radial-gradient(circle at 18% 22%, rgba(246, 212, 139, .45) 0 1px, transparent 1.4px) 0 0 / 18px 18px,
		linear-gradient(155deg, #284a92, #142a5e 60%, #0d1c44);
	box-shadow: inset 0 0 0 1px rgba(246, 212, 139, .35), inset 0 0 0 5px rgba(11, 21, 48, .6), inset 0 0 0 6px rgba(246, 212, 139, .25), 0 8px 18px rgba(0, 0, 0, .35);
}
.hca-porte:nth-child(3n+2) .hca-battant { background: radial-gradient(circle at 18% 22%, rgba(246, 212, 139, .4) 0 1px, transparent 1.4px) 0 0 / 18px 18px, linear-gradient(155deg, #8e2032, #6c1424 60%, #4a0d18); }
.hca-porte:nth-child(5n+4) .hca-battant { background: radial-gradient(circle at 18% 22%, rgba(246, 212, 139, .4) 0 1px, transparent 1.4px) 0 0 / 18px 18px, linear-gradient(155deg, #1f5a4e, #144238 60%, #0c2c25); }
.hca-num { font: 400 clamp(28px, 4.6vw, 46px)/1 var(--hca-display); color: var(--hca-or-clair); text-shadow: 0 2px 0 rgba(0, 0, 0, .35); }
.hca-poignee { position: absolute; right: 10%; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--hca-or); box-shadow: 0 0 0 2px rgba(26, 20, 8, .3); }
.hca-etat { position: absolute; left: 0; right: 0; bottom: 8%; font: 700 10px/1 var(--hca-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--hca-givre-2); }
.hca-porte.hca-ouverte .hca-battant { transform: rotateY(-108deg); box-shadow: inset 0 0 0 1px rgba(246, 212, 139, .35), -8px 8px 18px rgba(0, 0, 0, .3); }
.hca-porte.hca-ouverte { cursor: pointer; }
.hca-porte.hca-jour .hca-battant { box-shadow: inset 0 0 0 2px var(--hca-or-clair), 0 0 0 3px rgba(246, 212, 139, .25), 0 0 34px rgba(246, 212, 139, .55); animation: hca-appel 1.8s ease-in-out infinite; }
.hca-porte.hca-jour .hca-etat { color: var(--hca-or-clair); }
@keyframes hca-appel { 0%, 100% { transform: rotateY(0); } 50% { transform: rotateY(-7deg); } }
.hca-porte.hca-future .hca-battant { filter: saturate(.7) brightness(.82); }
.hca-porte.hca-future { cursor: not-allowed; }
.hca-porte.hca-future::after { /* neige posée sur le haut de la porte */
	content: ""; position: absolute; left: 4px; right: 4px; top: -4px; height: 9%; border-radius: 10px 10px 50% 50% / 10px 10px 100% 100%; pointer-events: none;
	background: radial-gradient(60% 120% at 30% 0, #fff, rgba(255, 255, 255, .92) 60%, rgba(223, 232, 255, .85));
	box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
}
.hca-porte.hca-ratee .hca-battant::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(238, 243, 255, .28), rgba(238, 243, 255, .05)); }
.hca-porte.hca-ratee .hca-etat { color: var(--hca-givre); }
.hca-porte.hca-secoue .hca-battant { animation: hca-secoue .45s ease; }
@keyframes hca-secoue { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px) rotate(-2deg); } 40% { transform: translateX(5px) rotate(2deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

.hca-bloc { display: grid; gap: 14px; }
.hca-bloc h3 { margin: 0; font: 400 clamp(22px, 3.4vw, 30px)/1.15 var(--hca-display); color: var(--hca-givre); }
.hca-bloc > p { margin: 0; color: var(--hca-givre-2); }
.hca-hotte { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.hca-tresor {
	display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 14px;
	background: rgba(238, 243, 255, .05); box-shadow: inset 0 0 0 1px rgba(238, 243, 255, .14);
}
.hca-tresor img, .hca-tresor .hca-sans-img { width: 72px; height: 72px; border-radius: 10px; background: #fff; object-fit: contain; }
.hca-tresor > div { min-width: 0; display: grid; gap: 4px; }
.hca-tresor b { font-size: 14px; line-height: 1.3; color: var(--hca-givre); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hca-tresor small { font-size: 12px; color: var(--hca-or-clair); }
.hca-tresor .hca-lien { font-size: 13px; justify-self: start; }
.hca-vide { padding: 16px; border-radius: 14px; background: rgba(238, 243, 255, .05); color: var(--hca-givre-2); }
.hca-conditions { font-size: 13px; line-height: 1.6; color: var(--hca-givre-2); border-top: 1px solid rgba(238, 243, 255, .12); padding-top: 16px; }
.hca-conditions h4 { margin: 0 0 6px; font: 700 12px/1 var(--hca-texte); letter-spacing: .16em; text-transform: uppercase; color: var(--hca-or-clair); }
.hca-conditions ul { margin: 0; padding-left: 18px; }
.hca-attente { text-align: center; display: grid; gap: 6px; justify-items: center; }
.hca-attente .hca-cd-grand { font: 400 clamp(26px, 5vw, 42px)/1 var(--hca-display); color: var(--hca-or-clair); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
	.hca-boite, .hca-boite::before, .hca-aurore, .hca-porte.hca-jour .hca-battant, .hca-badge-ico::after, .hca-carte::before { animation: none !important; }
	.hca-carte.hca-surgit { animation: hca-fondu .4s ease both; }
	.hca-battant { transition-duration: .3s; }
	@keyframes hca-fondu { from { opacity: 0; } to { opacity: 1; } }
}

/* Mobile : le site a une barre de navigation fixe en bas (56 px) ; badge et message passent au-dessus. */
@media (max-width: 849px) {
	.hca-badge { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
	.hca-toast { bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
}