/* FAQ Accordéon — styles de base, surchargeables par le thème.
   Personnalisation rapide via variables CSS : --optia-border, --optia-bg, --optia-focus,
   --optia-question-size, --optia-answer-size. */

.optia {
	margin: 1.5em 0;
}

.optia__title {
	margin: 0 0 0.75em;
	font-weight: 700;
}

.optia__item {
	margin-bottom: 0.5em;
	border-style: solid;
	border-color: var(--optia-border, #e2e2e2);
	/* Épaisseur par côté : chacune retombe sur l'épaisseur globale, elle-même
	   sur 1px, pour que les styles enregistrés avant ce réglage ne bougent pas. */
	border-width:
		var(--optia-border-top, var(--optia-border-width, 1px))
		var(--optia-border-right, var(--optia-border-width, 1px))
		var(--optia-border-bottom, var(--optia-border-width, 1px))
		var(--optia-border-left, var(--optia-border-width, 1px));
	border-radius: var(--optia-radius, 6px);
	overflow: hidden;
	background: var(--optia-bg, #fff);
}

.optia__question {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.optia__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	width: 100%;
	margin: 0;
	padding: 1em 1.15rem;
	border: 0;
	background: transparent;
	font: inherit;
	font-weight: 600;
	text-align: left;
	color: var(--optia-text, inherit);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.optia__trigger:hover,
.optia__item.is-open .optia__trigger {
	background: var(--optia-accent, rgba(0, 0, 0, 0.04));
}

.optia__trigger:focus-visible {
	outline: 2px solid var(--optia-focus, #2563eb);
	outline-offset: -2px;
}

.optia__label {
	flex: 1 1 auto;
}

.optia__icon {
	flex: 0 0 auto;
	width: 0.62em;
	height: 0.62em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0.25s ease;
}

.optia__item.is-open .optia__icon {
	transform: rotate(-135deg);
}

/* Flèche à gauche : elle pointe vers la question (›) et bascule vers le bas
   à l'ouverture. L'ordre visuel suffit, le DOM reste inchangé : le lecteur
   d'écran continue d'annoncer l'intitulé avant la flèche, qui est décorative. */
.optia--icon-left .optia__icon {
	order: -1;
	transform: rotate(-45deg);
}

/* La flèche décale l'intitulé de sa largeur (0.62) plus l'espacement (1),
   exprimés dans la taille des questions. La réponse reprend ce même décalage,
   sinon elle démarre sous la flèche au lieu de s'aligner sur la question. */
.optia--icon-left .optia__answer {
	padding-left: calc(1.15rem + 1.62 * var(--optia-question-size, 1rem));
}

.optia--icon-left .optia__item.is-open .optia__icon {
	transform: rotate(45deg);
}

.optia__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.28s ease;
}

.optia__item.is-open .optia__panel {
	grid-template-rows: 1fr;
}

.optia__panel-inner {
	overflow: hidden;
}

.optia__answer {
	padding: 0 1.15rem 1.15em;
}

.optia__answer > :first-child {
	margin-top: 0;
}

.optia__answer > :last-child {
	margin-bottom: 0;
}

/* Mise en page en colonnes. align-items: start évite qu'une question ouverte
   n'étire ses voisines de la même rangée. */
.optia--cols {
	display: grid;
	grid-template-columns: repeat(var(--optia-columns, 1), minmax(0, 1fr));
	gap: 0.5em;
	align-items: start;
}

.optia--cols .optia__title {
	grid-column: 1 / -1;
}

.optia--cols .optia__item {
	margin-bottom: 0;
}

@media (max-width: 720px) {

	.optia--cols {
		grid-template-columns: 1fr;
	}
}

/* Tailles de police choisies dans les personnalisations. Les sélecteurs
   descendent jusqu'aux enfants : le thème fixe presque toujours une taille sur
   p et li, qui l'emporterait sur un simple héritage depuis le conteneur. */
.optia--question-size .optia__trigger,
.optia--question-size .optia__label {
	font-size: var(--optia-question-size);
}

.optia--answer-size .optia__answer,
.optia--answer-size .optia__answer p,
.optia--answer-size .optia__answer li,
.optia--answer-size .optia__answer td,
.optia--answer-size .optia__answer th {
	font-size: var(--optia-answer-size);
}

.optia-empty {
	font-style: italic;
	opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {

	.optia__panel,
	.optia__icon,
	.optia__trigger {
		transition: none;
	}
}

/* Fil d'Ariane */
.optia-breadcrumb {
	margin: 1em 0;
	font-size: 0.9em;
}

.optia-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.optia-breadcrumb__item {
	display: flex;
	align-items: center;
}

.optia-breadcrumb__item:not(:first-child)::before {
	content: var(--optia-bc-sep, "\203A");
	margin-right: 0.45em;
	opacity: 0.55;
}

.optia-breadcrumb__item [aria-current="page"] {
	opacity: 0.7;
}

/* Adresse */
.optia-address {
	font-style: normal;
	line-height: 1.5;
}

.optia-address span {
	display: block;
}

.optia-address__name {
	font-weight: 700;
}

/* Note Google seule */
.optia-grating {
	gap: 0.5em;
}

a.optia-grating {
	text-decoration: none;
	color: inherit;
}

a.optia-grating:hover .optia-rating__text,
a.optia-grating:focus-visible .optia-rating__text {
	text-decoration: underline;
}

/* Horaires */
.optia-hours__title {
	font-weight: 700;
	margin: 0 0 0.4em;
}

.optia-hours__list {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 1.6;
}

.optia-hours__item {
	display: flex;
	justify-content: space-between;
	gap: 1.5em;
	padding: 0.15em 0;
}

.optia-hours__day {
	font-weight: 500;
}

.optia-hours__item.is-today {
	font-weight: 700;
}

.optia-hours__item.is-closed .optia-hours__time {
	opacity: 0.65;
}

/* Note / étoiles */
.optia-rating {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.optia-rating__stars {
	position: relative;
	display: inline-block;
	font-size: 1.1em;
	line-height: 1;
}

.optia-rating__base {
	color: var(--optia-rating-empty, #d4d4d4);
}

.optia-rating__fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--optia-rating-fill, #f5a623);
}

.optia-rating__text {
	font-size: 0.92em;
}

/* Widget de vote */
.optia-vote {
	margin: 1em 0;
}

.optia-vote__average {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.optia-vote__meta {
	font-size: 0.9em;
	color: var(--optia-vote-meta, #555);
}

.optia-vote__form {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin-top: 0.4em;
}

.optia-vote__label {
	font-size: 0.9em;
}

.optia-vote__stars {
	display: inline-flex;
}

.optia-vote__star {
	padding: 0 0.05em;
	border: 0;
	background: none;
	font-size: 1.45em;
	line-height: 1;
	color: var(--optia-rating-empty, #d4d4d4);
	cursor: pointer;
	transition: color 0.12s ease;
}

.optia-vote__star.is-on {
	color: var(--optia-rating-fill, #f5a623);
}

.optia-vote__star:focus-visible {
	outline: 2px solid var(--optia-focus, #2563eb);
}

.optia-vote__done {
	margin: 0.4em 0 0;
	font-size: 0.9em;
	color: var(--optia-vote-done, #1a7f37);
}

@media (prefers-reduced-motion: reduce) {

	.optia-vote__star {
		transition: none;
	}
}

/* Avis Google — variables CSS surchargeables via les options de la carte. */
.optia-greviews {
	--optia-greview-bg: #fff;
	--optia-greview-border: #e7e8ed;
	--optia-greview-radius: 12px;
	--optia-greview-text: #1f2937;
	--optia-greview-meta: #6b7280;
	--optia-greview-accent: #2563eb;
	--optia-greview-stars: #f5a623;
	margin: 1.5em 0;
	color: var(--optia-greview-text);
}

.optia-greviews__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em 0.75em;
	margin-bottom: 1em;
}

.optia-greviews__head .optia-rating {
	gap: 0.4em;
}

.optia-greviews__head .optia-rating__fill {
	color: var(--optia-greview-stars);
}

.optia-greviews__head .optia-rating__text {
	font-weight: 700;
	color: var(--optia-greview-accent);
}

.optia-greviews__count {
	font-size: 0.95em;
	color: var(--optia-greview-meta);
}

.optia-greviews__count::before {
	content: "·";
	margin-right: 0.5em;
	color: var(--optia-greview-meta);
}

.optia-greviews__list {
	display: grid;
	gap: 14px;
}

.optia-greview {
	padding: 16px 18px;
	background: var(--optia-greview-bg);
	border: 1px solid var(--optia-greview-border);
	border-radius: var(--optia-greview-radius);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

.optia-greview__top {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin-bottom: 0.45em;
}

.optia-greview__avatar {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
}

.optia-greview__avatar--photo {
	object-fit: cover;
}

.optia-greview__meta {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.optia-greview__author {
	font-weight: 600;
	color: var(--optia-greview-text);
}

.optia-greview__date {
	margin-top: 2px;
	font-size: 0.82em;
	color: var(--optia-greview-meta);
}

.optia-greview__stars {
	font-size: 0.95em;
	margin-bottom: 0.35em;
}

.optia-greview__stars .optia-rating__fill {
	color: var(--optia-greview-stars);
}

.optia-greview__text {
	margin: 0.4em 0 0;
	font-style: italic;
	color: var(--optia-greview-meta);
	line-height: 1.5;
}

.optia-greviews__attribution {
	margin: 0.9em 0 0;
	font-size: 0.85em;
	color: var(--optia-greview-meta);
}

/* Diaporama — un avis à la fois, centré, sans bordure (style « carrousel »). */
.optia-greviews--slider .optia-greviews__head,
.optia-greviews--slider .optia-greviews__list,
.optia-greviews--slider .optia-greviews__nav,
.optia-greviews--slider .optia-greviews__attribution {
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}

.optia-greviews--slider .optia-greviews__head {
	justify-content: center;
	margin-bottom: 1em;
}

.optia-greviews--slider .optia-greviews__list {
	display: block;
}

.optia-greviews--slider .optia-greview {
	display: none;
	border: 0;
}

.optia-greviews--slider .optia-greview.is-active {
	display: block;
}

.optia-greviews--slider .optia-greviews__nav {
	justify-content: center;
	margin-top: 1em;
}

.optia-greviews--slider .optia-greviews__attribution {
	text-align: center;
}

.optia-greviews__nav {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin-top: 0.9em;
}

.optia-greviews__prev,
.optia-greviews__next {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--optia-greview-border);
	border-radius: 50%;
	background: var(--optia-greview-bg);
	color: inherit;
	font-size: 1.3em;
	line-height: 1;
	cursor: pointer;
}

.optia-greviews__prev:hover,
.optia-greviews__next:hover {
	background: rgba(0, 0, 0, 0.04);
}

.optia-greviews__prev:focus-visible,
.optia-greviews__next:focus-visible {
	outline: 2px solid var(--optia-greview-accent);
	outline-offset: 2px;
}

.optia-greviews__counter {
	font-size: 0.9em;
	color: var(--optia-greview-meta);
}

/* Carrousel horizontal. */
.optia-greviews--carousel .optia-greviews__list {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding: 4px 4px 10px;
	scrollbar-width: none;
}

.optia-greviews--carousel .optia-greviews__list::-webkit-scrollbar {
	display: none;
}

.optia-greviews--carousel .optia-greview {
	flex: 0 0 280px;
	scroll-snap-align: start;
}

@media (max-width: 540px) {

	.optia-greviews--carousel .optia-greview {
		flex: 0 0 85%;
	}
}

/* Carrousel — pastilles de pagination. */
.optia-greviews__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 12px;
}

.optia-greviews__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	background: #d1d5db;
	border-radius: 50%;
	cursor: pointer;
	transition: width 0.2s ease, background-color 0.2s ease, border-radius 0.2s ease;
}

.optia-greviews__dot:hover {
	background: var(--optia-greview-accent);
	opacity: 0.7;
}

.optia-greviews__dot.is-active {
	width: 22px;
	border-radius: 4px;
	background: var(--optia-greview-accent);
}

.optia-greviews__dot:focus-visible {
	outline: 2px solid var(--optia-greview-accent);
	outline-offset: 2px;
}

/* Ligne d'initiales : utilisée en mode mosaïque, masquée ailleurs. */
.optia-greview__initials {
	display: none;
}

.optia-greview__initials-name {
	color: var(--optia-greview-text);
	font-weight: 500;
}

.optia-greview__initials-date {
	color: var(--optia-greview-meta);
}

/* Mosaïque — cartes compactes en colonnes (style mur d'avis). */
.optia-greviews--mosaic .optia-greviews__head {
	margin-bottom: 1.1em;
}

.optia-greviews--mosaic .optia-greviews__list {
	display: block;
	columns: 3;
	column-gap: var(--optia-mosaic-gap, 24px);
}

.optia-greviews--mosaic .optia-greview {
	display: block;
	break-inside: avoid;
	margin: 0 0 var(--optia-mosaic-gap, 24px);
	padding: 14px 16px;
}

/* Garde un peu d'air sous la dernière carte de chaque colonne. */
.optia-greviews--mosaic .optia-greview:last-child {
	margin-bottom: 0;
}

/* Mosaïque — version compacte par défaut : pas d'avatar, initiales en pied. */
.optia-greviews--mosaic .optia-greview__top {
	display: none;
}

.optia-greviews--mosaic .optia-greview__stars {
	display: block;
	margin: 0 0 0.5em;
	font-size: 0.95em;
}

.optia-greviews--mosaic .optia-greview__text {
	margin: 0;
	font-size: 0.92em;
	line-height: 1.45;
}

.optia-greviews--mosaic .optia-greview__initials {
	display: block;
	margin-top: 0.7em;
	font-size: 0.8em;
	color: var(--optia-greview-meta);
}

/* Mosaïque + case « Avatar » cochée : on bascule sur l'en-tête avatar + nom,
   et on masque la ligne d'initiales pour éviter le doublon d'auteur. */
.optia-greviews--mosaic.optia-greviews--has-avatar .optia-greview__top {
	display: flex;
}

.optia-greviews--mosaic.optia-greviews--has-avatar .optia-greview__initials {
	display: none;
}

@media (max-width: 900px) {

	.optia-greviews--mosaic .optia-greviews__list {
		columns: 2;
	}
}

@media (max-width: 540px) {

	.optia-greviews--mosaic .optia-greviews__list {
		columns: 1;
	}
}