/**
 * Touchy Idea – Retour en stock : le bloc « Préviens-moi quand il revient ».
 * Charte du site (carte blanche bord #EFECE3 r24, bouton pilule cerise, prune
 * pour le texte), case à cocher identique au jeu d'Halloween en version
 * claire. Aucun blob. Survols all 300ms ease.
 */

.tirs {
	--tirs-plum-700: #4A2F70;
	--tirs-plum-600: #66448F;
	--tirs-plum-500: #8662B0;
	--tirs-plum-400: #A684CC;
	--tirs-plum-300: #C897EA;
	--tirs-plum-100: #EEDDF8;
	--tirs-plum-50: #F7EEFC;
	--tirs-cherry-700: #C84372;
	--tirs-cherry-500: #FF6FA5;
	--tirs-cherry-200: #FFD3E2;
	--tirs-mint-600: #6BC9A6;
	--tirs-mint-300: #CFEEE2;
	--tirs-mauve: #6B5B82;
	--tirs-bord: #EFECE3;
	--tirs-sable: #DDD7C8;
	--tirs-ink: #2D1B47;

	box-sizing: border-box;
	width: 100%;
	max-width: 560px;
	margin: 14px 0 6px;
	padding: 20px;
	border: 1px solid var(--tirs-bord);
	border-radius: 24px;
	background: #FFFFFF;
	color: var(--tirs-plum-700);
	font-family: inherit;
	text-align: left;
}

.tirs[hidden],
.tirs [hidden] {
	display: none !important;
}

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

.tirs-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
}

.tirs-ico {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
}

/* En-tête : pastille ronde + titre */

.tirs-tete {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 14px;
	align-items: start;
}

.tirs-pastille {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tirs-cherry-200);
	color: var(--tirs-cherry-700);
	font-size: 20px;
}

.tirs.is-done .tirs-pastille {
	background: var(--tirs-mint-300);
	color: #2F7D61;
}

.tirs-tete__texte {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 2px;
}

.tirs .tirs-titre {
	display: block;
	margin: 0;
	padding: 0;
	color: var(--tirs-plum-700);
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	cursor: pointer;
}

.tirs p.tirs-texte {
	margin: 0;
	padding: 0;
	color: var(--tirs-mauve);
	font-size: 15px;
	line-height: 1.5;
}

/* Champ + bouton */

.tirs-corps {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tirs-ligne {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Règle « Form fields » de la charte (comme le tunnel de commande et la
   fenêtre de connexion) : bord 1,5 px brume 200, coins 14 px, focus prune 500
   + halo cerise. */
/* Le champ prend presque toute la place libre (999) ; renvoyé à la ligne,
   le bouton est seul sur la sienne et s'étire sur toute la largeur. */
.tirs .tirs-champ {
	flex: 999 1 220px;
	min-width: 0;
	height: 48px;
	margin: 0;
	padding: 0 16px;
	border: 1.5px solid var(--tirs-sable);
	border-radius: 14px;
	background: #FFFFFF;
	box-shadow: none;
	color: var(--tirs-ink);
	font-family: inherit;
	font-size: 16px; /* 16 px : iOS ne zoome pas au focus. */
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: all 300ms ease;
}

.tirs .tirs-champ::placeholder {
	color: #A99CB7;
	opacity: 1;
}

.tirs .tirs-champ:focus {
	border-color: var(--tirs-plum-500);
	outline: none;
	box-shadow: 0 0 0 4px rgba(255, 111, 165, 0.32);
}

.tirs.is-error .tirs-champ[aria-invalid="true"] {
	border-color: var(--tirs-cherry-500);
	background: #FFF0F5;
}

.tirs .tirs-bouton {
	position: relative;
	display: inline-flex;
	flex: 1 0 auto;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	margin: 0;
	padding: 0 22px;
	border: none;
	border-radius: 999px;
	background: var(--tirs-cherry-500);
	color: #FFFFFF;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: all 300ms ease;
}

.tirs .tirs-bouton:hover {
	background: var(--tirs-cherry-500);
	color: #FFFFFF;
	box-shadow: 0 8px 20px rgba(255, 111, 165, 0.35);
	transform: translateY(-2px);
}

.tirs .tirs-bouton:active {
	transform: scale(0.97);
}

.tirs .tirs-bouton:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(255, 111, 165, 0.32);
}

.tirs .tirs-bouton::after {
	display: none;
}

.tirs-bouton .tirs-ico--loader {
	display: none;
}

.tirs.is-busy .tirs-bouton {
	cursor: progress;
	opacity: 0.85;
}

.tirs.is-busy .tirs-bouton .tirs-ico--arrow-right {
	display: none;
}

.tirs.is-busy .tirs-bouton .tirs-ico--loader {
	display: block;
	animation: tirs-tourne 0.8s linear infinite;
}

@keyframes tirs-tourne {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 480px) {
	.tirs {
		padding: 18px 16px;
	}
}

/* Champ piège pour les robots */

.tirs .tirs-piege {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* Case newsletter (comme le jeu d'Halloween, en clair) */

.tirs .tirs-optin {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

.tirs-optin input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.tirs-optin__case {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 2px solid var(--tirs-plum-300);
	border-radius: 9px;
	background: #FFFFFF;
	color: #FFFFFF;
	font-size: 16px;
	transition: all 300ms ease;
}

.tirs-optin__case .tirs-ico {
	stroke-width: 3;
	opacity: 0;
	transform: scale(0.4);
	transition: all 300ms ease;
}

.tirs-optin:hover .tirs-optin__case {
	border-color: var(--tirs-plum-500);
}

.tirs-optin input:checked + .tirs-optin__case {
	border-color: var(--tirs-cherry-500);
	background: var(--tirs-cherry-500);
}

.tirs-optin input:checked + .tirs-optin__case .tirs-ico {
	opacity: 1;
	transform: scale(1);
}

.tirs-optin input:focus-visible + .tirs-optin__case {
	box-shadow: 0 0 0 4px var(--tirs-cherry-200);
}

.tirs-optin:active .tirs-optin__case {
	transform: scale(0.9);
}

.tirs-optin__texte {
	padding-top: 3px;
	color: var(--tirs-plum-700);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
}

.tirs-badge {
	display: inline-block;
	margin-left: 2px;
	padding: 1px 9px;
	border-radius: 999px;
	background: var(--tirs-cherry-500);
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.5;
	white-space: nowrap;
	vertical-align: 1px;
}

.tirs p.tirs-mention {
	margin: 0;
	padding: 0 0 0 40px;
	color: var(--tirs-mauve);
	font-size: 13px;
	line-height: 1.5;
	text-wrap: pretty;
}

/* Message (merci / erreur). Un <div> : Divi retire le padding bas du
   dernier <p> d'un bloc (p:not(.has-background):last-of-type). */

.tirs .tirs-message {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 12px 16px;
	border-radius: 16px;
	background: var(--tirs-mint-300);
	color: #1F5E48;
	font-size: 15px;
	line-height: 1.45;
}

.tirs-message__ico {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--tirs-mint-600);
	color: #FFFFFF;
	font-size: 13px;
}

.tirs-message__ico .tirs-ico {
	stroke-width: 3;
}

.tirs-message__textes {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.tirs-message__principal {
	font-weight: 700;
}

.tirs-message__complement {
	font-size: 14px;
	font-weight: 500;
}

.tirs .tirs-message.is-error {
	background: #FFF0F5;
	color: var(--tirs-cherry-700);
}

.tirs .tirs-message.is-error .tirs-message__principal {
	font-weight: 600;
}

.tirs .tirs-autre {
	align-self: flex-start;
	margin: -4px 0 0;
	padding: 0;
	border: none;
	background: none;
	color: var(--tirs-plum-600);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: all 300ms ease;
}

.tirs .tirs-autre:hover {
	color: var(--tirs-cherry-700);
}

/* ==================================================================
   Client connecté : la pilule, jumelle de « Ajoute à ta Wishlist »
   à l'identique (bord 1,5 px brume 200, sans halo, 14/700 ; prune 600 +
   crème une fois activée).
   ================================================================== */

.tirs.tirs--compte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	max-width: none;
	margin: 14px 0 6px;
	padding: 0;
	border: none;
	border-radius: 0;
	background: none;
}

.tirs .tirs-pilule {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 11px 20px 11px 16px;
	border: 1.5px solid var(--tirs-sable);
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: none;
	color: var(--tirs-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: all 300ms ease;
}

.tirs .tirs-pilule::before,
.tirs .tirs-pilule::after {
	content: none;
}

.tirs .tirs-pilule:hover {
	border-color: var(--tirs-plum-400, #A684CC);
	background: var(--tirs-plum-50);
	color: var(--tirs-ink);
}

.tirs .tirs-pilule:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(255, 111, 165, 0.32);
}

.tirs .tirs-pilule.is-on,
.tirs .tirs-pilule.is-on:hover {
	border-color: var(--tirs-plum-600);
	background: var(--tirs-plum-600);
	box-shadow: none;
	color: #F8F7F1;
}

.tirs-pilule .tirs-ico {
	color: var(--tirs-plum-600);
	font-size: 18px;
	transition: all 300ms ease;
}

.tirs-pilule.is-on .tirs-ico {
	color: #F8F7F1;
}

.tirs-pilule__off,
.tirs-pilule__on {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.tirs-pilule__on,
.tirs-pilule.is-on .tirs-pilule__off {
	display: none;
}

.tirs-pilule.is-on .tirs-pilule__on {
	display: inline-flex;
}

.tirs-pilule .tirs-ico--loader {
	display: none;
}

.tirs-pilule.is-busy {
	cursor: progress;
	opacity: 0.85;
}

.tirs-pilule.is-busy .tirs-pilule__off .tirs-ico,
.tirs-pilule.is-busy .tirs-pilule__on .tirs-ico {
	display: none;
}

.tirs-pilule.is-busy .tirs-ico--loader {
	position: absolute;
	left: 16px;
	display: block;
	animation: tirs-tourne 0.8s linear infinite;
}

.tirs-pilule.is-busy .tirs-pilule__off,
.tirs-pilule.is-busy .tirs-pilule__on {
	padding-left: 26px;
}

.tirs .tirs-retour {
	margin: 0;
	padding: 0;
	color: var(--tirs-mauve);
	font-size: 14px;
	line-height: 1.55;
}

.tirs .tirs-retour.is-error {
	color: var(--tirs-cherry-700);
	font-weight: 600;
}

.tirs-mail {
	color: var(--tirs-plum-700);
	font-weight: 700;
	word-break: break-all;
}

/* Rangée commune avec la pilule Wishlist (posée par le script) : les deux
   pilules côte à côte, la phrase d'état en dessous. */

.tirs-duo {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 14px 0 6px;
}

.tirs-duo > .tirs.tirs--compte {
	display: contents;
}

.tirs-duo > .tirs--compte .tirs-pilule {
	order: 1;
}

.tirs-duo > .ti-wishlist-form {
	order: 2;
	margin: 0 !important;
}

.tirs-duo > .tirs--compte .tirs-retour {
	order: 3;
	flex: 1 0 100%;
}

@media (prefers-reduced-motion: reduce) {
	.tirs *,
	.tirs *::before,
	.tirs *::after {
		transition: none !important;
		animation: none !important;
	}
}