/* ==========================================================================
   Social Share Banner — mode « Bannière »
   ========================================================================== */

.ssb-banner-line {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding: 12px 16px;
	background-color: #f8f9fa;
}

.ssb-heading {
	margin: 0;
	white-space: nowrap;
	font-weight: 600;
	color: #333333;
}

.ssb-links {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

.ssb-item {
	display: inline-flex;
	min-width: 0;
}

/* Liens + bouton « Copier le lien ». Sélecteurs doublés (.ssb-links .ssb-link) pour
   passer devant les resets de thème `button` / `[type=button]` (ex. Hello Elementor),
   souvent chargés après ce fichier. */
.ssb-links .ssb-link,
.ssb-links .ssb-link:focus {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 8px 16px;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-decoration: none;
	white-space: nowrap;
	color: #0073aa;
	background-color: transparent;
	border: 1px solid #cccccc;
	border-radius: 50px;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ssb-links .ssb-link:hover {
	opacity: 1;
	color: #0073aa;
	background-color: transparent;
	text-decoration: none;
}

.ssb-links .ssb-link:focus-visible {
	outline: 3px solid #0073aa;
	outline-offset: 2px;
}

.ssb-link svg,
.ssb-link img {
	display: block;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	object-fit: contain;
	color: inherit;
	transition: color 0.2s ease;
}

/* Couleurs de marque (mode par défaut). */
.ssb-icons-brand .ssb-link[data-network="facebook"] svg { color: #1877f2; }
.ssb-icons-brand .ssb-link[data-network="x"] svg { color: #000000; }
.ssb-icons-brand .ssb-link[data-network="linkedin"] svg { color: #0a66c2; }
.ssb-icons-brand .ssb-link[data-network="whatsapp"] svg { color: #25d366; }
.ssb-icons-brand .ssb-link[data-network="telegram"] svg { color: #26a5e4; }
.ssb-icons-brand .ssb-link[data-network="reddit"] svg { color: #ff4500; }
.ssb-icons-brand .ssb-link[data-network="threads"] svg { color: #000000; }
.ssb-icons-brand .ssb-link[data-network="pinterest"] svg { color: #e60023; }
.ssb-icons-brand .ssb-link[data-network="email"] svg { color: #4a4a4a; }
.ssb-icons-brand .ssb-link[data-network="google"] svg { color: #4285f4; }

/* Icônes seules : libellé masqué visuellement, toujours lu par les lecteurs d'écran. */
.ssb-links--icons-only .ssb-link-label,
.ssb-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.ssb-links.ssb-links--icons-only .ssb-link {
	justify-content: center;
}

/* ==========================================================================
   Bouton « Copier le lien »
   ========================================================================== */

.ssb-copy {
	position: relative;
}

.ssb-copy-icon {
	display: inline-flex;
	flex-shrink: 0;
}

.ssb-copy .ssb-copy-icon--done,
.ssb-copy[data-ssb-state="copied"] .ssb-copy-icon--idle {
	display: none;
}

.ssb-copy[data-ssb-state="copied"] .ssb-copy-icon--done {
	display: inline-flex;
}

.ssb-links .ssb-copy[data-ssb-state="copied"] {
	color: #1e7e34;
	border-color: #1e7e34;
}

/* ==========================================================================
   Mode « Bouton + modale »
   ========================================================================== */

/* Le widget s'ajuste par défaut à la taille du bouton (Elementor le met à 100 %).
   Surchargeable via « Style du bouton > Largeur » ou Avancé > Largeur. */
.elementor-widget.ssb-display-modal {
	width: fit-content;
	max-width: 100%;
}

.ssb-modal-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Bouton déclencheur — mêmes valeurs par défaut que le bouton « Résumé IA » de la maquette. */
.ssb-modal-wrapper .ssb-trigger,
.ssb-modal-wrapper .ssb-trigger:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin: 0;
	padding: 5px 20px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -0.24px;
	white-space: nowrap;
	color: #004d43;
	background-color: transparent;
	border: 1px solid #004d43;
	border-radius: 4px;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ssb-modal-wrapper .ssb-trigger:hover,
.ssb-modal-wrapper .ssb-trigger:focus-visible {
	color: #ffffff;
	background-color: #004d43;
	border-color: #004d43;
	text-decoration: none;
}

.ssb-modal-wrapper .ssb-trigger:focus-visible {
	outline: 2px solid #004d43;
	outline-offset: 2px;
}

.ssb-trigger-icon {
	display: inline-flex;
	flex-shrink: 0;
	font-size: 12px;
	line-height: 1;
}

.ssb-trigger-icon svg {
	display: block;
	width: 12px;
	height: 12px;
	color: inherit;
	fill: currentColor;
}

/* Icônes choisies dans Elementor (SVG Font Awesome sans fill, ou SVG importé avec
   couleurs en dur) : on force la couleur courante pour qu'elles suivent les réglages. */
.ssb-trigger-icon svg *:not([fill="none"]) {
	fill: currentColor;
}

.ssb-trigger-icon svg [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}

.ssb-trigger-icon i {
	color: inherit;
}

/* Modale (<dialog> natif) */
.ssb-modal {
	--ssb-modal-width: 520px;
	width: min(var(--ssb-modal-width), calc(100vw - 32px));
	max-width: none;
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	overflow: auto;
	color: inherit;
	background-color: #ffffff;
	border: 0;
	border-radius: 8px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}

.ssb-modal::backdrop {
	background-color: rgba(0, 0, 0, 0.45);
}

.ssb-modal[open] {
	animation: ssb-modal-in 0.2s ease-out;
}

@keyframes ssb-modal-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ssb-modal[open] {
		animation: none;
	}
}

html:has(.ssb-modal:modal) {
	overflow: hidden;
}

.ssb-modal-inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
}

.ssb-modal-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.ssb-modal .ssb-modal-title {
	white-space: normal;
	font-size: 18px;
	line-height: 1.3;
}

/* Sélecteurs doublés : neutralise les styles de bouton des thèmes (bordure/couleur/fond au survol). */
.ssb-modal .ssb-modal-close,
.ssb-modal .ssb-modal-close:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: auto;
	margin: -4px -4px 0 auto; /* reste à droite même sans titre */
	padding: 4px;
	font-size: inherit;
	color: inherit;
	background-color: transparent;
	border: 0;
	border-radius: 4px;
	box-shadow: none;
	cursor: pointer;
	line-height: 1;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ssb-modal .ssb-modal-close:hover,
.ssb-modal .ssb-modal-close:focus-visible {
	color: inherit;
	background-color: rgba(0, 0, 0, 0.06);
}

.ssb-modal .ssb-modal-close:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.ssb-modal-close svg {
	display: block;
	width: 16px;
	height: 16px;
}

.ssb-modal-description {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	opacity: 0.8;
}

.ssb-modal .ssb-links {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.ssb-modal .ssb-item {
	display: block;
}

.ssb-modal .ssb-links .ssb-link {
	width: 100%;
	justify-content: flex-start;
	box-sizing: border-box;
}

.ssb-modal .ssb-links.ssb-links--icons-only .ssb-link {
	justify-content: center;
}

@media (max-width: 767px) {
	.ssb-modal .ssb-links {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Aperçu ouvert dans l'éditeur Elementor (option « Afficher la modale dans l'éditeur »). */
.ssb-modal.ssb-modal--preview {
	position: relative;
	inset: auto;
	display: block;
	margin: 12px 0 0;
	width: min(var(--ssb-modal-width), 100%);
}