/* ==========================================================================
   Bouton de partage flottant (article seul, single.php)

   Bulle ronde fixe en bas à droite. Au clic, elle se transforme en croix de
   fermeture et trois petites bulles (Copier, WhatsApp, LinkedIn) se déploient
   au-dessus en cascade. Le JS (share.js) ne fait que basculer la classe
   .is-open sur .rdc-share et l'attribut aria-expanded sur le bouton ; toute
   l'animation est pilotée ici en CSS.
   ========================================================================== */

.rdc-share {
	position: fixed;
	z-index: 500;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	right: calc(20px + env(safe-area-inset-right, 0px));
}

/* --------------------------------------------------------------------------
   Bouton principal (bascule ouvrir/fermer)
   -------------------------------------------------------------------------- */

.rdc-share-toggle {
	position: relative;
	width: 52px;
	height: 52px;
	border: none;
	border-radius: 50%;
	background: var(--color-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--shadow-hover);
	transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.rdc-share-toggle:hover { transform: scale(1.06); box-shadow: var(--shadow-pop); }
.rdc-share-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Icône « partager » / croix de fermeture : superposées, l'une s'efface
   pendant que l'autre apparaît selon aria-expanded. */
.rdc-share-toggle-icon {
	position: absolute;
	transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.rdc-share-toggle-icon-share { opacity: 1; transform: rotate(0deg) scale(1); }
.rdc-share-toggle-icon-close { opacity: 0; transform: rotate(-40deg) scale(0.7); }
.rdc-share-toggle[aria-expanded="true"] .rdc-share-toggle-icon-share { opacity: 0; transform: rotate(40deg) scale(0.7); }
.rdc-share-toggle[aria-expanded="true"] .rdc-share-toggle-icon-close { opacity: 1; transform: rotate(0deg) scale(1); }

/* --------------------------------------------------------------------------
   Panneau des bulles de partage : positionné en absolu au-dessus du bouton
   pour ne jamais pousser sa position (pas d'impact sur la mise en page même
   fermé, contrairement à une pile en flux normal).
   -------------------------------------------------------------------------- */

.rdc-share-panel {
	position: absolute;
	right: 0;
	bottom: calc(100% + 14px);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	pointer-events: none;
	/* Fermé : hors de l'ordre de tabulation (visibility retardée pour laisser
	   jouer le fondu de fermeture). */
	visibility: hidden;
	transition: visibility 0s linear 200ms;
}
.rdc-share.is-open .rdc-share-panel { pointer-events: auto; visibility: visible; transition-delay: 0s; }

.rdc-share-item {
	display: flex;
	align-items: center;
	gap: 10px;
	opacity: 0;
	transform: translateY(10px) scale(0.85);
	transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.rdc-share.is-open .rdc-share-item {
	opacity: 1;
	transform: translateY(0) scale(1);
}
/* Cascade : la bulle la plus proche du bouton (LinkedIn, dernière dans le
   balisage) se déploie en premier ; celle du haut (Copier) en dernier. */
.rdc-share.is-open .rdc-share-item:nth-child(3) { transition-delay: 0ms; }
.rdc-share.is-open .rdc-share-item:nth-child(2) { transition-delay: 70ms; }
.rdc-share.is-open .rdc-share-item:nth-child(1) { transition-delay: 140ms; }

.rdc-share-bubble {
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: #fff;
	color: var(--text-heading);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--shadow-hover);
	transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.rdc-share-bubble:hover,
.rdc-share-bubble:focus-visible {
	transform: scale(1.08);
	box-shadow: var(--shadow-pop);
}
.rdc-share-bubble:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Teintes de marque, discrètes sur fond blanc. */
.rdc-share-bubble-linkedin { color: #0a66c2; }
.rdc-share-bubble-whatsapp { color: #25d366; }
.rdc-share-bubble-copy { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   Étiquette de texte (survol/focus desktop) et confirmation « Lien copié »
   -------------------------------------------------------------------------- */

.rdc-share-tip {
	/* Placée avant la bulle dans le flux visuel (donc à gauche), sans changer
	   l'ordre du DOM : la bulle porte déjà son propre aria-label. */
	order: -1;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text-heading);
	background: var(--surface-card);
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-card);
	white-space: nowrap;
	opacity: 0;
	transform: translateX(6px);
	transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
	pointer-events: none;
}
.rdc-share-item:hover .rdc-share-tip,
.rdc-share-item:focus-within .rdc-share-tip {
	opacity: 1;
	transform: translateX(0);
}
/* Confirmation de copie : forcée visible ~2s (posée par share.js), quel que
   soit le survol, pour que le retour visuel fonctionne aussi au tactile. */
.rdc-share-item.is-copied .rdc-share-tip {
	opacity: 1;
	transform: translateX(0);
	color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Mouvement réduit : pas d'animation, juste l'état ouvert/fermé.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.rdc-share-toggle,
	.rdc-share-toggle-icon,
	.rdc-share-bubble,
	.rdc-share-item,
	.rdc-share-tip {
		transition: none !important;
	}
}

/* --------------------------------------------------------------------------
   Mobile : bulles légèrement plus resserrées, étiquettes masquées (le clic
   suffit, la confirmation de copie reste visible via .is-copied).
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.rdc-share {
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		right: calc(16px + env(safe-area-inset-right, 0px));
	}
	.rdc-share-tip { display: none; }
	.rdc-share-item.is-copied .rdc-share-tip { display: block; }
}