/**
 * Widget d'avis Trustindex.
 *
 * Le widget est injecté par un script tiers : son balisage et ses styles ne
 * sont pas sous notre contrôle. L'habillage ci-dessous est repris de la
 * maquette, `!important` compris — c'est le seul moyen de reprendre la main
 * sur les styles en ligne que le widget applique à ses propres éléments.
 *
 * Les sélecteurs restent portés par `body` pour la même raison.
 */

body [class*="ti-widget"],
body [class*="ti-widget"] *:not(svg):not(path) {
	font-family: var(--wp--preset--font-family--corps) !important;
	letter-spacing: 0 !important;
}

/* --------------------------------------------------------------------------
   1. Cartes d'avis
   -------------------------------------------------------------------------- */

body [class*="ti-widget"] .ti-review-item,
body [class*="ti-widget"] .ti-review-item .ti-inner,
body [class*="ti-widget"] .ti-review-item > div:first-child {
	background: var(--wp--preset--color--base) !important;
	background-image: none !important;
	border: 1px solid var(--wp--custom--bordure--bleue) !important;
	border-radius: 16px !important;
	box-shadow: none !important;
	color: #2b3742 !important;
}

/*
 * La bordure blanche de 9 px tient lieu de gouttière interne : le liseré
 * visible est l'ombre intérieure. Déclaré après la règle ci-dessus, qu'il
 * remplace volontairement pour la carte elle-même.
 */
body [class*="ti-widget"] .ti-review-item {
	box-sizing: border-box !important;
	border: 9px solid var(--wp--preset--color--base) !important;
	border-radius: 24px !important;
	box-shadow: inset 0 0 0 1px var(--wp--custom--bordure--bleue) !important;
	background: var(--wp--preset--color--base) !important;
}

body [class*="ti-widget"] .ti-review-text,
body [class*="ti-widget"] .ti-review-text-container,
body [class*="ti-widget"] .ti-review-content {
	color: #3a4450 !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
}

body [class*="ti-widget"] .ti-name,
body [class*="ti-widget"] .ti-profile-name {
	color: var(--wp--preset--color--contrast) !important;
	font-weight: 600 !important;
}

body [class*="ti-widget"] .ti-date,
body [class*="ti-widget"] .ti-tooltip {
	color: #6b7784 !important;
	background: transparent !important;
}

/* --------------------------------------------------------------------------
   2. Étoiles et liens
   -------------------------------------------------------------------------- */

body [class*="ti-widget"] .ti-star.f svg,
body [class*="ti-widget"] .ti-star.h svg,
body [class*="ti-widget"] .ti-stars svg path {
	fill: #f0a500 !important;
}

body [class*="ti-widget"] .ti-star.e svg path {
	fill: #d6e6f4 !important;
}

body [class*="ti-widget"] a,
body [class*="ti-widget"] .ti-read-more span {
	color: var(--wp--preset--color--primary-dark) !important;
}

/* --------------------------------------------------------------------------
   3. En-tête, pied et fonds du widget
   -------------------------------------------------------------------------- */

/*
 * Pas de `border-color` ici : la feuille du widget déclare un style de
 * bordure sans couleur ; lui en donner une la rend visible et ajoute 2,4 px
 * de chaque côté. La maquette laisse ces éléments sans bordure.
 */
body [class*="ti-widget"] .ti-header,
body [class*="ti-widget"] .ti-footer,
body [class*="ti-widget"] .ti-rating-text,
body [class*="ti-widget"] .ti-header-rating-reviews {
	background: transparent !important;
	color: #2b3742 !important;
}

body [class*="ti-widget"] .ti-footer,
body [class*="ti-widget"] .ti-verified-by-row,
body [class*="ti-widget"] .ti-verified-by {
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

/* Le widget se cale sur toute la largeur disponible, pas sur sa propre grille. */
body [class*="ti-widget"] .ti-widget-header,
body [class*="ti-widget"] .ti-widget-container,
body [class*="ti-widget"] .ti-reviews-container,
body [class*="ti-widget"] .ti-reviews-container-wrapper {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

body [class*="ti-widget"] .ti-header-write-btn {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
	border: 0 !important;
	border-radius: 999px !important;
}

body [class*="ti-widget"] .ti-header-write-btn:hover {
	background: var(--wp--preset--color--primary-dark) !important;
}

/* --------------------------------------------------------------------------
   4. Contrôles du carrousel
   -------------------------------------------------------------------------- */

body [class*="ti-widget"] .ti-controls .ti-next,
body [class*="ti-widget"] .ti-controls .ti-prev {
	background: var(--wp--preset--color--primary) !important;
	border-radius: 999px !important;
	color: var(--wp--preset--color--base) !important;
	box-shadow: none !important;
	opacity: 1 !important;
	border: 0 !important;
}

body [class*="ti-widget"] .ti-controls .ti-next:hover,
body [class*="ti-widget"] .ti-controls .ti-prev:hover {
	background: var(--wp--preset--color--primary-dark) !important;
}

body [class*="ti-widget"] .ti-controls .ti-next::before,
body [class*="ti-widget"] .ti-controls .ti-next::after,
body [class*="ti-widget"] .ti-controls .ti-prev::before,
body [class*="ti-widget"] .ti-controls .ti-prev::after {
	border-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--base) !important;
	opacity: 1 !important;
}

body [class*="ti-widget"] .ti-controls .ti-next svg,
body [class*="ti-widget"] .ti-controls .ti-prev svg {
	color: var(--wp--preset--color--base) !important;
}

body [class*="ti-widget"] .ti-controls .ti-next svg path,
body [class*="ti-widget"] .ti-controls .ti-prev svg path {
	fill: var(--wp--preset--color--base) !important;
	stroke: var(--wp--preset--color--base) !important;
}

body [class*="ti-widget"] .ti-controls-line {
	background: #d6e6f4 !important;
}

body [class*="ti-widget"] .ti-controls-line .dot {
	background: var(--wp--preset--color--primary) !important;
}