/*
 * Le configurateur sur la fiche produit.
 *
 * Ecrit pour ne dependre d'aucun theme : le plugin doit survivre au
 * remplacement d'OceanWP par le theme maison. Aucune regle ne cible un
 * selecteur exterieur, aucune ne suppose une variable de theme.
 *
 * AUCUN « rem » DANS CE FICHIER, ET C'EST DELIBERE. OceanWP pose
 * « html { font-size: 62.5% } », donc 1rem y vaut 10px et non 16 : tout le
 * configurateur sortait a la moitie de sa taille, pastilles comprises, sans
 * qu'aucune erreur ne le signale. Constate a la recette navigateur du
 * 08/08/2026, les pastilles mesuraient 24px au lieu de 38.
 * Les tailles de contact sont donc en PIXELS, et les espacements en « em »,
 * qui suit la taille de texte heritee et reste juste quel que soit le theme.
 */

.ap-conf {
	--ap-conf-trait: #ddd;
	--ap-conf-actif: #1a1a1a;
	--ap-conf-texte-doux: #666;
	margin: 24px 0;
}

/* --- Un bloc, c'est-a-dire une personne a broder ---------------------- */

.ap-conf__bloc + .ap-conf__bloc {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 2px solid var(--ap-conf-trait);
}

.ap-conf__personne {
	margin: 0 0 16px;
	font-size: 1.05em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ap-conf__champ {
	margin-bottom: 22px;
}

.ap-conf__label {
	display: block;
	margin-bottom: 7px;
	font-weight: 600;
}

/*
 * L'intitule a gauche, le choix en cours a droite, sur la meme ligne.
 * Demande de Thomas du 13/08/2026.
 *
 * « baseline » et non « center » : les deux textes n'ont pas la meme taille,
 * les caler sur leur ligne d'ecriture est ce qui les fait paraitre alignes.
 * Le choix ne se coupe pas et prend l'ellipse si l'espace manque : « bleu
 * azur » passant a la ligne decalerait tout l'intitule vers le haut.
 */
.ap-conf__label--avec-choix {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
}

.ap-conf__label-choix {
	overflow: hidden;
	flex-shrink: 1;
	min-width: 0;
	color: var(--ap-conf-texte-doux);
	font-size: 0.9em;
	font-weight: 400;
	text-align: right;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ap-conf__requis {
	color: #b02020;
	border: 0;
	text-decoration: none;
}

.ap-conf__aide {
	margin: 6px 0 0;
	font-size: 0.85em;
	color: var(--ap-conf-texte-doux);
}

.ap-conf__guide {
	display: inline-block;
	margin-top: 6px;
	font-size: 0.85em;
}

/*
 * Le guide des tailles deplie sous le selecteur, il n'ouvre plus d'onglet.
 * Demande de Thomas du 13/08/2026.
 *
 * L'image porte ses dimensions reelles en attribut : « height: auto » est donc
 * obligatoire, sinon elle s'ecrase des que la colonne descend sous sa largeur
 * native, sur telephone en particulier.
 */
.ap-conf__guide-panneau {
	/*
	 * « max-width » et « min-width: 0 » ne sont pas decoratifs : mesures a
	 * 390 px, ils sont ce qui empeche la page entiere de partir de travers.
	 * Un bloc qui contient une image de 692 px reclame 692 px, et la largeur
	 * minimale par defaut d'un element le lui accorde : la page sortait a
	 * 732 px pour un ecran de 386. C'est le meme piege que le tableau des
	 * delais du retour 27, sous une autre forme.
	 */
	max-width: 100%;
	min-width: 0;
	margin-top: 10px;
	padding: 10px;
	border: 1px solid var(--ap-conf-trait);
	border-radius: 4px;
	background: #fff;
}

.ap-conf__guide-panneau[hidden] {
	display: none;
}

.ap-conf__guide-panneau img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/*
 * SUR TELEPHONE, LE GUIDE NE SE REDUIT PAS, IL DEFILE.
 *
 * C'est un tableau de chiffres de 692 px de large : ramene a la largeur d'un
 * telephone, ses valeurs tombent sous 7 px de haut et ne se lisent plus. Un
 * guide des tailles illisible ne vaut pas mieux qu'un guide absent, il coute
 * juste un clic de plus. Il garde donc sa taille et le panneau defile
 * horizontalement, ce qui reste contenu DANS le panneau : la page, elle, ne
 * defile pas de travers.
 */
@media (max-width: 760px) {

	.ap-conf__guide-panneau {
		/*
		 * LE PLAFOND EST EN « vw », ET C'EST TOUT L'INTERET.
		 *
		 * Le « max-width: 100% » pose plus haut n'a rien empeche, mesure a
		 * l'appui : la page sortait encore a 732 px pour un ecran de 386. Un
		 * pourcentage se resout sur le parent, or c'est le parent lui-meme qui
		 * est en train d'etre dimensionne par son contenu ; il est donc ignore
		 * au moment ou l'element declare la largeur dont il a besoin, et
		 * l'element reclame les 692 px de l'image. Une unite absolue, elle, est
		 * prise en compte : le panneau ne demande plus que la largeur de
		 * l'ecran, et l'image defile a l'interieur.
		 *
		 * 52 px, ce sont les gouttieres mesurees a 390 px : colonne de 335 px
		 * dans un viewport de 386.
		 */
		max-width: calc(100vw - 52px);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.ap-conf__guide-panneau img {
		max-width: none;
		margin: 0;
	}
}

.ap-conf__taille,
.ap-conf__texte {
	width: 100%;
	max-width: 350px;
	padding: 9px 11px;
	border: 1px solid var(--ap-conf-trait);
	border-radius: 3px;
	font: inherit;
}

.ap-conf__texte {
	max-width: 100%;
	resize: vertical;
}

/* --- L'apercu de broderie --------------------------------------------- */

.ap-conf__apercu {
	margin: 0 0 22px;
}

.ap-conf__apercu-scene {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 190px;
	padding: 20px;
	border: 1px solid var(--ap-conf-trait);
	border-radius: 4px;
	background-color: #f2f0ed;
	background-size: cover;
	/* Centre franc : le fond est une vignette de tissu, uniforme d'un bord a
	   l'autre. Le decalage vers le haut n'avait de sens qu'avec la photo
	   produit, qui montrait le vetement entier sur fond blanc. */
	background-position: center;
	text-align: center;
	overflow: hidden;
}

/* Le texte brode. La taille suit le cadre plutot qu'une valeur fixe : un
   prenom court doit rester lisible, un texte long ne doit pas deborder. */
.ap-conf__apercu-broderie {
	max-width: 100%;
	font-size: clamp( 26px, 6vw, 44px );
	line-height: 1.25;
	word-break: break-word;
	/* Un liserе sombre decolle le fil clair d'un peignoir clair, sans quoi un
	   fil blanc sur un peignoir blanc devient invisible a l'ecran alors qu'il
	   se voit tres bien sur le tissu. */
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.35 );
}

.ap-conf__apercu-attente {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.85 );
	font-size: 0.85em;
	color: var(--ap-conf-texte-doux);
	white-space: nowrap;
}

.ap-conf__apercu-attente[hidden] {
	display: none;
}

/* L'encadre « apercu approximatif » qui vivait ici a ete retire le
   11/08/2026 : voir rafraichirApercu() dans configurateur.js. */

/* --- Les pastilles ---------------------------------------------------- */

.ap-conf__pastilles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ap-conf__pastille {
	position: relative;
	display: block;
	margin: 0;
	cursor: pointer;
	line-height: 0;
}

/* Le bouton radio reste focalisable au clavier, mais invisible :
   c'est la pastille qui le represente. */
.ap-conf__pastille input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
}

.ap-conf__pastille-fond {
	display: block;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--ap-conf-trait);
	background-size: cover;
	background-position: center;
	transition: box-shadow 0.12s ease;
}

/* Le nom reste dans le document pour les lecteurs d'ecran. */
.ap-conf__pastille-nom {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.ap-conf__pastille input:checked + .ap-conf__pastille-fond {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ap-conf-actif);
}

.ap-conf__pastille input:focus-visible + .ap-conf__pastille-fond {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2f5fc0;
}

/* Les polices sont des images d'ecriture, pas des teintes : un rectangle
   les rend lisibles la ou un rond les couperait. */
.ap-conf__pastilles--polices .ap-conf__pastille-fond {
	/* Agrandi le 10/08/2026 : l'ecriture ne se voyait pas assez. Le gain vient
	   surtout du recadrage des vignettes (assets/polices/), les images de la
	   mediatheque etant du blanc a 78 %. La boite suit, sinon le texte gagne en
	   taille mais reste a l'etroit. */
	width: 132px;
	height: 74px;
	border-radius: 3px;
	background-color: #fff;
	background-size: contain;
	background-repeat: no-repeat;
}

/* LE NOM DE L'ECRITURE, VISIBLE SOUS SA VIGNETTE.
   Demande de Thomas le 11/08/2026. La vignette montre « Votre prenom » ecrit
   dans la police : elle en donne l'allure, mais ne dit pas laquelle on
   choisit, et le nom se retrouve ensuite sur la commande et dans l'atelier.

   RIEN A AJOUTER DANS LE HTML : le nom y est deja, pose par
   afficher_pastille() pour les lecteurs d'ecran et masque par
   .ap-conf__pastille-nom. On ne fait que le montrer, et SEULEMENT ici : sur
   les trente couleurs et les dix-huit fils, trente noms sous les pastilles
   feraient exploser la grille.

   Premiere tentative, ecartee : ecrire le nom DANS l'image. Elle detruisait
   la seule vue de la vraie Amazone, dont le fichier n'a jamais ete retrouve. */
.ap-conf__pastilles--polices .ap-conf__pastille-nom {
	position: static;
	display: block;
	width: auto;
	max-width: 132px;
	height: auto;
	overflow: visible;
	clip: auto;
	margin-top: 6px;
	/* Le label porte « line-height: 0 » pour coller les vignettes : il faut le
	   rendre au texte, sinon la ligne se replie sur elle-meme. */
	line-height: 1.3;
	color: var(--ap-conf-texte-doux);
	font-size: 13px;
	text-align: center;
	white-space: normal;
}

/* L'ecriture retenue se lit sans avoir a repérer le cadre actif. */
.ap-conf__pastilles--polices input:checked ~ .ap-conf__pastille-nom {
	color: var(--ap-conf-actif);
	font-weight: 600;
}

/* Une couleur absente de la taille choisie est retiree, pas grisee :
   proposer un coloris impossible cree une deception au panier. */
.ap-conf__pastille--indisponible {
	display: none;
}

/* Tant qu'aucune taille n'est choisie, les coloris restent masques et
   le message d'attente explique pourquoi. */
.ap-conf__pastilles--couleurs.ap-conf__pastilles--en-attente {
	display: none;
}

.ap-conf__aide--attente {
	margin: 0;
}

.ap-conf__aide--attente[hidden] {
	display: none;
}

/* --- Le recapitulatif permanent et le prix ---------------------------- */

.ap-conf__recap {
	margin-top: 24px;
	padding: 14px 18px;
	background: #f7f6f4;
	border-radius: 4px;
}

.ap-conf__recap-liste {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9em;
}

.ap-conf__recap-liste li {
	margin: 0 0 3px;
}

.ap-conf__recap-liste li strong {
	font-weight: 600;
}

.ap-conf__recap-personne {
	margin-top: 10px;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.8em;
	letter-spacing: 0.04em;
	color: var(--ap-conf-texte-doux);
}

.ap-conf__prix {
	margin: 13px 0 0;
	font-size: 1.3em;
	font-weight: 700;
}

.ap-conf__prix-label {
	font-size: 0.85em;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ap-conf-texte-doux);
	margin-right: 6px;
}

/* Sur mobile, la pastille passe a 44px : c'est la cible de contact minimale
   sous laquelle le doigt rate une pastille sur deux dans une rangee de 30. */
@media (max-width: 480px) {
	.ap-conf__pastille-fond {
		width: 44px;
		height: 44px;
	}

	/* Les vignettes de police ne suivent PAS l'agrandissement mobile : a 132 px
	   elles sont deja une cible de contact confortable, et plus large ferait
	   tenir moins de deux vignettes par ligne sur un ecran de 375 px. */
	.ap-conf__pastilles--polices .ap-conf__pastille-fond {
		width: 132px;
		height: 74px;
	}
}