@import url(https://fonts.googleapis.com/css?family=Caveat);

/* Commun */
.cursor-move {
	cursor: move;
}
.cursor-pointer {
	cursor: pointer;
}

.hide {
	display:none;
}
.readonly {
	border: none !important;
	background: none !important;
	opacity: 1 !important;
}
.readonly:focus {
	box-shadow: none !important;
}
.anchor {
    display: block;
    position: relative;
    top: -70px;
    visibility: hidden;
}
.grecaptcha-badge {
	visibility: hidden;
}

/* Bouton d'action avec menu */
.dropdown-toggle::after {
	margin-left: 0px !important;
	vertical-align: 0px !important;
	border: 0px !important;
}
ul.pc-navbar:hover { /* Menu general */
	cursor: pointer;
}
.avtar.avtar-s {
	width: 35px;
	height: 35px;
}
img.center-cropped {
	object-fit: cover;
	object-position: center;
}

/* Bandeau de validation formulaire flottant */
.fixed-bottom {
	/*background-color: #fefefe;*/
}

/* Container à ascenseur horizontal invisible */
.scrollbar-container {
	display: inline-flex;
	align-items: center;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	white-space: nowrap;
}
.scrollbar-container::-webkit-scrollbar {
	display: none;
}
.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
  color: black;
  pointer-events: none;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.1;
}
.img-overlay {
	text-align: center;
	word-wrap: break-word;
	overflow-wrap: break-word;
	hyphens: auto;
	white-space: normal;
}

/* Caroussel */
.carousel-caption {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	bottom: auto; /* évite le positionnement par défaut en bas */
	text-align: center;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 8px;
	text-align: center;
	pointer-events: none;
}
.carousel-indicators.custom-thumbs {
	position: static;
	margin-bottom: 1rem;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}
.carousel-indicators.custom-thumbs button {
	border: none;
	padding: 0;
	background: none;
}
.carousel-indicators.custom-thumbs button.active {
	opacity: 1;
	border: 2px solid #eff0f2;
}
.carousel-indicators.custom-thumbs img {
	object-fit: cover;
	border-radius: 4px;
	transition: transform 0.3s;
}
.carousel-indicators.custom-thumbs img:hover {
	transform: scale(1.05);
}

/* Carte */
.location-map {
	border-radius: 6px;
	z-index:1;
}
.hei-220 {
	height: 220px;
}
.lost-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(255, 255, 255, 0.85);
	border-radius: 8px;
	text-align: center;
	pointer-events: none;
	width: 50%;
}
.disabled {
	opacity: 1;
}
.leaflet-control-geocoder-ban-selected {
	background-color: #12b7fb !important;
	color: white !important;
}
.leaflet-control-geocoder-ban-alternatives {
	width: 100% !important;
}
.leaflet-control-geocoder-ban-alternatives li {
	border-top: 1px solid #e7eaee !important;
}
.leaflet-control-geocoder-ban-selected a {
	color: white !important;
	font-size: 0.875rem !important;
}
.searchBar {
	position: absolute !important;
	right: 10px;
	width: 100%;
	padding: 0.8rem 0.75rem;
	color: #131920;
	border: 1px solid #bec8d0 !important;
	border-radius: 8px !important;
	width: 80%;
}

/* Ré-écriture des styles pour les objets dérivés de Choices.js */
.is-focused .choices__inner, .is-open .choices__inner {
	border-width: 1px !important;
	border-color: var(--bs-primary) !important;
	box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), 0.1) !important;
}
.choices__list--dropdown {
	visibility: hidden;
	z-index: 3;
	position: absolute;
	width: 100%;
	/*width: max-content;*/
	background-color: #ffffff;
	border: 1px solid var(--bs-primary) !important;
	top: 100%;
	margin-top: -1px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	overflow: hidden;
	word-break: break-all;
	will-change: visibility;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted {
	background-color: #f7f7f7 !important;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
	opacity: 0.5;
}
.choices__list--multiple .choices__item {
	background-color: #bfbfbf !important;
	border: 1px solid #bfbfbf !important;
}

/* Review */
.paw-rating {
	display: flex;
	gap: 8px;
}
.paw-rating .ph-duotone {
	font-size: 36px;
	color: #ccc;
	transition: color 0.2s ease;
}
.paw-rating .ph-duotone.active {
	color: #12b7fb;
}
.paw-rating .ph-duotone.hover {
	color: #12b7fb;
}

/* Switch Oui/Non */
.switchon-wrapper {
	display: inline-block;
	position: relative;
}

.switchon {
	appearance: none;
	-webkit-appearance: none;
	width: 80px;
	height: 30px;
	background: #f8f9fa;
	border-radius: 50px;
	position: relative;
	cursor: pointer;
	transition: background 0.3s ease;
	outline: none;
}

.switchon:checked {
	background: #12b7fb;
}

.switchon::before {
	content: "Non";
	position: absolute;
	top: 0;
	left: 20px;
	width: 60px;
	height: 30px;
	/*color: white;*/
	color: #5b6b79;
	font-size: 13px;
	font-weight: bold;
	text-align: center;
	line-height: 30px;
	transition: content 0.3s ease;
	pointer-events: none;
}

.switchon:checked::before {
	content: "Oui";
	color: white;
	left: 0px;
}

.switchon::after {
	content: "";
	width: 26px;
	height: 26px;
	background: white;
	border-radius: 50%;
	position: absolute;
	top: 2px;
	left: 2px;
	transition: transform 0.3s ease;
}

.switchon:checked::after {
	transform: translateX(50px);
}

/* Annonce de disparition */
/* Style Polaroid */
.polaroid {
	-webkit-transform: rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
}

/* Ruban défilant */
.ruban-contenu {
	display: inline-block;
	white-space: nowrap;
	will-change: transform;
}

/* Modal d'agradissement du portrait animal */
.lightbox .modal-dialog,
.lightbox .modal-content,
.lightbox .modal-body {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.lightbox .modal-dialog {
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.lightbox .modal-image {
	max-width: calc(100vw - 2rem);
	max-height: calc(100vh - 2rem);
	object-fit: contain;
}

/* Pinned note */
.quote-container {
	position: relative;
	margin-top: -70px;
	margin-right: 25px;
}
.note {
	color: #414141;
	position: relative;
	width: 80vw;
	max-width:350px;
	min-height: 200px;
	padding: 20px;
	font-family: Caveat;
	font-size: 20px;
	box-shadow: 0em 0.2rem 0.5rem 0em rgba(0,0,0,0.15);
	background: repeating-linear-gradient(transparent 0 calc(1.2rem - 1px), #eecfd7 0 1.2rem);
	background-color: #f6f6f6;
	-webkit-transform: rotate(5deg);
	-moz-transform: rotate(5deg);
	-o-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
	transform: rotate(5deg);
}
.pin {
	background-color: #aaa;
	display: block;
	height: 32px;
	width: 2px;
	position: absolute;
	right: 50px;
	top: -16px;
	z-index: 1;
}
.pin:after {
	background-color: #A31;
	background-image: radial-gradient(25% 25%, circle, hsla(0,0%,100%,.3), hsla(0,0%,0%,.3));
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1), inset 3px 3px 3px hsla(0,0%,100%,.2), inset -3px -3px 3px hsla(0,0%,0%,.2), 23px 20px 3px hsla(0,0%,0%,.15);
	content: '';
	height: 12px;
	left: -5px;
	position: absolute;
	top: -10px;
	width: 12px;
}
.pin:before {
	background-color: hsla(0,0%,0%,0.1);
	box-shadow: 0 0 .25em hsla(0,0%,0%,.1);
	content: '';

	height: 24px;
	width: 2px;
	left: 0;
	position: absolute;
	top: 8px;

	transform: rotate(57.5deg);
	-moz-transform: rotate(57.5deg);
	-webkit-transform: rotate(57.5deg);
	-o-transform: rotate(57.5deg);
	-ms-transform: rotate(57.5deg);

	transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
}

/* Footer block */
.border-left-bottom {
	border-top: 1px solid #dee2e6;
}
.border-left-bottom:first-child {
	border-top: none;
	border-left: none;
}
@media (min-width: 720px) {
	.border-left-bottom {
		border-top: 0;
		border-left: 1px solid #dee2e6;
	}
}

/* Web */
.dropdown:hover > .dropdown-menu {
	display: block;
}
.curved-edge-bottom {
	--c: 90px; /* control the curvature (works with percentage) */
	mask: radial-gradient(60% var(--c) at bottom, #0000 calc(100% - 2px), #000);
}
.curved-edge-top {
	height: 60px;
	background: #fff;
	clip-path: ellipse(55% 100% at top)
}
.logo-banner {
	background: url("../img/bg-logo-left.png") left bottom no-repeat;
}
.sticky-menu {
	position: sticky;
	top: 100px;
	z-index: 2;
}
.anchor {
    display: block;
    position: relative;
    top: -130px;
    visibility: hidden;
}
.img-responsive {
    max-height: calc(100vh - 60px);
}
.decor-bg {
	position: absolute;
	z-index: -1;
	bottom: 8%;
	left: 10%;
}