/* Fiche overrides on top of the 21oaks stylesheet (loaded after it). Colors = site tokens, so the palette
   swapper applies (kaki-dark is the terracotta of the Terra palette). */

/* Hero tags (bedrooms, bathrooms, surface): one solid tone, whatever lies behind them while scrolling */
.tag_info {
  background-color: var(--_colors---kaki--dark);
  /* ink text: white on kaki-dark is ~3:1, ink is ~6:1 and matches the black icons */
  color: var(--_colors---dark--base);
}

/* "À propos du bien" text: Interdisplay Regular is the lightest cut, the grayscale smoothing keeps
   light-on-photo text from rendering bold */
.p_apartments {
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Icons of "Le bien en détail" */
.icon_apart_box {
  background-color: var(--_colors---kaki--dark);
}

/* Interdisplay Light (OFL, rsms/inter v4.1): the one cut the site fonts lack */
@font-face {
  font-family: Interdisplay;
  src: url("/fonts/InterDisplay-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

.p_apartments {
  font-weight: 300;
}

/* Hero: scale_apartment_scroll.js (patched) only exposes --hero-invert; inverting the title and the
   description here instead of the whole block keeps the tags in their real color while scrolling */
.apartment_content .h1,
.apartment_content .bottom_desc {
  filter: invert(var(--hero-invert, 0%));
}

/* Scribble underline in the accent color: the 21oaks SVG strokes become masks over a token color */
[data-scribble]::after {
  background-image: none;
  background-color: var(--_colors---kaki--dark);
  -webkit-mask: no-repeat left bottom / 100% 100%;
  mask: no-repeat left bottom / 100% 100%;
}
[data-scribble='1']::after { -webkit-mask-image: url('/oaks/images/69f24399e38c6cb2a48593ee_scribble-1.svg'); mask-image: url('/oaks/images/69f24399e38c6cb2a48593ee_scribble-1.svg'); }
[data-scribble='2']::after { -webkit-mask-image: url('/oaks/images/69f2582761028a19bce7354f_scribble-2.svg'); mask-image: url('/oaks/images/69f2582761028a19bce7354f_scribble-2.svg'); }
[data-scribble='3']::after { -webkit-mask-image: url('/oaks/images/69f2824a8a8185078f641873_scribble-3.svg'); mask-image: url('/oaks/images/69f2824a8a8185078f641873_scribble-3.svg'); }
[data-scribble='4']::after { -webkit-mask-image: url('/oaks/images/69f331d0cad5839eb675d5c8_81027244c92a22f1edf005213c61daf9_scribble-4.svg'); mask-image: url('/oaks/images/69f331d0cad5839eb675d5c8_81027244c92a22f1edf005213c61daf9_scribble-4.svg'); }
[data-scribble='5']::after { -webkit-mask-image: url('/oaks/images/69f4f637911d43d3e36436b5_svg-line-5.svg'); mask-image: url('/oaks/images/69f4f637911d43d3e36436b5_svg-line-5.svg'); }
[data-scribble='hero']::after { -webkit-mask-image: url('/oaks/images/69f22e29852ebaeee90e1715_hero-svg.svg'); mask-image: url('/oaks/images/69f22e29852ebaeee90e1715_hero-svg.svg'); }

/* Price card in the site tones: ink primary action, accent (kaki-dark) details, quiet secondary action */
.icon_price {
  background-color: var(--_colors---kaki--dark);
}

.price_unit {
  font-size: 0.45em;
  color: var(--_colors---kaki--dark);
}

.price_request {
  font-size: 0.6em;
  color: var(--_colors---kaki--dark);
}

.button_apply {
  background-color: var(--_colors---dark--base);
  color: var(--_colors---cream--base);
}

.button_apply:hover {
  background-color: var(--_colors---kaki--dark);
  color: var(--_colors---dark--base);
}

.button_schedule {
  border-color: var(--_colors---dark--20);
  color: var(--_colors---dark--base);
}

.button_schedule:hover {
  border-color: var(--_colors---dark--base);
}
