/* ==========================================================================
   Système des Avis
   Variables de couleur (modifiables facilement)
   ========================================================================== */
:root {
	/* Étoiles - affichage (carrousel) */
	--sda-star-color: #f2a93b;
	--sda-star-empty: #d9d9d9;
	--sda-star-size: 16px;

	/* Étoiles - formulaire de notation */
	--sda-rating-empty: #b9b9b9;
	--sda-rating-hint-color: #f2a93b;
	--sda-rating-star-size: 30px;
	--sda-rating-star-gap: 6px;

	/* Carrousel / cartes */
	--sda-card-bg: #fafafa;
	--sda-card-border: #e6e6e6;
	--sda-card-border-width: 1px;
	--sda-card-radius: 6px;
	--sda-card-padding: 22px 24px;
	--sda-author-color: #1c2b3a;
	--sda-readmore-color: #928a7c;
	--sda-readmore-color-hover: #7c7466;
	--sda-readmore-bg-hover: transparent;

	/* Flèches du carrousel */
	--sda-arrow-color: #8c8c8c;
	--sda-arrow-color-hover: #1c2b3a;
	--sda-arrow-bg: transparent;
	--sda-arrow-bg-hover: transparent;
	--sda-arrow-size: 24px;
	--sda-arrow-radius: 50%;

	/* Textes génériques */
	--sda-text-color: #4a4a4a;

	/* Titre du formulaire */
	--sda-title-color: #1c2b3a;
	--sda-line-color: #d9d9d9;
	--sda-font-title: Georgia, 'Playfair Display', serif;

	/* Champs du formulaire */
	--sda-label-color: #1c3a5e;
	--sda-input-border: #d6d6d6;
	--sda-input-bg: #ffffff;
	--sda-input-radius: 4px;

	/* Bouton */
	--sda-btn-bg: #928a7c;
	--sda-btn-bg-hover: #7c7466;
	--sda-btn-text-color: #ffffff;
	--sda-btn-radius: 999px;
	--sda-btn-padding-v: 14px;
	--sda-btn-padding-h: 42px;

	/* Messages */
	--sda-error-color: #c0392b;
	--sda-success-color: #2e7d32;
	--sda-success-bg: #eef7ee;
	--sda-success-border: #cfe8cf;
	--sda-focus-ring: rgba(146, 138, 124, 0.15);
}

/* ==========================================================================
   1) WIDGET AFFICHAGE - CARROUSEL
   Tous les sélecteurs sont qualifiés par .sda-carousel-wrap pour renforcer
   la spécificité CSS et éviter que le thème (button, input, a { ... })
   n'écrase ces styles.
   ========================================================================== */
.sda-carousel-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 100%;
	box-sizing: border-box;
}

.sda-carousel-wrap *,
.sda-form-wrap * {
	box-sizing: border-box;
}

.sda-carousel-wrap .sda-arrow {
	flex: 0 0 auto;
	background-color: var(--sda-arrow-bg);
	border: none;
	border-radius: var(--sda-arrow-radius);
	color: var(--sda-arrow-color);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	margin: 0;
	line-height: 1;
	appearance: none;
	-webkit-appearance: none;
	transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.sda-carousel-wrap .sda-arrow svg {
	width: var(--sda-arrow-size);
	height: var(--sda-arrow-size);
	display: block;
}

.sda-carousel-wrap .sda-arrow:hover {
	color: var(--sda-arrow-color-hover);
	background-color: var(--sda-arrow-bg-hover);
	transform: scale(1.1);
}

.sda-carousel-wrap .sda-arrow:disabled {
	opacity: 0.3;
	cursor: default;
	transform: none;
}

.sda-carousel-wrap .sda-carousel-viewport {
	overflow: hidden;
	flex: 1 1 auto;
	width: 100%;
}

.sda-carousel-wrap .sda-carousel-track {
	display: flex;
	transition: transform 0.4s ease;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sda-carousel-wrap .sda-card {
	flex: 0 0 calc((100% - (24px * 2)) / 3);
}

.sda-carousel-wrap .sda-card-inner {
	background-color: var(--sda-card-bg);
	border: var(--sda-card-border-width) solid var(--sda-card-border);
	border-radius: var(--sda-card-radius);
	padding: var(--sda-card-padding);
	height: 100%;
}

.sda-carousel-wrap .sda-card-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 10px 0;
}

.sda-carousel-wrap .sda-stars {
	display: inline-flex;
	gap: 2px;
	line-height: 1;
}

.sda-carousel-wrap .sda-star {
	color: var(--sda-star-empty);
	font-size: var(--sda-star-size);
}

.sda-carousel-wrap .sda-star.is-filled {
	color: var(--sda-star-color);
}

.sda-carousel-wrap .sda-author {
	font-weight: 600;
	color: var(--sda-author-color);
	font-size: 15px;
	margin: 0;
}

.sda-carousel-wrap .sda-text {
	color: var(--sda-text-color);
	font-size: 15px;
	line-height: 1.55;
	margin: 0 0 8px 0;
}

.sda-carousel-wrap .sda-readmore {
	background-color: transparent;
	border: none;
	padding: 2px 4px;
	margin: 0 0 0 -4px;
	border-radius: 3px;
	color: var(--sda-readmore-color);
	font-size: 14px;
	cursor: pointer;
	text-decoration: none;
	appearance: none;
	-webkit-appearance: none;
}

.sda-carousel-wrap .sda-readmore:hover,
.sda-carousel-wrap .sda-readmore:focus-visible {
	text-decoration: underline;
	color: var(--sda-readmore-color-hover) !important;
	background-color: var(--sda-readmore-bg-hover) !important;
}

.sda-empty {
	color: var(--sda-text-color);
	font-style: italic;
}

/* Responsive carrousel */
@media (max-width: 1024px) {
	.sda-carousel-wrap .sda-card {
		flex: 0 0 calc((100% - 24px) / 2);
	}
}

@media (max-width: 680px) {
	.sda-carousel-wrap .sda-card {
		flex: 0 0 100%;
	}
}

/* ==========================================================================
   2) WIDGET FORMULAIRE - PARTAGE D'AVIS
   Tous les sélecteurs sont qualifiés par .sda-form-wrap pour la même raison.
   ========================================================================== */
.sda-form-wrap {
	max-width: 900px;
}

.sda-form-wrap .sda-form-title-row {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0 0 26px 0;
}

.sda-form-wrap .sda-form-title {
	font-family: var(--sda-font-title);
	font-weight: 400;
	font-size: 32px;
	color: var(--sda-title-color);
	margin: 0;
	white-space: nowrap;
}

.sda-form-wrap .sda-form-title-line {
	flex: 1 1 auto;
	height: 1px;
	background-color: var(--sda-line-color);
}

.sda-form-wrap .sda-rating-field {
	margin: 0 0 24px 0;
}

.sda-form-wrap .sda-rating-stars {
	display: inline-flex;
	flex-direction: row-reverse;
	gap: var(--sda-rating-star-gap);
}

.sda-form-wrap .sda-rating-stars input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.sda-form-wrap .sda-rating-stars label {
	font-size: var(--sda-rating-star-size);
	line-height: 1;
	color: #ffffff;
	-webkit-text-stroke: 1.5px var(--sda-rating-empty);
	cursor: pointer;
	margin: 0;
	transition: color 0.15s ease, -webkit-text-stroke 0.15s ease;
}

/* survol : colorer l'étoile survolée + toutes celles à sa droite (ordre inversé) */
.sda-form-wrap .sda-rating-stars label:hover,
.sda-form-wrap .sda-rating-stars label:hover ~ label,
.sda-form-wrap .sda-rating-stars input:checked ~ label {
	color: var(--sda-star-color);
	-webkit-text-stroke: 1.5px var(--sda-star-color);
}

.sda-form-wrap .sda-rating-hint {
	margin: 10px 0 0 0;
	color: var(--sda-rating-hint-color);
	font-size: 14px;
}

.sda-form-wrap .sda-rating-hint.is-error {
	color: var(--sda-error-color);
}

.sda-form-wrap .sda-form-row {
	display: flex;
	gap: 32px;
	margin: 0 0 20px 0;
	flex-wrap: wrap;
}

.sda-form-wrap .sda-field {
	flex: 1 1 260px;
	display: flex;
	flex-direction: column;
	margin: 0;
}

.sda-form-wrap .sda-field-full {
	margin: 0 0 20px 0;
}

.sda-form-wrap .sda-field label {
	font-weight: 600;
	color: var(--sda-label-color);
	margin: 0 0 8px 0;
	font-size: 15px;
	display: block;
}

.sda-form-wrap .sda-field input[type="email"],
.sda-form-wrap .sda-field input[type="text"],
.sda-form-wrap .sda-field textarea {
	border: 1px solid var(--sda-input-border);
	border-radius: var(--sda-input-radius);
	padding: 12px 14px;
	margin: 0;
	font-size: 15px;
	font-family: inherit;
	color: var(--sda-text-color);
	background-color: var(--sda-input-bg, #fff);
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
}

.sda-form-wrap .sda-field textarea {
	resize: vertical;
	min-height: 140px;
}

.sda-form-wrap .sda-field input:focus,
.sda-form-wrap .sda-field textarea:focus {
	outline: none;
	border-color: var(--sda-btn-bg);
	box-shadow: 0 0 0 3px var(--sda-focus-ring);
}

.sda-form-wrap .sda-form-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	margin-top: 8px;
}

.sda-form-wrap .sda-form-feedback {
	color: var(--sda-error-color);
	font-size: 14px;
	margin: 0;
}

.sda-form-wrap .sda-form-feedback.is-success {
	color: var(--sda-success-color);
}

.sda-form-wrap .sda-submit-btn {
	background-color: var(--sda-btn-bg);
	color: var(--sda-btn-text-color);
	border: none;
	border-radius: var(--sda-btn-radius);
	padding: var(--sda-btn-padding-v) var(--sda-btn-padding-h);
	margin: 0;
	font-size: 16px;
	line-height: 1.2;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.sda-form-wrap .sda-submit-btn:hover {
	background-color: var(--sda-btn-bg-hover);
}

.sda-form-wrap .sda-submit-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.sda-form-wrap .sda-form-success {
	margin-top: 16px;
	color: var(--sda-success-color);
	background-color: var(--sda-success-bg);
	border: 1px solid var(--sda-success-border);
	border-radius: 4px;
	padding: 12px 16px;
	font-size: 14px;
}

@media (max-width: 600px) {
	.sda-form-wrap .sda-form-title {
		font-size: 24px;
	}

	.sda-form-wrap .sda-form-footer {
		justify-content: stretch;
	}

	.sda-form-wrap .sda-submit-btn {
		width: 100%;
	}
}