/* ==========================================================================
   SDE : restylage du widget d'avis Google

   Extension « Widgets for Google Reviews » de Trustindex, slug
   `wp-reviews-plugin-for-google`, déjà en place sur la production. Le client
   a choisi de la garder plutôt que des cartes figées : elle suit les nouveaux
   avis et porte la mention de vérification.

   Écrit contre le balisage et la feuille réels, capturés dans
   dev/reference-trustindex/ et rendus par le banc dev/banc-trustindex/, qui
   charge le vrai chargeur de l'extension depuis son CDN.

   Principe, le même que pour sivtc : on ne touche pas à la mise en page. Le
   nombre de colonnes, le défilement et les paliers responsifs sont calculés
   par le chargeur, on ne change que l'habillage.

   Le widget doit être dans un conteneur portant la classe « sde-avis », ce
   que fait le gabarit de l'accueil.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Typographie : l'extension impose sa Poppins à tout le widget.
   -------------------------------------------------------------------------- */
.sde-avis .ti-widget,
.sde-avis .ti-widget * {
	font-family: var(--sde-font-ui, "Inter", sans-serif) !important;
}

/* --------------------------------------------------------------------------
   La carte d'un avis
   L'extension la pose en gris `#f4f4f4`. Notre bande de section est en
   `#f2f2f2` : les deux se confondraient. On la passe en blanc, avec le filet
   et le rayon des autres cartes du site.

   Spécificité : sa feuille est injectée par le chargeur, donc APRÈS la nôtre.
   À spécificité égale et avec !important des deux côtés, c'est l'ordre qui
   tranche, et il lui donne raison. Son sélecteur est
   `.ti-widget.ti-goog .ti-review-item>.ti-inner`, soit quatre classes : le
   nôtre en compte cinq. Constaté au banc, une première version à quatre
   classes se faisait battre sans qu'on le voie.
   -------------------------------------------------------------------------- */
.sde-avis .ti-widget.ti-goog .ti-review-item > .ti-inner {
	background-color: #fff !important;
	border: 1px solid rgba(0, 0, 0, 0.12) !important;
	border-radius: var(--sde-radius-card, 15px) !important;
	padding: 24px !important;
}

.sde-avis .ti-widget .ti-name {
	font-family: var(--sde-font, "Figtree", sans-serif) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	letter-spacing: -0.02em;
	color: var(--sde-ink, #000) !important;
}

.sde-avis .ti-widget .ti-date {
	font-size: 13px !important;
	color: var(--sde-muted, #696969) !important;
}

.sde-avis .ti-widget .ti-review-text-container,
.sde-avis .ti-widget .ti-review-content {
	font-size: 14px !important;
	line-height: 1.7 !important;
	color: var(--sde-body, #333) !important;
}

/* Le lien « Lire la suite » prend le bleu de marque. */
.sde-avis .ti-widget .ti-read-more {
	color: var(--sde-brand, #002fa7) !important;
	font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   Flèches du carrousel
   L'extension les pose en petits chevrons nus. On en fait des pastilles
   rondes, dans l'esprit des boutons du site.

   On ne touche pas à leur taille : le chargeur la pose en style en ligne, ce
   qui bat une règle de feuille sans !important. La forcer demanderait un
   !important pour un gain nul, et contredirait le principe de ne pas
   reprendre la mise en page à l'extension.
   -------------------------------------------------------------------------- */
.sde-avis .ti-widget .ti-controls .ti-next,
.sde-avis .ti-widget .ti-controls .ti-prev {
	border-radius: 50%;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
	transition:
		background-color 0.3s var(--sde-ease, ease),
		border-color 0.3s var(--sde-ease, ease);
}

.sde-avis .ti-widget .ti-controls .ti-next:hover,
.sde-avis .ti-widget .ti-controls .ti-prev:hover {
	background-color: var(--sde-surface, #f2f2f2);
	border-color: rgba(0, 0, 0, 0.2);
}

/* --------------------------------------------------------------------------
   Colonnes : rien à faire, et c'est vérifié

   Le nombre de colonnes est porté par une classe `ti-col-N` que le chargeur
   pose en JavaScript ; aucune requête de média de l'extension ne la rattrape.
   J'avais d'abord cru qu'il ne s'adaptait pas, et posé une règle de secours
   forçant une colonne sous 575 px. C'était faux, et l'erreur venait de mon
   banc : `docker cp` avait imbriqué le dossier au lieu de le remplacer, si
   bien que la page servie n'était pas celle qui charge le vrai chargeur.

   Une fois le banc corrigé, mesure sans appel : `ti-col-3` à 1 200 px,
   `ti-col-1` à 390 px. Le chargeur fait son travail. La règle de secours a
   donc été retirée : elle n'aurait fait que masquer le comportement réel.
   -------------------------------------------------------------------------- */