/**
 * Styles des composants métier communs aux deux boutiques.
 *
 * Aucune couleur en dur : tout passe par les variables --sopo-* injectées
 * par SOPO_Marque, ce qui permet au même composant d'être teal chez TOSEYA
 * et bordeaux chez IDA'S.
 */

/* -------------------------------------------------- Boutons WhatsApp */

.sopo-btn-whatsapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	padding: .85em 1.6em;
	border: 1px solid #25d366;
	border-radius: 999px;
	background: #25d366;
	color: #fff;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}

.sopo-btn-whatsapp:hover,
.sopo-btn-whatsapp:focus {
	background: #1da851;
	border-color: #1da851;
	color: #fff;
}

.woocommerce div.product form.cart .sopo-btn-whatsapp {
	margin-top: .9rem;
	width: 100%;
}

.sopo-btn-whatsapp--panier {
	width: 100%;
	margin-top: .75rem;
}

.sopo-ico-wa {
	width: 1.25em;
	height: 1.25em;
	flex: 0 0 auto;
}

.sopo-wa-flottant {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
	transition: transform .2s ease;
}

.sopo-wa-flottant:hover {
	transform: scale(1.06);
	color: #fff;
}

.sopo-wa-flottant .sopo-ico-wa {
	width: 30px;
	height: 30px;
}

/* -------------------------------------------------- Bascule entre boutiques */

/* Le lien vit dans le bandeau du haut et dans le pied de page : jamais dans
   le parcours d'achat, pour ne pas détourner une cliente au moment de payer.
   Il hérite des couleurs de son conteneur, donc il reste lisible aussi bien
   sur le bandeau teal de TOSEYA que sur le bandeau bordeaux d'IDA'S. */

.sopo-bascule {
	display: inline-flex;
	align-items: baseline;
	gap: .45em;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	opacity: .85;
	transition: opacity .2s ease;
}

.sopo-bascule:hover,
.sopo-bascule:focus {
	color: inherit;
	opacity: 1;
}

.sopo-bascule__invitation {
	opacity: .72;
	font-weight: 300;
}

.sopo-bascule__nom {
	font-weight: 600;
	letter-spacing: .08em;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}

.sopo-bascule__fleche {
	display: inline-block;
	transition: transform .2s ease;
}

.sopo-bascule:hover .sopo-bascule__fleche {
	transform: translateX(3px);
}

.bandeau-annonce__interieur {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .5rem 1.6rem;
}

.bandeau-annonce__texte {
	flex: 0 1 auto;
}

/* Séparateur discret entre l'annonce et la bascule, sur une seule ligne. */
.bandeau-annonce__interieur .sopo-bascule {
	position: relative;
}

.bandeau-annonce__texte + .sopo-bascule::before {
	content: "";
	position: absolute;
	left: -.8rem;
	top: .15em;
	bottom: .15em;
	width: 1px;
	background: currentColor;
	opacity: .35;
}

.site-pied__reseau {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .3rem .8rem;
	margin: 0 0 .9rem !important;
	padding-bottom: .9rem;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.site-pied__reseau-titre {
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .6;
}

.sopo-bascule--pied {
	font-size: .92rem;
}

@media (max-width: 600px) {
	.bandeau-annonce__interieur {
		gap: .35rem;
	}

	.bandeau-annonce__texte + .sopo-bascule::before {
		content: none;
	}

	.sopo-bascule__invitation {
		display: none;
	}
}

/* -------------------------------------------------- Fiche produit */

.sopo-format {
	margin: .35rem 0 .75rem;
	font-size: .95rem;
	color: var(--sopo-encre, #333);
	opacity: .85;
}

.sopo-format__cle {
	font-weight: 600;
}

.sopo-cure {
	margin: 0 0 1rem;
	padding: .7rem .9rem;
	border-left: 3px solid var(--sopo-feuille, #7ba83c);
	background: var(--sopo-ivoire, #f7f4ee);
	font-size: .93rem;
	font-style: italic;
}

.sopo-reassurance {
	margin: 1.6rem 0 0;
	padding: 1.1rem 0 0;
	border-top: 1px solid rgba(0, 0, 0, .08);
	list-style: none;
	display: grid;
	gap: .85rem;
}

.sopo-reassurance__item {
	display: grid;
	grid-template-columns: 1.6rem 1fr;
	gap: .1rem .7rem;
	font-size: .9rem;
	line-height: 1.45;
}

.sopo-reassurance__item::before {
	grid-row: span 2;
	align-self: start;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--sopo-ivoire, #f7f4ee);
	color: var(--sopo-primaire, #5f8889);
	font-size: .9rem;
	line-height: 1.6rem;
	text-align: center;
}

.sopo-reassurance__item--livraison::before { content: "\2708"; }
.sopo-reassurance__item--paiement::before  { content: "\25CE"; }
.sopo-reassurance__item--conseil::before   { content: "\2665"; }

.sopo-reassurance__item strong {
	color: var(--sopo-encre, #23302f);
}

.sopo-reassurance__item span {
	opacity: .8;
}

/* -------------------------------------------------- Partage */

.sopo-partage {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	margin-top: 1.2rem;
	font-size: .88rem;
}

.sopo-partage__titre {
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .7;
}

.sopo-partage__lien,
.sopo-partage__copier {
	padding: .35em .9em;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-decoration: none;
}

.sopo-partage__lien:hover,
.sopo-partage__copier:hover {
	border-color: var(--sopo-primaire, #5f8889);
	color: var(--sopo-primaire, #5f8889);
}

/* -------------------------------------------------- Livraison & paiement */

.sopo-tableau-livraison {
	width: 100%;
	margin: 1rem 0 2rem;
	border-collapse: collapse;
	font-size: .95rem;
}

.sopo-tableau-livraison th,
.sopo-tableau-livraison td {
	padding: .8rem .9rem;
	border-bottom: 1px solid rgba(0, 0, 0, .09);
	text-align: left;
	vertical-align: top;
}

.sopo-tableau-livraison thead th {
	background: var(--sopo-ivoire, #f7f4ee);
	color: var(--sopo-profond, #10454e);
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.sopo-acompte,
.sopo-delais-panier {
	margin: 0 0 1.2rem;
	padding: .85rem 1rem;
	border-left: 3px solid var(--sopo-dore, #d4af37);
	background: var(--sopo-ivoire, #f7f4ee);
	font-size: .92rem;
}

.sopo-instructions-paiement {
	margin: 1.2rem 0;
	padding: 1rem 1.2rem;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 6px;
	background: var(--sopo-ivoire, #f7f4ee);
}

.sopo-instructions-paiement__numero {
	margin-top: 0;
	font-size: 1.05rem;
}

.sopo-encart-paiement {
	margin: 1.5rem 0;
	padding: 1.2rem;
	border-radius: 6px;
	background: var(--sopo-ivoire, #f7f4ee);
	text-align: center;
}

/* -------------------------------------------------- Suivi de commande */

.sopo-suivi {
	max-width: 560px;
}

.sopo-suivi__champ {
	display: grid;
	gap: .35rem;
	margin-bottom: 1rem;
}

.sopo-suivi__champ label {
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	opacity: .75;
}

.sopo-suivi__champ input {
	padding: .75em .9em;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: 4px;
	font-size: 1rem;
}

.sopo-suivi__erreur {
	padding: .8rem 1rem;
	border-left: 3px solid #c0392b;
	background: #fdf3f2;
}

.sopo-suivi__resultat {
	margin-top: 2rem;
	padding: 1.4rem;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 6px;
}

.sopo-suivi__statut {
	display: inline-block;
	padding: .3em .9em;
	border-radius: 999px;
	background: var(--sopo-ivoire, #f7f4ee);
	color: var(--sopo-profond, #10454e);
	font-weight: 600;
}

.sopo-suivi__statut--completed {
	background: #e8f5e9;
	color: #1b5e20;
}

.sopo-suivi__statut--cancelled,
.sopo-suivi__statut--failed {
	background: #fdecea;
	color: #b71c1c;
}

.sopo-suivi__articles {
	margin: 1rem 0;
	padding: 0;
	list-style: none;
}

.sopo-suivi__articles li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .45rem 0;
	border-bottom: 1px dashed rgba(0, 0, 0, .12);
}

.sopo-suivi__total {
	font-size: 1.1rem;
	font-weight: 600;
}

/* -------------------------------------------------- Mobile */

@media (max-width: 600px) {
	.sopo-tableau-livraison thead {
		display: none;
	}

	.sopo-tableau-livraison tr {
		display: block;
		margin-bottom: 1rem;
		border: 1px solid rgba(0, 0, 0, .1);
		border-radius: 6px;
		padding: .4rem .8rem;
	}

	.sopo-tableau-livraison td {
		display: block;
		border: 0;
		padding: .35rem 0;
	}

	.sopo-tableau-livraison td:first-child {
		font-weight: 600;
		color: var(--sopo-profond, #10454e);
	}

	.sopo-wa-flottant {
		right: 14px;
		bottom: 14px;
		width: 50px;
		height: 50px;
	}
}