/* AAZ Galerie | Fiche produit, module « Caisse américaine » : le cadre en 3D, couches détachées puis rassemblées.
   Même mise en page que le Guide des Formats (scène carrée aux coins arrondis, sélecteur en pilule dessous). */
.aaz-caisse { display: grid; gap: 20px; color: var(--global-palette3, #000a28); }
.aaz-caisse__scene {
	position: relative; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; container-type: inline-size;
	background: var(--global-palette8, #f4f4f4);
	/* sur un écran peu haut, la scène se réduit : sélecteur et texte restent visibles sans faire défiler */
	width: min(100%, max(300px, calc(100vh - 290px))); justify-self: center;
}
.aaz-caisse__mv {
	position: absolute; inset: 0; display: block; width: 100%; height: 100%;
	background: transparent; --poster-color: transparent; cursor: pointer;
	opacity: 0; transition: opacity .5s ease;
}
.aaz-caisse.is-pret .aaz-caisse__mv { opacity: 1; }
.aaz-caisse__mv:focus-visible { outline: none; }

/* attente : le temps que le moteur 3D et le modèle arrivent */
.aaz-caisse__attente {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--global-palette5, #4a5568);
	transition: opacity .3s ease; pointer-events: none;
}
.aaz-caisse.is-pret .aaz-caisse__attente { opacity: 0; }
.aaz-caisse.is-erreur .aaz-caisse__attente::after { content: " indisponible"; }

/* étiquettes des couches (points d'ancrage de model-viewer), visibles une fois les couches détachées */
.aaz-caisse__tag {
	display: block; width: 0; height: 0; padding: 0; border: 0; background: none; pointer-events: none;
}
.aaz-caisse__tag > span {
	position: absolute; left: 0; bottom: 4px;
	white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: .06em; line-height: 1.2;
	color: var(--global-palette3, #000a28);
	text-shadow: 0 0 6px var(--global-palette8, #f4f4f4), 0 0 2px var(--global-palette8, #f4f4f4);
	opacity: 0; transform: translate(-50%, 4px); transition: opacity .35s ease, transform .35s ease;
}
.aaz-caisse__tag[data-n="dibond"] > span { bottom: auto; top: 4px; transform: translate(-50%, -4px); }
.aaz-caisse__tag[data-n="cadre"] > span { transform: translate(0, 4px); }
.aaz-caisse.is-eclate.is-pose .aaz-caisse__tag > span { opacity: 1; transform: translate(-50%, 0); }
.aaz-caisse.is-eclate.is-pose .aaz-caisse__tag[data-n="cadre"] > span { transform: translate(0, 0); }
@container (max-width: 360px) { .aaz-caisse__tag > span { font-size: 11px; letter-spacing: .03em; } }
.aaz-caisse__tag[data-n="dibond"] > span { transition-delay: .08s; }
.aaz-caisse__tag[data-n="tirage"] > span { transition-delay: .16s; }

/* survol (ordinateur) : les étiquettes se survolent aussi ; celles des autres couches s'effacent */
.aaz-caisse.a-survol.is-eclate.is-pose .aaz-caisse__tag > span { pointer-events: auto; cursor: default; }
.aaz-caisse.is-pose[data-focus="cadre"] .aaz-caisse__tag:not([data-n="cadre"]) > span,
.aaz-caisse.is-pose[data-focus="dibond"] .aaz-caisse__tag:not([data-n="dibond"]) > span,
.aaz-caisse.is-pose[data-focus="tirage"] .aaz-caisse__tag:not([data-n="tirage"]) > span { opacity: .28; transition-delay: 0s; }

/* sélecteur « Assemblé / Détaché » : la pilule du Guide des Formats */
.aaz-caisse__seg {
	position: relative; display: grid; grid-template-columns: 1fr 1fr; justify-self: center;
	width: 100%; max-width: 460px; padding: 4px; margin: 0; border-radius: 999px;
	background: var(--global-palette8, #f4f4f4);
}
.aaz-caisse__thumb {
	position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px;
	background: var(--global-palette3, #000a28); transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.aaz-caisse__seg[data-etat="eclate"] .aaz-caisse__thumb { transform: translateX(100%); }
/* jauge : la case de l'état suivant se remplit jusqu'au changement automatique (le cadre bouge seul) */
.aaz-caisse__jauge {
	position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px;
	overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .3s ease;
}
.aaz-caisse__seg[data-vers="eclate"] .aaz-caisse__jauge { left: 50%; }
.aaz-caisse__jauge::before {
	content: ""; position: absolute; inset: 0; background: rgba(0, 10, 40, .1);
	transform: scaleX(0); transform-origin: left center;
}
.aaz-caisse__jauge.is-court { opacity: 1; }
.aaz-caisse__jauge.is-court::before { animation: aaz-caisse-jauge var(--aaz-duree, 15s) linear forwards; }
@keyframes aaz-caisse-jauge { to { transform: scaleX(1); } }
.aaz-caisse__opt {
	position: relative; z-index: 1; height: 39px; min-height: 0; margin: 0; padding: 0 10px; border: 0; border-radius: 999px;
	background: none; box-shadow: none; color: var(--global-palette3, #000a28);
	font: inherit; font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: none; line-height: 1; cursor: pointer;
	transition: color .3s ease;
}
.aaz-caisse__opt:hover, .aaz-caisse__opt:focus { background: none; color: var(--global-palette3, #000a28); }
.aaz-caisse__opt.is-on, .aaz-caisse__opt.is-on:hover, .aaz-caisse__opt.is-on:focus { color: var(--global-palette9, #fff); }
.aaz-caisse__opt:focus-visible { outline: 2px solid var(--global-palette15, #beb358); outline-offset: 2px; }

/* texte sous le sélecteur : un petit titre doré et une phrase ; au survol d'une couche, sa description */
.aaz-caisse__texte {
	display: grid; justify-items: center; gap: 6px; justify-self: center; max-width: 500px; margin: 2px 0 0;
	text-align: center; transition: opacity .16s ease;
}
.aaz-caisse__texte.is-change { opacity: 0; }
.aaz-caisse__titre { font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: var(--global-palette15, #beb358); }
.aaz-caisse__phrase { font-size: 14px; line-height: 1.6; color: var(--global-palette5, #4a5568); }
.aaz-caisse__phrase { min-height: 3.2em; }
/* téléphone : la description change pendant la visite ; la place de 4 lignes évite que la fenêtre saute */
@media (max-width: 600px) { .aaz-caisse__phrase { min-height: 6.4em; } }

@media (prefers-reduced-motion: reduce) {
	.aaz-caisse__mv, .aaz-caisse__tag > span, .aaz-caisse__thumb, .aaz-caisse__opt, .aaz-caisse__texte { transition: none; }
	.aaz-caisse__jauge { display: none; }
}

/* Lien vers la fenêtre « Caisse américaine » à côté du choix « Cadre » */
@keyframes aaz-caisse-brille {
	0%, 14% { color: var(--global-palette3, #000a28); filter: none; }
	29% { color: var(--global-palette15, #beb358); filter: drop-shadow(0 0 3px rgba(190, 179, 88, .55)); }
	47%, 100% { color: var(--global-palette3, #000a28); filter: none; }
}
/* lien « | Caisse américaine (i) » après « Cadre » : le style de « Format | cm », un reflet doré qui passe sur le texte
   (le même que sur « Guide des Formats », décalé de moitié) et le (i) qui s'éclaire ; doré au survol */
form.variations_form .kt-variation-label .aaz-caisse-lien {
	display: inline-flex; align-items: center; gap: 5px; flex: none; align-self: center; min-height: 0; height: auto;
	margin: 0 auto 0 0; padding: 0 0 0 4px; border: 0; border-radius: 0; background: none; box-shadow: none;
	font: inherit; font-size: 14.4px; font-weight: 500; line-height: 1.2; letter-spacing: normal; text-transform: none;
	color: var(--global-palette3, #000a28); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
form.variations_form .kt-variation-label .aaz-caisse-lien__sep { color: #000; }
form.variations_form .kt-variation-label .aaz-caisse-lien__txt {
	background-image: linear-gradient(100deg, currentColor 0%, currentColor 38%, var(--global-palette15, #beb358) 50%, currentColor 62%, currentColor 100%);
	background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
	animation: aaz-caisse-reflet 2.6s linear -1.3s infinite;
}
form.variations_form .kt-variation-label .aaz-caisse-lien svg {
	width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round;
	animation: aaz-caisse-brille 2.6s linear -1.3s infinite;
}
form.variations_form .kt-variation-label .aaz-caisse-lien:hover, form.variations_form .kt-variation-label .aaz-caisse-lien:focus-visible {
	background: none; color: var(--global-palette15, #beb358);
}
form.variations_form .kt-variation-label .aaz-caisse-lien:hover .aaz-caisse-lien__txt,
form.variations_form .kt-variation-label .aaz-caisse-lien:focus-visible .aaz-caisse-lien__txt { animation: none; background-image: none; -webkit-text-fill-color: currentColor; }
form.variations_form .kt-variation-label .aaz-caisse-lien:hover svg, form.variations_form .kt-variation-label .aaz-caisse-lien:focus-visible svg { animation: none; }
form.variations_form .kt-variation-label .aaz-caisse-lien:focus-visible { outline: 2px solid var(--global-palette15, #beb358); outline-offset: 3px; }
@keyframes aaz-caisse-reflet { 0% { background-position: 160% center; } 55%, 100% { background-position: -60% center; } }
@media (prefers-reduced-motion: reduce) {
	form.variations_form .kt-variation-label .aaz-caisse-lien__txt, form.variations_form .kt-variation-label .aaz-caisse-lien svg { animation: none; background-image: none; -webkit-text-fill-color: currentColor; }
}
/* plus d'air entre le choix du format et celui du cadre */
form.variations_form table.variations tr.aaz-rang-cadre > td, form.variations_form table.variations tr.aaz-rang-cadre > th { padding-top: 18px; }
/* la fenêtre ne fait pas défiler la page derrière elle */
#Caisse-Americaine .kt-modal-container, #Caisse-Americaine .kt-modal-overlay { overscroll-behavior: contain; }