/*
 * Style associé à l'override reviews-grid.php (CusRev)
 * À charger via functions.php du thème enfant (voir instructions).
 */

.rmr-bloc {
	max-width: 1260px;
	margin: 0 auto !important;
	padding: 1rem;
	display: block !important;
}

@media (min-width: 768px) {
	.rmr-bloc {
		padding: 3.125rem;
	}
}

/* Le carrousel du slider partage la classe .rmr-bloc (pour le display:flex)
   avec l'onglet natif, mais ne doit pas hériter de son padding. */
.rmr-bloc.rmr-carousel {
	padding: 0 !important;
}

/* ---------- En-tête : titre + note moyenne + histogramme ---------- */

.rmr-bloc-header {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 1.25rem !important;
	/* text-align: center; */
}

.rmr-bloc-title {
	font-size: 1.125rem;
	font-weight: 700;
	display: block;
	margin-bottom: 0.5rem;
}

.rmr-bloc-rating-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.rmr-bloc-stars-big {
	display: flex;
	gap: 2px;
}

.rmr-bloc-rating-number {
	font-size: 1rem;
	font-weight: 600;
}

.rmr-bloc-based-on {
	font-size: 1rem;
	margin: 0.25rem 0 0;
	text-align: left;
}

.rmr-bloc-based-on-count {
	font-weight: 700;
}

.rmr-bloc-histogram {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 260px;
}

.rmr-histogram-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.rmr-histogram-stars {
	display: flex;
	gap: 2px;
}

.rmr-histogram-bar-track {
	flex: 1;
	height: 12px;
	width: 126px;
	background-color: #f2f2f2;
	border-radius: 999px;
	overflow: hidden;
}

.rmr-histogram-bar-fill {
	height: 100%;
	border-radius: 999px;
}

.rmr-histogram-count {
	width: 24px;
	text-align: right;
	color: #999999;
	font-size: 0.85rem;
	font-variant-numeric: tabular-nums;
}

.rmr-login-msg {
	font-size: 0.875rem;
	color: #6b6b6b;
	margin-top: 1rem;
}

.rmr-login-msg a {
	color: var(--color-brand-custom, #0E252C);
	font-weight: 600;
	text-decoration: underline;
}

.rmr-add-review-wrap {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
}

.rmr-add-review-btn {
	background: none;
	border: none;
	color: var(--color-brand-custom, #0E252C);
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	font-size: 0.875rem;
	padding: 0;
}

.cr-review-form-wrap {
	margin-top: 1.5rem;
}

/* Contexte "grille" (shortcode grid / page Reviews) : le natif ajoute lui-
   même la classe cr-reviews-grid-new-review sur l'ancêtre .cr-reviews-grid
   au clic sur "Add review", et la retire à la fermeture (icône, annuler,
   ou après soumission réussie) — on réagit uniquement à cette classe,
   aucun JS à nous n'est nécessaire pour ouvrir/fermer le formulaire. */
.cr-reviews-grid:not(.cr-reviews-grid-new-review) .cr-review-form-wrap {
	display: none !important;
}

/* Contexte "onglet Avis natif" (fiche produit) : le natif affiche/masque
   directement l'ancêtre .cr-ajax-reviews-review-form via jQuery show()/
   hide() — le formulaire suit automatiquement la visibilité de son
   ancêtre natif, sans règle CSS supplémentaire nécessaire ici. */

.rmr-form-star {
	cursor: pointer;
	transition: color 0.1s ease;
	margin-right: 2px;
}

/* ---------- Tri ---------- */

.rmr-sort-form {
	display: flex;
	justify-content: flex-end;
	margin-top: 1.25rem;
}

.rmr-sort-select {
	appearance: none;
	background: #ffffff;
	border: none;
	border-radius: 8px;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
	padding: 0.75rem 1.5rem;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
}

/* ---------- Grille de cartes ---------- */

.rmr-tab-content {
	margin-top: 1.5rem;
}

.rmr-grid {
	display: grid !important;
	grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
	gap: 2.5rem !important;
	align-items: start !important;
	list-style: none !important;
	margin: 1.5rem 0 0 !important;
	padding: 0 !important;
}

@media (min-width: 48rem) {
	.rmr-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (min-width: 64rem) {
	.rmr-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

/* la commentlist native de WordPress ajoute des styles de liste par défaut */
ol.commentlist.rmr-grid li.rmr-review-card {
	list-style: none;
	margin: 0;
}

.rmr-review-card.rmr-review-card-hidden {
	display: none !important;
}

.rmr-review-card {
	display: flex !important;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
	height: 100%;
}

/* wrapper technique (id="comment-X") introduit par WordPress/CusRev dans
   l'onglet natif : ne doit pas casser le flex+gap du <li> parent. */
.rmr-review-card-inner {
	display: contents;
}

.rmr-review-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.rmr-review-card-stars {
	display: flex;
	gap: 2px;
}

.rmr-star {
	flex: 0 0 1rem;
}

.product_list_widget .rmr-star {
	flex: 0 0 14px;
}

.rmr-bloc-stars-big .rmr-star {
	flex:  0 0 22px;
}

.rmr-review-card-date {
	font-size: 0.75rem;
	color: #8f8e8e;
	white-space: nowrap;
}

.rmr-review-card-title {
	font-size: 1rem;
	line-height: 26px;
	font-weight: 600;
}

.rmr-review-card-content {
	font-size: 14px;
	line-height: 1.5;
	color: #333333;
	margin: 0;
}

.rmr-review-card-content p {
	margin: 0;
}

.rmr-review-card-author {
	font-size: 0.875rem;
	line-height: 22px;
	color: #8f8e8e;
	margin: 0;
}

/* ---------- Badge de note au-dessus du H1 produit ---------- */

.rmr-badge {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.5rem 0;
}

/* Le curseur "cliquable" ne concerne que le badge de la fiche produit
   (au-dessus du H1) — pas celui des archives ni des widgets sidebar,
   qui n'ont ni lien ni section d'avis vers laquelle défiler. */
.woocommerce-product-rating.rmr-badge {
	cursor: pointer;
}

.rmr-badge-stars {
	display: flex;
	gap: 2px;
}

.rmr-badge-count {
	font-size: 0.75rem;
	font-weight: 600;
	color: #111111;
	white-space: nowrap;
}

/* ---------- Bouton "Voir plus d'avis" ---------- */

.rmr-show-more {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
}

.rmr-page-reviews .rmr-show-more {
	margin-top: 0;
}

.rmr-btn {
	background-color: var(--color-brand-custom, #0E252C);
	color: #ffffff;
	border: none;
	border-radius: 8px;
	padding: 0.75rem 1.75rem;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.rmr-btn:hover {
	opacity: 0.85;
}

/* ==================== Page "Reviews" dédiée (reviews-grid-page.php) ==================== */

/* Pas de padding ni de bordure hérités de .rmr-bloc / .cr-reviews-grid
   (bordure : neutralise le style inline posé par le shortcode via
   color_ex_brdr, d'où le !important nécessaire pour l'emporter). */
.cr-reviews-grid.rmr-bloc.rmr-page-reviews {
	padding: 3.125rem 0 !important;
	border: none !important;
}

/* Le wrapper technique de chaque carte doit être transparent au flex+gap
   du parent .rmr-review-card (même piège que cr-review.php) — voir la
   règle combinée .cr-review-card-content.rmr-page-review-card-inner plus
   bas, qui gère aussi le display pour l'emporter sur le CSS natif. */

/* En-tête 3 colonnes : note à gauche, histogramme au centre, bouton à
   droite. Différent du .rmr-bloc-header générique (centré, empilé) utilisé
   ailleurs — d'où un sélecteur dédié, plus spécifique, pour l'emporter. */
.rmr-bloc-header.rmr-page-header {
	flex-direction: column !important;
	align-items: center !important;
	margin-bottom: 3.125rem;
}

@media (min-width: 768px) {
	.rmr-bloc-header.rmr-page-header {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 2rem !important;
	}

	/* La colonne prend 1/3 de la largeur (flex:1) et centre en son sein
	   le container intermédiaire (.rmr-page-header-left-inner). */
	.rmr-page-header .rmr-bloc-header-left {
		flex: 1 1 0;
		display: flex;
		justify-content: center;
	}

	/* Ce container intermédiaire prend la largeur de son sous-élément le
	   plus large (width: fit-content via inline-flex), et ses 3 enfants
	   (titre, étoiles+note, "Based on...") sont alignés à gauche entre eux. */
	.rmr-page-header-left-inner {
		display: inline-flex;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.rmr-page-header .rmr-bloc-histogram {
		flex: 1 1 0;
	}

	.rmr-page-add-review-wrap {
		flex: 1 1 0;
		display: flex;
		justify-content: flex-end;
	}
}

.rmr-page-add-review-wrap {
	margin-top: 1rem;
	display: flex;
	justify-content: center;
}

/* Reprend le style natif de #reviews.cr-reviews-ajax-reviews
   .cr-ajax-reviews-add-review (bouton "Add a review" de l'onglet natif
   sur la fiche produit) — la classe .rmr-add-review-btn est aussi utilisée
   ailleurs (fiche produit, en lien souligné) : ce sélecteur, scopé à cette
   page, l'emporte sans affecter les autres usages. */
.rmr-page-reviews .rmr-add-review-btn {
	display: block;
	width: fit-content;
	margin: 1em 0;
	padding: 0.6em 1.2em;
	border: 1px solid;
	border-radius: 4px;
	border-color: #ADB1B8 #A2A6AC #8D9096;
	background: linear-gradient(to bottom, #f7f8fa, #e7e9ec);
	font-weight: 600;
	color: #000000;
	letter-spacing: normal;
	text-transform: none;
	line-height: normal;
	text-decoration: none;
	cursor: pointer;
}

.rmr-page-reviews .rmr-add-review-btn:hover {
	background: linear-gradient(to bottom, #f0f1f3, #dde0e4);
}

/* Grille native (masonry Colcade) habillée en 3 colonnes flex — on garde
   la structure requise par le JS natif du plugin (show-more AJAX +
   colcade("append", ...)), simplement stylée pour paraître continue. */
/* Grille adaptative (comme le CSS natif, mais basée sur CSS Grid plutôt
   que sur du JS qui mesure la largeur du conteneur) : le nombre de
   colonnes se recalcule tout seul selon l'espace réellement disponible,
   sans jamais déborder — minmax(360px, 1fr) = au moins 360px par carte,
   jamais moins, donc jamais de scroll horizontal ni de blanc à droite. */
/* On laisse le comportement natif du plugin gérer l'adaptation du nombre
   de colonnes (crResizeAllGridItems() mesure la largeur du conteneur et
   masque cr-reviews-grid-col2/3 en dessous de 800px/550px, avant
   d'initialiser Colcade) — on ne touche qu'à l'espacement, sans forcer de
   display qui pourrait interférer avec cette logique native. */
.rmr-page-reviews .cr-reviews-grid-inner {
	gap: 2.5rem;
}

.rmr-page-reviews .cr-reviews-grid-col {
	gap: 2.5rem;
}

/* Neutralise toute marge/padding résiduel du CSS natif du plugin sur les
   cartes elles-mêmes (cause probable du décalage vers la droite observé). */
.cr-review-card.rmr-review-card {
	margin: 0 !important;
}

.cr-reviews-grid .cr-review-card {
	border-radius: 0 !important;
}

/* .rmr-review-card (règle de base) fixe height:100% — pertinent pour le
   slider (hauteur du parent bien définie par Slick), mais provoque un
   énorme débordement ici, où aucun ancêtre ne cadre cette hauteur. */
.rmr-page-reviews .cr-review-card.rmr-review-card {
	height: auto !important;
}

/* Le natif du plugin cible spécifiquement .cr-reviews-grid-inner.cr-colcade-loaded
   .cr-review-card une fois que son JS de masonry (Colcade) a fini de
   s'initialiser — sélecteur plus spécifique que notre simple .rmr-review-card,
   donc il gagnait la bataille de spécificité et empêchait le flex de s'appliquer. */
.cr-reviews-grid .cr-reviews-grid-inner.cr-colcade-loaded .cr-review-card {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.5rem !important;
	margin-bottom: 2.5rem !important;
}

.cr-review-card-content.rmr-page-review-card-inner {
	display: contents !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Plus de media query nécessaire ici : grid-template-columns:
   repeat(auto-fill, minmax(360px, 1fr)) s'adapte déjà tout seul à la
   largeur du conteneur, sans jamais déborder. */

/* Troncature "Show More" des avis (pas de max_chars natif sur ce shortcode,
   donc géré par notre propre JS/CSS ici). */
.rmr-page-review-read-more {
	background: none;
	border: none;
	padding: 0;
	margin-left: 0.25rem;
	color: var(--color-brand-custom, #0E252C);
	font-weight: 600;
	font-size: inherit;
	cursor: pointer;
	text-decoration: underline;
}

/* ---------- Carrousel d'avis (homepage) ---------- */

.rmr-carousel {
	display: flex !important;
	flex-direction: column;
	gap: 2rem;
	width: 100%;
}

@media (min-width: 48rem) {
	.rmr-carousel {
		flex-direction: row !important;
		align-items: center;
	}
}

.rmr-carousel-rating {
	display: flex;
	justify-content: center;
}

@media (min-width: 48rem) {
	.rmr-carousel-rating {
		flex: none;
		justify-content: flex-start;
	}
}

/* Ce container intermédiaire prend la largeur de son sous-élément le plus
   large (inline-flex = fit-content), et ses enfants (label, étoiles, "Based
   on...") sont alignés à gauche entre eux — le container lui-même étant
   centré par .rmr-carousel-rating en dessous de 768px. */
.rmr-carousel-rating-inner {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 0.5rem;
}

.rmr-carousel-label {
	font-size: 1.25rem;
	font-weight: 700;
}

.rmr-carousel-stars {
	display: flex;
	gap: 2px;
	margin-top: 0.5rem;
	margin-bottom: 0.25rem;
}

.rmr-carousel-stars .rmr-star {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
}

.rmr-carousel-count {
	font-size: 1rem;
	white-space: nowrap;
}

.rmr-carousel-count-num {
	font-weight: 700;
}

.rmr-carousel-slider {
	width: 100%;
	min-width: 0;
}

@media (min-width: 48rem) {
	.rmr-carousel-slider {
		flex: 1;
	}
}

/* Cartes du slider : même look "à plat" que les autres avis du site
   (scopé à .rmr-carousel-slider pour ne pas affecter les cartes de la
   grille de la page Reviews, qui réutilisent la même classe .rmr-review-card
   mais ont besoin d'un comportement de largeur différent). */
.rmr-carousel-slider .cr-review-card.rmr-review-card {
	width: 100% !important;
	display: block !important;
}

/* Note : plus besoin d'un min-width séparé sur les cartes de la grille
   Reviews — grid-template-columns: repeat(auto-fill, minmax(360px, 1fr))
   garantit déjà ce minimum directement au niveau de la grille. */

.rmr-slider-card-inner {
	display: flex !important;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
	height: 100%;
	padding: 0.5rem;
	box-sizing: border-box;
}

.rmr-review-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.rmr-review-card-title {
	font-size: 1rem;
	line-height: 26px;
	font-weight: 600;
	color: inherit;
	text-decoration: none;
}

.rmr-review-card-title:hover {
	text-decoration: underline;
}

.rmr-review-card-author {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
}

/* Mention "Verified owner" inline (onglet natif, à côté du nom d'auteur) */
.rmr-review-card-verified {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
}

.rmr-review-card-verified-icon {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.rmr-review-card-verified-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
}

.rmr-review-card-verified-badge-icon {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.rmr-review-card-country {
	display: inline-block;
	vertical-align: middle;
}

.rmr-read-more a,
.rmr-read-less a {
	color: var(--color-brand-custom, #0E252C);
	font-weight: 600;
	text-decoration: underline;
}

.rmr-read-more-details {
	display: inline;
}