/* Avis clients - dubost-concept/avis */

.dc-avis__note {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.6rem;
	align-items: center;
	width: fit-content;
	padding: 0.6rem 1.1rem;
	border-radius: 999px;
	background: var(--dc-blanc);
	color: var(--dc-encre);
	font-weight: 600;
}

.dc-avis__note strong {
	font-weight: 700;
}

.dc-avis__note span:not(.dc-etoiles, .dc-etoile) {
	color: var(--dc-gris-texte);
	font-weight: 500;
}

.dc-avis__auteur {
	display: flex;
	gap: 0.8rem;
	align-items: center;
	margin: 0;
	color: var(--dc-doux);
	font-size: 0.98rem;
}

.dc-avis__auteur > span:last-child {
	display: grid;
}

.dc-avis__auteur strong {
	color: var(--dc-titre-c);
	font-weight: 600;
}

.dc-avis__initiale {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--dc-bleu);
	color: #fff;
	font-weight: 700;
}

/* ---- Un à la fois : le grand panneau gris. */

.dc-avis__panneau {
	position: relative;
	display: grid;
	gap: 2rem;
	padding: clamp(2rem, 5vw, 4.5rem);
	border-radius: var(--dc-rayon-l);
	background: var(--dc-gris);
}

.dc-fond--gris .dc-avis__panneau {
	background: var(--dc-blanc);
}

.dc-fond--gris .dc-avis__note,
.dc-fond--voile .dc-avis__panneau .dc-avis__note {
	background: var(--dc-gris);
}

.dc-fond--voile .dc-avis__panneau {
	background: var(--dc-blanc);
}

.dc-avis__haut {
	display: grid;
	gap: 1.25rem;
	justify-items: start;
}

.dc-avis__titre {
	font-size: clamp(1.2rem, 1.85vw, 1.55rem);
}

.dc-avis__diapos {
	display: grid;
}

.dc-avis__diapo {
	grid-area: 1 / 1;
	margin: 0;
}

/* Les diapositives se croisent : celle qui part glisse, la nouvelle arrive. */
.dc-avis__panneau.est-pret .dc-avis__diapo {
	opacity: 0;
	transform: translateX(40px);
	transition: opacity 0.6s var(--dc-courbe), transform 0.8s var(--dc-courbe);
	pointer-events: none;
}

.dc-avis__panneau.est-pret .dc-avis__diapo.est-actif {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* Sans JavaScript, ou en attendant : le premier avis seul. */
.dc-avis__panneau:not(.est-pret) .dc-avis__diapo:not(.est-actif) {
	display: none;
}

/* La citation prend toute la largeur du panneau. */
.dc-avis__citation {
	margin: 0;
	color: var(--dc-encre);
	font-family: var(--dc-titres);
	font-size: clamp(1.2rem, 2.1vw, 1.85rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.12;
	text-wrap: pretty;
}

.dc-avis__diapo .dc-avis__auteur {
	margin-top: 1.75rem;
}

.dc-avis__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

.dc-avis__points {
	display: flex;
	gap: 0.4rem;
	margin-right: auto;
	margin-left: 0.5rem;
}

.dc-point {
	width: 0.6rem;
	height: 0.6rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #c9cfd6;
	cursor: pointer;
	transition: width 0.4s var(--dc-courbe), background-color 0.4s;
}

.dc-point.est-actif {
	width: 1.8rem;
	background: var(--dc-bleu);
}

/* ---- Tous les avis : des cartes en colonnes. */

.dc-avis__resume {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}

.dc-fond--blanc .dc-avis--cartes .dc-avis__note,
.dc-avis--cartes.dc-fond--blanc .dc-avis__note {
	background: var(--dc-gris);
}

.dc-avis__cartes {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 1;
	column-gap: 16px;
}

@media (min-width: 700px) {
	.dc-avis__cartes {
		columns: 2;
	}
}

@media (min-width: 1100px) {
	.dc-avis__cartes {
		columns: 3;
	}
}

.dc-avis__carte {
	display: grid;
	gap: 1rem;
	margin-bottom: 16px;
	padding: 1.75rem;
	break-inside: avoid;
	border-radius: var(--dc-rayon);
	background: var(--dc-carte);
}

.dc-fond--blanc .dc-avis__carte {
	background: var(--dc-gris);
}

.dc-avis__photo {
	aspect-ratio: 4 / 3;
	margin: -0.75rem -0.75rem 0.25rem;
	border-radius: var(--dc-rayon-s);
}

.dc-avis__texte {
	margin: 0;
	color: var(--dc-titre-c);
	font-size: 1.05rem;
	line-height: 1.55;
}

.dc-avis__texte p {
	margin: 0 0 0.75em;
}

.dc-avis__texte p:last-child {
	margin: 0;
}

/* ---- Un avis trop long : un extrait, « Lire la suite » ouvre la fenêtre. */

.dc-avis__extrait {
	display: grid;
	gap: 0.75rem;
	justify-items: start;
}

.dc-avis__suite {
	display: inline-flex;
	padding: 0;
	border: 0;
	background: none;
	color: var(--dc-accent);
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.25em;
	cursor: pointer;
}

.dc-avis__suite:is(:hover, :focus-visible) {
	text-decoration-color: transparent;
}

/*
 * La fenêtre : l'avis entier dans une carte blanche, sur un voile sombre.
 * Elle vit hors de la section (au bout de la page) : elle reprend ses
 * couleurs.
 */
.dc-avis-fenetre {
	--dc-titre-c: var(--dc-encre);
	--dc-texte: #2b3038;
	--dc-doux: var(--dc-gris-texte);
	--dc-accent: var(--dc-bleu);

	width: min(40rem, calc(100vw - 2 * var(--dc-gouttiere)));
	max-height: calc(100dvh - 3rem);
	margin: auto;
	padding: 0;
	overflow: visible;
	border: 0;
	border-radius: var(--dc-rayon-l);
	background: var(--dc-blanc);
	color: var(--dc-texte);
	font-family: var(--dc-corps);
}

.dc-avis-fenetre::backdrop {
	background: rgba(12, 18, 28, 0.72);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.dc-avis-fenetre[open] {
	animation: dc-visionneuse-entree 0.5s var(--dc-courbe);
}

.dc-avis-fenetre__corps {
	display: grid;
	gap: 1.25rem;
	max-height: calc(100dvh - 3rem);
	overflow-y: auto;
	padding: clamp(2rem, 5vw, 3rem);
	padding-top: clamp(2.5rem, 5vw, 3rem);
	overscroll-behavior: contain;
}

.dc-avis-fenetre__fermer {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dc-gris);
	color: var(--dc-encre);
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
}

.dc-avis-fenetre__fermer:is(:hover, :focus-visible) {
	background: var(--dc-bleu);
	color: #fff;
}

.dc-avis-fenetre__fermer svg {
	width: 1.1rem;
	height: 1.1rem;
}