/*
 * Onglet promo flottant, ancré au bord droit.
 *
 * Choix de conception :
 * - ancré au bord plutôt que posé dessus : il ne recouvre jamais le contenu,
 *   et laisse le bas de l'écran au bandeau cookies ;
 * - apparition par glissement depuis le bord, puis deux sautillements pour
 *   se signaler, et plus rien : une animation sans fin devient une nuisance ;
 * - tout est animé en transform, jamais en largeur ou en position, pour ne
 *   provoquer aucun recalcul de mise en page.
 */

.jdp-promotab {
	position: fixed;
	right: 0;
	/* Assez bas pour ne pas recouvrir le haut de fiche produit (note, avis,
	   compteur de visiteurs), assez haut pour rester vu sans defiler. */
	top: 52vh;
	z-index: 9000;                 /* sous le bandeau cookies (9999) */
	display: flex;
	align-items: flex-start;
	gap: 8px;
	max-width: 232px;
	padding: 13px 14px 13px 16px;
	background: var(--jdp-dark-alt, #0A0A0A);
	color: var(--jdp-white, #fff);
	border-radius: 14px 0 0 14px;
	box-shadow: 0 12px 34px rgba(17, 24, 39, .26), 0 2px 8px rgba(17, 24, 39, .12);
	font-size: 12.5px;
	line-height: 1.45;
	transform: translateX(105%);
	transition: transform .45s cubic-bezier(.22, 1, .32, 1);
}

/* Posé par le script une fois le délai écoulé. */
.jdp-promotab.est-visible {
	transform: translateX(0);
}

/* Le corps prend la place restante, le bouton de fermeture garde la sienne. */
.jdp-promotab-corps {
	flex: 1 1 auto;
	min-width: 0;
}

.jdp-promotab-lien {
	display: block;
	color: inherit;
	text-decoration: none;
}
.jdp-promotab-lien--inerte {
	cursor: default;
}

.jdp-promotab-titre {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-bottom: 3px;
}

.jdp-promotab-texte {
	display: block;
	color: #c3ccd6;                /* 7,4:1 sur le fond sombre */
}

/* Le code est un bouton : un appui le copie. */
.jdp-promotab-code {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 9px;
	padding: 4px 9px;
	border: 0;
	border-radius: 6px;
	background: var(--jdp-turquoise, #2baab1);
	color: #04222a;                /* 8,1:1 sur le turquoise */
	font-family: inherit;
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: .05em;
	cursor: pointer;
	position: relative;            /* ancre la zone tactile ci-dessous */
	transition: transform .16s cubic-bezier(.22, 1, .32, 1), background-color .2s ease-out;
}
.jdp-promotab-code:hover {
	background: #35bcc3;
}
/* L'appui répond tout de suite : le geste est confirmé avant même la copie. */
.jdp-promotab-code:active {
	transform: scale(.97);
}
.jdp-promotab-code:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
/* Cible tactile de 44px de haut, sans agrandir la pastille visible ni
   déborder sur le bouton de fermeture (extension verticale seulement). */
.jdp-promotab-code::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 44px;
	transform: translateY(-50%);
}

.jdp-promotab-code-icone,
.jdp-promotab-code-ok {
	flex: none;
	opacity: .72;
}
.jdp-promotab-code-ok {
	display: none;
	opacity: 1;
}

/* Copié : la coche remplace l'icône, le fond passe au vert le temps du retour. */
.jdp-promotab-code.est-copie {
	background: #7fe0a0;           /* 12,4:1 avec l'encre sombre */
}
.jdp-promotab-code.est-copie .jdp-promotab-code-icone {
	display: none;
}
.jdp-promotab-code.est-copie .jdp-promotab-code-ok {
	display: block;
}

/* Copie refusée par le navigateur : le code reste lisible, à recopier. */
.jdp-promotab-code.est-echec {
	background: #f2c14e;           /* 10,9:1 avec l'encre sombre */
}

/* Message pour les lecteurs d'écran : présent, jamais visible. */
.jdp-promotab-annonce {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.jdp-promotab-fermer {
	flex: none;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	cursor: pointer;
	position: relative;            /* ancre la zone tactile ci-dessous */
	opacity: .85;
	transition: opacity .2s ease-out, background-color .2s ease-out;
}
.jdp-promotab-fermer:hover {
	opacity: 1;
	background: rgba(255, 255, 255, .24);
}
.jdp-promotab-fermer:focus-visible {
	outline: 2px solid var(--jdp-turquoise, #2baab1);
	outline-offset: 2px;
	opacity: 1;
}
/* La cible tactile fait 44px sans agrandir le bouton visible. */
.jdp-promotab-fermer::after {
	content: "";
	position: absolute;
	width: 44px;
	height: 44px;
	transform: translate(-9px, -9px);
}

/* Sautillement d'appel : deux allers-retours, puis plus rien. */
@media (prefers-reduced-motion: no-preference) {
	.jdp-promotab--saut.est-visible {
		animation: jdp-promotab-saut 1.15s cubic-bezier(.28, .84, .42, 1) .55s 2;
	}
}
@keyframes jdp-promotab-saut {
	0%, 58%, 100% { transform: translateX(0); }
	68%           { transform: translateX(-11px); }
	78%           { transform: translateX(-4px); }
	88%           { transform: translateX(-7px); }
}

/* Mobile : format compact.
   Mesure avant correction : l'onglet occupait 49 a 53 % de la largeur sur un
   iPhone SE, ce qui masque le contenu au lieu de l'accompagner. On garde donc
   l'accroche et le code, et on laisse tomber la ligne de precision : le
   message reste lisible en un coup d'oeil, sur un tiers de l'ecran. */
@media (max-width: 700px) {
	.jdp-promotab {
		top: auto;
		bottom: 96px;              /* au-dessus du bandeau cookies */
		max-width: 148px;
		gap: 6px;
		font-size: 11.5px;
		padding: 10px 10px 10px 12px;
		border-radius: 12px 0 0 12px;
	}
	.jdp-promotab-texte {
		display: none;             /* la precision saute, l'essentiel reste */
	}
	.jdp-promotab-titre {
		font-size: 12.5px;
		margin-bottom: 0;
	}
	.jdp-promotab-code {
		margin-top: 6px;
		font-size: 11px;
		padding: 3px 8px;
		gap: 5px;
		/* Un code inhabituellement long revient à la ligne au lieu de déborder
		   de l'onglet : c'est la valeur du bouton qui est copiée, pas ce texte. */
		max-width: 100%;
		overflow-wrap: anywhere;
		text-align: left;
	}
	.jdp-promotab-fermer {
		width: 22px;
		height: 22px;
	}
}

/* Ecran tres court (mobile paysage) : on remonte pour ne pas coller au bord. */
@media (max-height: 460px) {
	.jdp-promotab {
		bottom: auto;
		top: 12px;
	}
}

/* Impression : aucun intérêt sur papier. */
@media print {
	.jdp-promotab { display: none !important; }
}