/*
0: Variables
1: Universal
  1.0 Everything
	1.1 Body
  1.2 Text styles
    1.2.1 titles
    1.2.2 paragraphs
    1.2.3 lists
    1.2.4 hyperlinks
	1.3 Buttons
	1.4 Shared styles
  1.5 Navigation
  1.6 forms
2: Sign-In / Register / logout
3: no longer needed !!
4: Homepage
5: Soundstage
6: Gallery
7: Selection
8: Stats
9: Historic
10: Books
11: News
12: About
13: Donate / SWpro
14: Map
15: Search UI
16: Advertizing
17: Navbar
18: Incentive
19: Results
20: Result Page
21: Links
22: Footer
23: Photo presentation
24: Details & Summary
25: Pagination
26: Login modal (Temporary)
27: Disclaimer
28: FAQ
29: Definitions
30: User profile
31: SVG progress bar
 */

/* 0: Variables
========================================*/

:root {
  --neutral-xtra_light-color: hsl(0, 0%, 95%);
  --bg-color: hsl(0, 0%, 100%);
  --table-bg-color: hsl(0, 0%, 90%);
  --neutral-light-color: hsl(0, 1%, 50%);
  --neutral-medium-color: hsl(0, 4%, 30%);
  --neutral-dark-color: hsl(0, 8%, 20%);
  --vivid-color: hsl(212, 83%, 35%);
  --vivid-hover-color: hsl(212, 83%, 40%);
  --contrast-color: hsl(40, 100%, 45%);
  --studio-color: hsl(210, 100%, 20%);
  --studio-hover-color: hsl(40, 100%, 45%);
  --ranch-color: hsl(212, 83%, 35%);
  --ranch-hover-color: hsl(40, 100%, 45%);
  --main-border-radius: 6px;
  --basic_red: hsl(12, 100%, 50%);
  --basic_green: hsl(130, 96%, 46%);
  /* Demande explicite de Xavier (2026-10-03) : studio/ranch "a vendre". */
  --for-sale-color: hsl(0, 70%, 45%);

  --main-font-medium: "Gill Sans MT W01 Medium";
  --main-font-bold: "Gill Sans MT W01 Bold";
}

/* 1: Universal
========================================*/

/* 1.0 everything */

* {
  box-sizing: border-box;
  font-family: var(--main-font-medium); /* universaly sets every text object */
}

html {
  position: relative; /*helps make backdrop cover all the way down*/
  margin: 5px;

  /* needed to set footer to bottom */
  height: 100%;
}

/* 1.1 body */

body {
  background-color: var(--bg-color);
  /* margin: 5px 0px 0px 0px; */

  /* needed to set footer to bottom */
  min-height: 100vh;

  /*needed to set footer to bottom*/
  /* position: relative;  */

  /*needed to set footer to bottom 2nd method better for responsive */
  display: flex;
  flex-direction: column;

  /* needed to stop footer overlap*/
  /* padding-bottom: 100px; */
}

/* 1.2 text styles */

/* COMMERCIAL FONT PURCHASED BY XAVIER RUIZ */
@import url("https://fast.fonts.net/lt/1.css?apiType=css&c=d979cd3d-6df9-4e1b-bfc9-4444ca73fa18&fontids=5727175,5727187");

@font-face {
  font-family: "Gill Sans MT W01 Medium";
  src: url("../fonts/5727175/5dcd1b38-d595-4966-9d40-696b7b29c0cd.woff2")
      format("woff2"),
    url("../fonts/5727175/b9947f64-d079-4c63-bcb3-d50ea832f4d9.woff")
      format("woff");
}
@font-face {
  font-family: "Gill Sans MT W01 Bold";
  src: url("../fonts/5727187/86470f48-8e3a-4e92-814b-253f9befd235.woff2")
      format("woff2"),
    url("../fonts/5727187/6f221e27-e272-4694-960b-a1fad35ed77d.woff")
      format("woff");
}

/* 1.2 Text styles */

/* 1.2.1 titles  */

h1,
h2,
h3,
h4,
h5,
h6 {
  /*everything related to an H element */
  font-weight: normal;
  margin-bottom: -10px;
  letter-spacing: +0.025rem;
}

.text_title {
  /* text titles */
  color: var(--vivid-color);
  margin-bottom: -15px;
  font-size: 1.1rem;
}

.centered_title {
  /* h3 based / centered title */
  text-align: center;
  color: var(--vivid-color);
  font-size: 2.7rem;
  margin-top: 15px;
}

.centered_title_02 {
  /* h3 based / centered title used for results */
  text-align: center;
  margin-top: 20px;
  font-size: 1.1rem;
}

.page_title {
  /* main title on each main page */
  font-family: var(--main-font-bold);
  text-transform: uppercase;
  color: var(--vivid-color);
  font-size: 3rem;
  line-height: 2.8rem;
  margin-top: 0;
  margin-bottom: 0px;
  position: relative;
}

.page_title.contrast {
  /* main title in secondary color*/
  color: var(--contrast-color);
}

/* 1.2.2 paragraphs */

p {
  /* all p text */
  text-align: justify;
  font-size: 1rem;
  line-height: 1.3rem;
  color: var(--neutral-dark-color);
}

#homepage_subtitle {
  /* based on <p> / centered subtitle above search menu */
  text-align: center;
  margin-top: 10px;
  /* white-space: nowrap; */
  font-size: 1.25rem;
  line-height: 1.7rem;
}

/* 1.2.3 lists */
ul,
li,
dd {
  font-size: 1rem;
}

ul {
  padding-left: 20px;
}

dt {
  /* bold list */
  color: var(--vivid-color);
  font-size: 1rem;
  margin-top: 5px;
}

dt::before {
  /* parenthesis before dt element */
  content: "«";
}

dt::after {
  /* parenthesis after dt element */
  content: "»";
}

dd {
  /* regular list */
  text-align: left;
  margin-left: 0px;
  line-height: 20px;
  font-size: 1rem;
}

dd::before {
  /* dash before dd element */
  content: "";
}

/* 1.2.4 hyperlinks */
a {
  text-decoration: none;
  color: inherit;
}

.text_link {
  /* all text links */
  color: var(--vivid-color);
  text-decoration: none;
  font-size: 1rem;
  transition: color 50ms;
}

.text_link:hover {
  /* all text links */
  color: var(--vivid-hover-color);
}

.promotional_text {
  color: var(--neutral-xtra_light-color);
}

u {
  text-underline-offset: 4px;
}

/* 1.3 Buttons */

button {
  align-items: center;
  margin: 5px auto 5px auto;
}

.button_01 {
  /* main button style */
  display: block;
  font-size: 1.2rem;
  text-transform: lowercase;
  letter-spacing: 0.05rem;
  text-decoration: none;
  cursor: pointer;
  background-color: var(--vivid-color);
  color: var(--neutral-xtra_light-color);
  border: none;
  border-radius: var(--main-border-radius);
  padding: 9px 10px 11px 10px;
  height: 40px;
  min-width: 80px;
  transition: background-color 50ms;
}

.button_01:hover {
  /* main button hover effect */
  background-color: var(--vivid-hover-color);
  /* color: var(--vivid-color); */
}

/* .button_01.search_ui_button {
} */

.button_01.sign_reg_ui_button {
  /* in sign-in and register modal */
  margin-top: 20px;
  display: block;
}

.search_ui_master_container button {
  width: 100%;
  margin-top: 0;
}

.disclaimer {
  font-family: var(--main-font-medium);
  font-size: 0.8rem;
  margin: 0 25px 0 25px;
  padding: 0px;
}

.paypal_cancel {
  width: 100%;
}

/* 1.4 Shared styles */

.flex_container_01 {
  /* main container for horizontal layout */
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 960px;
  margin: 0px auto 20px auto;
}

summary.flex_container_01 {
  justify-content: flex-start;
  width: 740px;
  margin: 0px 0px 20px 0px;
}

.flex_container_02 {
  /* main container for horizontal layout */
  display: flex;
  width: 100%;
  margin-right: 15px;
  justify-content: flex-end;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}

.flex_container_03 > h2 {
  /* headers use 1 col each */
  flex: 1;
}

.flex_container_04 {
  /* 2 col wrapper containing titles for summary list */
  display: flex;
  justify-content: space-between;
}

.flex_container_04_alt {
  /* 2 col wrapper containing titles for summary list */
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
  flex-basis: 200px;
  flex-grow: 1;
  justify-content: flex-start;
}

.flex_container_04_alt_block {
  /* wrapper containing rows for result list */
  display: block;
  flex-direction: row;
  flex-flow: wrap;
  flex-basis: 200px;
  flex-grow: 1;
  justify-content: flex-start;
}

.textcontainer {
  /* area containing main text section */
  background-color: var(--neutral-xtra_light-color);
  border-radius: var(--main-border-radius);
  padding: 0px 20px;
  width: 740px;
}

.textcontainer.blue_BG {
  background-color: var(--vivid-color);
  padding-top: 1px;
  padding-bottom: 20px;
  margin-bottom: 10px;
}

.textcontainer_wide {
  /* for definitions page */
  background-color: var(--neutral-xtra_light-color);
  border-radius: var(--main-border-radius);
  padding: 0px 20px;
  width: 960px;
  margin-bottom: 25px;
}

.textcontainer > .text_link {
  /* specific to partner name */
  display: inline-block;
  padding-top: 20px;
}

.flex_container_01 > .textcontainer {
  /* for links page, blocks height */
  min-width: 200px;
}

.listcontainer {
  /* area containing main list section */
  display: flex;
  justify-content: space-around;
  background-color: var(--neutral-xtra_light-color);
  border-radius: 0px 0px 10px 10px;
  padding: 0px 10px;
  width: 960px;
  height: 451px;
  margin: 0px 40px 5px 0px;
}

.listcontainer_01 {
  /* area containing main list section */
  display: block;
  justify-content: space-around;
  background-color: var(--neutral-xtra_light-color);
  border: none;
  border-radius: 0px 0px 10px 10px;
  padding: 0px 0px;
  width: 470px;
  margin: 0px 20px 5px 0px;
}

.result_page_table_container {
  margin-top: 0px;
}

.listcontainer_02 {
  /* area containing main list section */
  background-color: var(--neutral-xtra_light-color);
  /* border: 2px solid var(--neutral-dark-color); */
  border-radius: var(--main-border-radius);
  padding: 5px 5px;
  width: 960px;
  margin: 10px 0px;
}

.listcontainer_03 {
  height: auto;
}

.listcontainer_04 {
  background-color: none;
}

.listcontainer_05 {
  /* area containing main list section */
  background-color: var(--neutral-xtra_light-color);
  border-radius: var(--main-border-radius);
  padding: 25px 0px;
  width: 95%;
  margin: 10px auto;
}

.listcontainer_05a {
  /* area containing main list section */
  background-color: var(--bg-color);
  border-radius: var(--main-border-radius);
  padding: 0px 0px;
  width: 100%;
  margin: 0 auto 10px auto;
  background-size: cover;
}

.listcontainer_06 {
  display: flex;
  flex-flow: wrap;
  justify-content: flex-start;
  background-color: var(--table-bg-color);
  border-radius: var(--main-border-radius);
  padding: 10px 20px;
  margin: 0 auto 10px auto;
}

.results_container {
  margin: auto;
  width: 960px;
}

.result_main_left_right {
  display: flex;
}

/* .result_main_left{
} */

.section_body {
  /* area containing an article */
  background-color: var(--neutral-xtra_light-color);
  border-radius: 0px 0px 10px 10px;
  padding: 5px 20px 5px 20px;
  margin: 0;
  overflow: auto;
  width: 740px;
}

.form_container_01 {
  position: absolute;
  left: 50vw;
  z-index: 30;
  width: 500px;
  background-color: var(--neutral-light-color);
  padding: 20px 40px 20px 40px;
  border-radius: var(--main-border-radius);
}

.form_container_02a {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  flex-basis: 500px;
  justify-content: space-between;
  align-items: flex-end;
  background-color: var(--neutral-light-color);
  padding: 10px 20px 10px 20px;
  border-radius: var(--main-border-radius);
  margin: 0px 0px 5px 0px;
}

.form_container_02 {
  /* area containing a form type 02 */
  display: flex;
  flex-wrap: wrap;
  /* flex-grow: 1; */
  /* flex-basis: 260px; */
  justify-content: space-between;
  align-items: flex-start;
  background-color: var(--neutral-medium-color);
  padding: 10px 20px 10px 20px;
  border-radius: var(--main-border-radius);
  margin: 0px 0px 5px 0px;
}

.form_container_02:last-of-type {
  /* last one only justified top */
  align-items: flex-start;
}

.form_container_04 {
  position: relative;
  display: flex;
  flex-flow: wrap;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  flex-grow: 1;
  /* width: 960px; */
  height: 37px;
  background-color: var(--vivid-color);
  color: var(--neutral-xtra_light-color);
  padding: 5px 0px 5px 25px;
  border-radius: var(--main-border-radius);
  margin: 10px 0px 5px 0px;
  cursor: pointer;
  transition: background-color 50ms;
}

.form_container_04:hover {
  background-color: var(--vivid-hover-color);
}

.form_container_04.shorter {
  /* shorter version */
  height: 25px;
  margin-top: 0px;
  background-color: var(--neutral-light-color);
  justify-content: start;
}

.form_container_05 {
  /* used for user profile */
  width: 450px;
  margin: auto;
}

.image_container_01 {
  position: relative;
  width: 960px;
  margin: 0px auto 35px auto;
}

.picto_container {
  /* used to contain a lorge icon */
  display: flex;
  justify-content: center;
  /* display: inline-block; */
  margin: 25px 0px 0px 0px;
  /* width: 75px; */
  background-color: var(--bg-color);
  /* border-radius: var(--main-border-radius); */
}

.title_container {
  /* container for page title*/
  position: relative;
  width: 960px;
  margin: 0px auto;
  /* align-self: center; */
}

.title_container_alt {
  position: relative;
  width: 960px;
  margin: 0px auto 0px auto;
}

.title_studio_logo {
  position: absolute;
  right: 0px;
  top: -10px;
  width: 120px;
  height: 120px;
}

.installation_conversion_ligne {
  /* Bascule imperial/metric des pages plateau et bassin : posee dans le
     fil normal juste au-dessus du cadre des photos (voir _fichiers),
     plutot qu'en position absolute dans le bandeau de titre ou elle
     entrait en collision avec le logo du studio, ou juste apres le
     bandeau ou elle flottait seule dans le vide a cote d'un encadre
     plus etroit. */
  text-align: right;
  margin-bottom: 10px;
}

.summary_title {
  font-size: 1.3rem;
  color: var(--vivid-color);
  padding: 5px;
}

/* 1.5 Navigation */

/* 1.6 forms */

/* Labels */

label {
  /* label text style */
  display: inline-block;
  font-size: 0.98rem;
  letter-spacing: -0.25px;
  line-height: 1.3rem;
  color: var(--neutral-xtra_light-color);
  margin: 10px 0 3px 0;
}

/* Inputs & Textareas */

input,
textarea {
  /* form input text style */
  color: var(--vivid-color);
  background-color: var(--neutral-xtra_light-color);
  font-size: 1rem;
  border-radius: var(--main-border-radius);
  resize: vertical;
  border: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--neutral-light-color);
}

textarea {
  width: 100%;
  height: 200px;
  padding: 10px;
  margin: 5px auto 5px auto;
  display: block;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"] {
  width: 100%;
  height: 40px;
  padding: 10px;
  margin: 5px auto 5px auto;
  display: block;
}

input[type="submit"],
input[type="reset"] {
  display: inline-block;
  width: auto;
  background-color: var(--neutral-dark-color);
  color: var(--neutral-xtra_light-color);
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type="submit"]:hover,
input[type="reset"]:hover {
  background-color: var(--vivid-color);
}

/* Select menu */

select {
  /* main "select" input style */
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  cursor: pointer;
  background: var(--neutral-xtra_light-color);
  color: var(--neutral-light-color);
  border: none;
  font-size: 1rem;
  margin: 5px 0 5px 0;
  padding: 10px;
  border-radius: var(--main-border-radius);
  height: 40px;
  flex-basis: 190px;
}

select::-ms-expand {
  /* Remove IE arrow */
  display: none;
}

select:focus {
  /* Remove "focus" outline */
  outline: none;
}

select#type,
select#classification {
  max-width: 100px;
}

/* 2: Signin / Register / Logout
========================================*/

.backdrop {
  /* full screen backgroud for modal */
  background-color: var(--main-bg-color);
  -webkit-backdrop-filter: blur(8px); /* for safari */
  -moz-backdrop-filter: blur(80px); /* for firefox */
  -moz-filter: blur(80px); /* for firefox */
  -o-backdrop-filter: blur(8px); /* for opera */
  backdrop-filter: blur(8px); /* for chrome */
  filter: opacity(0.5);
  position: absolute;
  top: 0;
  bottom: 0%;
  left: 0%;
  right: 0%;
  z-index: 20;
}

#register_form {
  display: none;
  transform: translate(-250px); /* offsets the center of dialogue box */
  filter: opacity(1);
  animation-name: fade_in;
  animation-duration: 0.3s;
  animation-timing-function: linear;
}

@keyframes fade_in {
  /* fades in form */
  from {
    filter: opacity(0);
  }
  to {
    filter: opacity(1);
  }
}

.pop-up_title {
  font-size: 1.3rem;
  line-height: 2.1rem;
  margin: 0px;
  color: var(--neutral-xtra_light-color);
  text-align: center;
}

.close-signin {
  color: var(--neutral-xtra_light-color);
  background-color: var(--vivid-color);
  display: inline-block;
  padding: 2px 6px 2px 6px;
  border-radius: 20px;
  border-style: solid;
  border-width: 2px;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 0px;
  transition: color 50ms;
}

.close-signin:hover {
  color: var(--vivid-color);
  background-color: var(--neutral-xtra_light-color);
}

/* #signin,
#register,
#separator_01,
#separator_02,
#logout,
#admin,
#user, */
.admin_area {
  color: var(--neutral-xtra_light-color);
  font-size: 0.9rem;
  cursor: pointer;
  /* position: absolute; */
  /* z-index: 100; */
  /* top: -85px; */
  transition: color 50ms;
}

.admin_area.user_name {
  color: var(--contrast-color);
  font-weight: 900;
}

.admin_area.user_name:hover {
  color: var(--neutral-xtra_light-color);
}

#signin {
  right: 80px;
}

#signin:hover {
  color: var(--vivid-color);
}

#separator_01 {
  right: 65px;
  top: -83px;
}

#register {
  right: 20px;
}

#register:hover {
  color: var(--vivid-color);
}

#separator_02 {
  right: 120px;
  top: -83px;
}

#admin {
  right: 80px;
}

#admin:hover {
  color: var(--vivid-color);
}

#logout {
  right: 20px;
}

#logout:hover {
  color: var(--vivid-color);
}

#sign-in_form,
#forgot-password {
  display: none;
  transform: translate(-250px); /* offsets the center of dialogue box */
  filter: opacity(1);
  animation-name: fade_in;
  animation-duration: 0.3s;
  animation-timing-function: ease;
}

@keyframes fade_in {
  /* fades in form */
  from {
    filter: opacity(0);
  }
  to {
    filter: opacity(1);
  }
}

#reset_password_form {
  display: block;
  transform: translate(-250px); /* offsets the center of dialogue box */
}

.sign_reg_subtext_01 {
  text-align: center;
  margin-top: 10px;
  color: var(--neutral-xtra_light-color);
}

#goToRegister,
#goToSignIn,
#goToReset {
  color: var(--neutral-xtra_light-color);
  cursor: pointer;
  font-size: 1rem;
  text-decoration: underline;
}

.profile_title {
  color: var(--neutral-xtra_light-color);
  font-size: 1rem;
  margin-top: 0;
  margin-bottom: 5px;
}

.profile_detail {
  color: var(--studio-color);
  font-size: 1.6rem;
  margin-top: 0;
  margin-bottom: 20px;
}

#profile_modal {
  display: none;
  transform: translate(-250px); /* offsets the center of dialogue box */
  filter: opacity(1);
  animation-name: fade_in;
  animation-duration: 0.3s;
  animation-timing-function: linear;
}

#activation_account {
  display: none;
  transform: translate(-250px); /* offsets the center of dialogue box */
  filter: opacity(1);
  animation-name: fade_in;
  animation-duration: 0.3s;
  animation-timing-function: linear;
}

@keyframes fade_in {
  /* fades in form */
  from {
    filter: opacity(0);
  }
  to {
    filter: opacity(1);
  }
}

.info_span {
  display: block;
  text-align: center;
  font-size: 1.2rem;
  color: var(--neutral-xtra_light-color);
  border-radius: var(--main-border-radius);
  margin-top: 15px;
  background-color: var(--basic_red);
  padding: 10px;
}

.info_span_success {
  display: block;
  text-align: center;
  font-size: 1.2rem;
  color: var(--neutral-xtra_light-color);
  border-radius: var(--main-border-radius);
  margin-top: 15px;
  background-color: var(--basic_green);
  padding: 10px;
}

.press_disclaimer {
  color: var(--neutral-xtra_light-color);
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.8rem;
  background-color: var(--contrast-color);
  border-radius: var(--main-border-radius);
  padding: 10px;
  margin: -110px 0px 0px 0px;
  width: 100%;
}

/* 4: Homepage
========================================*/

.main_container {
  /*main container for most items on main page (for flex) */
  display: flex;
  width: 960px;
  margin: 0px auto 35px auto;
}

.sub_container {
  /* container for the search menu and map (for flex) */
  margin-right: 0px; /* space before ad on right */
  width: 960px;
}

#total_studios,
#total_soundstages,
#total_sqft,
#total_countries {
  font-weight: var(--main-font-bold);
  /* font-size: initial; */
  color: var(--vivid-color);
}

.beta_logo {
  position: absolute;
  top: 7px;
  height: 1rem;
  color: var(--neutral-xtra_light-color);
  background-color: var(--contrast-color);
  border-radius: var(--main-border-radius);
  font-size: 0.6rem;
  line-height: 1rem;
  padding: 0 4px 0 6px;
  margin-left: 6px;
}

.header_container {
  width: 960px;
  margin: auto;
}

/* 5: Soundstage
========================================*/

.ss_info_container_00 {
  display: flex;
  flex-flow: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.ss_specialised_container_01 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  background-color: var(--neutral-medium-color);
  border-radius: var(--main-border-radius);
  width: 475px;
  padding: 3px 25px 10px 25px;
  margin-bottom: 10px;
}

.ss_specialised_subcontainer_01 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  width: 100%;
}

.ss_specialised_title_01 {
  color: var(--neutral-xtra_light-color);
}

.ss_specialised_subcontainer_01 > p {
  color: var(--neutral-xtra_light-color);
  font-size: 2rem;
  margin: 0px 25px 0px 0px;
  line-height: 2.5rem;
}

.ss_info_master_container {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 100%;
}

.ss_info_container_01 {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  background-color: var(--neutral-xtra_light-color);
  border-radius: var(--main-border-radius);
  width: 475px;
  padding: 3px 25px 10px 25px;
  margin-bottom: 10px;
}

.ss_info_container_02 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  background-color: var(--neutral-xtra_light-color);
  border-radius: var(--main-border-radius);
  width: 475px;
  padding: 3px 25px 10px 25px;
  margin-bottom: 10px;
}

.ss_subcontainer_03 {
  width: 21%;
}

.ss_subcontainer_03:last-child {
  /* last number (size) is larger */
  width: 34%;
}

.flex_start:first-of-type {
  margin-right: auto;
}

.ss_subcontainer_01 {
  width: 240px;
}

.ss_subcontainer_02 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  /* width: 100%; */
}

.ss_info_txt_01 {
  font-size: 3rem;
  font-family: var(--main-font-bold);
  text-transform: uppercase;
  line-height: 0;
  margin-top: 20px;
  margin-bottom: 30px;
}

.ss_info_text_decoration {
  font-family: var(--main-font-bold);
  color: var(--neutral-dark-color);
}

.ss_info_txt_02 {
  font-size: 2rem;
  font-family: var(--main-font-bold);
  text-transform: lowercase;
  line-height: 0;
  margin-top: 20px;
  margin-bottom: 30px;
}

.ss_info_unit_01,
.ss_info_unit_02 {
  font-family: var(--main-font-medium);
  text-transform: lowercase;
  font-size: 75%;
  margin-left: -0.3rem;
}

.ss_info_unit_02::after {
  content: "\00B2";
}

.ss_arrow_down {
  position: absolute;
  z-index: 10;
  left: 190px;
  top: -17px;
  margin: 0 auto;
}

.ss_arrow_down polygon {
  fill: var(--vivid-hover-color);
}

.ss_arrow_right {
  position: absolute;
  z-index: 10;
  right: 192px;
  top: 30px;
  margin: 0 auto;
  rotate: 0deg;
}

.ss_arrow_right polygon {
  fill: var(--vivid-hover-color);
}

/* 6: Gallery
========================================*/

.no_image_container {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  margin: 50px 0 50px 0;
  width: 100%;
}

.specialised_tag {
  display: inline-block;
  background-color: var(--contrast-color);
  color: var(--neutral-xtra_light-color);
  padding: 4px 6px 5px 6px;
  border-radius: var(--main-border-radius);
  line-height: 1rem;
  margin-top: 20px;
}

/* .centered_text{
  text-align: center;
} */

/* 7: Selection
========================================*/

.selection_id {
  /* removes link highlight */
  /* color: var(--vivid-color); */
}

.dropdown-content {
  display: inline-block;
  position: absolute;
  z-index: 10;
  left: 20px;
  top: 105px;
  width: 175px;
  background-color: var(--neutral-xtra_light-color);
  border-radius: var(--main-border-radius);
  max-height: 100px;
  margin-top: 6px;
  padding: 2px 0px 10px 0px;
  overflow-x: hidden;
  overflow-y: auto;
}

.dropdown-content li {
  color: var(--neutral-dark-color);
  font-size: 0.9rem;
  line-height: 1.2rem;
  width: 160px;
  padding: 0px 8px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-content a:hover {
  color: var(--contrast-color);
}

.selection_dropdown {
  font-size: 0.9rem;
  margin: 10px 0px 0px 0px;
  color: var(--neutral-dark-color);
  padding: 4px 8px 0px 0px;
}

.project_list {
  background-color: var(--neutral-xtra_light-color);
  border-radius: var(--main-border-radius);
  width: 740px;
  min-height: 40px;
  max-height: 130px;
  margin-top: 6px;
  margin-bottom: 10px;
  padding: 2px 0px 10px 0px;
  overflow-x: hidden;
  overflow-y: scroll;
}

.project_group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
  border-bottom: 1px var(--vivid-color) solid;
}

.project_main_item {
  font-size: 0.9rem;
  align-self: self-start;
  text-align: left;
  width: 75%;
  margin: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project_main_item:hover,
.project_sub-item:hover {
  color: var(--contrast-color);
}

.project_list_sub-group {
  display: flex;
  justify-items: flex-end;
  flex-basis: 100px;
}

.project_sub-item {
  font-size: 0.75rem;
  text-align: center;
  text-decoration: underline;
  margin: 5px;
}

.project_sub-item_checkbox {
  margin: 10px 10px 0 0px;
}

.project_main_item input {
  border-radius: 0%;
  outline: var(--vivid-color) solid 50px;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  height: 30px;
  padding-left: 5px;
}

.create_project {
  color: var(--vivid-color);
  text-decoration: underline;
}

.create_new_project {
  font-size: 1rem;
  color: var(--neutral-xtra_light-color);
  background-color: var(--vivid-color);
  border-radius: var(--main-border-radius);
  padding: 4px 10px;
  border: none;
  margin-top: 10px;
  margin-bottom: 20px;
  float: right;
}

.create_new_project:hover {
  background-color: var(--vivid-hover-color);
}

.selection_input {
  margin: 0 !important;
  padding: 0 0 3px 5px !important;
  height: auto !important;
  width: 450px !important;
  border-radius: 0 !important;
}

/* 8: Stats
========================================*/

.stats_container {
  margin: 0 auto 0 auto;
  width: 960px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.stats_subcontainer{
  margin-bottom: 30px;
  width: 400px;
}

.stats_table_item {
  background-color: var(--neutral-xtra_light-color);
}

.stat_table_title {
  font-size: 1.6rem;
}

.col4_table_item td:first-child {
  max-width: 25px;
  min-width: 25px;
  color: var(--vivid-color);
}

.col4_table_item td:nth-child(2) {
  table-layout: fixed;
  max-width:220px;
  min-width:220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col4_table_item td:nth-child(3) {
  max-width: 70px;
  min-width: 70px;
  color: var(--vivid-color);
  text-align: right;
}

.col4_table_item td:nth-child(4) {
  table-layout: fixed;
  max-width:130px;
  min-width:130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col5_table_item td:first-child {
  max-width: 25px;
  min-width: 25px;
  color: var(--vivid-color);
}

.col5_table_item td:nth-child(2) {
  table-layout: fixed;
  max-width:220px;
  min-width:220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col5_table_item td:nth-child(3) {
  max-width: 503px;
  min-width: 503px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col5_table_item td:nth-child(4) {
  table-layout: fixed;
  max-width:70px;
  min-width:70px;
  color: var(--vivid-color);
  text-align: right;
}

.col5_table_item td:nth-child(5) {
  table-layout: fixed;
  max-width:130px;
  min-width:130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col6_table_item td:first-child {
  max-width: 25px;
  min-width: 25px;
  color: var(--vivid-color);
}

.col6_table_item td:nth-child(2) {
  table-layout: fixed;
  max-width:220px;
  min-width:220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col6_table_item td:nth-child(3) {
  color: var(--vivid-color);
  max-width: 70px;
  min-width: 70px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col6_table_item td:nth-child(4) {
  table-layout: fixed;
  max-width:70px;
  min-width:70px;
  text-align: right;
}

.col6_table_item td:nth-child(5) {
  table-layout: fixed;
  max-width:130px;
  min-width:130px;
  text-align: right;
}

.col6_table_item td:nth-child(6) {
  table-layout: fixed;
  max-width:70px;
  min-width:70px;
  text-align: right;
}

.stats_container th,
.stats_container td {
  text-align: left;
}

.stats_class_label {
  display: inline-block;
  color: var(--neutral-xtra_light-color);
  text-align: center;
  background-color: var(--vivid-color);
  border-radius: var(--main-border-radius);
  padding: 2px 4px;
  margin-bottom: 5px;
}

.stats_class_definition{
  display: inline-block;
  margin: 0 0 0 0;
}

.canvas_world_pie{
  background-color: var(--neutral-xtra_light-color);
  width: 35%;
  height: 35%;
  text-align: left;
  margin-top: 70px;
  outline-style: solid;
  outline-color: var(--contrast-color);
  outline-width: 2px;
  padding-bottom: 20px;
}

/* #world_stats{
  rotate: 90deg;
} */

.chart_title{
  display: block;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 15px;
}

/* 9: Historic
========================================*/

/* 10: Books
========================================*/

.book_main_container {
  margin: 0px auto 0px auto;
  width: 960px;
}

.book_flex_container {
  display: flex;
  justify-content: space-between;
  /* align-content: flex-start; */
  align-items: flex-start;
  margin-bottom: 20px;
}

.books_section_header {
  /* book title */
  font-size: 1rem;
  color: var(--neutral-xtra_light-color);
  background-color: var(--neutral-light-color);
  padding: 7px 10px 7px 15px;
  border-radius: 10px 10px 0px 0px;
  width: 740px;
}

.book_author {
  /* for author mention in news header */
  line-height: 0rem;
}

.book_author_prefix::before {
  content: "by ";
}

.isbn {
  font-size: inherit;
  color: var(--vivid-hover-color);
}
.isbn::before {
  content: "(ISBN-13: ";
}

.isbn::after {
  content: ")";
}

.book {
  /* book thumbnail */
  width: 200px;
  height: auto;
  object-fit: cover;
  margin-top: 33px;
}

.fsd_note {
  /* notes on book */
  font-style: italic;
  color: var(--neutral-dark-color);
}

.fsd_note::before {
  /* prefix to note */
  content: "our opinion";
  margin-right: 10px;
  color: var(--neutral-xtra_light-color);
  background-color: var(--vivid-color);
  padding: 2px 5px 2px 5px;
  outline-style: solid;
  outline-width: 1px;
}

/* 11: News
 ========================================*/

.news_container {
  /*contains all news entries */
  width: 100%;
}

.news_section {
  /* main details & summary design for news entries */
  display: block;
  width: 100%;
  font-size: 1rem;
  line-height: 1.8rem;
  background-color: var(--neutral-xtra_light-color);
  border-radius: 6px 6px 0px 0px;
  margin-top: 10px;
}

.news_summary {
  /* specific design for news entry summary */
  color: var(--neutral-xtra_light-color);
  background-color: var(--vivid-color);
  border-radius: 6px 6px 0px 0px;
  transition: background-color 50ms;
}

.news_summary:hover {
  color: var(--neutral-xtra_light-color);
  background-color: var(--vivid-hover-color);
}

.news_author_name,
.news_date {
  font-size: 1rem;
  text-align: right;
  display: block;
  /* min-width: 90px; */
}

.news_date {
  display: block;
}

.news_author_name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news_headline {
  text-transform: uppercase;
  width: 730px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news_headline,
.news_publisher_name {
  text-align: left;
  display: block;
}

.span_flexcontainer_01 {
  /* flex container for summary */
  display: flex;
  justify-content: space-between;
  padding: 0 0 0 10px;
}

.news_header_right {
  /* right section of summary */
  background-color: var(--neutral-medium-color);
  padding: 0 10px 0 10px;
  width: 210px;
}

.details_text_01 {
  padding: 15px;
  text-align: justify;
  line-height: 1.5rem;
}

.news_divider {
  width: 20px;
  background-color: var(--bg-color);
}

/* 12: About
========================================*/

.profile_picture {
  width: 100px;
  height: 100%;
  border-radius: var(--main-border-radius);
  float: left;
  margin-top: 0px;
  /* margin-right: 10px; */
}

.contact_form_container {
  /* width: 960px; */
  margin: auto;
  border-radius: 5px;
  background-color: var(--neutral-light-color);
  padding: 20px;
}

.profile_picture + .textcontainer {
  width: 620px;
}

.textcontainer.right_column {
  /* for contact page, blocks width */
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 200px;
  height: 50px;
  color: var(--neutral-xtra_light-color);
  background-color: var(--vivid-color);
}

.textcontainer.right_column:hover {
  background-color: var(--vivid-hover-color);
  cursor: pointer;
}

/* .textcontainer.right_column > p,
.textcontainer.right_column > h3 {
  color: var(--neutral-xtra_light-color);
  text-align: left;
} */

/* .email_address {
  height: 20px;
  width: 100%;
} */

/* 13: Donate / SWpro
========================================*/

.price_container {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  margin-bottom: -20px;
}

.price_card {
  display: flex;
  flex-direction: column;
  width: 210px;
  aspect-ratio: 1;
  background-color: var(--vivid-color);
  border-radius: var(--main-border-radius);
  margin: 0px 0px 10px 0px;
  cursor: pointer;
}

.free_account {
  background-color: var(--contrast-color);
}

.price_txt {
  color: var(--neutral-xtra_light-color);
  padding: 10px;
  text-align: center;
}

.price_txt.price_txt_01 {
  font-size: 4rem;
  margin: 40px 0px 10px 0px;
}

.price_txt_01::after {
  content: "/m.";
  font-size: 40%;
}

.price_txt.price_txt_02 {
  font-size: 1rem;
  margin: 0px 0px 5px 0px;
}

.price_txt.price_txt_04 {
  font-size: 1.4rem;
  border-bottom: 3px solid var(--neutral-xtra_light-color);
  padding: 10px;
  margin: 0px;
  background-color: var(--neutral-dark-color);
  border-radius: var(--main-border-radius) var(--main-border-radius) 0px 0px;
}

.price_txt_03 {
  font-size: 1.4rem;
  text-align: center;
  color: var(--neutral-xtra_light-color);
  padding: 10px;
  margin: 0px;
  background-color: var(--vivid-color);
  border-radius: var(--main-border-radius);
  cursor: pointer;
}

/* 14: Map
========================================*/

#worldmap {
  /* main svg group */
  margin: 20px auto 0px auto;
}

#Alaska_Greenland,
#Africa,
#Asia,
#Oceania,
#Europe,
#South_America,
#Canada,
#Central_America,
#West_USA,
#East_USA,
#Russia,
#Middle_East,
#UK_Ireland {
  fill: var(--contrast-color);
  stroke: var(--contrast-color);
  stroke-miterlimit: 10;
  transition: fill 50ms, stroke 50ms, stroke-width 50ms;
}

#Alaska_Greenland:hover,
#Africa:hover,
#Asia:hover,
#Oceania:hover,
#Europe:hover,
#South_America:hover,
#Canada:hover,
#Central_America:hover,
#West_USA:hover,
#East_USA:hover,
#Russia:hover,
#Middle_East:hover,
#UK_Ireland:hover {
  fill: var(--vivid-color);
  stroke: var(--vivid-color);
}

/* Mapbox */

.mapbox_main {
  width: 100%;
  height: 500px;
  margin: 25px 0px;
  object-fit: contain;
}

.map_marker_name {
  color: var(--vivid-color);
  font-size: 1.2rem;
  text-align: center;
  /* border: none; */
  margin: 10px 0px 0px 0px;
  padding: 0px 0px;
  text-decoration: none;
}

.map_marker_class {
  display: inline-block;
  color: var(--neutral-xtra_light-color);
  background-color: var(--vivid-color);
  border-radius: var(--main-border-radius);
  font-size: 1.8rem;
  text-align: center;
  margin: 10px 0px 0px 0px;
  padding: 7px;
}

/* 15: Search UI
========================================*/

.search_ui_master_container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.search_ui_subcontainer_01 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  column-gap: 5px;
}

.search_ui_subcontainer_col_02 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: var(--neutral-medium-color);
  padding: 10px 20px 10px 20px;
  border-radius: var(--main-border-radius);
  margin: 0px 0px 5px 0px;
}

.search_ui_subcontainer_col_03 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  margin: 0px;
}

.search_ui_subcontainer_col_04 {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-flow: wrap;
  align-content: center;
  justify-content: space-between;
  background-color: var(--neutral-medium-color);
  padding: 10px 0px 10px 20px;
  border-radius: var(--main-border-radius);
  margin: 0px 0px 5px 0px;
}

.flex_size_fixer_01 {
  flex-grow: 0;
  width: 563px;
}

.flex_size_fixer_02 {
  flex-grow: 0;
  width: 165px;
}

.flex_size_fixer_03 {
  flex-grow: 0;
  width: 392px;
}

label#search_filters {
  margin: 0;
}

.svg_arrow {
  transform: rotate(90deg) scale(0.75, 0.75);
  position: absolute;
  top: 9px;
  left: 540px;
}

.form_subtitle {
  /* form section subtitle style */
  font-size: 1rem;
  color: var(--neutral-xtra_light-color);
  margin: 5px 20px 0px 0px;
}

label.legend {
  /* label legend text style */
  font-size: 1rem;
  color: var(--neutral-xtra_light-color);
  text-align: left;
  margin: 0 5px 0 5px;
  width: 75px;
}

.legend::before {
  content: "(";
}

.legend::after {
  content: " m\00B2)";
}

.make_invisible {
  /*designed to hide something when needed to balance layout*/
  opacity: 0;
}

.in_sq_meters {
  display: flex;
  flex-basis: 60px;
  flex-wrap: wrap;
  align-items: center;
}

/* #in_sq_meters_01 {
  align-self: flex-end;
  line-height: 3rem;
} */

.picto_01 {
  width: 20px;
  height: auto;
  position: absolute;
  right: 15px;
  bottom: 13px;
}

.search_number {
  display: flex;
  flex-basis: 75px;
  flex-wrap: wrap;
  align-content: space-between;
}

.search_number input {
  height: 40px;
  width: 75px;
  /* margin-left: 0px; */
  border-radius: var(--main-border-radius);
  padding: 0 0 0 0.5rem;
}

.search_number_description {
  display: flex;
  flex-basis: 190px;
  flex-wrap: wrap;
  align-content: space-around;
}

.two_btn_row {
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.smaller_button_01 {
  flex-basis: 20px;
  color: var(--neutral-dark-color);
  background-color: var(--contrast-color);
}

.smaller_button_01:hover {
  color: var(--neutral-xtra_light-color);
  background-color: var(--contrast-color);
}

.separator_text {
  color: var(--neutral-xtra_light-color);
  text-align: left;
}

.search_ui_cover {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0);
  height: 526px;
  width: 960px;
  position: absolute;
  z-index: 10;
  animation: fade_ui_cover 1s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes fade_ui_cover {
  from {
    background-color: rgba(255, 255, 255, 0);
  }
  to {
    background-color: rgba(255, 255, 255, 0.5);
  }
}

.search_ui_cover_txt {
  background-color: var(--vivid-color);
  color: var(--neutral-xtra_light-color);
  text-align: center;
  line-height: 2.5rem;
  font-size: 2.5rem;
  padding: 25px;
  border-radius: var(--main-border-radius);
  margin-bottom: 100px;
  opacity: 0%;
  animation: fade_ui_cover_txt 1s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes fade_ui_cover_txt {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

/* 16: Advertizing
========================================**/

.ad_right_parent {
  margin: 0px 0px 0px 0px;
}

.ad_right {
  border-radius: var(--main-border-radius);
  width: 200px;
}

.ad_top_parent {
  margin: auto;
  width: 960px;
}

.ad_top {
  border-radius: var(--main-border-radius);
  display: block;
  margin: 0px auto 10px auto;
  width: 960px;
}

/* 17: Navbar
========================================**/

.navbar_icons {
  display: flex;
  justify-content: space-between;
  width: 960px;
  margin: 0px auto 20px auto;
}

.social_icons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 960px;
}

.social_icons_text {
  font-size: 0.9rem;
  color: var(--neutral-medium-color);
}

.return {
  display: block;
  font-size: 0.9rem;
  color: var(--neutral-medium-color);
}

.return:hover {
  color: var(--vivid-color);
}

/* font awesome pictos */
.fab,
.fas {
  font-size: 1.2rem;
  color: var(--neutral-medium-color);
  padding: 0;
  transition: color 50ms;
}

.fab:hover,
.fas:hover {
  color: var(--vivid-color);
  cursor: pointer;
}

.nav_container {
  position: relative;
  margin: 0px auto;
  width: 960px;
  display: flex;
}

.fsb_logo_nav {
  height: 80px;
  border-radius: var(--main-border-radius);
}

.nav_ul_container {
  background-color: var(--neutral-dark-color);
  border-radius: var(--main-border-radius);
  width: 100%;
  height: 80px;
  margin-left: 5px;
  position: relative;
}

.nav_ul {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  list-style: none;
  padding: 0 10px;
  margin-top: 42px;
}

.nav_ul > div > li {
  display: inline-block;
  text-align: center;
  font-size: 1rem;
  color: var(--neutral-xtra_light-color);
  padding: 4px 10px;
  background-color: var(--vivid-color);
  border-radius: var(--main-border-radius);
  margin: 0 5px 0 5px;
  min-width: 80px;
  white-space: nowrap;
  transition: color 50ms;
}

.nav_ul > div > li:hover {
  color: var(--neutral-xtra_light-color);
  background-color: var(--vivid-hover-color);
}

.nav_ul > div > li.hilite {
  color: var(--neutral-xtra_light-color);
  background-color: var(--neutral-light-color);
}

.nav_dropdown {
  position: absolute;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  /* width: 474px; */
  width: auto;
  height: 30px;
  bottom: -46px;
  right: 0px;
  padding-right: 20px;
  background-color: var(--contrast-color);
  border-radius: var(--main-border-radius);
}

.nav_dropdown li {
  list-style-type: none;
  color: var(--neutral-xtra_light-color);
  margin: 0 10px 0 10px;
  padding: 4px 0 0 0;
  transition: color 50ms;
}

.nav_dropdown li:hover {
  color: var(--neutral-light-color);
}

.nav_dropdown_visibility {
  display: none;
}

/* .nav_dropdown_show{
  display: block;
} */

/* 19: Results List
========================================**/

.main_table_container {
  background-color: var(--table-bg-color);
  border-radius: var(--main-border-radius);
  padding: 10px 0;
  margin-bottom: 20px;
}

.result_page_list ul {
  padding-left: 20px;
  margin-left: 5px;
  margin-right: 5px;
}

.result_page_list ul li {
  font-size: 1.05rem;
  list-style: none;
  line-height: 1.75rem;
}

.result_page_list ul li::before {
  content: "";
}

span {
  color: var(--vivid-color);
  /* font-size: 100%; */
}

.result_page_header {
  /* result title info */
  font-size: 1rem;
  line-height: 18px;
  color: var(--neutral-xtra_light-color);
  background-color: var(--studio-color);
  padding: 15px 10px 10px 20px;
  border-radius: 10px 10px 0px 0px;
  width: 470px;
  position: relative;
}

.result_page_header_ranch {
  /* result title info */
  color: var(--neutral-xtra_light-color);
}

.result_page_header_closed {
  background-color: var(--neutral-dark-color);
}

/* Demande explicite de Xavier (2026-10-03) : bandeau rouge pour un
   studio/ranch "a vendre" (prioritaire sur .result_page_header_closed si
   les deux etaient vrais -- voir studios/show.blade.php). */
.result_page_header_for_sale {
  background-color: var(--for-sale-color);
  color: var(--neutral-xtra_light-color);
}

.studio_name {
  font-size: 1.1rem;
  line-height: 1.4rem;
  margin-bottom: 15px;
  width: 390px;
  text-align: left;
}

#studio_name {
  font-size: 1.1rem;
  line-height: 1.4rem;
  margin-bottom: 15px;
  margin-right: 140px;
  margin-top: 50px;
  /* width: 390px; */
  text-align: right;
}

.studio_name_alt {
  font-size: 1rem;
  margin-bottom: 5px;
  margin-top: 10px;
  text-align: left;
}

.uppercase {
  text-transform: uppercase;
}

.studio_address {
  padding-top: 5px;
  font-size: 0.9rem;
}

.result_summary {
  /* result summary item */
  font-size: 1rem;
  line-height: 1.1rem;
  color: var(--neutral-xtra_light-color);
  padding: 50px 10px 0px 15px;
  border-radius: var(--main-border-radius);
  width: 182px;
  height: 182px;
  position: relative;
  margin: 5px 5px 5px 5px;
  overflow: hidden;
  text-transform: uppercase;
  /* margin-right: 5px; */
}

.studio_summary {
  /* studio item color */
  background-color: var(--studio-color);
  transition: background-color 50ms;
}

.studio_summary:hover {
  background-color: var(--studio-hover-color);
}

.ranch_summary {
  /* ranch item color */
  background-color: var(--ranch-color);
  transition: background-color 50ms;
}

.ranch_summary:hover {
  background-color: var(--ranch-hover-color);
}

.closed_summary {
  /* ranch item color */
  background-color: var(--neutral-dark-color);
  transition: background-color 50ms;
}

.closed_summary:hover {
  background-color: var(--ranch-hover-color);
}

.for_sale_summary {
  /* studio/ranch a vendre : prioritaire sur closed_summary si les deux
     etaient vrais -- voir partials/_carte-studio.blade.php. */
  background-color: var(--for-sale-color);
  transition: background-color 50ms;
}

.for_sale_summary:hover {
  /* Correction demandee par Xavier (2026-10-03) : le survol d'une
     pastille doit toujours passer au jaune/dore, comme toutes les
     autres (studio/ranch/ferme) -- pas une nuance de rouge, qui ne
     se distinguait pas assez du fond au repos. Meme variable que
     .closed_summary:hover juste au-dessus. */
  background-color: var(--ranch-hover-color);
}

/* result title info */
/* .studio_result_summary > div, .ranch_result_summary > div {
} */

.country {
  /* country acronym sticker */
  width: 50px;
  height: 30px;
  border-radius: 50%;
  font-size: 1rem;
  text-transform: uppercase;
  color: var(--vivid-color);
  line-height: 32px;
  text-align: center;
  background: var(--neutral-xtra_light-color);
  position: absolute;
  top: 10px;
  right: 10px;
}

.results_title {
  margin-top: 250px;
  line-height: 10px;
}

.two_col_div {
  column-count: 2;
  column-fill: auto;
  height: 100px;
  width: 960px;
}

.results_highlites {
  display: flex;
  align-items: baseline;
  justify-content: center;
  background-color: var(--contrast-color);
  border-radius: var(--main-border-radius);
  padding: 14px;
  margin-bottom: 10px;
}

.results_highlites_text {
  background-color: var(--basic_red);
  border-radius: var(--main-border-radius);
  padding: 14px;
  margin: 15px 0 10px 0;
}

.highlites_title {
  text-align: center;
  font-size: 1.1rem;
  color: var(--neutral-dark-color);
  margin: 2px 5px 0px 5px;
}

.higlites_stats {
  font-size: 2rem;
  color: var(--neutral-xtra_light-color);
  margin: 2px 5px 0px 5px;
}

.higlites_text {
  font-size: 2rem;
  color: var(--neutral-xtra_light-color);
  margin: 2px 5px 0px 5px;
  text-align: center;
}

label.filter {
  color: var(--vivid-color);
}

.list_view{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: 10px;
  margin-right: 10px;
}

/* 20: Results page
========================================**/

.table_anchor_trigger {
  position: absolute;
  right: 0px;
  top: 0px;
  background-color: var(--vivid-color);
  color: var(--neutral-xtra_light-color);
  padding: 5px 10px;
  border-radius: var(--main-border-radius);
  transition: background-color 50ms;
}

.table_anchor_trigger:hover {
  background-color: var(--vivid-hover-color);
  color: var(--neutral-xtra_light-color);
}

#geographical_map {
  /* map layout for Result_Page */
  width: 470px;
  height: calc(470px / 2);
  /* border: 4px solid var(--neutral-xtra_light-color); */
}

#geographical_map_02 {
  /* map layout for Result_Map_List */
  width: 100%;
  height: 470px;
  border: 4px solid var(--vivid-color);
}

.editor_notes {
  height: 130px;
  line-height: 1.3rem;
  overflow: hidden;
  text-align: justify;
  padding: 15px;
  background-color: var(--neutral-xtra_light-color);
  border-radius: var(--main-border-radius);
  text-overflow: clip;
}

.editor_notes:hover {
  overflow-y: scroll;
}

#studio_map {
  height: 100vh;
}

.map_image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}

.gallery_01 {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.view_image {
  width: 146px;
  height: 146px;
  object-fit: cover;
  object-position: center;
  margin: 5px 5px 0px 5px;
}

.gallery_02 {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: space-between;
  margin-bottom: 25px;
}

.rating_01 {
  font-size: 2rem;
  color: var(--vivid-color);
  margin-top: 20px;
}

.rating_01::after {
  content: "/5";
}

.rating_02 {
  display: inline-block;
  font-size: 2rem;
  color: var(--neutral-xtra_light-color);
  margin-top: 20px;
  background-color: var(--contrast-color);
  border-radius: var(--main-border-radius);
  padding: 12px 9px;
}

/* Results page tables */

.result_info_table {
  font-size: 1rem;
  margin: auto;
  padding: 5px 5px 5px 5px;
  width: 100%;
  height: 948px;
}

.result_info_table.ranch_height {
  height: 550px;
}

.tablecontainer {
  width: 100%;
  margin: auto;
  padding: 20px;
}

.results_table_01 {
  font-size: 1rem;
  border-collapse: collapse;
  width: 95%;
  margin: auto;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

#result_item_header {
  text-align: center;
}

.result_item_line_02 {
  text-transform: none;
  position: absolute;
  bottom: 8px;
  z-index: 10;
  line-height: 1rem;
}

.result_item_line_03 {
  margin: 0px;
  font-size: 90%;
  text-transform: uppercase;
  position: absolute;
  bottom: 30px;
  left: 15px;
  z-index: 10;
  line-height: 1rem;
}

.result_item_line_04 {
  color: var(--basic_red);
  position: absolute;
  top: 18px;
  left: 15px;
  z-index: 10;
  /* margin: 0px; */
  /* font-size: 90%; */
  /* text-transform: uppercase; */
  /* line-height: 1rem; */
}

/* Sur la carte "a vendre" (fond deja rouge, voir .for_sale_summary),
   le meme badge rouge sur rouge serait illisible : texte blanc a la
   place, pour cette seule variante. */
.result_item_line_04_for_sale {
  color: var(--neutral-xtra_light-color);
}

.table_id {
  width: 250px;
  text-align: left;
}

thead {
  background-color: var(--vivid-color);
  color: var(--neutral-xtra_light-color);
}

thead td {
  text-transform: uppercase;
  font-weight: var(--main-font-bold);
  font-size: 1.2rem;
}

th {
  color: var(--neutral-dark-color);
  background-color: var(--contrast-color);
  font-weight: 100;
}

td,
th {
  text-align: right;
  padding: 6px 8px;
  /* border-color: var(--neutral-dark-color); */
  /* border-bottom-style: solid; */
  /* border-width: 1px; */
}

td:first-child {
  text-align: left;
}

th:last-child {
  color: var(--neutral-dark-color);
}

th:first-child {
  color: var(--neutral-dark-color);
}

/* tbody td {
  color: var(--neutral-medium-color);
} */

td a {
  /* makes clickable area bigger */
  display: inline-block;
  padding: 2px 0px 2px 0px;
}

/* blocks first row of list to specified width */
.td_studio_list_left {
  width: 38%;
}

.table_list td {
  text-align: left;
}

table tbody tr:nth-child(even) {
  background-color: var(--bg-color);
}

.table_row tr:first-child {
  background-color: var(--main-bg-color);
  border-style: solid;
  border-width: 0px 0px 2px 0px;
  border-color: var(--bg-color);
}

.table_title {
  text-align: left;
}

.table_unit {
  white-space: pre;
  font-weight: var(--main-font-medium);
  font-size: 0.75rem;
}

.table_unit-table {
  white-space: pre;
  font-weight: var(--main-font-medium);
  font-size: 0.75rem;
  color: white;
}

.table_unit::before {
  content: "(";
}

.table_unit::after {
  content: ")   ";
}

tfoot {
  background-color: var(--neutral-medium-color);
  color: var(--neutral-xtra_light-color);
  /* border: 0px solid var(--vivid-color); */
}

/* Checkbox for size units */

label.radio {
  /* checkbox for converting size units */
  color: var(--vivid-color);
  margin: 0px 10px 0px 0px;
}

.checkbox_right {
  /* aligning checkbox to the right */
  text-align: right;
}

.conversion {
  /* for studio page table */
  float: right;
  clear: both;
  text-align: right;
  margin: 20px 20px -200px 0px;
  background-color: var(--table-bg-color);
  border-radius: var(--main-border-radius);
  padding: 7px 10px 7px 10px;
}

.conversion_alt {
  /* for soundstage / outdoor tank pages : simple badge dans le fil de la
     page (voir .installation_conversion_ligne qui la cale a droite),
     plus de position absolute depuis que le logo du studio occupe ce
     coin dans le bandeau de titre. */
  display: inline-block;
  text-align: right;
  background-color: var(--neutral-xtra_light-color);
  border-radius: var(--main-border-radius);
  padding: 7px 10px 7px 10px;
}

.specialized_box_neutral {
  background-color: var(--neutral-light-color);
  width: 14px;
  height: 14px;
  display: inline-block;
  outline: solid 1px var(--neutral-light-color);
  margin: 0 3px;
  font-size: 0.7rem;
  line-height: 1rem;
  text-align: center;
  color: var(--neutral-light-color);
}

.specialized_box_green {
  background-color: var(--basic_green);
  outline: solid 1px var(--basic_green);
  color: var(--neutral-xtra_light-color);
}

.specialized_box_blue {
  background-color: var(--vivid-color);
  outline: solid 1px var(--vivid-color);
  color: var(--neutral-xtra_light-color);
}

.specialized_box_white {
  background-color: var(--neutral-xtra_light-color);
  outline: solid 1px var(--neutral-light-color);
  color: var(--neutral-dark-color);
}

.specialized_box_virtual {
  background-color: var(--basic_red);
  outline: solid 1px var(--basic_red);
  color: var(--neutral-xtra_light-color);
}

.disclaimer_specialized_box_green {
  background-color: var(--basic_green);
  width: 12px;
  height: 12px;
  margin: 0 5px;
  display: inline-block;
}

.disclaimer_specialized_box_blue {
  background-color: var(--vivid-color);
  width: 12px;
  height: 12px;
  margin: 0 5px;
  display: inline-block;
}

.disclaimer_specialized_box_white {
  background-color: white;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  display: inline-block;
}

.disclaimer_specialized_box_virtual {
  background-color: var(--basic_red);
  width: 12px;
  height: 12px;
  margin: 0 5px;
  display: inline-block;
}

/* 20.1: Resulzs Table */

.results_table_header{
  font-size: 0.85rem;
  border-width:0.5px;
  border-color:white;
  border-right-style: solid;
  border-left-style: solid;
  background-color: white;
}

.results_table_header.active{
  background-color: var(--contrast-color);
}

.results_table_row{
  font-size: 0.95rem;
  border-width:0.5px;
  border-color:white;
  border-right-style: solid;
  border-left-style: solid;
}

/* backlot cards */

.backlot_card_01 {
  margin: 10px;
  border-radius: var(--main-border-radius);
  background-color: var(--vivid-color);
  position: relative;
  width: 210px;
}

.backlot_card_image {
  height: 180px;
  width: 210px;
  border-top-left-radius: var(--main-border-radius);
  border-top-right-radius: var(--main-border-radius);
  object-fit: cover;
  opacity: 100%;
}

.backlot_card_image:hover {
  opacity: 50%;
}

.backlot_card_txt_01 {
  text-align: left;
  line-height: 1.1rem;
  color: var(--neutral-xtra_light-color);
  padding: 0 10px;
  margin: 0 0 5px 0;
}

.backlot_card_input {
  position: absolute;
  right: 5px;
  top: 5px;
}

.specialised_caption_01 {
  text-align: right;
  position: absolute;
  right: 0;
  top: 144px;
  padding: 0px 10px 0px 10px;
  background-color: var(--contrast-color);
}

/* 21: Links
========================================**/

.partner_logo {
  display: inline-block;
  width: 200px;
  height: 200px;
}

/* 22: Footer
========================================**/

footer {
  margin-top: auto;
}

#copyright {
  /* footer styling */
  /* border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--neutral-dark-color); */
  /* padding-top: 0px; */
  line-height: 1.2rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--neutral-xtra_light-color);
  margin: 10px 0 0 0;
}

#copyright_wrapper {
  /* needed to set footer at bottom if Body position is relative */
  /* position: absolute; */
  /* bottom: 0px; */

  /* needed to set footer at bottom if Body display is flexbox */
  /* align-content: flex-end; */

  min-width: 960px;
  padding: 4px 0px 10px 0px;
  background-color: var(--neutral-dark-color);
}

#copyright-year {
  color: var(--neutral-xtra_light-color);
  font-size: 1rem;
}

#copyright-year::before {
  content: "©";
}

/* 23: Photo presentation
========================================*/

.photorama {
  width: 460px;
  height: 360px;
  object-fit: cover;
  padding: 15px 10px 0 10px;
}

figcaption {
  font-style: italic;
  font-size: 0.7rem;
  color: var(--neutral-dark-color);
  margin: 0;
  padding: 0 10px 0 10px;
}

figcaption::before {
  content: "© ";
}

figcaption::after {
  content: "";
}

.stage_selector {
  text-align: right;
  color: var(--neutral-dark-color);
  position: absolute;
  top: -55px;
  right: 0;
  width: 170px;
}

.stage_selector label {
  color: var(--neutral-dark-color);
}

/* 24: Details & Summary
========================================*/

summary {
  overflow: auto;
  cursor: pointer;
  outline: none;
}

/* details > summary {
  list-style: none;
} */

details > summary::-webkit-details-marker {
  display: none;
}

/* 25: Pagination
========================================*/

/* Pagination links */
.pagination a {
  color: var(--neutral-medium-color);
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color 50ms;
}

/* Style the active/current link */
.pagination a.active {
  background-color: var(--vivid-color);
  color: white;
}

/* Add a grey background color on mouse-over */
.pagination a:hover:not(.active) {
  background-color: var(--vivid-hover-color);
}

.pagination {
  margin-top: 30px;
}

/* 25: Login modal (Temporary)
========================================*/

.login_modal {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-content: center;
  height: 75vh;
  width: 100vw;
  background-color: var(--bg-color);
}

.login_container_A {
  background-color: var(--neutral-light-color);
  display: block;
  width: 250px;
  margin: 50px auto 0 auto;
  padding: 10px;
  border-radius: 6px;
  padding: 15px 0 15px 0;
}

.login_input {
  display: block;
  text-align: center;
}

.login_h1,
.login_h3,
.login_h5 {
  color: white;
  text-align: center;
  text-transform: uppercase;
  line-height: 2rem;
}

.login_h1 {
  font-family: var(--main-font-bold);
  font-size: 3rem;
}

.login_h3 {
  font-size: 2rem;
}

.login_h5 {
  font-size: 1.5rem;
}

.login_title {
  display: block;
}

.login_form {
  display: block;
  margin: auto;
  width: 90%;
}

/* 27: Disclaimer
========================================*/

/* .disclaimer_banner_01 {
  background-color: var(--contrast-color);
  position: -webkit-sticky;
  position: sticky;
  z-index: 100;
  bottom: 0px;
  margin-bottom: -100px;
  margin: auto;
  height: 150px;
  width: 100vw;
  max-width: 960px;
  border-radius: var(--main-border-radius);
} */

.disclaimer_banner_02 {
  background-color: var(--contrast-color);
  margin: auto;
  width: 100%;
  border-radius: var(--main-border-radius);
  padding: 3px 0 0 0;
}

/* .disclaimer_text_01 {
  text-align: center;
  font-size: 2rem;
  font-weight: var(--main-font-bold);
  color: var(--neutral-xtra_light-color);
  padding-top: 20px;
  margin: 0px 0px 20px 0px;
} */

/* .disclaimer_text_02 {
  text-align: center;
  font-size: 1.1rem;
  padding-top: 0px;
  margin: 10px 0px 20px 0px;
} */

.disclaimer_checkbox {
  text-align: center;
  margin-top: -20px;
  padding-bottom: 8px;
}

.disclaimer_checkbox label {
  color: var(--neutral-dark-color);
}

/* 28: FAQ
========================================*/

summary > h4 {
  margin-bottom: 0;
  margin-top: 0;
}

details > summary::-webkit-details-marker {
  display: none;
}

.results_container details:nth-child(odd) summary {
  background-color: var(--neutral-xtra_light-color);
  border-radius: var(--main-border-radius);
}

.details_text_02 {
  padding: 10px 0px 5px 0px;
  margin-top: -30px;
}

details:nth-child(even) .textcontainer_wide {
  background-color: var(--bg-color);
}

/* 29: Definitions
========================================*/

.span_def {
  font-family: var(--main-font-bold);
}

.table_def {
  width: 70%;
  margin: auto;
}

.th_def,
.th_def:first-child,
.th_def:last-child {
  text-align: center;
  color: var(--neutral-xtra_light-color);
  background-color: var(--vivid-color);
}

.th_def:first-child {
  color: var(--neutral-xtra_light-color);
}

.td_def {
  text-align: center;
  color: var(--vivid-color);
}

.td_def:nth-last-child(-n + 2) {
  text-align: right;
  padding-right: 10px;
}

.tr_def:nth-child(even) {
  background-color: var(--table-bg-color);
}

/* 30: User profile
========================================*/

.user_profile_bg {
  width: 740px;
  background-color: var(--neutral-light-color);
  border-radius: var(--main-border-radius);
}

.user_info_02 {
  color: var(--neutral-xtra_light-color);
  font-size: 1.8rem;
  line-height: 0;
  margin: 15px 0 25px 0;
}

.account_status {
  color: var(--neutral-xtra_light-color);
}

.account_side_column {
  width: 210px;
}

/* 31: SVG progress bar
========================================*/

.svg_spinner {
  display: block;
  margin: auto;
  animation: 10s linear infinite svg-animation;
  max-width: 100px;
}

@keyframes svg-animation {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg)
  }
}

.circle-load {
  animation: 1.4s ease-in-out infinite both circle-animation;
  display: block;
  fill: transparent;
  stroke: var(--contrast-color);
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 280;
  stroke-width: 10px;
  transform-origin: 50% 50%;
}

@keyframes circle-animation {
  0%,
  25% {
    stroke-dashoffset: 280;
    transform: rotate(0);
  }

  50%,
  75% {
    stroke-dashoffset: 75;
    transform: rotate(45deg);
  }

  100% {
    stroke-dashoffset: 280;
    transform: rotate(360deg);
  }
}