/**
 * Visionneuse du configurateur.
 *
 * Le conteneur garde les classes de la galerie WooCommerce (`.woocommerce-
 * product-gallery`, `.images`) : la mise en page en deux colonnes d'Astra les
 * cible, et les retirer ferait s'effondrer la fiche produit sur une colonne.
 * Ces regles ne font donc que garnir l'interieur.
 */

.chibimatic-viewer {
	position: relative;
}

/*
 * `hidden` DOIT CACHER — 24/09/2026.
 *
 * L'attribut `hidden` ne cache que par la feuille du navigateur
 * (`display: none`), et toute regle d'auteur l'emporte sur elle. Or
 * `.chibimatic-etat` declare `display: flex`, et `.chibimatic-scene img`
 * `display: block` : le voile d'attente, blanc a 82 %, recouvrait le vetement
 * EN PERMANENCE, et l'apercu vide restait pose par-dessus. Mesure sous Astra :
 * voile affiche, 600 x 800 px, sur une page au repos. Le client voyait son
 * vetement delave avant meme d'avoir choisi une photo.
 */
.chibimatic-viewer [hidden] {
	display: none !important;
}

.chibimatic-scene {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	background: #f4f4f6;
	aspect-ratio: 3 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * `!important` — 27/09/2026. Astra pose `height: auto` sur les images de la
 * fiche (`.woocommerce-js div.product div.images img`, plus specifique) : une
 * image carree restait en haut d'un cadre 3:4, sur une bande grise vide.
 * Le script donne en outre au cadre les proportions de l'image affichee.
 */
.chibimatic-scene img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: contain;
}

/* L'apercu est compose par le serveur, vetement compris : il se superpose. */
.chibimatic-apercu {
	position: absolute;
	inset: 0;
}

.chibimatic-etat {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	text-align: center;
	background: rgba( 255, 255, 255, 0.82 );
	color: #2b2b32;
	font-size: 0.95rem;
	line-height: 1.4;
}

/*
 * ATTENTE : ANNEAU D'AVANCEMENT — 0.27.0, 12/10/2026 (demande de Francis).
 * Remplace la barre glissante du haut. Le chiffre et sa nature (jalons reels,
 * puis estimation au temps pendant la generation) : `configurateur.js`,
 * « ANNEAU D'AVANCEMENT ». Couleur : `--chibimatic-accent`, reglable par le theme.
 */
.chibimatic-etat {
	flex-direction: column;
	gap: 1rem;
}
.chibimatic-etat-texte {
	margin: 0;
	max-width: 26em;
}
.chibimatic-progres {
	position: relative;
	flex: none;
	width: 132px;
	height: 132px;
	color: var( --chibimatic-accent, #7c5cfc );
}
.chibimatic-progres svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	transform: rotate( -90deg );
}
.chibimatic-progres-fond {
	fill: none;
	stroke: #ebe7f5;
	stroke: color-mix( in srgb, currentColor 16%, transparent );
	stroke-width: 8;
}
.chibimatic-progres-arc {
	fill: none;
	stroke: currentColor;
	stroke-width: 8;
	stroke-linecap: round;
	transition: stroke-dashoffset 0.45s ease;
}
.chibimatic-progres-valeur {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var( --chibimatic-encre, #2b2b32 );
}
/* Le point qui tourne : il bouge meme quand le chiffre se tient. */
.chibimatic-progres-orbite {
	position: absolute;
	inset: -9px;
	border-radius: 50%;
	animation: chibimatic-tourne 1.8s linear infinite;
}
.chibimatic-progres-orbite::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 8px;
	height: 8px;
	margin-left: -4px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.55;
}
/* Sans chiffre (travaux de moins d'une seconde) : un quart d'anneau qui tourne. */
.chibimatic-viewer:not( .a-progres ) .chibimatic-progres-valeur,
.chibimatic-viewer:not( .a-progres ) .chibimatic-progres-orbite {
	display: none;
}
.chibimatic-viewer:not( .a-progres ) .chibimatic-progres {
	width: 72px;
	height: 72px;
}
.chibimatic-viewer:not( .a-progres ) .chibimatic-progres-arc {
	stroke-dashoffset: 245 !important;
	transition: none;
}
.chibimatic-viewer:not( .a-progres ) .chibimatic-progres svg {
	animation: chibimatic-tourne-svg 1s linear infinite;
}
@keyframes chibimatic-tourne {
	to { transform: rotate( 360deg ); }
}
@keyframes chibimatic-tourne-svg {
	from { transform: rotate( -90deg ); }
	to   { transform: rotate( 270deg ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.chibimatic-progres-orbite { display: none; }
	.chibimatic-progres-arc { transition: none; }
	.chibimatic-viewer:not( .a-progres ) .chibimatic-progres svg { animation: none; }
}

.chibimatic-actions {
	margin-top: 1rem;
}

/*
 * CONTRASTE — 24/09/2026. Blanc sur #7c5cfc donnait 4,4:1, sous le seuil de
 * 4,5:1 exige pour un texte de cette taille. #6a49f0 donne 5,5:1 ; le survol
 * fonce d'autant.
 */
.chibimatic-bouton {
	position: relative;
	display: inline-block;
	padding: 0.75rem 1.25rem;
	border-radius: 6px;
	background: #6a49f0;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.chibimatic-bouton:hover {
	background: #5533dc;
}

/*
 * Le champ fichier est masque A L'OEIL SEULEMENT — 24/09/2026.
 *
 * Il portait l'attribut `hidden`, qui le retire aussi de l'ordre de
 * tabulation : au clavier, aucun moyen de choisir une photo. Masque ainsi, il
 * reste atteignable ; `:focus-within` allume alors le bouton qui le porte.
 */
.chibimatic-fichier {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.chibimatic-bouton:focus-within {
	outline: 3px solid #2b2b32;
	outline-offset: 2px;
}

.chibimatic-viewer.est-occupe .chibimatic-bouton {
	opacity: 0.5;
	pointer-events: none;
}

.chibimatic-message {
	margin: 0.75rem 0 0;
	font-size: 0.9rem;
	min-height: 1.25rem;
}

.chibimatic-message.est-erreur {
	color: #b3261e;
}

.chibimatic-message.est-succes {
	color: #1e7a4b;
}

/* ---------------------------------------------------------------------------
 * Bouton d'achat verrouille — 16/08/2026
 *
 * Le bouton porte deja `disabled`, ce qui suffit au navigateur et aux lecteurs
 * d'ecran. Ces regles servent l'oeil : sans elles, la plupart des themes
 * gardent un bouton pleinement colore que le client clique sans comprendre
 * pourquoi rien n'arrive.
 *
 * `!important` est ici volontaire et rare : les themes declarent la couleur du
 * bouton d'achat avec une specificite elevee, et la lever ligne a ligne
 * demanderait de connaitre chaque theme.
 * ------------------------------------------------------------------------ */

.single_add_to_cart_button.chibimatic-verrouille,
button.chibimatic-verrouille {
	opacity: 0.45 !important;
	cursor: not-allowed !important;
	filter: grayscale( 1 );
}

/*
 * La raison, posee JUSTE AU-DESSUS du bouton.
 *
 * Au-dessus et non en dessous : c'est la derniere chose lue avant le geste.
 * `role="status"` la fait annoncer aux lecteurs d'ecran sans voler le focus.
 */
.chibimatic-raison-achat {
	margin: 0 0 0.5rem;
	padding: 0.5rem 0.75rem;
	border-left: 3px solid #7c5cfc;
	background: #f5f2ff;
	color: #3d3550;
	font-size: 0.9rem;
	line-height: 1.4;
}

.chibimatic-raison-achat:empty,
.chibimatic-raison-achat[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Consentement au point de collecte — action 4.1, 26/09/2026
 *
 * Lisible sans effort : c'est un texte qu'on demande au client d'accepter, pas
 * une mention a cacher. La case reste au plus pres du bouton qu'elle ouvre.
 * ------------------------------------------------------------------------ */

.chibimatic-consentement {
	margin: 0 0 0.75rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid #dcd6f7;
	border-radius: 6px;
	background: #faf9ff;
	color: #2b2b32;
	font-size: 0.85rem;
	line-height: 1.45;
}

.chibimatic-notice p {
	margin: 0 0 0.5rem;
}

.chibimatic-case {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	margin-top: 0.25rem;
	font-weight: 600;
	cursor: pointer;
}

.chibimatic-case input {
	flex: 0 0 auto;
	margin-top: 0.2rem;
	width: 1.1rem;
	height: 1.1rem;
}

/* Bouton de photo tant que la case n'est pas cochee. */
.chibimatic-bouton.est-inactif {
	opacity: 0.5;
	cursor: not-allowed;
}

.chibimatic-bouton.est-inactif:hover {
	background: #6a49f0;
}

/* ---------------------------------------------------------------------------
 * Mes portraits — action 19.4 (26/09/2026), galerie complete le 27/09/2026
 * ------------------------------------------------------------------------ */

/*
 * « MES PORTRAITS » — 19.4, galerie complete le 27/09/2026.
 *
 * Tous les portraits de la session, celui de la fiche en tete. La vignette
 * entiere est le bouton. Les selecteurs portent `.chibimatic-viewer` : Astra
 * habille tout `button` (fond plein, texte blanc, marges), et une regle a une
 * seule classe perdait contre la sienne au survol.
 */
.chibimatic-reprise {
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid #e6e3f3;
}

.chibimatic-reprise-titre {
	margin: 0 0 0.25rem;
	font-size: 0.95rem;
	font-weight: 600;
}

.chibimatic-reprise-aide {
	margin: 0 0 0.6rem;
	font-size: 0.8rem;
	line-height: 1.35;
	color: #5b5870;
}

.chibimatic-reprise-liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chibimatic-portrait {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
	margin: 0;
}

.chibimatic-viewer .chibimatic-portrait-cadre {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 2px solid #e2def2;
	border-radius: 8px;
	background: #fff;
	color: #4a2fd0;
	font: inherit;
	line-height: 1.2;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
}

.chibimatic-viewer .chibimatic-portrait-cadre img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	margin: 0;
	border-radius: 0;
	background: #f4f4f6;
}

.chibimatic-portrait-etat,
.chibimatic-portrait-action {
	display: block;
	padding: 0.3rem 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
}

.chibimatic-portrait-etat {
	background: #6a49f0;
	color: #fff;
}

.chibimatic-portrait.est-affiche .chibimatic-portrait-cadre {
	border-color: #6a49f0;
}

.chibimatic-viewer button.chibimatic-portrait-cadre {
	cursor: pointer;
}

.chibimatic-viewer button.chibimatic-portrait-cadre:hover,
.chibimatic-viewer button.chibimatic-portrait-cadre:focus-visible {
	border-color: #6a49f0;
	background: #f5f2ff;
	color: #4a2fd0;
	outline: none;
}

.chibimatic-viewer button.chibimatic-portrait-cadre:focus-visible {
	box-shadow: 0 0 0 3px rgba(106, 73, 240, 0.35);
}

.chibimatic-viewer button.chibimatic-portrait-cadre:disabled {
	cursor: progress;
	opacity: 0.6;
}

.chibimatic-portrait-echeance {
	font-size: 0.7rem;
	line-height: 1.25;
	color: #6b6880;
	text-align: center;
}

.chibimatic-viewer.est-occupe .chibimatic-reprise {
	opacity: 0.6;
	pointer-events: none;
}

/*
 * SUPPRIMER, CONSERVER — 29/09/2026 (BE-74, BE-71).
 *
 * Des boutons-liens sous chaque vignette : discrets, mais de vrais boutons,
 * atteignables au clavier. Meme precaution que le cadre : `.chibimatic-viewer`
 * en tete, contre l'habillage des `button` par le theme.
 */
.chibimatic-portrait-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.15rem 0.5rem;
}

.chibimatic-viewer .chibimatic-portrait-bouton,
.chibimatic-viewer .chibimatic-conserver .chibimatic-lien {
	margin: 0;
	padding: 0.15rem 0.1rem;
	border: 0;
	background: none;
	color: #4a2fd0;
	font: inherit;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: underline;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
}

.chibimatic-viewer .chibimatic-portrait-bouton.est-danger {
	color: #b3261e;
}

.chibimatic-viewer .chibimatic-portrait-bouton:focus-visible,
.chibimatic-viewer .chibimatic-conserver .chibimatic-lien:focus-visible {
	outline: 2px solid #6a49f0;
	outline-offset: 2px;
}

.chibimatic-viewer .chibimatic-portrait-bouton:disabled {
	cursor: progress;
	opacity: 0.6;
}

.chibimatic-portrait.est-conserve .chibimatic-portrait-echeance {
	color: #2e6b3a;
	font-weight: 600;
}

/* Panneau de conservation : meme habit que le consentement a la photo. */
.chibimatic-conserver {
	margin-top: 0.75rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid #dcd6f7;
	border-radius: 6px;
	background: #faf9ff;
	color: #2b2b32;
	font-size: 0.85rem;
	line-height: 1.45;
}

.chibimatic-conserver-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
	margin: 0.6rem 0 0;
}

.chibimatic-viewer .chibimatic-conserver-valider {
	margin: 0;
	padding: 0.45rem 0.9rem;
	border: 0;
	border-radius: 6px;
	background: #6a49f0;
	color: #fff;
	font: inherit;
	font-weight: 600;
	text-transform: none;
	cursor: pointer;
}

.chibimatic-viewer .chibimatic-conserver-valider:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/*
 * PASTILLES DE COULEUR ET DE TAILLE — 29/09/2026.
 *
 * Voir `includes/Configurator/Pastilles.php`. La liste deroulante de
 * WooCommerce reste dans la page, cachee : c'est elle que lisent WooCommerce
 * et le configurateur. `!important` : les themes posent `display` sur les
 * listes des variations.
 */
.chibimatic-liste-native {
	display: none !important;
}

.chibimatic-pastilles {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0.25rem 0 0.5rem;
}

/* Le bouton radio reste atteignable au clavier : masque a l'oeil seulement. */
.chibimatic-pastille-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.chibimatic-pastille {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	cursor: pointer;
	user-select: none;
}

.chibimatic-pastille.est-couleur {
	width: 2.25rem;
	height: 2.25rem;
	padding: 3px;
	border: 2px solid transparent;
	border-radius: 50%;
}

/* Teinte absente du gabarit : des rayures, jamais une couleur inventee. */
.chibimatic-pastille.est-couleur .chibimatic-teinte {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var( --chibimatic-teinte, repeating-linear-gradient( 45deg, #d9d9df 0 4px, #ffffff 4px 8px ) );
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.18 );
}

/* Le nom reste lu par les lecteurs d'ecran ; a l'oeil, il s'affiche a cote. */
.chibimatic-pastille.est-couleur .chibimatic-pastille-nom {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.chibimatic-pastille.est-texte {
	min-width: 2.75rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border: 1px solid #c9c9d1;
	border-radius: 6px;
	background: #ffffff;
	color: #2b2b32;
	font-weight: 600;
	line-height: 1;
}

.chibimatic-pastille-radio:checked + .chibimatic-pastille.est-couleur {
	border-color: #2b2b32;
}

.chibimatic-pastille-radio:checked + .chibimatic-pastille.est-texte {
	border-color: #2b2b32;
	background: #2b2b32;
	color: #ffffff;
}

.chibimatic-pastille-radio:focus-visible + .chibimatic-pastille {
	outline: 2px solid #6a49f0;
	outline-offset: 2px;
}

.chibimatic-pastille-radio:disabled + .chibimatic-pastille {
	opacity: 0.35;
	cursor: not-allowed;
}

.chibimatic-pastille-radio:disabled + .chibimatic-pastille::after {
	content: "";
	position: absolute;
	left: 12%;
	right: 12%;
	top: 50%;
	border-top: 2px solid #2b2b32;
	transform: rotate( -45deg );
}

.chibimatic-pastilles-choisie {
	margin-left: 0.25rem;
	color: #4a4a55;
	font-size: 0.9rem;
}