:root
{
	
	--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	
	--sans-serif: 'Nunito Sans', var(--font-sans), arial, sans-serif;
	--serif: 'Poppins', cursive;
	
	--color-text: #313131;
	
	--color-primary: #2563eb;
	
	--color-white: #fff;
	
	--color-gray-50: oklch(98.5% .002 247.839);
	--color-gray-100: oklch(96.7% 0.003 264.542);
	--color-gray-200: oklch(.928 .006 264.531);
	--color-gray-500: oklch(55.1% 0.027 264.364);
	--color-gray-600: oklch(44.6% 0.03 256.802);
	--color-gray-700: oklch(37.3% 0.034 259.733);
	--color-gray-800: oklch(27.8% 0.033 256.848);
	--color-gray-900: oklch(21% 0.034 264.665);
	
	--color-purple-200: oklch(90.2% 0.063 306.703);
	--color-purple-300: oklch(82.7% 0.119 306.383);
	--color-purple-600: oklch(55.8% .288 302.321);
	--color-purple-700: oklch(49.6% 0.265 301.924);
	--color-purple-800: oklch(43.5% 0.24 301.5);
	
	--color-red-600: oklch(57.7% .245 27.325);
	
	--color-purple-50: oklch(97.7% 0.014 308.299);
	--color-pink-50: oklch(97.1% 0.014 343.198);
	
	--color-blue-100: oklch(93.2% 0.032 255.585);
	--color-blue-500: oklch(62.3% 0.214 259.815);
	--color-blue-600: oklch(0.546 0.245 262.881);
	--color-blue-700: oklch(48.8% 0.243 264.376);
    --color-blue-900: oklch(37.9% 0.146 265.522);
	
	--color-green-500: oklch(72.5% 0.186 149.6);
	--color-green-600: oklch(63% 0.19 149.6);
	--color-green-700: oklch(52% 0.17 149.6);
	--color-green-800: oklch(44.8% .119 151.328);
	--color-green-900: oklch(38% 0.11 149.6);
	
	--color-teal-700: oklch(51.1% .096 186.391);
    --color-teal-800: oklch(43.7% .078 188.216);
	
	--color-cyan-500: oklch(71.5% .143 215.221);
	
	--background-light: rgba(0,0,0,0.08);
	
	/* 🌅 Lever de soleil – jaune pastel */
	--sunrise-start: #fbf6e8;
	--sunrise-end:   #f6e1b5;

	/* 🍽️ Midi – jaune → vert très doux */
	--lunch-start:   #f6e1b5;
	--lunch-end:     #d9e7d1;

	/* 🌤️ Après-midi – vert → rosé minéral */
	--afternoon-start: #d9e7d1;
	--afternoon-end:   #bfe2e4;

	/* 🍷 Dîner – rosé → bleu ardoise */
	--dinner-start:  #bfe2e4;
	--dinner-end:    #7b879d;

	/* 🌙 Nuit – bleu ardoise → noir doux */
	--night-start:   #7b879d;
	--night-end:     #1f2430;
	
	--foreground: oklch(0.145 0 0);
	
	--spacing: 0.25rem;
	--spacing: 0.45rem;
	--border: rgba(0,0,0,0.1);
	--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --button-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--button-hover-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--button-shadow-light: 0 2px 8px -3px rgb(0 0 0 / 0.1), 0 2px 4px -4px rgb(0 0 0 / 0.1);
	--panel-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.websheet {
	
  --dvh-padding: calc(100vh - 100dvh);
  --websheet-max-height: 90vh;
  --websheet-image-height: 180px;
  --websheet-image-height-expanded: 280px;
  --details-offset: var(--websheet-image-height);
}

html{ 
   font-size: 62.5%;
}
body{
   font-family: var(--sans-serif);
   font-size: 1.6rem;
   font-weight: 400;
   line-height: 1.3;
   color: var(--color-text);
   overflow-x: hidden;
   
   -webkit-tap-highlight-color:transparent;
   -webkit-tap-highlight-color:rgba(255,255,255,0);

	background: #f9fafb;
}
body,html{
	max-width:100vw;
	min-height:100vh
}

::-moz-selection {
	
	background: transparent;
	text-shadow:none
}
::selection {
	
	background: transparent;
	text-shadow:none
}
input::-moz-selection {
	background: rgba(167, 192, 247, 0.55);
  color: #1a1d56;
	text-shadow:none
}
input::selection {
	background: rgba(167, 192, 247, 0.55);
  color: #1a1d56;
	text-shadow:none
}
button:focus-visible, 
[type="button"]:focus-visible, 
[type="reset"]:focus-visible, 
[type="submit"]:focus-visible {
  outline: 0!important;
}

textarea:focus, input:focus{
	outline: none;
}

body.no-scroll {
  overflow: hidden;
}

/** HEADER */

body > header{
	width: 100%;
	background: var(--color-white);
	box-shadow: var(--shadow);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-block: 1rem;
	padding-inline: 1.5rem;
	padding-block: 1rem;
	padding-inline: 1.8rem;
	border: solid 1px;
	border-color: var(--color-gray-200);
	z-index: 50;
	
	top: 0;
	position: sticky;
	
	min-height: 76px;
    padding-bottom: 0;
    padding-top: 0;
}


.btn-primary {
  font-size: 1.6rem;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 120ms ease, opacity 120ms ease;
}

.btn-primary.is-pressed {
  transform: scale(0.96) translateY(1px);
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.12);
  opacity: 0;
}

.moment .btn-primary{}

.moment .btn-primary.is-compact {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  /* optionnel */
  font-size: 0;
  
  margin: 0 auto;
  margin-top: 0px;
  margin-top: -16px;
  z-index: 1;
  position: relative;
  opacity: 0.9;
  
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  
}

body.on-load .moment .btn-primary,
body.on-load .moment p.label {
	transition: none!important;
}

.moment .btn-primary.is-compact::before {
  font-size: 18px;
}

.moment .btn-primary.is-compact:hover {
	box-shadow: var(--button-hover-shadow);
	scale: 105% 105%;
	opacity: 1;
	z-index: 4;
}
.moment .btn-primary.is-compact:hover::before {
  font-size: 19px;
}

.icon{
	
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
	
}

header h3.icon,
.sheet-header .category-title.icon,
.modal-panel h3 .icon
{
  gap: 0.55em;
}

.icon::before {
  content: "";
  width: 1em;
  height: 1em;
  display: inline-block;

  background-color: currentColor;

  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;

  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.icon::before {
  width: 1.1em;
  height: 1.1em;
}
.icon.plus::before {
	width: 1.2em;
	height: 1.2em;
}


.categories-panel .icon::before {
  content: "";
  min-width: 1.1em;
  min-height: 1.1em;
  display: block;

  background-color: currentColor;

  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;

  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.day{
	padding-bottom: calc(var(--spacing) * 4);
	padding-top: calc(var(--spacing) * 4);
}
.day > div{
	max-width: 540px;
	max-width: 416px;
	margin: 0 auto;
	
	max-width: 452px;
	padding-inline: calc(var(--spacing) * 4);
}

.moment {
  position: relative;
  padding: 56px 20px;
  /**min-height: 220px;*/
  overflow: hidden;
  
  border-radius: 1.5rem;
  margin-bottom: 12px;
  
  padding: calc(var(--spacing) * 5);
  box-shadow: var(--shadow);
  
  
}

.moment.morning,
.icon.morning::before {
  background: linear-gradient(160deg, #fff59a 0%, #ffcf66 85%);
}
.moment.lunch,
.icon.lunch::before {
  background: linear-gradient(200deg, #ffcf66 0%, #ff9a4a 100%);
}
.moment.afternoon,
.icon.afternoon::before {
  background: linear-gradient(160deg, #6fd3ff 0%, #d6f3ff 100%);
}
.moment.dinner,
.icon.dinner::before {
  background: linear-gradient(200deg, #d6f3ff 0%, #6b8fd6 100%);
  color: #1f1f1f;
}
.moment.night,
.icon.night::before {
  background: linear-gradient(170deg, #6b8fd6 0%, #1f2430 100%);
  color: #f3f4f6;
}

.morning   h2.icon::before { color: #fa0; }
.lunch     h2.icon::before { color: #e86a00; }
.afternoon h2.icon::before { color: #2f9ccf; }
.dinner    h2.icon::before { color: #4b6fb8; }
.night     h2.icon::before { color: #9fb6ff; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='1'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  z-index: 999;
}

body > header button.home {
  position: absolute;
  left: 16px;
}
 body > header button.home:active {
  transform: scale(1.1);
}

body > header > div{
	margin-left: 52px;
	display: flex;
	flex-direction: column;
	min-height: 54px;
	justify-content: center;
}

#dayTitle {
	font-family: 'Caveat', cursive;
	color: var(--color-gray-900);
	font-weight: 500;
	font-size: 2.4rem;
	line-height: 1.25;
	line-height: 0.95;
	margin: 0.25rem 0 0.4rem 0;
	padding-right: calc(var(--spacing) * 1.45);
	cursor: default;
	transition: opacity 120ms ease, transform 120ms ease;
}
body > header.is-loading #dayTitle{
  opacity: 0;
  transform: scale(0);
}

body > header .day-trigger{
	margin-top: 0.2rem;
}

body > header .location-trigger{
	cursor: pointer;
	border-radius: calc(infinity * 1px);
	background: #fefefe;
	box-shadow: var(--shadow);
}
body.screen-scroll > header .location-trigger,
body > header .location-trigger:active{
	background: rgba(248, 250, 252, 0.9);
	box-shadow: none;
}
body.screen-scroll > header .location-trigger:hover{
	background: #fefefe;
	box-shadow: var(--shadow);
}
body > header .location-trigger:active{
	background: rgba(248, 250, 252, 0.9);
	box-shadow: none;
	transform: scale(0.98);
}

.location-trigger strong {
  font-weight: 500;
}

body > header p.location{
	color: var(--color-gray-600);
	font-size: 1.35rem;
	display: flex;
	/**
	margin-top: 0.3rem;
	position: relative;
	top: 0.1rem;
	*/
	padding: 0.4rem;
	padding-right: 0.8rem;	
	gap: 0.45em;
	transition: opacity 600ms ease;
}

body > header.is-loading p.location{
  opacity: 0;
}

body > header p.location span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: calc(100vw - 164px);
  
}

body > header p.location span strong{ 	
  font-weight: 400;
}
body > header p.location span small{ 	
  font-size: 95%;
}

body > header p.location.icon::before {
	width: 1em;
	height: 1em;
}
body > header .btn-outline{
	color: var(--color-purple-700);
	background-image: linear-gradient(to right in oklab, var(--color-purple-50) 0%, var(--color-pink-50) 100%);
	padding-block: 0.75rem;
	padding-inline: 1.25rem;
	border: solid 1px;
	border-color: var(--color-purple-200);
	font-size: 1.45rem;
	white-space: nowrap;
	border-radius: 0.625rem;
	font-weight: 300;
	transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
	cursor: default;
}

body > header .btn-outline:hover{
	border-color: var(--color-purple-300);
}

.moment h2 {
  margin: 0 0 6px;
  font-size: 2rem;
  font-family: Poppins;
  color: rgb(17, 25, 42);
  font-weight: 500;
}
.moment.night h2 {
	color: #f3f4f6;
}
.moment p.label {
  margin: 0 0 16px;
  max-width: 560px;
  font-size: 1.45rem;
  font-weight: 300;
  padding-left: 35px;
  padding-left: 2px;
  transition: opacity 200ms ease;
  letter-spacing: -0.01em;
}
.moment p.label.hidden {
	display: none!important;
}

.moment button:not(.back-button,.drag-handle) {
  background: rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: none;
  border-radius: 16px;
  padding: 14px 18px;
  font-size: 15px;
  width: 100%;
  display: inline-flex;       
  align-items: center;         
  justify-content: center; 
  background: rgba(255,255,255,.7);
  color: var(--color-gray-800);
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 120ms ease, opacity 120ms ease;
}
.moment button:not(.back-button,.drag-handle):hover {
	background: rgba(255,255,255,0.8);
}

.night button:not(.back-button,.drag-handle), .evening button:not(.back-button,.drag-handle) {
  background: rgba(0,0,0,.4);
  color: var(--color-white);  
}
.moment.night button:not(.back-button,.remove-item):hover {
	background: rgba(158, 181, 254, 0.3);
	
	background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 12px rgba(140, 180, 255, 0.15);
	
	background: rgba(105, 139, 208, 0.35);
	background: linear-gradient( to top, rgb(105 139 208 / 0.45) 60%, rgb(105 139 208 / 0.3) );
	
	background: linear-gradient( to bottom, rgba(105, 139, 208, 0.3) 80%, rgba(105, 139, 208, 0.25) );
    box-shadow: none;
}

.moment.night .btn-primary.is-compact{
	background: rgba(105, 139, 208, 0.45);
}
.moment.night .btn-primary.is-compact:hover{
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 12px rgba(140, 180, 255, 0.15);	
	background: rgb(26, 33, 47);
	background: rgb(105, 139, 208);
	background: rgb(87, 115, 171);
}
.categories-panel, .restaurant-categories-panel{
	position: relative;
}
.categories-panel .categories-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.category-card {
  background: rgba(255,255,255,0.88);
  border-radius: 14px;
  padding: 12px 12px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  cursor: pointer;

  min-width: 106px;
  min-width: 108px;
  
  opacity: 0;
  transform: scale(0.92);
  animation: zoomIn 260ms cubic-bezier(.2,.8,.2,1) forwards;
}

.moment.night .category-card {
	background: rgba(158, 181, 254, 0.38);
	color: #f4fcfd;
	
	background: rgba(158, 181, 254, 0.24);
    color: #f3f4f6;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12);
	
	background: rgba(105, 139, 208, 0.45);
	color: #f3fafc;
}

/* Effet stagger naturel */
.category-card:nth-child(1) { animation-delay: 40ms; }
.category-card:nth-child(2) { animation-delay: 80ms; }
.category-card:nth-child(3) { animation-delay: 120ms; }
.category-card:nth-child(4) { animation-delay: 160ms; }
.category-card:nth-child(5) { animation-delay: 200ms; }
.category-card:nth-child(6) { animation-delay: 240ms; }

@keyframes zoomIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.category-card:hover {
  box-shadow:
    0 12px 28px rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.92);
}

.moment.night .category-card:hover {
	background: rgba(158, 181, 254, 0.42);
	background: rgba(158, 181, 254, 0.28);
	
	background: rgba(105, 139, 208, 0.5);
	background: rgb(87, 115, 171);
}

.category-card .icon {
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  width: 36px;
  height: 36px;
  margin: 0 auto 8px;
  background: #f3f4f6;
  border-radius: 50%;

  background: rgba(0,0,0,0.04);
  color: #1f2937;
}

.moment.night .category-card .icon {
	background: rgba(81, 106, 156, 0.45);
	color: #f4fcfd;
}

.category-card span {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  min-height: 24px;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

.restaurant-categories-panel .categories-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.moment button.restaurant-category {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;

  background: rgba(255,255,255,0.88);
  border-radius: 14px;
  padding: 10px 12px;

  border: none;
  width: 100%;
  text-align: left;

  box-shadow: 0 6px 18px rgba(0,0,0,0.05);

  font-size: 15px;
  font-weight: 400;

  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  animation: slideIn 460ms cubic-bezier(0.22, 1, 0.36, 1) forwards;  
}

.moment button.restaurant-category:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

.moment button.restaurant-category:nth-child(1) { animation-delay: 40ms; }
.moment button.restaurant-category:nth-child(2) { animation-delay: 80ms; }
.moment button.restaurant-category:nth-child(3) { animation-delay: 120ms; }
.moment button.restaurant-category:nth-child(4) { animation-delay: 160ms; }
.moment button.restaurant-category:nth-child(5) { animation-delay: 200ms; }
.moment button.restaurant-category:nth-child(6) { animation-delay: 240ms; }

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.restaurant-category .icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,120,60,0.12);
  color: #ff6a2b;

  display: flex;
  align-items: center;
  justify-content: center;
  
  background: rgba(0,0,0,0.04);
  color: #e86a00;
}

.moment.dinner .restaurant-category .icon {
  color: #4b6fb8;	
}


.moment button.back-button {
  background: none;
  border: none;
  color: #1f2937;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-bottom: 0;
  margin-left: 12px;
  position: absolute;
  border-radius: 6px;
  padding: 6px 12px;
  top: -47px;
  right: 6px;
  transform: translateX(0);
  color: #3c3b38;
  opacity: 0.9;
  transition: gap 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.moment button.back-button:hover {
  opacity: 1;
  gap: 8px;
  /**background-color: color-mix(in oklab, var(--color-white) 40%, transparent);*/
  
}
.moment.night button.back-button {
	color: #cfd6ed;
}

header .flex{
	gap: 0.4rem;
	margin-right: 10px;
	align-items: flex-start;
	align-items: center;
	justify-content: space-around;
}	
header .flex button,
header.flex button{
	padding: calc(var(--spacing) * 1.45);
	color: var(--color-gray-600);
	border-radius: 50%;
	font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.5;
	transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
header .flex button:hover,
header.flex button:hover{
	background-color: var(--color-gray-100);
	
}

/** Entity Cards */

.entity-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /**height: 78vh;*/
  background: var(--color-white);
  border-radius: 18px 0 0 0;
  box-shadow: 0 -12px 32px rgba(0,0,0,.18);
  
  display: flex;
  flex-direction: column;
  
  max-height: 90vh;
  overflow: hidden;
  
  transform: translateY(100%);
  transition: transform 420ms cubic-bezier(.22,1.2,.36,1);
  z-index: 1000;
  
  padding-bottom: calc(var(--spacing) * 4);	
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: calc(0px + env(safe-area-inset-bottom, 0px));
  
  will-change: transform;

  touch-action: none;
  overscroll-behavior: contain;
  
}
.entity-sheet.is-single {
	border-radius: 18px 18px 0 0;
}
.entity-sheet.is-visible {
  transform: translateY(0);
}

.entity-sheet.is-dragging,
.navigation-sheet.is-dragging,
.websheet.is-dragging,
.actionsheet.is-dragging {
  transition: none !important;
  cursor: grabbing;
}

.entity-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 999;
}

.entity-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
  transition: none;
}

.sheet-touch {
  touch-action: none;
}

.sheet-header {
  flex-shrink: 0;
  padding: 16px;
  
  padding: calc(var(--spacing) * 4);
  padding-bottom: calc(var(--spacing) * 2);
  padding-top: calc(var(--spacing) * 2.5);
  
  border-bottom: 1px solid;
  border-color: var(--color-gray-200);
  background: var(--color-white);
  z-index: 1;
  
  justify-content: space-between;
  align-items: center;
  
}

.sheet-handle {
  width: 42px;
  height: 4px;
  background: #d1d5db;
  border-radius: 2px;
  margin: 8px auto;
}

.entity-sheet .sheet-handle {
	opacity: 0.6;
	transition: opacity 180ms ease;
}
.entity-sheet.has-info .sheet-handle {
	opacity: 1;
}
.entity-sheet:not(.has-info) .sheet-handle {
  aria-hidden: true;
}


.sheet-header .category-title,
.navigation-header .category-title,
.websheet-header .category-title{
  font-size: 1.75rem;
  font-family: Poppins;
  color: rgb(17, 25, 42);
  font-weight: 500;
	
}
.navigation-header .category-title{
  font-family: 'Caveat', cursive;
  font-size: 2.4rem;
  font-weight: 400;
}

.websheet-header .category-title.info{
  line-height: 1.25;
  align-items: flex-start;
  cursor: pointer;
}
.websheet-header .category-title.info:before{
  width: 1.1em;
  height: 1.1em;
  background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 90%, transparent);
  background-color: color-mix(in oklab, var(--color-blue-500) 90%, transparent);
  margin-top: 1px;
}

.navigation-header .category-title.navigation:before{
  width: 0.8em;
  height: 0.8em;
  color: var(--color-primary);
  margin-top: 1px;
}


.sheet-body {
  margin-bottom: calc(var(--spacing) * 4);
  margin-top: calc(var(--spacing) * 4);
  margin-left: calc(var(--spacing) * 4);
  margin-right: calc(var(--spacing) * 4);  
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;

  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);

}

.entity-card {
  position: relative;
  height: 360px;
  border-radius: 18px;
  overflow: hidden;
}

.swiper-slide.is-highlighted .entity-card {
  box-shadow: 0 0 0 2px rgba(255,255,255,.6);
}

.swiper-slide.is-hidden,
.entity-sheet.is-hidden {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 200ms ease, transform 220ms ease;
}


.entity-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 300ms ease;
  z-index: 2;
}

.entity-image.is-loaded {
  opacity: 1;
}

.entity-image {
  filter: blur(12px);
}
.entity-image.is-loaded {
  filter: blur(0);
}

.entity-image.is-loaded + .entity-overlay ~ .skeleton,
.entity-image.is-loaded ~ .skeleton {
  display: none;
}

.skeleton {
  position: absolute;
  inset: 0;
  background: linear-gradient( 120deg, #fff 25%, #fbfbfb 37%, #fff 63% );
  background-size: 400% 100%;
  animation: shimmer 1.6s linear infinite;
  z-index: 1;
  
  background: linear-gradient(90deg, transparent, #f1f3f7, transparent);
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

.image-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #f7f9fa;
  overflow: hidden;
  border-radius: inherit;
  z-index: 1;
}

.image-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    #fff,
    transparent
  );
  transform: translateX(-100%);
  animation: placeholder-shimmer 1.6s ease-in-out infinite;
}

@keyframes placeholder-shimmer {
  to {
    transform: translateX(100%);
  }
}

.image-loader {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.08);
  border-top-color: rgba(0,0,0,0.35);
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.entity-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.75) 0%,
    rgba(0,0,0,.15) 60%,
    transparent 100%
  );
  background: linear-gradient( to top, rgba(0, 0, 0, 0.7) 0%, rgba(0,0,0,.15) 70%, transparent 100% );
  color: var(--color-white);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 3;
  
  background: linear-gradient( to top, rgb(0, 0, 0, 1) 0%, rgba(0,0,0,0.25) 70%, transparent 100% );
  background: linear-gradient(
    to top,
    rgba(0,0,0,.75) 0%,
    rgba(0,0,0,.15) 60%,
    transparent 100%
  );
  
  background: linear-gradient( to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,.15) 70%, transparent 100% );
  background: linear-gradient( to top, rgb(0, 0, 0, 1) 0%, rgba(0,0,0,0.25) 70%, transparent 100% );
  background: transparent;
}
.entity-overlay.image-loaded {
  background: linear-gradient(
    to top,
    rgba(0,0,0,.75) 0%,
    rgba(0,0,0,.15) 60%,
    transparent 100%
  );

  background: linear-gradient( to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,.25) 60%, transparent 100% );

}
.entity-overlay:not(.image-loaded) .item-title,
.entity-overlay:not(.image-loaded) .subtitle{
	display: none;
}

.entity-swiper{
  
}

.entity-sheet.is-single .entity-swiper{
  padding-left: 0;
  padding-right: 0;
}

.entity-swiper .swiper-wrapper {
  align-items: center;
}

.entity-card .item-title{
  line-height: 1.5;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: calc(var(--spacing) * 1.75);
  font-family: Poppins;
}
.entity-card .subtitle{
	font-size: 14px;
    line-height: 20px;
	overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
	margin-bottom: calc(var(--spacing) * 2.5);
}

.entity-card .meta{
  display: flex;
  gap: 12px;
  font-size: 13px;
}

.entity-card .subtitle, .entity-card .meta{
	color: color-mix(in srgb, var(--color-white) 90%, transparent);
}

.entity-card .meta span{
	font-size: 14px;
    line-height: 20px;
}
.entity-card .meta span.goto{
	cursor: pointer;
}
.meta-row > .icon.goto{
	cursor: pointer;
}

.entity-card .meta button{

	display: flex;
	align-items: center;
	margin-left: auto;
	margin-bottom: 2px;

	gap: calc(var(--spacing) * 1.5);
	border-radius: calc(infinity * 1px);	

	background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 90%, transparent);
	background-color: color-mix(in oklab, var(--color-blue-500) 90%, transparent);

	padding-block: calc(var(--spacing) * 1.6);
    padding-inline: calc(var(--spacing) * 2.5);

	padding-block: calc(var(--spacing) * 1.5);
	padding-inline: calc(var(--spacing) * 2.35);
	padding-inline: calc(var(--spacing) * 2.1);
	line-height: calc(1.1 / 0.875);
    
    font-size: 1.4rem;
	font-weight: 500;

	color: var(--color-white);
    box-shadow: var(--button-shadow);
    -webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    
	cursor: default;
}

.entity-card.is_added .meta button{
	background-color: transparent;
}
.entity-card .meta button:hover{
	background-color: color-mix(in srgb, oklch(0.546 0.245 262.881) 90%, transparent);
	background-color: color-mix(in oklab, var(--color-blue-600) 90%, transparent);
}

.entity-card .meta button:active{
  transform: scale(0.95);
}

.entity-card .meta button.icon::before {
  width: 1.15em;
  height: 1.15em;
}

.entity-card .meta button span{
	line-height: calc(1.1 / 0.875);	
	position: relative;
	font-family: var(--font-sans);
	top: -1px;
	left: -1px;
}

.entity-card .price {
  position: absolute;
  top: calc(var(--spacing) * 3);
  right: calc(var(--spacing) * 3);
  top: 12px;
  right: 12px;
  background: var(--color-white);
  color: var(--color-gray-800);
  
  opacity: 0.85;
  transform: scale(0.9);
  
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1rem;
  border-radius: calc(infinity * 1px);
  
  padding-block: calc(var(--spacing) * 1.5);
  padding-inline: calc(var(--spacing) * 3);
  
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  
  
  box-shadow: var(--button-shadow);
  background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
  background-color: color-mix(in srgb, #fff 95%, transparent);

  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  cursor: default; 
}
.entity-card .price.free{
	letter-spacing: 0rem;
	font-size: 1.35rem;
}

.entity-card .actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  justify-content: flex-end;
}

.entity-card .btn {
  background: var(--color-white);
  color: var(--color-gray-900);  
  
  box-shadow: var(--button-shadow);
  border-radius: 14px;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding-block: calc(var(--spacing) * 3);
 
  
}
.entity-card .btn:hover {
  background-color: var(--color-gray-100);
}
.entity-card .btn:active{
  transform: scale(0.97);
}

.entity-card .btn.btn-dark {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--color-white);
  background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
  background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
  border: solid 1px;
  border-color: color-mix(in srgb, var(--color-white) 20%, transparent);
  border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
  
}
.entity-card .btn.btn-dark.minimize{
	max-width: 48px;
}
.entity-card .btn.btn-dark:hover {
	background-color: color-mix(in srgb, oklch(0.278 0.033 256.848) 70%, transparent);
	background-color: color-mix(in oklab, var(--color-gray-800) 70%, transparent);
	color: var(--color-white);
}

.entity-card .btn.btn-dark.reservation{
	backdrop-filter: none;
	background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 70%, rgba(0,0,0,0.4));
	background-color: color-mix(in oklab, var(--color-gray-800) 70%, rgba(0,0,0,0.4));
	
}
.entity-card .btn.btn-dark.reservation:hover{
	background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 70%, transparent);
    background-color: color-mix(in oklab, var(--color-gray-800) 70%, transparent);
}
.entity-card .btn.btn-dark.reservation .icon::before{
	color: #cc2e96;
}
.entity-card .btn.btn-dark.reservation .icon.calendar-check::before {
    margin-top: -2px;
}
.entity-card .btn.btn-dark.reservation .icon.calendar-check em{
	font-style: normal;
	font-size: 95%;
}

.entity-card .btn.is-added{
	opacity: 0.9;
    cursor: default;
}
.entity-card .btn.is-added::before{
	color: var(--color-success, #2ecc71);	
}

.entity-card .btn.btn-red{
	max-width: 47px;
    background: #cc2e2e;
}
.entity-card .btn.btn-red .icon{
	color: var(--color-white);
	font-size: 17px;
}

.entity-card .btn.is-compact{
	max-width: 47px;
}
.entity-card .btn.is-compact span{
	display: none;
}
.entity-card .btn.is-added.is-compact{
	background: #fbfffd;
}

.entity-card .btn.btn-nav{
	background-color: color-mix(in oklab, var(--color-green-500) 90%, transparent);
	color: var(--color-white);
}
.entity-card .btn.btn-nav:hover{
	background-color: color-mix(in oklab, var(--color-green-600) 90%, transparent);
}

/** Moment Card */

.moment-items{
	margin-top: 10px;
	z-index: 2;
    position: relative;
}

.moment-item-card {
  display: flex;
  align-items: center;
  gap: 0px;
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: var(--panel-shadow);
  
  border-bottom: 1px solid;
  border-color: var(--color-gray-200); 
 
  margin-bottom: 10px;

  max-height: 96px;
  padding-right: 45px;
  
  opacity: 0;
  transform: translateY(6px);
  transition: 200ms ease;
  transition: transform 200ms ease, opacity 200ms ease;
  
  will-change: transform;
  
  padding-right: 10px;
  position: relative;
  border-bottom: 0;
  
  touch-action: manipulation;
}

.moment-item-card.is-loading{
	pointer-events: none;
    filter: blur(0.4px);
}
.moment-item-card.is-visible.is-loading{
	opacity: 0.4;
}

.img-wrapper {
  position: relative;
  width: 96px;
  height: 96px;
  max-height: 96px;
  /*
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  */
  overflow: hidden;
  flex-shrink: 0;
}
.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.moment-item-card:not(.is-loading) img {
  opacity: 1;
}

.moment-item-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.moment-item-card.is-removing {
  opacity: 0;
  transform: scale(0.96);
  transition: 200ms ease;
}

.moment-item-card img {
  object-fit: cover;
  width: 96px;
  height: 96px;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}

.moment-item-card .content {
  flex: 1;
  padding: calc(var(--spacing) * 2.6);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 96px;
  overflow: hidden;
  cursor: default;
  padding-right: 0;
}

.moment-item-card h4 {
  font-family: Poppins;
  color: var(--color-gray-900);
  font-weight: 500;
  margin-bottom: 4px;
  margin-bottom: 0px;
  font-size: 15px;
  line-height: 1.2;
  padding-right: 35px;  
}
.moment-item-card[data-type="activity"] h4 {
  position: relative;
  top: -1px;
}
.moment-item-card .description {
	font-family: var(--font-sans);
	color: var(--color-gray-600);
	font-size: 12px;
	line-height: 1.2;
	margin-bottom: 2px;
	text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
	min-height: 15px;
	cursor: default;
}
.meta-row {
  display: flex;
  gap: 12px;  
}
.meta-row span{
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-gray-500);
  white-space: nowrap;  
}
.meta-row span.price span{
  color: var(--color-gray-800);
  font-family: var(--font-sans);
}

.meta-row > .icon{
  margin-right: 12px;
  flex-shrink: 1;
  min-width: 0;
}
.meta-row > .icon::before {
  min-width: 0.9em;
}
@media (max-width: 380px) {
	.meta-row > .icon{
		margin-right: 7px;
	}
	.meta-row > .icon::before {
	    min-width: 0;
    }
}


.moment-item-card.reservation h4{
	padding-right: 45px;
}
.moment-item-card.reservation .description{
	padding-right: 55px;
}

.meta-row span.reservation{
  
  box-shadow: var(--button-shadow);
  border-radius: 12px;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: calc(var(--spacing) * 3);
  max-width: 44px;
  height: 44px;
  margin-left: auto;
  position: absolute;
  width: 44px;
  right: 5px;
  top: 45px;
  backdrop-filter: none;
  
  background-color: #fbf1f8;
  border: solid 1px #e9d4fd;
  
  background-image: linear-gradient(to right in oklab, var(--color-purple-50) 0%, var(--color-pink-50) 100%);
  border: solid 1px;
  border-color: var(--color-purple-200);
  
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  
  transition: border-color 200ms ease, transform 200ms ease;
  
}
.meta-row span.reservation:hover{
	border-color: var(--color-purple-300);
	transform: scale(1.05);
	box-shadow: var(--button-hover-shadow);
	
	
}

.meta-row span.reservation span{
	gap: 7px;
	font-size: 13px;
	transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.meta-row span.reservation:hover span{
	font-size: 14px;
}
.meta-row span.reservation .icon::before{
	color: #cc2e96;
}
.meta-row span.reservation .icon strong{
  color: var(--color-gray-800);
  font-family: var(--font-sans);
  font-weight: 600;
  display: none;
}

.meta-row span.reservation{
  background: linear-gradient(180deg, #22c55e, #16a34a);
  border-radius: calc(infinity * 1px);
  border: 0pt none;
  
  background: #cc2e96;
  
}
.meta-row span.reservation .icon::before{
	color: var(--color-white);
}
.meta-row span.reservation:hover{
  filter: brightness(1.05);	
}

.meta-row span.reserved{
	margin-left: auto;
    margin-right: 9px;
	position: relative;
    z-index: 7;
}
.meta-row span.reserved span.icon{
  color: #cc2e96;
  gap: 4px;
  font-family: var(--font-sans);
}
.meta-row span.reserved span.icon::before{
  width: 1.2em;
  height: 1.2em;
}
.meta-row span.reserved span.icon strong{
  font-weight: 600;
  color: var(--color-gray-600);
}



.moment button.remove-item,
body.is-dragging-item .remove-item {
  
  position: absolute;
  right: calc(var(--spacing) * 1.5);
  top: calc(var(--spacing) * 1.5);
  background: transparent;
  border: none;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow);
  border-radius: calc(infinity * 1px);
  padding: calc(var(--spacing) * 1.25);
  
  background-color: color-mix(in srgb, #fff 90%, transparent);
  background-color: color-mix(in oklab, var(--color-white) 90%, transparent);
  
  color: var(--color-gray-600);
  width: auto;
  transform: scale(0.95);
  transform: scale(0.85);
}

/* skeleton image */

.img-skeleton{
	display: none;
}

.is-loading .img-skeleton {
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #eee 25%,
    #e0e0e0 50%,
    #eee 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}

.moment-item-card h4,
.moment-item-card .description,
.moment-item-card .meta-row,
.moment button.remove-item{	
	opacity: 1;
	transition: opacity 600ms ease;
}
.moment-item-card.is-loading h4,
.moment-item-card.is-loading .description,
.moment-item-card.is-loading .meta-row,
.moment.is-loading button.remove-item{	
	opacity: 0;
}

@keyframes shimmer {
  0% {
    background: #eee;
	background: rgba(0,0,0,0.08);
  }
  50% {
    background: #e0e0e0;
	background: rgba(0,0,0,0.02);
  }
  100% {
    background: #eee;
	background: rgba(0,0,0,0.08);
  }
}

/** Calendar */

.day {
  transition: opacity 200ms ease, transform 200ms ease;
}

.day.is-transitioning {
  opacity: 0!important;
  transform: translateY(8px)!important;
}

.day.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.4);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.calendar-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.calendar-modal.hidden {
  display: none;
}

#calendarInput {
  display: none;
}

.calendar-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}


.calendar-panel {
  position: relative;
  max-width: 350px;
  margin: 10vh auto;
  background: var(--color-white);
  border-radius: 20px;
  padding: 20px 20px 16px;

  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.25);

  animation: calendarZoomIn 220ms cubic-bezier(.2,.8,.2,1);
}


.calendar-panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.calendar-panel header h3 {
  margin: 0;
  font-family: 'Caveat', cursive;
  font-size: 2.4rem;
  font-weight: 400;
  font-weight: 500;
  
}
.calendar-panel header h3.icon::before {
  width: 0.8em;
  height: 0.8em;
  color: var(--color-primary);
}

.calendar-panel .close-calendar {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.6;
  justify-content: center;
  position: relative;
  top: 0.1rem;
  border-radius: 50%;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.calendar-panel .close-calendar:hover {
  opacity: 1;
  background-color: var(--color-gray-100);
}

.btn-primary.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.moment p.label.empty {
  opacity: 0.7;
  font-style: italic;
}

.flatpickr-calendar {
  box-shadow: none !important;
  border: none !important;
  width: 100% !important;
}

.flatpickr-months {
  margin-bottom: 8px;
}

.flatpickr-current-month {
  padding: 5px;
}
.flatpickr-current-month input.cur-year{
	font-size: 90%;
}
.flatpickr-prev-month, .flatpickr-next-month{
	line-height: 12px;
}
.flatpickr-weekdays {
  margin-bottom: 6px;
}

.flatpickr-weekday {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
}



.flatpickr-day {
  font-size: 14px;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}

.flatpickr-day:hover {
  background: rgba(0, 0, 0, 0.05);
}

.flatpickr-day.today {
  border: 1px solid #3b82f6;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.calendar-panel footer {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.calendar-panel footer button {
  flex: 1;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}


.calendar-panel .btn-outline {
  background: #f3f4f6;
  color: #111827;
}

.calendar-panel .btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
}

@keyframes calendarZoomIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/** NavigationSheet */

.navigation-sheet{

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90vh;
  height: 90dvh;
  background: #fff;
  border-radius: 18px 18px 0 0;

  transform: translateY(100%);
  opacity: 0;
	
  transition:
    transform 420ms cubic-bezier(.22,1,.36,1),
    opacity 240ms ease;

  z-index: 1102;
  
  box-shadow: 0 -10px 30px rgba(0,0,0,.2);
  display: flex;
  flex-direction: column;

  touch-action: none;
  padding-bottom: calc(0px + env(safe-area-inset-bottom, 0px));
}
.navigation-sheet.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.navigation-sheet.is-closing {
  transform: translateY(100%);
  opacity: 0;
}

.navigation-sheet .navigation-handle {
  width: 42px;
  height: 4px;
  background: #d1d5db;
  border-radius: 2px;
  margin: 8px auto;
}

.navigation-sheet .navigation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  padding: calc(var(--spacing) * 4);
  padding-bottom: calc(var(--spacing) * 2);
  padding-top: calc(var(--spacing) * 2.5);
  border-bottom: 0;
  margin-bottom: 0;
  margin-bottom: 4px;
}

.navigation-sheet .navigation-header header.flex button{
	font-size: 1.7rem;
}
.navigation-sheet .navigation-header header.flex button::before{
	width: 1.25em;
	height: 1.25em;
}

.navigation-sheet .navigation-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.navigation-sheet .navigation-address{
  color: var(--color-gray-600);
  font-size: 1.4rem;
  line-height: 1.4;
  padding: calc(var(--spacing)*4);
  border-bottom: solid 1px;
  border-color: var(--color-gray-200);
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  display: flex;
  gap: 10px;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
  box-shadow: var(--button-shadow);
  box-shadow: var(--button-shadow-light);
  
}

.navigation-sheet .navigation-address b{
	color: var(--color-gray-800);
	white-space: nowrap;
	padding-left: 8px;
}

.navigation-sheet .navigation-address .address-display{
  display: inline-flex;
  gap: 10px;
  padding: 4px 8px;
  border-radius: 1rem;
  font-style: normal;
  font-size: 1.35rem;
}
.navigation-sheet .navigation-address .address-display b{
	color: var(--color-gray-600);
	font-weight: 600;
	padding-left: 2px;
	white-space: nowrap;
}

.navigation-sheet .navigation-address em{
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-gray-500);
  white-space: nowrap;
  font-style: normal;
  position: relative;
  top: 4px;
}
.navigation-sheet .navigation-address em.icon::before {
  width: 0.9em;
  height: 0.9em;
}
.navigation-sheet .navigation-apps{
  padding: calc(var(--spacing)*4);
}
.navigation-sheet .navigation-apps > strong{
  display: block;
  margin-bottom: 11px;
  font-family: 'Caveat', cursive;
  font-size: 2.3rem;
  font-weight: 400;
}


.navigation-sheet .navigation-apps > a{
  padding: calc(var(--spacing)*4);
  background-color: var(--color-gray-50);
  display: flex;
  border-radius: calc(1rem + 4px);
  gap: calc(var(--spacing)*4);
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
}

.navigation-sheet .navigation-apps > a:hover {
  background-color: var(--color-gray-100);
}

.navigation-app .icon{
  width: 48px;
  height: 48px;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  background-color: color-mix(in oklab, var(--color-green-600) 90%, transparent);
  color: #fff;
}
.navigation-app .icon::before{
  width: 1.25em;
  height: 1.25em;
}
.navigation-app .icon.google{
	background-color: var(--color-blue-500);
}
.navigation-app .icon.waze{
	background-color: var(--color-cyan-500);
}
.navigation-app .icon.apple{
	background-color: var(--color-gray-800);
}

.navigation-app .app-text strong{
  display: block;
  font-weight: 600;
  color: var(--color-gray-900);
  line-height: 1.5;
}
.navigation-app .app-text small{
  display: block;
  font-weight: 400;
  color: var(--color-gray-600);
  font-size: 14px;
  line-height: 1.4;
  
}

/** WebSheet */

.websheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90vh;
  background: #fff;
  border-radius: 18px 18px 0 0;

  transform: translateY(100%);
  opacity: 0;
	
  transition:
    transform 420ms cubic-bezier(.22,1,.36,1),
    opacity 240ms ease;

  z-index: 1101;
  
  box-shadow: 0 -10px 30px rgba(0,0,0,.2);
  display: flex;
  flex-direction: column;

  touch-action: none;
  padding-bottom: calc(0px + env(safe-area-inset-bottom, 0px));
}
.websheet.is-visible {
  transform: translateY(0);
  opacity: 1;
}
.websheet.is-closing {
  transform: translateY(100%);
  opacity: 0;
}

.websheet-handle {
  width: 42px;
  height: 4px;
  background: #d1d5db;
  border-radius: 2px;
  margin: 8px auto;
}

.websheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}

.websheet-header header.flex button{
	font-size: 1.7rem;
}
.websheet-header header.flex button::before{
	width: 1.25em;
	height: 1.25em;
}

.websheet-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.websheet-body.expand-image,
.websheet-body.expand{
	height: auto;
	transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.websheet-image{
    position: relative;
    overflow: hidden;
	will-change: max-height;	
	max-height: var(--websheet-image-height);
	cursor: zoom-in;
	transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.websheet-body.expand-image .websheet-image,
.websheet-body.expand .websheet-image {
  max-height: 80vh; /* plus fluide que none */
  cursor: zoom-out;
}
.websheet.hide-image .websheet-image {
	max-height: 0;
	transition: max-height 0.3s ease-in;
}

.image-zoom-indicator {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;

  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(15, 23, 42, 0.42);
  color: #fff;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);

  cursor: pointer;
  
  color: #e6e6e8;
  filter: brightness(1.2);
}


.websheet-image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.35s ease;
}
.websheet-body.expand-image .websheet-image img,
.websheet-body.expand .websheet-image img {
  transform: scale(1.05);
  transition: transform 0.35s ease;
  max-height: var(--websheet-image-height-expanded);
}

.websheet-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(105, 139, 208, 0.25) 0%,
    rgba(255, 255, 255, 0.7) 40%,
    #fff 70%
  );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

.websheet-image::after {
  transition: opacity 300ms ease;
}

.websheet-image.is-loaded::after {
  opacity: 0;
}

.websheet-image .entity-image{
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.websheet-iframe {
  flex: 1;
  border: none;
  width: 100%;
}

.websheet-loader {
  position: absolute;
  inset: 0;
  border-radius: 18px 18px 0 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  z-index: 2;
  opacity: 1;
  transition: opacity 200ms ease, background 200ms ease;

  background: linear-gradient(
  to bottom,
  rgba(105, 139, 208, 0.25) 0%,
  rgba(105, 139, 208, 0.18) 15%,
  rgba(255, 255, 255, 0.65) 35%,
  rgba(255, 255, 255, 0.9) 55%,
  #fff 70%
  );

  /**
  background: linear-gradient(
  to bottom,
  rgba(255, 255, 255, 0.15) 0%,
  rgba(255, 255, 255, 0.45) 30%,
  rgba(255, 255, 255, 0.85) 55%,
  #fff 75% 
  );
  */

}

.websheet-loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid #e5e7eb;
  border-top-color: #3b82f6;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.websheet-loader .spinner{
  position: relative;
  top: 90px;
}

/** Details HTML */

.details-sheet {
  position: relative;
  background: #fff;
  height: calc(var(--websheet-max-height) - var(--details-offset));
  overflow-y: auto;
  border-radius: 0;
  padding-bottom: 0;
}
.details-sheet.to-added {
	padding-bottom: calc(38px);
}
.websheet-body.expand .details-sheet,
.websheet-body.expand-image .details-sheet {
  --details-offset: var(--websheet-image-height-expanded) -  var(--dvh-padding);
}
.websheet.hide-image .details-sheet {
  --details-offset: var(--dvh-padding);
}

.details-nav {
  position: sticky;
  top: 0;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  z-index: 10;
  border-bottom: 1px solid #eee;

  background: rgb(246, 246, 246);
}

.nav-scroll {
  display: flex;
  overflow-x: auto;
  gap: 22px;
  gap: 18px;
  padding: 14px 20px 11px 20px;
  position: relative;
  padding: 14px 11px 11px 18px;
  gap: 18px;
  gap: 14px;
  
  scroll-behavior: smooth;    
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.nav-scroll::-webkit-scrollbar {
  display: none;
}

.nav-link {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  color: #40444c;
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
  transition: color 180ms ease;
  padding-right: 1px;
  padding-left: 2px;
  
  scroll-snap-align: center;
  flex: 0 0 auto;
}

.nav-link.active {
  color: #111827;
  color: #fff;
  z-index: 10;
}

.nav-link.icon {
  gap: 0.25em;
  left: -5px;
  padding-left: 2px;
}

.nav-link.icon::before {
  background: #3f8bfe;
  width: 1em;
  height: 1em;
}
.nav-link.icon.active::before {
	background: #fff;
}

.nav-indicator {
  position: absolute;
  bottom: 6px;
  height: 3px;
  border-radius: 2px;
  transition: transform 300ms cubic-bezier(.22,1,.36,1),
              width 300ms ease;
  bottom: 8px;
  height: 3px;
  border-radius: calc(infinity * 1px);
  background: var(--color-blue-500);
  transition: transform 300ms cubic-bezier(.22,1,.36,1), width 300ms ease;
  background-color: color-mix(in oklab, var(--color-blue-500) 90%, transparent);
  background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
  height: 31px;
  
  bottom: 9px;
  height: 30px;
  
  
  
  background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 90%, transparent);
  background-color: color-mix(in oklab, var(--color-blue-500) 90%, transparent);
  box-shadow: var(--button-shadow);
  box-shadow: 0 4px 6px -4px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 9;
  
  background: linear-gradient(90deg, rgba(21, 93, 252, 0.9), rgba(43, 127, 255, 0.9));
}

.details-content {
  padding: 24px 20px 60px;
  padding: 24px 16px 60px;
  padding: 24px 16px 90px;
}

.details-section {
  margin-bottom: 42px;
  
  margin-bottom: 21px;
  border-radius: 10px;
  background: #fcfcfc;
  padding: 14px 16px;
  
  box-shadow: var(--shadow);
  box-shadow: var(--button-shadow-light);
  
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  padding-bottom: 15px;  
  margin-bottom: 18px;
}

.details-section#details-access{
  border-radius: 10px;
}

.details-section#details-map{
  box-shadow: none;
  background: none;
}

.details-section h4 {
  font-size: 18px;
  margin-bottom: 12px;
  font-weight: 600;
  
  font-family: Poppins;
  font-weight: 500;
  font-size: 16.2px;
  color: rgb(17, 25, 42);
  gap: 0.6em;
  
}
.details-section h5 {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
  color: #374151;
  gap: 0.6em;
}

.details-section h4.icon::before,
.details-section h5.icon::before {
  background: var(--color-blue-600);
  background: #2e70fc;
  width: 1em;
  height: 1em;
}


.details-section h4.icon.contact::before{
  position: relative;
  top: -1px;
}

.details-section p,
.details-section li,
.details-text {
  font-size: 15px;
  line-height: 1.6;
  color: #374151;
  font-weight: 500;
}

.details-text a.website,
.details-text a.phone,
.details-text a.mail{
	box-shadow: 0 1px 2px rgba(139, 174, 237, 0.54);
	padding: 4px 11px;
	border-radius: 11px;
	transform: scale(0.92);
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.details-text a.website span,
.details-text a.phone span,
.details-text a.mail span{
	transform: scale(0.98);
}
.details-text a.icon::before{
	color: #357afd;
	transform: scale(0.96);
}
.details-text a.website:hover,
.details-text a.phone:hover,
.details-text a.mail:hover{
	transform: translateY(-1px) scale(0.92);
	box-shadow: 0 3px 7px rgba(0,0,0,0.12);
}
.details-text a.website:active,
.details-text a.phone:active,
.details-text a.mail:active{
	transform: scale(0.90);
	background: var(--color-gray-50);
	box-shadow: none;
}
.details-text a.phone{
	color: #fff;
	padding: 16px 16px;
	background-color: color-mix(in oklab, var(--color-green-600) 100%, transparent);
	border-radius: calc(infinity * 1px);
}
.details-text a.phone span{
	display: none;
}
.details-text a.phone:active{
	background-color: color-mix(in oklab, oklch(67% 0.19 149.6) 100%, transparent);
}
.details-text a.mail{
	white-space: nowrap;
	position: relative;
	top: 2px;
	left: -8px;
}
.details-text a.mail.hasname{
	top: 13px;
}

.details-text a.icon.phone::before{
	color: var(--color-white);
}
.details-text .contact-actions{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	align-items: center;
	padding-bottom: 33px;
	padding-top: 13px;
}
.details-text .contact-actions div{
	flex: 1;
}
.details-text .contact-actions div.flex{
	flex: 0.15;
}

.details-text .contact-actions .contact-title{
  font-weight: 600;
  font-size: 16px;
  display: block;
  margin-bottom: 2px;
  color: #111;  
}
.details-text .contact-actions .contact-name{
  color: var(--color-gray-500);
  font-weight: 400;
}

.details-text .practical_info{
	margin-top: 12px;
}

.details-text .practical_info li{
	margin-bottom: 3px;
	line-height: 1.65;
}
.details-text .practical_info li span{
	font-size: 14px;
	display: inline-flex;
    align-items: center;
    gap: 0.5em;
}
.details-text .practical_info .icon{
  justify-content: center;
  
  border-radius: 4px;
  width: 1.3em;
  height: 1.3em;
  
  margin-right: 4px;
  background: rgb(61, 136, 255);
  opacity: 0.9;
  
   border-radius: 6px;
}

.details-text .practical_info .icon::before {
	width: 0.9em;
    height: 0.9em;
	color: #374151d4;
	color: #a1a7b2;
	color: #3d88ff;
	
	opacity: 0.9;	
	color: var(--color-gray-600);
	
	color: #fff;
	z-index: 1;
}

.details-text .practical_info.light .icon::before {
	color: var(--color-gray-600);
	opacity: 0.9;
	width: 0.85em;
	height: 0.85em;
}
.details-text .practical_info.light .icon {
	border: solid 1px #ccc;
	background: transparent;
	opacity: 1;
}
.details-text .practical_info .reservation .icon{
	border: 0pt none;
	background: #cc2e96;
	opacity: 0.8;
}
.details-text .practical_info .reservation .icon::before {
	color: #fff;
}

.details-text .practical_info .icon.languages::after {
	/**background: var(--color-green-600);*/
	background: transparent;
	border: solid 1px #ccc;
}
.details-text .practical_info .icon.languages::before{
	color: var(--color-gray-600);
}

.details-text .practical_info b{
	font-weight: 700;
}
.details-text .practical_info em{
	font-weight: 600;
	font-style: normal;
}
.details-text .practical_info .languages_spoken{
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 5px;
}
.details-text .practical_info span.reservation,
.details-text .practical_info span.languages{
	margin-top: 12px;
}
.details-text .practical_info .languages_spoken span{
	display: inline-flex;
	align-items: center;
	color: #59616e;
	padding-block: 4px;
	padding-inline: 12px;
	background-color: #f6f6f6;
	border-radius: calc(infinity * 1px);
	font-weight: 400;
	font-size: 1.3rem;
	line-height: 1.2;
}

#details-access .details-text .practical_info {
    margin-bottom: 12px;
}

.details-text .practical_info .icon.accessibility::before {}

.details-text a.website{
	white-space: nowrap;
	
	margin-bottom: 5px;
	margin-top: 13px;
}

#details-action {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 12px 16px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  box-shadow: none;
  
  transform: translateY(100%);
  opacity: 0;

  transition: transform 0.35s ease, opacity 0.25s ease;
  z-index: 1000;
  
  margin-bottom: 0;
  border-radius: 0;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  
  left: 32px;
  right: 32px;
  padding: 1px 0 12px 0;
  background: transparent;
   background: rgba(255,255,255,0.95);
   
   padding: 1px 0 20px 0; 
}

#details-action.visible {
  transform: translateY(0);
  opacity: 1;
}

#details-action .btn {
  background: var(--color-white);
  color: var(--color-gray-900);
  box-shadow: var(--button-shadow);
  border-radius: 14px;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding-block: calc(var(--spacing) * 3);
}

.details-tags{
	margin-top: 19px;
}
.details-tags > div{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
.details-tags > div span{

	display: inline-flex;
	align-items: center;

	color: var(--color-blue-700);
	font-weight: 500;

	font-size: 1.25rem;
	line-height: 1;
	padding-block: 4px;
	padding-inline: 12px;

	background-color: var(--color-blue-100);

	border-radius: calc(infinity * 1px);
	
	font-weight: 400;
	font-size: 1.3rem;
	line-height: 1.2;
}


.address-native {
  display: block;
  width: 100%;
  text-align: left;

  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
  position: relative;
  top: 0px;
}

.address-native-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s;
  will-change: transform;
}

.address-text {
  flex: 1;
}

.address-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
  color: #111;
}

.address-lines {
  font-size: 14px;
  color: #555;
  line-height: 1.4;
}

.address-city {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #000;
}

.address-native:hover .address-native-inner {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

.address-native:active .address-native-inner {
  transform: scale(0.98);
  background: var(--color-gray-50);
  box-shadow: none;
}

.address-arrow {
  margin-left: auto;
  font-size: 20px;
  color: #ccc;
}

.map-container {
  margin-top: 10px;
  border-radius: 12px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  overflow: hidden;
  position: relative;
}

.map-container .map {
  width: 100%;
  height: 220px;
  position: relative;
  z-index: 1;
}

.map-touch-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(15, 23, 42, 0.14);
  background: rgba(15, 23, 42, 0.1);
  color: #fff;
  font-size: 0.88rem;
  text-align: center;
  font-weight: 700;
  pointer-events: auto;
  user-select: none;
  touch-action: pan-y;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.map-touch-layer strong {
  
  background: rgba(15, 23, 42, 0.42);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.25);
  backdrop-filter: blur(8px);
  font-weight: 500;
  
  background: rgba(15, 23, 42, 0.35);
  color: #e6e6e8;
  filter: brightness(1.2);
  
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
  
}

.map-container.is-holding .map-touch-layer {
  background: rgba(28, 94, 235, 0.22);
}

.map-container.is-map-active .map-touch-layer {
  opacity: 0;
  pointer-events: none;
}

.map-container.is-map-active {
  /**
  outline: 2px solid rgba(28, 94, 235, 0.35);
  outline-offset: 2px;
  */
}

.map-fullscreen-back {
  display: none;
}

.leaflet-container:fullscreen .map-fullscreen-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  position: absolute;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  top: auto;

  transform: translateX(-50%);
  z-index: 2000;

  height: 46px;
  padding: 0 18px;

  border: 0;
  border-radius: 999px;

  background: rgba(15, 23, 42, 0.86);
  color: #fff;

  font-size: 0.95rem;
  font-weight: 700;

  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(12px);

  cursor: pointer;
  
  width: calc(100% - 32px);
  max-width: 360px;
  
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  background: linear-gradient(90deg, rgba(21, 93, 252, 0.9), rgba(43, 127, 255, 0.9));
  backdrop-filter: blur(8px);
  
}

.leaflet-container:-webkit-full-screen .map-fullscreen-back {
  display: inline-flex;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  top: auto;
  transform: translateX(-50%);
}

.btn-go {
  
  padding: 12px 24px 12px 19px;
  padding: 12px 19px 12px 16px;
  margin-top: 12px;
  gap: 8px;
  
  font-weight: 600;
  font-size: 15px;
  
  color: var(--color-white);
  border: none;
  box-shadow: var(--button-shadow);
  border-radius: 14px;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);

  /*background: linear-gradient(90deg, rgba(21, 93, 252, 0.9), rgba(43, 127, 255, 0.9));
  border-radius: calc(infinity * 1px);*/
  
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  border-radius: 12px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  margin-top: 0;
  
  position: relative;
  top: -12px;
  
  background-color: color-mix(in oklab, oklch(67% 0.19 149.6) 100%, transparent);
  z-index: 4;
  
}
.btn-go.icon::before{
  width: 0.9em;
  height: 0.9em;
}
.btn-go:hover {
	background-color: var(--color-primary);
	background-color: color-mix(in oklab, oklch(67% 0.19 149.6) 100%, transparent);
	background-color: color-mix(in oklab, var(--color-green-600) 100%, transparent);
}
.btn-go:active {
  transform: scale(1);
}

.leaflet-retina .fullscreen-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 15 6 6'/%3E%3Cpath d='m15 9 6-6'/%3E%3Cpath d='M21 16v5h-5'/%3E%3Cpath d='M21 8V3h-5'/%3E%3Cpath d='M3 16v5h5'/%3E%3Cpath d='m3 21 6-6'/%3E%3Cpath d='M3 8V3h5'/%3E%3Cpath d='M9 9 3 3'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
}

.is-fullscreen .leaflet-retina .fullscreen-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 15 6 6m-6-6v4.8m0-4.8h4.8'/%3E%3Cpath d='M9 19.8V15m0 0H4.2M9 15l-6 6'/%3E%3Cpath d='M15 4.2V9m0 0h4.8M15 9l6-6'/%3E%3Cpath d='M9 4.2V9m0 0H4.2M9 9 3 3'/%3E%3C/svg%3E");
  background-size: 18px 18px;
}

.fullscreen-icon {
  opacity: 0.9;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.leaflet-control-fullscreen-button:hover .fullscreen-icon {
  opacity: 1;
}
.is-fullscreen .fullscreen-icon {
  transform: scale(0.9);
}

/** Modal */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.modal-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}

.modal-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92vw, 360px);
  transform: translate(-50%, -46%) scale(.96);
  background: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.2);
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}

.modal-overlay.is-visible .modal-panel {
  transform: translate(-50%, -50%) scale(1);
}

.modal-panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.modal-panel header h3 {
  margin: 0;
  font-family: 'Caveat', cursive;
  font-size: 2.4rem;
  font-weight: 400;  
}

.modal-panel header h3 .icon {
	/**gap: 0.45em;*/
}
.modal-panel header h3 .icon::before {
	width: 0.8em;
	height: 0.8em;
	color: var(--color-primary);
}
.modal-panel header h3 .icon.trash-2::before {
	color: #cc2e2e;
}

.modal-panel header h3 .icon.calendar-check::before {
	color: #cc2e96;
}
.modal-panel header h3 .icon.phone-outgoing::before {
	color: #4CAF50;
	width: 0.75em;
	height: 0.75em;
	margin-top: 2px;
}


.modal-panel .close-modal {
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.6;
  justify-content: center;
  position: relative;
  top: 0.1rem;
  border-radius: 50%;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-panel .close-modal:hover {
  opacity: 1;
  background-color: var(--color-gray-100);
}

.modal-body {
  padding: 0 18px 10px;
}

.modal-text {
  font-size: 15px;
  color: var(--color-gray-700);
  line-height: 1.45;
  font-size: 1.45rem;
  color: #1f2937;
}
.modal-text .subtitle{
  font-size: 16px;
  color: var(--color-gray-700);
  line-height: 1.45;
  display: block;
  margin-bottom: 6px;  
}
.modal-text.minimize {
	font-size: 13px;
	color: var(--color-gray-500);
	line-height: 1.4;
	padding-left: 2px;
	padding-right: 2px;
	position: relative;
	top: -7px;  
}

.modal-panel header,
.modal-panel footer {
  padding: 16px 18px;
}

.modal-panel footer {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  justify-content: center;
}
.modal-panel.delete footer,
.modal-panel.remove footer {
	flex-direction: row-reverse;
}
.modal-panel .btn-remove {
  background: #366abc;
}
.modal-panel .btn-remove:hover {
  background: #2f5da6;
}


.modal-panel footer button,
.modal-panel footer a.btn {
  flex: 1;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  border-radius: 14px;
  line-height: 1.15;
}

.modal-panel .btn-hidden {
	display: none;
}
.modal-panel .btn-outline {
  background: #f3f4f6;
  color: #111827;
}

.modal-panel .btn-primary,
.modal-panel .btn-confirm {
  background: var(--color-primary);
  color: var(--color-white);
}

.modal-panel .btn-success {
  background-color: color-mix(in oklab, oklch(67% 0.19 149.6) 100%, transparent);
  color: var(--color-white);
}
.modal-panel .btn-success:hover {
  background-color: color-mix(in oklab, var(--color-green-600) 100%, transparent);
}
.modal-panel .btn-export {}
.modal-panel .btn-export:hover {}
	
.modal-panel .btn-remove
{
  padding: 12px 18px;
  transition: background 180ms ease, transform 120ms ease;
  background: #2b3442;
  color: var(--color-white);
  font-weight: 500;
  background: #366ec3;
}

.modal-panel .btn-remove:hover {
  background: #1f2632;
  background: #2f5a9c;
}

.modal-panel .btn-delete {
  padding: 12px 18px;	
  background: #cc2e2e;
  color: var(--color-white);
}

.modal-panel .btn-warning {
  background: #f59e0b;
  color: #1f2937;
}

.modal-panel .btn-remove:active,
.modal-panel .btn-delete:active,
.modal-panel .btn-call:active {
  transform: scale(0.97);
}


/** Call modal */


.call-modal .modal-body {
  text-align: center;
  padding: 20px 24px;
}

.call-message {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.5;
  margin-bottom: 18px;
}

.phone-display,
.time-picker {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 18px;
  border-radius: 14px;

  background: rgba(0,0,0,0.04);
  font-weight: 600;
  font-size: 16px;
  color: #111827;
  line-height: 18px;

  margin-top: 12px;
  cursor: default;
  
  transition: background-color 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

.time-picker{
	margin-left: 25px;
	margin-top: 4px;
	top: 8px;
	position: relative;
    display: none;
}

.phone-display em,
.time-picker em{
  font-weight: 400;
  color: var(--color-gray-800);
  font-size: 87%;
}

.icon.copy{
  position: relative;
  left: 1px;
}

.is-copied{
	background-color: #eff8f4;
}
.is-copied .icon.copy {
  color: #22c55e;
}

.is-copied .icon.copy::after {
  content: 'Copié';
  position: absolute;
  top: -28px;
  right: 0;
  font-size: 12px;
  background: #111827;
  color: var(--color-white);
  padding: 4px 8px;
  border-radius: 6px;
}

.btn-call,
.modal-panel footer button.btn-call, 
.modal-panel footer a.btn-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  color: var(--color-white);
  
  border-radius: 14px;
  font-weight: 600;
  font-size: 14.5px;   
  padding: 12px 18px;
  
  transition: background 180ms ease, filter 120ms ease;
  
  background: #43A047;
}

.btn-call:hover,
.modal-panel footer button.btn-call:hover, 
.modal-panel footer a.btn-call:hover {
  filter: brightness(1.05);
}

.btn-call.highlight,
.modal-panel footer button.btn-call.highlight, 
.modal-panel footer a.btn-call.highlight
{
   font-size: 15px;
   font-weight: 700;
   background: linear-gradient(200deg, #ce369a 40%, #ce369a 110%);
}
.btn-call.highlight:hover,
.modal-panel footer button.btn-call.highlight:hover, 
.modal-panel footer a.btn-call.highlight:hover{
  filter: brightness(1);   
  background: linear-gradient(200deg, #cc2e96 40%, #8c4a7b 110%);
}

.modal-panel footer:not(.ok) button.btn-call.btn-time-confirm,
.modal-panel footer:not(.ok) a.btn-call.btn-time-confirm{
	display: none;
}
.modal-panel footer.ok button.btn-call.btn-confirm,
.modal-panel footer.ok a.btn-call.btn-confirm{
	display: none;
}

.reservation-check {
  margin: 1.05rem 0 1.25rem;
  margin-bottom:0;
  position: relative;
  top: 1rem;
  top: 1.4rem;
  left: 4px;
  display: inline-block;
}

.reservation-check label {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  cursor: pointer;
  user-select: none;
  min-height: 22px;
}

/* input caché */
.reservation-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* checkbox custom */
.check-ui {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid #d1d1d6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* check */
.check-ui::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) scale(0);
  transition: transform 160ms ease;
}

/* état checked */
.reservation-check input:checked + .check-ui {
  background: #ce369a;
  border-color: #ce369a;
}

.reservation-check input:checked + .check-ui::after {
  transform: rotate(-45deg) scale(1);
  position: relative;
  top: -1px;
}

/* texte */
.check-text {
  font-size: 1.45rem;
  color: #1f2937;
  line-height: 1.4;
}

.check-text small {
  display: none;
  opacity: 0;
  font-size: 1.15rem;
  color: #6b7280;
  margin-top: 0.2rem;
  transition: opacity 160ms ease;
}

.modal-item-title{
	font-size: 16px;
	color: var(--color-gray-700);
	line-height: 1.45;	
	display: none;
}

.time-picker input[type="time"] {
  border: none;
  background: transparent;
  font-weight: 600;
  font-size: 16px;
  color: #111827;
}

/** Reservation mode */

.reservation-mode .check-text small {
  display: block;
  opacity: 1;
  margin-bottom: 0.2rem;
}
.reservation-mode .reservation-check{
	top: 0;
	top: 0.2rem;
}
.reservation-mode .reservation-check{
	margin: 1.05rem 0 1.25rem;
}

.reservation-mode .time-picker{
	display: inline-flex;
}
.reservation-mode .modal-item-title{
	display: block;
	padding-left: 2px;
	padding-right: 2px;
}


.btn-time-confirm::before{
	color: #cc2e96;
	width: 1.2em;
    height: 1.2em;
}
footer .btn-time-confirm::before{
	color: #ffffff;
}

/** Sortable - Drag & Drop */
/**
.drag-chosen {
  transform: scale(1.02)!important;
  z-index: 5;
}

.drag-ghost {
  opacity: 0.3!important;
  opacity: 0.2!important;
  transform: scale(0.98)!important;
}

.drag-dragging {
  cursor: grabbing;
}

.sortable-drag,
.sortable-chosen {
  transition: none !important;
}
*/

.drag-fallback {
  opacity: 1;
  border-radius: 24px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.24);
  pointer-events: none;
  scale: 1.02;
  z-index: 99999;
}

.drag-picked {
  opacity: 0.5;
}

.drag-placeholder {
  opacity: 0.35;
  background: rgba(255, 255, 255, 0.55);
}

body.is-dragging-item {
  overscroll-behavior: none;
}

body.is-dragging-item .moment-items {
  touch-action: none;
}

.drag-handle {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.drag-handle:active {
  cursor: grabbing;
}


.drag-placeholder {
  opacity: 1 !important;
  transform: none !important;
  position: relative;
  background: rgba(255, 255, 255, .35) !important;
  box-shadow: inset 0 0 0 0px rgba(26, 29, 86, .10) !important;
  border-radius: 16px;
  display: flex;
}

.drag-placeholder::before {
  content: "";
  display: block;
  position: absolute;
  width: 96px;
  height: 96px;
  max-height: 96px;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  inset: 0;
  overflow: hidden;
  /**
  background: linear-gradient(
    90deg,
    #eee 25%,
    #e0e0e0 50%,
    #eee 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;*/
	
  opacity: 0.4;
  background: rgba(0,0,0,0.07);
}


/* Élément sélectionné avant déplacement 
.drag-picked {
  cursor: grabbing;
  box-shadow:
    0 14px 34px rgba(26, 29, 86, .20),
    0 4px 10px rgba(26, 29, 86, .12);
}
*/
/* Élément qui flotte sous le doigt / la souris 
.drag-floating,
.drag-fallback {
  opacity: 1 !important;
  transform: rotate(.3deg) scale(1.015) !important;

  box-shadow:
    0 22px 48px rgba(26, 29, 86, .28),
    0 8px 18px rgba(26, 29, 86, .16) !important;

  border-radius: 18px;
  cursor: grabbing !important;
  z-index: 9998 !important;
}
*/
/* Placeholder laissé dans la liste 
.drag-placeholder {
  opacity: 1 !important;
  transform: none !important;
  position: relative;
  background: rgba(255, 255, 255, .35) !important;
  box-shadow: inset 0 0 0 0px rgba(26, 29, 86, .10) !important;
  border-radius: 16px;
  display: flex;
}
*/
/*
.drag-placeholder::before {
  content: "";
  display: block;
  position: absolute;
  width: 96px;
  height: 96px;
  max-height: 96px;
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
  inset: 0;
  overflow: hidden;
  /**
  background: linear-gradient(
    90deg,
    #eee 25%,
    #e0e0e0 50%,
    #eee 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;*/
/*	
  opacity: 0.4;
  background: rgba(0,0,0,0.07);
}

/* On masque le contenu du placeholder pour éviter les superpositions moches */
.drag-placeholder > * {
  opacity: 0 !important;
}

/* Évite les transitions parasites pendant le drag */
.sortable-chosen,
.sortable-drag,
.drag-picked,
.drag-floating,
.drag-placeholder {
  transition: none !important;
}

/* Pendant le drag, évite les sélections de texte */
body.is-dragging-item {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing;
  overscroll-behavior: none;
}
body.is-dragging-item .moment-items {
  touch-action: none;
}


/* =========================
   SWITCH TOGGLE
========================= */

.switch {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 16px;
  margin-top: 24px;
  margin-left: 40px;
}

/* label texte */
.switch-label {
  font-weight: 400;
  color: var(--color-gray-600);
  font-size: 14px;
}

/* wrapper */
.switch-control {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
  transform: scale(0.95);
}

/* cacher input natif */
.switch-control input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* track */
.switch-track {
  position: absolute;
  inset: 0;
  background: #dcdcdc;
  border-radius: 999px;
  transition: background 0.25s ease;
}

/* thumb */
.switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;

  background: #fff;
  border-radius: 50%;

  box-shadow: 0 2px 6px rgba(0,0,0,0.2);

  transition: transform 0.25s cubic-bezier(.22,1,.36,1);
}

/* ON state */
.switch-control input:checked + .switch-track {
  background: var(--color-primary, #2ecc71);
}

/* déplacement thumb */
.switch-control input:checked + .switch-track .switch-thumb {
  transform: translateX(18px);
}

/* hover */
.switch-control:hover .switch-track {
  background: #cfcfcf;
}

/* actif (tap mobile) */
.switch-control:active .switch-thumb {
  transform: scale(1.1);
}

/* =========================
   NAV TOAST
========================= */

.nav-toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(20px);
  
  display: flex;
  align-items: center;
  gap: 12px;
  gap: 6px;

  padding: 14px 16px;
  border-radius: 14px;

  background: rgba(30, 30, 30, 0.92);
  backdrop-filter: blur(12px);

  color: #fff;
  font-size: 14px;
  line-height: 1.4;

  box-shadow: 0 10px 30px rgba(0,0,0,0.25);

  opacity: 0;
  pointer-events: none;
  z-index: 9999;

  transition: all 280ms cubic-bezier(.22,1,.36,1);
}

/* visible */
.nav-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.nav-toast.visible::before {
  margin-right: 6px;
}
/* texte */
.nav-toast strong {
  font-weight: 600;
  white-space: nowrap;
}

.nav-toast em {
	display: none;
}

@media (min-width: 350px) {
	.nav-toast em {
	  display: inline;
	  white-space: nowrap;
	  font-style: normal;
	}
}

/* bouton */
.nav-toast .change-app {
  background: none;
  border: none;
  color: #4da3ff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;

  transition: background 0.2s ease;
}

.nav-toast .change-app:hover {
  background: rgba(255,255,255,0.1);
}

.nav-toast .change-app:active {
  transform: scale(0.96);
}

.nav-toast {
  max-width: calc(100% - 24px);
}

@media (min-width: 768px) {}

@media (min-width: 624px) {
  
  .entity-card-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-start;
  }
  .entity-sheet.is-single .entity-card-wrapper {
    justify-content: center;
  }
  .entity-card {
    width: 100%;
    max-width: 540px;
  }
  
  
}

@media (min-width: 600px) {
  .nav-toast {
    bottom: 30px;
  }
}

/* =========================
   LOCALIZATION SHEET
========================= */

.locationsheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1005;
  height: 100dvh;
  background: #fff;
  border-radius: 0;
  transform: translateY(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.locationsheet.is-visible {
  transform: translateY(0);
}

.locationsheet .sheet-header .category-title{
  font-family: 'Caveat', cursive;
  font-size: 2.4rem;
  font-weight: 400;
}
.locationsheet .sheet-header .category-title.icon::before{
  width: 0.8em;
  height: 0.8em;
  color: var(--color-primary);
}

.locationsheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  padding-bottom: 170px;
  font-size: 1.5rem;
}

.location-search-section {
  margin-bottom: 24px;
}

.location-label {
  display: block;
  margin-bottom: 8px;
  font-size: 86%;
  font-weight: 600;
  color: #111827;
}

.location-search-row {
  display: flex;
  gap: 10px;
}

.location-search-field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 12px;
  border: 1px solid #dbe0e7;
  border-radius: 14px;
  background: #fff;
  position: relative;
}

.location-search-field input {
  flex: 1;
  width: 100%;
  border: 0;
  outline: 0;
  font-size: 1.5rem;
  background: transparent;
}

.location-search-field.is-loading {
  pointer-events: none;
  opacity: 0.9;
}
.location-search-field.is-loading .icon {
  opacity: 0;
}
.location-search-field.is-loading::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  transform: translateY(-50%);
  animation: locationInputSpin 0.75s linear infinite;
  z-index: 2;
  color: #374151;
  pointer-events: none;
}

/* Optionnel : shimmer doux sur le champ */
.location-search-field.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  transform: translateX(-100%);
  animation: locationInputShimmer 1.15s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
}

@keyframes locationInputSpin {
  from {
    transform: translateY(-50%) rotate(0deg);
  }

  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

@keyframes locationInputShimmer {
  100% {
    transform: translateX(100%);
  }
}


.clear-location-search {
  border: 0;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
}

.use-current-location {
  min-width: 48px;
  height: 48px;
  border: 0;
  border-radius: calc(infinity * 1px);
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  justify-content: center;
  transform: scale(0.95) translateX(-2px);
  border-radius: 14px;
}
.use-current-location::before {
  width: 1.2em;
  height: 1.2em;
}

.use-current-location span {
  display: none;
}

.radius-section {
  margin-bottom: 26px;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-title-row h4,
.location-suggestions-section h4 {
  margin: 0;
  font-size: 95%;
  font-weight: 700;
  color: #111827;
}

.radius-current-label {
  font-size: 86%;
  font-weight: 600;
  color: var(--color-primary);
}

.radius-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.radius-chip {
  flex: 0 0 auto;
  border: 1px solid #dbe0e7;
  border-radius: 999px;
  background: #fff;
  color: #374151;
  padding: 9px 13px;
  font-size: 92%;
  font-weight: 600;
  cursor: pointer;
}

.radius-chip.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.location-suggestions-list {
  margin-top: 10px;
}

.location-suggestion {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid #eef1f5;
  background: #fff;
  padding: 14px 0;
  text-align: left;
  cursor: pointer;
}

.location-suggestion .remove-recent-location {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-left: 0.25rem;
  border-radius: 999px;
  opacity: 0.55;
  color: #6b7280;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}

.location-suggestion .remove-recent-location:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.06);
  color: #c62828;
}

.location-suggestion.is-selected .remove-recent-location {
  color: inherit;
}

.suggestion-icon {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.suggestion-content {
  flex: 1;
  min-width: 0;
}

.suggestion-content strong {
  display: block;
  color: #111827;
  font-size: 96%;
}

.suggestion-content small {
  display: block;
  margin-top: 3px;
  color: #6b7280;
  font-size: 82%;
}

.suggestion-distance {
  color: #6b7280;
  font-size: 82%;
  white-space: nowrap;
}

.suggestion-check {
  display: none;
  color: var(--color-primary);
}

.location-suggestion.is-selected .suggestion-check {
  display: inline-flex;
}

.location-suggestion.is-selected .suggestion-icon {
  background: #eff6ff;
  color: var(--color-primary);
}

.locationsheet-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1010;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid #eef1f5;
  backdrop-filter: blur(14px);
  text-align: center;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.selected-location-summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0px;
  color: var(--color-gray-600);
  border-radius: calc(infinity * 1px);
  padding: 0rem 1rem;
  
  gap: 9px;
  font-size: 1.45rem;
  font-weight: 500;
  height: 32px;
}
.locationsheet-footer.refresh .selected-location-summary {
  /**background: #f3f4f6;
  background: #f2f8ff;*/
  font-size: 1.45rem;
}
.selected-location-summary strong {
  color: #111827;
  color: #1a1d56;
  align-items: flex-start;
}
.selected-location-summary .icon::before{
  width: 1em;
  height: 1em;
  margin-top: 2px;
}
.selected-location-summary span.icon::before{
  width: 18px;
  height: 18px;
  background-color: #1c5eeb;
  opacity: 0.7;
  padding: 3px 10px;
}

.selected-location-summary span{
	font-size: 94%;
	font-size: 93%;
    letter-spacing: -0.04rem;
	background: rgba(28, 94, 235, 0.08);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 13px;
}

.locationsheet-footer .switch{
	justify-content: center;
	margin: 0;
	margin-bottom: 0px;
	position: relative;
    top: 1px;
    text-align: left;
	opacity: 0;
    height: 0;
	gap: 11px;
	gap: 9px;
}
.locationsheet-footer .switch-label {
	font-size: 1.35rem;
}
.locationsheet-footer .switch.refresh{
	opacity: 1;
    height: 40px;
    margin-bottom: 0;
}
.locationsheet-footer .switch .switch-control .switch-track {
	background: #f3f4f6;
}
.locationsheet-footer .switch .switch-control:hover .switch-track {
	background: #dcdcdc;
}
.locationsheet-footer .switch .switch-control input:checked + .switch-track {
  background: var(--color-gray-500);
  background: #111827;
}

.locationsheet-footer .switch.refresh .switch-control input:checked + .switch-track {
  background: var(--color-primary, #2ecc71);
  background: #306bec;
}

@media (min-width: 330px) {
  .locationsheet-footer .switch{
	justify-content: flex-start;
	margin-left: 2px;
  }
}

.apply-location-zone {
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 16px;
  background: #111827;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); 
  margin-top: 10px;
}
.locationsheet-footer.refresh .apply-location-zone {
  background: var(--color-primary);
}

.empty-suggestions {
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #6b7280;
  text-align: center;
}

.empty-suggestions strong {
  color: #111827;
}

@media (min-width: 768px) {
  .locationsheet {
    left: 50%;
    right: auto;
    width: min(520px, 100%);
    transform: translate(-50%, 100%);
  }

  .locationsheet.is-visible {
    transform: translate(-50%, 0);
  }

  .locationsheet-footer {
    left: 50%;
    right: auto;
    width: min(520px, 100%);
    transform: translateX(-50%);
  }

  .use-current-location {
    min-width: auto;
    padding: 0 14px;
  }

  .use-current-location span {
    display: inline;
  }
}

/* =========================
   FOOTER ACTIONS
========================= */

/* =========================
   ACTION BUTTON
========================= */

.action-menu {
  position: fixed;
  bottom: 20px;
  right: 16px;

  width: 56px;
  height: 56px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #111;
  color: #fff;

  box-shadow: 0 8px 25px rgba(0,0,0,0.25);

  z-index: 60;

  transition: all 0.3s cubic-bezier(.22,1,.36,1);
  
  background: #fff;
  color: oklch(14.5% 0 0);
  
}
.action-menu.icon::before{
  width: 1.2em;
  height: 1.2em;
}

/* cacher texte en mode rond */
.action-menu span {
  display: none;
}

/* =========================
   FULL WIDTH MODE
========================= */

.action-menu.is-full {
  left: 0;
  right: 0;
  bottom: 0;

  width: 100%;
  height: 56px;

  border-radius: 0;

  padding: 16px;

  justify-content: center;
  
  border-top: var(--color-gray-200) solid 1px;
  
  transition: none;
}
.action-menu.is-full.icon::before{
  width: 1em;
  height: 1em;
}
.action-menu.is-full span {
  display: inline;
  font-weight: 600;
}

/* safe area iOS */
.action-menu.is-full {
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}



/* =========================
   ACTION SHEET
========================= */

.actionsheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;

  background: #fff;
  border-radius: 20px 20px 0 0;

  transform: translateY(100%);
  transition: transform 0.3s ease;

  z-index: 70;
}
.actionsheet.is-visible {
  transform: translateY(0);
}

.actionsheet .sheet-header .category-title{
  font-family: 'Caveat', cursive;
  font-size: 2.4rem;
  font-weight: 400;
}
.actionsheet .sheet-header .category-title.icon::before{
  width: 0.8em;
  height: 0.8em;
  color: var(--color-primary);
}


.actionsheet-body {
  padding: 18px;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.actionsheet-body hr{
	border-color: #00000024;
}
/* boutons */
.action-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  margin-bottom: 3px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 13px;
  
  font-weight: 500;
  
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  
  margin-bottom: 0px;
  padding: 9px 13px;
  color: #1f2937;
}
.action-btn:hover,
.action-btn:active{
	background-color: var(--color-gray-50);
}
.action-btn:active{
	margin-left: 20px;
    width: calc(100% - 20px);
}

.action-btn span.icon{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-gray-50);
	border-radius: calc(infinity * 1px);
	width: 32px;
	height: 32px;
}

.action-btn.is-disabled,
.action-btn:disabled{
	opacity: 0.8;
	opacity: 0.4;	
	cursor: not-allowed;
	pointer-events: none;
}

.action-btn.is-disabled span.icon,
.action-btn:disabled .icon {
  opacity: 0.8;
  opacity: 0.5;
}

.action-btn:hover span.icon{
	
}

.action-btn#loadSuggestion span.icon{
    color: var(--color-purple-700);
    background-image: linear-gradient(to right in oklab, var(--color-purple-50) 0%, var(--color-pink-50) 100%);
}

.action-btn#resetDay:hover span.icon,
.action-btn#resetAllPlans:hover span.icon{}
.action-btn#loadPlan:hover span.icon{}
.action-btn#savePlan:hover span.icon{}
.action-btn#exportPDF:hover span.icon{}
.action-btn.danger:hover span.icon,
.action-btn.danger:hover label{}

.action-btn#savePlan,
.action-btn#exportPDF{
	display: flex;
}
.action-btn label{
	cursor: pointer;
}
.action-btn small{
	font-size: 96%;
}
.action-btn ul{
  color: #616161;
  font-weight: 300;
  font-size: 65%;
  line-height: 1.3;
  margin-left: auto;
  list-style: circle;
  opacity: 0;
  transition: opacity 200ms ease;
  
  font-weight: 400;
  line-height: 1.5;
  color: #aeaeae;
  display: none;
  
}
.action-btn:hover ul{
	opacity: 1;
	transition: opacity 200ms ease;
}
.action-btn ul li{
	padding-left: 4px;
}
.action-btn ul li::marker{
	color: var(--color-purple-700);
}

.action-btn#savePlan.share-action {
  position: relative;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.25s ease,
    transform 0.18s ease;
}

.action-btn#savePlan.is-dirty:active{
	margin-left: 0;
    width: 100%;
}

#savePlan.share-action label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#savePlan.share-action small {
  font-size: 0.95em;
  font-weight: 800;
  line-height: 1;
  color: #16a34a;
}

/* État initial : aucun partage encore créé */
#savePlan.share-action.is-new {
  background: #f8fafc;
  border-color: #e5e7eb;
  color: #1f2937;
}

#savePlan.share-action.is-new .icon {
  color: #2563eb;
}

/* État à mettre à jour */
#savePlan.share-action.is-dirty {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #9a3412;
  box-shadow: 0 8px 22px rgba(234, 88, 12, 0.08);
  box-shadow: 0 4px 11px rgba(234, 88, 12, 0.08);
}

#savePlan.share-action.is-dirty .icon {
  color: #ea580c;
  background: transparent;
}

/* État à jour */
#savePlan.share-action.is-success {
  /**
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #166534;
  box-shadow: 0 8px 22px rgba(22, 163, 74, 0.08);
  */
}

#savePlan.share-action.is-success .icon {
  color: #16a34a;
}

#savePlan.share-action.is-success small {
  color: #16a34a;
}

/* État chargement */
#savePlan.share-action.is-loading {
  pointer-events: none;
  opacity: 0.86;
  color: #374151;
}

#savePlan.share-action.is-loading .icon {
  opacity: 0;
}

/* Spinner à la place de l'icône */
#savePlan.share-action.is-loading::before {
  content: "";
  position: absolute;
  left: 18px;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: savePlanSpin 0.75s linear infinite;
  z-index: 2;
}

/* Effet shimmer pendant la mise à jour */
#savePlan.share-action.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  transform: translateX(-100%);
  animation: savePlanShimmer 1.15s ease-in-out infinite;
  pointer-events: none;
}

/* Feedback court après succès */
#savePlan.share-action.is-just-updated {
  animation: savePlanSuccessPop 0.35s ease;
}

/* Optionnel : petit pulse si update nécessaire */
#savePlan.share-action.is-dirty:not(.is-loading)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(234, 88, 12, 0.18);
  animation: savePlanDirtyPulse 1.8s ease-in-out infinite;
  pointer-events: none;
}

/* Sécurité : pas de pulse dirty pendant loading */
#savePlan.share-action.is-dirty.is-loading::after {
  border: 0;
}

/* Animations */
@keyframes savePlanSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes savePlanShimmer {
  to {
    transform: translateX(100%);
  }
}

@keyframes savePlanSuccessPop {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.025);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes savePlanDirtyPulse {
  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}



.code-display{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(0,0,0,0.04);
  font-weight: 600;
  font-size: 16px;
  color: #111827;
  line-height: 18px;
  margin-top: 12px;
  cursor: default;
  transition: background-color 160ms cubic-bezier(0.4, 0, 0.2, 1);
  
  min-height: 46px;
  padding: 0px 18px;
  padding-right: 0;
  
  background: linear-gradient(to right, rgba(0,0,0,0.04), 60%, rgba(0,0,0,0));
}

.code-display.share-box-code{
	margin-top: 9px;
	padding-right: 12px;
}

.code-display em {
  font-weight: 400;
  color: var(--color-gray-800);
  font-size: 87%;
  white-space: nowrap;
}
.code-display input {
  border: 0pt none;
  min-height: 46px;
  padding-left: 12px;
  width: 100%;
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  box-shadow: var(--button-shadow-light);
  text-transform: uppercase;
  color: #366ec3;
  font-weight: 500;
  position: relative;
  top: -1px;
}
.code-display.share-box-code input{
	margin-left: 7px;
}
.code-display input#planCodeInput{
	max-width: 160px;
}

.code-display input::placeholder {
	text-transform: none;
	color: #9ab6e1;
    font-size: 90%;
}
.code-display input#shareCode{
	background: transparent;
    border: 0pt none;
    box-shadow: none;
	top: 0px;
}


.nav-toast.undo {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);

  background: #111;
  color: #fff;

  padding: 12px 16px;
  border-radius: 12px;

  display: flex;
  align-items: center;
  gap: 10px;

  box-shadow: 0 10px 25px rgba(0,0,0,0.25);

  opacity: 0;
  transition: all 0.3s ease;

  bottom: 18px;
  left: 40%;

  z-index: 100;
}
.nav-toast span {
	white-space: nowrap;
}
.nav-toast.undo.visible::before{
	margin-right: 0px;
}

.nav-toast.undo.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(-8px);
}

.nav-toast.undo .undo-action {
  background: none;
  border: none;
  color: #4CAF50;
  font-weight: 600;
  cursor: pointer;
  margin-left: 4px;
}

main.day {
  padding-bottom: 90px;
}

.entity-backdrop.actions-backdrop {
	z-index: 69;
}

.actionsheet .contact{
  display: flex;
  padding: 11px;
  gap: 11px;
  align-items: center;

  margin-top: 17px;
  margin-left: 4px;
  padding-bottom: 4px;
}
.actionsheet .contact small{}
.actionsheet .contact small a{
  font-weight: 300;
  color: var(--color-text);
  font-size: 12px;
  color: var(--color-gray-800);
}
.actionsheet .contact small a strong{
	font-family: caveat;
	font-size: 16px;
	font-weight: 300;
	color: var(--color-gray-800);
	color: var(--color-primary);
	
	font-style: italic;
    color: var(--hero-color-primary);
	
}
button.home{
	display: flex;
    justify-content: center;
    align-items: center;
	background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.0)),url("ot-dieulefit.jpg") center/cover no-repeat;
	width: 40px;
	height: 40px;
	transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: var(--button-shadow);
	border-radius: 3.40282e38px;
	overflow: hidden;
	flex-shrink: 0;
	margin-right: calc(var(--spacing)*2);
}

.actionsheet .contact button.home{
	margin-right:0;
    transform: scale(0.8);
	display: none;
}
button.home.icon::before {
  width: 1.25em;
  height: 1.25em;
  width: 1.3em;
  height: 1.3em;
  color: var(--color-white);
}

.code-display.share-box-link {
	max-width: calc(100% - 18px);
	background: none;
    margin-top: 0px;
    padding-left: 8px;
	
	display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
	font-weight: 600;
	font-size: 16px;
	color: #111827;
	line-height: 18px;
	margin-top: 14px;
	cursor: default;
	transition: background-color 160ms cubic-bezier(0.4, 0, 0.2, 1);
	min-height: 32px;
	padding: 0px 18px;
	padding-right: 0;
	background: linear-gradient(to right, rgba(0,0,0,0.04), 60%, rgba(0,0,0,0));
	margin-bottom: 5px;	
}
#shareLink{
	font-size: 14px;
	font-weight: 300;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 248px;
	white-space: nowrap;
	text-decoration: underline;
}
#shareCode{
	text-transform: uppercase;
    color: #366ec3;
    font-weight: 600;
	margin-left: 7px;
}
.icon.inmodal-text{
  margin-right: 3px;
  position: relative;
  top: 3px;
  margin-left: 4px;
}

.date-display{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 16px;
  color: #111827;
  line-height: 18px;
  margin-top: 12px;
  cursor: default;
  transition: background-color 160ms cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 42px;
  padding: 0px 18px;
  padding-right: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.04), 60%, rgba(0,0,0,0));
}
.date-display label{
  font-weight: 400;
  color: var(--color-gray-800);
  font-size: 87%;
  white-space: nowrap;
  font-style: italic;
}
.date-display input{  
  border: 0pt none;
  min-height: 42px;
  padding-left: 12px;
  width: 100%;
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
  box-shadow: var(--button-shadow-light);
  text-transform: uppercase;
  color: #4c4c4d;
  font-size: 15px;
  font-weight: 500;
  padding-right: 12px;
}
.modal-text.notice small{
  position: relative;
  top: 3px;
  left: 21px;
  top: 3px;
  left: 15px;
}

.pdf-container {
  font-family: sans-serif;
  padding: 20px;
}

.pdf-day {
  margin-bottom: 20px;
}

.pdf-day h2 {
  font-size: 20px;
  margin-bottom: 10px;
}

.pdf-day h3 {
  margin-top: 10px;
  font-size: 16px;
}

.pdf-day ul {
  padding-left: 16px;
}


/* Base : mobile first (0 → 320px) */
/* aucun media query ici */

/* ≤ 320px — très petits écrans */

@media (max-width: 514px) {
    header .flex {
		gap: 0.2rem;
	}
}
@media (max-width: 504px) {
    header .btn-outline span {
		display: none;
	}
}

@media (max-width: 450px) {
	.moment button.back-button {
		transform: translateX(18px);
	}
}
@media (max-width: 432px) {
	.category-card span {	
		min-height: 31px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.moment {
		padding-left: calc(0.3rem * 5);
		padding-right: calc(0.3rem * 5);
	}
	.moment-item-card h4 {
		font-size: 14.5px;
		/**min-height: 36px;*/
		max-height: 52px;
		padding-right: 34px;
	}
	.moment-item-card.reservation h4 {
		padding-right: 34px;
	}
}
@media (max-width: 420px) {}
@media (max-width: 415px) {
	
	.categories-panel .categories-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.category-card {
		padding: 9px 8px 7px 8px;
	}
}
@media (max-width: 400px) {
	
}
@media (max-width: 395px) {
	
}
@media (max-width: 390px) {
	
}
@media (max-width: 360px) {

	.moment button.back-button {
		position: static;
		transform: translateX(0);
	}
	body > header .day-trigger{
		padding-right: 0.2rem;
	}	
}
@media (max-width: 340px) {
	.moment-item-card h4 {
		font-size: 14px;
		padding-right: 26px;
		overflow: hidden;
	}
	.moment-item-card.reservation h4 {
		padding-right: 26px;
	}
	body > header {
		padding-inline: 1rem;
	}
	body > header > div {
		margin-left: 60px;
	}
	.day > div {
		padding-inline: calc(var(--spacing) * 2);
	}
	body > header .btn-outline {
		position: relative;
		left: -2px;
	}
}
@media (max-width: 330px) {
	body > header button.home {
		left: 12px;
	}
	body > header > div {
		margin-left: 56px;
	}
	header .flex {
		gap: 0rem;
		margin-right: 8px;
	}
	#dayTitle {
		padding-right: calc(var(--spacing));
	}
	body > header .day-trigger{
		margin-top: 0rem;
		padding-right: 0.4rem;
	}
}

@media (max-width: 320px) {
  /* anciens iPhone SE, mini Android */
  
  .categories-panel .categories-grid {
	grid-template-columns: repeat(1, 1fr);
  }
  .category-card{
	padding: 12px;
	padding-top: 10px;
  }
  .category-card span {	
	min-height: auto;
	font-size: 1.4rem;
  }
  #dayTitle {
	padding-right: 0;
  }
  header .flex {
	margin-right: 0px;
  }
  body > header > div {
	margin-left: 52px;
  }
  body > header button.home {
    left: 10px;
  }
}


/* ≥ 375px — smartphones standards */
@media (min-width: 375px) {
}

/* ≥ 480px — grands smartphones */
@media (min-width: 480px) {
}

/* ≥ 640px — phablets / petits tablets portrait */
@media (min-width: 640px) {
}

/* ≥ 768px — tablettes */
@media (min-width: 768px) {
}

/* ≥ 1024px — laptops */
@media (min-width: 1024px) {
}

/* ≥ 1280px — desktops */
@media (min-width: 1280px) {
}

/* ≥ 1536px — grands écrans */
@media (min-width: 1536px) {
}

/** ajustement */

.meta-row span.reservation {
  width: 38px;
  height: 38px;
  min-width: 38px;
  top: 51px;
  opacity: 0.94;
}
.moment-item-card:hover .meta-row span.reservation,
.meta-row span.reservation:active{
  opacity: 1;
}

.moment h2 {
  letter-spacing: -0.02em;
  font-size: 19px;
  font-size: 20px;  
}
 .moment-item-card h4 {
  font-size: 1.5rem; /**1.45*/
  letter-spacing: -0.015em;
  
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.moment-item-card[data-type="activity"] h4 {
  position: relative;
  top: 0;
}
.moment-item-card[data-type="activity"] .content{
	gap: 0.3em; /*0.3em*/
}

.moment-item-card .description{
	color: #5f6875;
	position: relative;
    top: -3px;
}
.moment-item-card.reservation .description {
  padding-right: 25px;
}
.moment.sortable .moment-item-card.reservation .description {
  padding-right: 25px;
}

.moment-item-card .content{
	padding: calc(var(--spacing) * 2.4);
}

@media (max-width: 432px) {
	
	.moment-item-card h4,
	.moment-item-card.reservation h4 {
		padding-right: 15px;
		font-size: 1.45rem;
		font-size: 1.5rem;
	}
	.moment-item-card .content{
		padding: calc(var(--spacing) * 2.4);
	}
}

@media (max-width: 340px) {
	.moment-item-card h4,
	.moment-item-card.reservation h4 {
		font-size: 1.4rem;
	}
	.moment-item-card .content{
		padding: calc(var(--spacing) * 2.2);
	}
}

body.is-dragging-item .moment.sortable .meta-row span.reservation,
.moment.sortable .meta-row span.reservation{
	right: 29px;
	z-index: 7;
	width: 34px;
	height: 34px;
	min-width: 34px;
	top: 54px;
}
.moment.sortable .meta-row span.reservation .icon::before {
	width: 1em;
	height: 1em;
}

body.is-dragging-item .moment.sortable .meta-row span.price span.free,
.moment.sortable .meta-row span.price span.free {
	display: none;
}

.moment-item-card {
  position: relative;
  overflow: visible;
}

.moment.sortable .moment-item-card .drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Grip discret posé sur le bord gauche */
.moment-item-card .drag-handle {
  
  display: none;
  
  position: absolute;
  z-index: 6;

  right: 0px;
  max-width: 32px;
  width: 32px;
  min-width: 32px;
  height: 62px;  
  top: 34px;
  margin-right: 0;
  padding-top: 10px;
  border: 0;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.32);
  color: rgba(31, 41, 55, 0.38);

  backdrop-filter: blur(8px);
  box-shadow: none;

  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;

  opacity: 0.5;

  transition:
    opacity 0.18s ease,
    color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.moment-item-card .drag-handle::before {
	width: 20px;
	height:20px;
}

/* Touch / press */
.moment-item-card .drag-handle:active,
.moment-item-card.drag-picked .drag-handle,
body.is-dragging-item .moment-item-card .drag-handle {
  opacity: 1;
  color: rgba(31, 41, 55, 0.82);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14);
  
  background: transparent;
  box-shadow: none;
  
  cursor: grabbing;
}

/* Sur desktop seulement : apparition au survol */
@media (hover: hover) {
  .moment-item-card .drag-handle {
    opacity: 0.28;
  }
  .moment-item-card:hover .drag-handle {
    opacity: 0.85;
  }
}

/** Change Day Prev Next */

.day-nav-arrows {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.day-nav-arrow {
  position: absolute;
  top: 50%;

  width: 42px;
  height: 42px;
  padding: 0;

  border: 0;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.42);
  color: rgba(26, 29, 86, 0.52);

  backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);

  opacity: 0.42;
  pointer-events: auto;

  transform: translateY(-50%);

  cursor: pointer;

  transition:
    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background 150ms cubic-bezier(0.4, 0, 0.2, 1),
    color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.day-nav-arrow {
  position: absolute;
  top: 50dvh;
  width: 25px;
  height: 50px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.22);
  color: rgba(26, 29, 86, 0.52);
  backdrop-filter: blur(1px);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  opacity: 0.92;
  pointer-events: auto;
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), background 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0);
}

.day-nav-prev {
  left: max(8px, env(safe-area-inset-left));
  left: max(4px, env(safe-area-inset-left));
}

.day-nav-next {
  right: max(8px, env(safe-area-inset-right));
  right: max(4px, env(safe-area-inset-right));
}

.day-nav-arrow.active,
.day-nav-arrow:active,
.day-nav-arrow:hover,
.day-nav-arrow:focus-visible {
  opacity: 0.95;
  background: rgba(255, 255, 255, 0.92);
  color: #1a1d56;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16);
}

.day-nav-prev.active,
.day-nav-prev:active,
.day-nav-prev:hover,
.day-nav-prev:focus-visible {
  transform: translateY(-50%) translateX(-2px) scale(1.04);
  transform: translateY(-50%) translateX(-64px) scale(1.04);
}

.day-nav-next.active,
.day-nav-next:active,
.day-nav-next:hover,
.day-nav-next:focus-visible {
  transform: translateY(-50%) translateX(2px) scale(1.04);
  transform: translateY(-50%) translateX(64px) scale(1.04);
}

.day-nav-arrow::before {
  width: 21px;
  height: 21px;
}

.day-nav-arrow.hidden,
body:has(.websheet.is-visible) .day-nav-arrow,
body:has(.actionsheet.is-visible) .day-nav-arrow,
body.is-dragging-item .day-nav-arrow,
body.on-load .day-nav-arrow {
  opacity: 0.9;
  transition: opacity 350ms cubic-bezier(0.4, 0, 0.2, 1), transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/**body.screen-scroll .day-nav-next,*/
body.is-dragging-item .day-nav-next,
.day-nav-next.hidden,
.day-nav-next{
  transform: translateY(-50%) translateX(64px) scale(1.04);
}
/**body.screen-scroll .day-nav-prev,*/
body.is-dragging-item .day-nav-prev,
.day-nav-prev.hidden,
.day-nav-prev{
  transform: translateY(-50%) translateX(-64px) scale(1.04);
}

/**
.day-nav-arrow {
  width: 40px;
  height: 40px;
  opacity: 0.28;
  background: rgba(255, 255, 255, 0.26);
  box-shadow: none;
}

.day-nav-arrow:active,
.day-nav-arrow:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
}
*/

/** Swipe Change Day */

main.day {
  --day-swipe-progress: 0;
  --day-swipe-x: 0px;
}

main.day.is-swiping-day {
  transform: translate3d(var(--day-swipe-x), 0, 0);
  transition: none;
}

main.day.swipe-left-preview,
main.day.swipe-right-preview {
  will-change: transform;
}

main.day.swipe-left-out {
  transform: translate3d(-18px, 0, 0);
  opacity: 0.72;
  transition: transform 0.16s ease, opacity 0.16s ease;
}

main.day.swipe-right-out {
  transform: translate3d(18px, 0, 0);
  opacity: 0.72;
  transition: transform 0.16s ease, opacity 0.16s ease;
}