/* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
:root {
  --site_background: #fff;
}

/* SASS vars : */
/* CSS vars*/
:root {
  --breakpoint-phone: 600px;
  --breakpoint-tab-port: 900px;
  --breakpoint-tab-land: 1200px;
  --breakpoint-big-desktop: 1440px;
}

/**/
/*
#page-content-accessibility::before{
	content: var(--breakpoint-bigDesktop);
	background-color: azure;
}*/
/*
.TESTVAR{
	// content: $breakpoint-desktop;
	color: breakpoint-phone();
	bcolor: breakpoint-tabPort();
	ccolor: breakpoint-tabLand();
	dcolor: breakpoint-bigDesktop();
	color: breakpoint-desktopp();
	bgcolor: breakpoint(5);
	tcolor: whatever();
	rand: random();
	// acolor: $var;
	// bcolor: $breakpoint-desktop;
	// ccolor: $breakpointDesktop;
}
*/
/** /
.layout-marker{
	display: none;
	position: absolute;
	z-index: 99999;
	background-color: black;
	color: white;
}

@include respond(phone) {
	#layoutMarkerPhone{display: block;}
	#page-content-accessibility::before{
		content: "A";
		background-color: azure;
	}
}
@include respond(tab-port) {#layoutMarkerTabPort{display: block;}
	#page-content-accessibility::before{
		content: "B";
		background-color: azure;
	}
}
@include respond(tab-land) {#layoutMarkerTabLand{display: block;}
	#page-content-accessibility::before{
		content: "C";
		background-color: azure;
	}
}
@include respond(big-desktop) {#layoutMarkerDesktop{display: block;}
	#page-content-accessibility::before{
		content: "D";
		background-color: azure;
	}
}
/**/
/* CSS vars
 * USE-CASES:
 * - should be use everywhere in the CSS instead of SASS vars ($) : there values can be manipulated at the navigator => see below as we set phone sizing using a media queries and breakpoints
 * - + can be use in JS when modifying the DOM eg myElement.style="font-size: var(--font-normal-font-size);"
 *
 * see https://sass-lang.com/documentation/breaking-changes/css-vars/ for why we use sass-var;
 *
 */
:root {
  /**/
  --font-cta-font-size: 1.6rem;
  --font-cta-font-weight: 500;
  --font-cta-line-height: 2.4rem;
  --font-cta-font-size_phone: 1.4rem;
  --font-cta-font-weight_phone: 500;
  --font-cta-line-height_phone: 2rem;
  /**/
  --font-small-font-size: 1.4rem;
  --font-small-font-weight: 400;
  --font-small-line-height: 2.1rem;
  --font-small-font-size_phone: 1.2rem;
  --font-small-font-weight_phone: 400;
  --font-small-line-height_phone: 1.8rem;
  /**/
  --font-normal-font-size: 1.6rem;
  --font-normal-font-weight: 400;
  --font-normal-line-height: 2.4rem;
  --font-normal-font-size_phone: 1.4rem;
  --font-normal-font-weight_phone: 500;
  --font-normal-line-height_phone: 2rem;
  /**/
  --font-big-font-size: 2rem;
  --font-big-font-weight: 400;
  --font-big-line-height: 2.9rem;
  --font-big-font-size_phone: 1.8rem;
  --font-big-font-weight_phone: 400;
  --font-big-line-height_phone: 2.4rem;
  /**/
  --font-heading1-font-size: 4.5rem;
  --font-heading1-font-weight: 700;
  --font-heading1-line-height: 5rem;
  --font-heading1-font-size_phone: clamp(3.2rem, 9vw, 3.8rem);;
  --font-heading1-font-weight_phone: 700;
  --font-heading1-line-height_phone: clamp(4rem, 9vw, 4.4rem);
  /**/
  --font-heading2-font-size: 4rem;
  --font-heading2-font-weight: 700;
  --font-heading2-line-height: 4.5rem;
  --font-heading2-font-size_phone: clamp(2.6rem, 9vw, 3.2rem);;
  --font-heading2-font-weight_phone: 700;
  --font-heading2-line-height_phone: clamp(3.6rem, 9vw, 4rem);
  /**/
  --font-heading3-font-size: 3.6rem;
  --font-heading3-font-weight: 700;
  --font-heading3-line-height: 4rem;
  --font-heading3-font-size_phone: clamp(2.2rem, 7vw, 2.8rem);;
  --font-heading3-font-weight_phone: 700;
  --font-heading3-line-height_phone: clamp(3.2rem, 7vw, 3.8rem);
  /**/
  --font-heading4-font-size: 1.9rem;
  --font-heading4-font-weight: 600;
  --font-heading4-line-height: 2.6rem;
  --font-heading4-font-size_phone: 1.9rem;
  --font-heading4-font-weight_phone: 600;
  --font-heading4-line-height_phone: 2.6rem;
  /**/
  --font-heading5-font-size: 1.7rem;
  --font-heading5-font-weight: 500;
  --font-heading5-line-height: 2rem;
  --font-heading5-font-size_phone: 1.7rem;
  --font-heading5-font-weight_phone: 500;
  --font-heading5-line-height_phone: 2rem;
  /**/
}
@media only screen and (max-width: 600px) {
  :root {
    --font-cta-font-size: 1.4rem;
    --font-cta-font-weight: 500;
    --font-cta-line-height: 2rem;
    --font-small-font-size: 1.2rem;
    --font-small-font-weight: 400;
    --font-small-line-height: 1.8rem;
    --font-normal-font-size: 1.4rem;
    --font-normal-font-weight: 500;
    --font-normal-line-height: 2rem;
    --font-big-font-size: 1.8rem;
    --font-big-font-weight: 400;
    --font-big-line-height: 2.4rem;
    --font-heading1-font-size: clamp(3.2rem, 9vw, 3.8rem);;
    --font-heading1-font-weight: 700;
    --font-heading1-line-height: clamp(4rem, 9vw, 4.4rem);
    --font-heading2-font-size: clamp(2.6rem, 9vw, 3.2rem);;
    --font-heading2-font-weight: 700;
    --font-heading2-line-height: clamp(3.6rem, 9vw, 4rem);
    --font-heading3-font-size: clamp(2.2rem, 7vw, 2.8rem);;
    --font-heading3-font-weight: 700;
    --font-heading3-line-height: clamp(3.2rem, 7vw, 3.8rem);
    --font-heading4-font-size: 1.9rem;
    --font-heading4-font-weight: 600;
    --font-heading4-line-height: 2.6rem;
    --font-heading5-font-size: 1.7rem;
    --font-heading5-font-weight: 500;
    --font-heading5-line-height: 2rem;
  }
}

@font-face {
  font-family: "Avantesk Regular";
  src: url("fonts/avantesk.otf.woff2");
}
@font-face {
  font-family: "Avantesk Light";
  src: url("fonts/avantesk-light.otf.woff2");
}
html {
  font-size: 16px;
}

body {
  color: #353535;
  font-family: "Sora", Inter, Arial, sans-serif;
  font-size: var(--font-normal-font-size);
  line-height: var(--font-normal-line-height);
  font-weight: var(--font-normal-font-weight);
}

a {
  text-decoration: none;
  color: #76797B;
  cursor: pointer;
}
a:hover {
  text-decoration: none;
}

input, textarea, select {
  font-size: var(--font-normal-font-size);
  line-height: var(--font-normal-line-height);
  font-weight: var(--font-normal-font-weight);
}

h1, h2 {
  font-family: "Avantesk Regular";
  text-transform: uppercase;
  letter-spacing: 3px;
}

.posted-content * {
  font-family: unset !important;
  font-size: unset !important;
  line-height: unset !important;
  letter-spacing: unset !important;
}
.posted-content-admin * {
  font-family: unset !important;
  font-size: unset !important;
  line-height: unset !important;
  letter-spacing: unset !important;
}

.font-cta, button, .btn-primary {
  font-size: var(--font-cta-font-size);
  line-height: var(--font-cta-line-height);
  font-weight: var(--font-cta-font-weight);
}
body.layout-phone .font-cta, body.layout-phone button, body.layout-phone .btn-primary {
  font-size: var(--font-cta-font-size_phone);
  line-height: var(--font-cta-line-height_phone);
  font-weight: var(--font-cta-font-weight_phone);
}

.font-small {
  font-size: var(--font-small-font-size);
  line-height: var(--font-small-line-height);
}
body.layout-phone .font-small {
  font-size: var(--font-small-font-size -0.2rem);
  line-height: var(--font-small-line-height -0.2rem);
}

.font-normal {
  font-size: var(--font-normal-font-size);
  line-height: var(--font-normal-line-height);
}
body.layout-phone .font-normal {
  font-size: var(--font-normal-font-size -0.2rem);
  line-height: var(--font-normal-line-height -0.2rem);
}

.font-big {
  font-size: var(--font-big-font-size);
  line-height: var(--font-big-line-height);
}
body.layout-phone .font-big {
  font-size: var(--font-big-font-size -0.2rem);
  line-height: var(--font-big-line-height -0.2rem);
}

/**/
.font-weight-normal {
  font-weight: 400;
}

.font-weight-bold {
  font-weight: 700;
}

.font-weight-bold-extra {
  font-weight: 800;
}

/**/
h1, .heading-1 {
  font-size: var(--font-heading1-font-size);
  line-height: var(--font-heading1-line-height);
  font-weight: var(--font-heading1-font-weight);
  /* DEPRECATED we don't use variants anymore !
  &--secondary {
  	// font-size: 3rem;
  	// font-weight: 700;
  }
  &--tertiary {
  	// font-size: 2.6rem;
  	// font-weight: 700;
  }
  &--quaternary {
  	// font-size: 2.4rem;
  	// font-weight: 700;
  }
  */
}
body.layout-phone h1, body.layout-phone .heading-1 {
  font-size: var(--font-heading1-font-size_phone);
  line-height: var(--font-heading1-line-height_phone);
  font-weight: var(--font-heading1-font-weight_phone);
}

h2, .heading-2 {
  font-size: var(--font-heading2-font-size);
  line-height: var(--font-heading2-line-height);
  font-weight: var(--font-heading2-font-weight);
  /* DEPRECATED we don't use variants anymore !
  &--secondary {
  	// font-size: 2rem;
  	// font-weight: 600;
  }
  */
}
body.layout-phone h2, body.layout-phone .heading-2 {
  font-size: var(--font-heading2-font-size_phone);
  line-height: var(--font-heading2-line-height_phone);
  font-weight: var(--font-heading2-font-weight_phone);
}

h3, .heading-3 {
  font-family: Sora, Inter;
  font-size: var(--font-heading3-font-size);
  line-height: var(--font-heading3-line-height);
  font-weight: var(--font-heading3-font-weight);
  /* DEPRECATED we don't use variants anymore !
  &--secondary {
  	// font-size: 1.7rem;
  	// font-weight: 500;
  }
  */
}
body.layout-phone h3, body.layout-phone .heading-3 {
  font-size: var(--font-heading3-font-size_phone);
  line-height: var(--font-heading3-line-height_phone);
  font-weight: var(--font-heading3-font-weight_phone);
}

h4, .heading-4 {
  font-family: Sora, Inter;
  font-size: var(--font-heading4-font-size);
  line-height: var(--font-heading4-line-height);
  font-weight: var(--font-heading4-font-weight);
}
body.layout-phone h4, body.layout-phone .heading-4 {
  font-size: var(--font-heading4-font-size_phone);
  line-height: var(--font-heading4-line-height_phone);
  font-weight: var(--font-heading4-font-weight_phone);
}

h5, .heading-5 {
  font-family: Sora, Inter;
  font-size: var(--font-heading5-font-size);
  line-height: var(--font-heading5-line-height);
  font-weight: var(--font-heading5-font-weight);
}
body.layout-phone h5, body.layout-phone .heading-5 {
  font-size: var(--font-heading5-font-size_phone);
  line-height: var(--font-heading5-line-height_phone);
  font-weight: var(--font-heading5-font-weight_phone);
}

/**************/
.dbgs-design-views fieldset {
  min-width: 300px;
}
.dbgs-design-views legend {
  font-size: 16px;
  padding: 6px;
}
.dbgs-design-views div.design-views.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2rem;
}

.show-ease-in,
.show-fade-in {
  transition: opacity 0.4s linear;
  opacity: 1;
  visibility: visible;
}

.hide-ease-out,
.hide-fade-out {
  transition: opacity 0.4s linear;
  opacity: 0;
  visibility: hidden;
}

.show-slide-in {
  transition: height 0.4s linear;
  height: unset;
  visibility: visible;
}

.hide-slide-out {
  transition: height 0.4s linear;
  height: 0px;
  visibility: hidden;
}

@-webkit-keyframes swing {
  15% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  30% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  50% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  65% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }
  80% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes swing {
  15% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  30% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  50% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  65% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }
  80% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.swing {
  -webkit-animation: swing 1s ease;
  animation: swing 1s ease;
  -webkit-animation-iteration-count: 10;
  animation-iteration-count: 10;
}

/** Left/Right slide
#aDiv{
	position: absolute;
	left: -102vw;
	animation-name: pageOut;
	animation-duration: 600ms;
	&.shown {
		left: 0;
		animation-name: pageIn;
		animation-duration: 400ms;
	}
	&.hidden {
		right: -102vw;
		animation-name: pageOut;
		animation-duration: 600ms;
	}
}
*/
@keyframes pageIn {
  from {
    left: -102vw;
  }
  to {
    left: 0;
  }
}
@keyframes pageOut {
  from {
    left: 0;
  }
  to {
    left: -102vw;
  }
}
/** Up/Down slide
#aDiv{
	position: absolute;
	top: -102vh;
	animation-name: slideOut;
	animation-duration: 600ms;
	&.shown {
		top: 0;
		animation-name: slideIn;
		animation-duration: 400ms;
	}
	&.hidden {
		top: -102vh;
		animation-name: slideOut;
		animation-duration: 600ms;
	}
}
*/
@keyframes slideIn {
  from {
    top: -102vh;
  }
  to {
    top: 0;
  }
}
@keyframes slideOut {
  from {
    top: 0;
  }
  to {
    top: -102vh;
  }
}
/* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
/* HTML BASE ::
! for text and title fonts see _typography.scss
*/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  height: 100%;
  font-size: 62.5%;
  /*
      @include respond(phone) { // width < 600?
          font-size: 50%; //1 rem = 8px, 8/16 = 50%
      }

  	@include respond(tab-land) { // width < 1200?
          font-size: 56.25%; //1 rem = 9px, 9/16 = 56%
      }

      @include respond(big-desktop) {
          // font-size: 75%; //1rem = 12, 12/16
      }
  */
}

body {
  min-height: 100%;
  box-sizing: border-box;
  background-color: var(--site_background);
  font-size: 1.6rem;
  /*Accessibility tests ::* /
  &.accessibility-mode{
  	*:focus {
  		box-shadow: 0 0 3px 3px #3a97f9,
  		0 0 0 1.5px #ffffff ;
  	}

  	*:focus-visible {
  		box-shadow: 0 0 3px 3px darkorange,
  		0 0 0 1.5px #ffffff ;
  		//outline: 4px dashed darkorange;
  	}

  	svg{overflow: visible;}//fixes some cuts on svgs when the element is shrinked
  }
  /**/
}
body *:focus {
  box-shadow: none;
}
body *:focus-visible {
  box-shadow: none;
}

/*:::: Accessibility tests*/
hr {
  color: #b0b0b0;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

ul, ol {
  font-size: 1em;
  margin: 0 0.4em;
  padding: 0 1.4em;
}
ul .li, ol .li {
  font-size: 1em;
}

input {
  caret-color: red;
}

/**/
progress {
  -webkit-appearance: none;
  border: 1px solid rgb(206, 206, 206) x;
  color: orange;
  background-color: #e9e9ed;
  height: 1rem;
  border-radius: 7px;
}

progress::-webkit-progress-bar {
  background-color: black;
  width: 100%;
}

progress::-webkit-progress-value {
  background-color: rgb(255, 127, 71) !important;
  border-radius: 3px;
}

progress::-moz-progress-bar {
  background-color: rgb(255, 127, 71) !important;
  border-radius: 3px;
}

progress::-webkit-progress-value {
  background: black;
}

/* :: HTML BASE */
/* Elements :*/
#wrapper-container-query {
  height: 100%;
}
@media only screen and (max-width: 600px) {
  #wrapper-container-query {
    margin-top: 0;
  }
}

#page-content-accessibility {
  height: 100%;
}

#toast-container {
  margin-top: 8.5rem;
  z-index: 9999999999;
  font-size: 1.4rem;
}

/*
#mainContent{
	min-height: 60rem;
	//padding-top: 11.2rem;
	&.tabPort, &.phone {
		margin-top: 0;
	}

	//width: 1200px;
	//margin: 0 auto;

	@include respond(tab-port) {
		padding-top: 0;
	}
}
.page-margins {
	width: 100%;
	max-width: 1440px;
	padding-left: 3rem;
	padding-right: 3rem;
	margin: 0 auto;

	@include respond(tab-land) {
		width: 100%;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	@include respond(tab-port) {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
}*/
.red-highlight {
  color: #ff0000;
}

.orange-highlight {
  color: #FF7F47;
}

.green-highlight {
  color: #39BB5C;
}

.lt-line-clamp__raw-line {
  /*hack for line-clamp to avoid weird line breaks in some cases*/
  white-space: normal !important;
  border: dashed red 1px;
}

.ember-basic-dropdown-content {
  z-index: 1010;
}

a {
  text-decoration: none;
  color: #353535;
  cursor: pointer;
  /* Animation liens: :: */
  /* Underline styles */
}
a:hover {
  text-decoration: none;
}
a.anim {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
a.anim.faded {
  transition: opacity 0.4s linear;
  opacity: 0.55;
}
a.anim.faded:hover {
  text-decoration: none;
  opacity: 1;
}
a.anim.underlined {
  /* Fade in */
  /* Slide in */
  /* :: Underline styles */
}
a.anim.underlined::after {
  content: "";
  position: absolute;
  bottom: 0.25em;
  left: 0;
  width: 100%;
  height: 0.1em;
  background-color: #353535;
  opacity: 0;
  transition: opacity 300ms, transform 300ms;
}
a.anim.underlined:hover::after, a.anim.underlined:focus::after {
  opacity: 0.2;
  transform: translate3d(0, 0.2em, 0);
}
a.anim.underlined::after {
  opacity: 0.2;
  transform: translate3d(-100%, 0, 0);
}
a.anim.underlined:hover::after, a.anim.underlined:focus::after {
  transform: translate3d(0, 0, 0);
}

.rubrique__title {
  text-align: center;
}
.rubrique__intro {
  text-align: justify;
  margin: 0 10%;
}

/* https://github.com/adopted-ember-addons/ember-notify/blob/HEAD/examples/custom-position-animations.css
 *Main container */
.civ-toast {
  position: fixed;
  top: 8rem;
  right: 2rem;
  z-index: 9999;
  width: 80%;
  max-width: 40rem;
  margin: auto;
  font-size: 1.4rem;
  /* Message box */
}
.civ-toast .callout {
  font: 14px Helvetica, sans-serif;
  position: relative;
  overflow: hidden;
  max-height: 800px;
  background-color: #fff;
  color: #000;
  margin: 0 0 6px;
  padding: 0.8em 1.2em 0.8em 1em;
  -moz-border-radius: 0.8rem;
  -webkit-border-radius: 0.8rem;
  border-radius: 0.8rem;
  -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
}
.civ-toast .callout.pinned {
  opacity: 1;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);
}
.civ-toast .close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  color: #000;
  font-size: 2em;
}
.civ-toast .close:hover,
.civ-toast .close:focus {
  opacity: 1;
}
.civ-toast-container {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}
.civ-toast-container.info .toast-icon svg path {
  fill: #FF7F47;
}
.civ-toast .toast-title {
  font-weight: 600;
  margin-bottom: 0.4em;
}
.civ-toast .civ-toast-icon {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 30px;
  color: rgba(255, 255, 255, 0.74);
  text-align: center;
}
.civ-toast .civ-toast-icon span {
  position: relative;
  top: 10px;
}
.civ-toast .message {
  display: inline-block;
  padding: 0 1em 0 0;
}
/* Classes applied for animating in/out */
.ember-notify-show {
  animation: notification-show 180ms cubic-bezier(0.175, 0.885, 0.32, 1.27499);
  -webkit-animation: notification-show 180ms cubic-bezier(0.175, 0.885, 0.32, 1.27499);
}
.ember-notify-hide {
  animation: notification-hide 250ms cubic-bezier(0.33859, -0.42, 1, -0.22), notification-shrink 250ms 250ms cubic-bezier(0.5, 0, 0, 1);
  -webkit-animation: notification-hide 250ms cubic-bezier(0.33859, -0.42, 1, -0.22), notification-shrink 250ms 250ms cubic-bezier(0.5, 0, 0, 1);
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

/* animations used above */
@keyframes notification-show {
  0% {
    opacity: 0;
    transform: perspective(450px) translate(0, -30px) rotateX(90deg);
  }
  100% {
    opacity: 1;
    transform: perspective(450px) translate(0, 0) rotateX(0deg);
  }
}
@-webkit-keyframes notification-show {
  0% {
    opacity: 0;
    -webkit-transform: perspective(450px) translate(0, -30px) rotateX(90deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: perspective(450px) translate(0, 0) rotateX(0deg);
  }
}
@keyframes notification-shrink {
  0% {
    opacity: 0;
    max-height: 800px;
    margin-bottom: 2px;
    transform: scale(0.8);
  }
  100% {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    transform: scale(0.8);
  }
}
@-webkit-keyframes notification-shrink {
  0% {
    opacity: 0;
    max-height: 800px;
    margin-bottom: 2px;
    -webkit-transform: scale(0.8);
  }
  100% {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    -webkit-transform: scale(0.8);
  }
}
@keyframes notification-hide {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}
@-webkit-keyframes notification-hide {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.8);
  }
}
.page-container {
  max-width: var(--breakpoint-big-desktop);
  min-height: 75vh;
  padding: 0 3rem 3rem;
  margin: 16rem auto 0;
}

/* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
.accueil__sub {
  margin: 5em 0;
}
.accueil__sub.separator h1 {
  text-align: center;
}
.accueil__sub h2 {
  text-transform: uppercase;
  letter-spacing: 0.3rem;
  line-height: 0.9;
  display: flex;
  gap: 0.4em;
  align-items: end;
  margin-left: -2rem;
}
.accueil__sub h2 svg.title-icon {
  height: 1.5em;
  width: auto;
}
.accueil__sub.right-text h2 {
  justify-content: end;
}
.accueil__sub_content {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 2em;
}
.accueil__sub_content.main {
  margin-top: 1em;
}
.accueil__sub_content-text {
  padding-top: 3em;
}
.accueil__sub_content-text p {
  text-align: justify;
}
.accueil__sub_content-text ul {
  padding: 0 0 0 1.4em;
  text-align: justify;
}
.accueil__sub_content-text ul li {
  margin: 0.6em 0;
}
.accueil__sub_content-image {
  width: 80%;
}
.accueil__sub_content-image img {
  width: 100%;
}

.aup_banner {
  display: flex;
  flex-direction: row;
  height: 20rem;
}
.aup_banner__column {
  transition: transform 2s, -webkit-transform 2s;
  -webkit-transform: translateY(0) translateX(0);
  transform: translateY(0) translateX(0);
  height: 10rem;
  width: 33.33%;
  display: flex;
  justify-content: center;
  /*
      &.column-2{
        display: flex;
        flex-direction: column;

        position: absolute;
        left: 90vw;
        transition: left 2s;
      }
  */
}
.aup_banner__column h2 {
  transition: font-size 2s, width 2s;
  width: 20vw;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}
.aup_banner__column h2 svg {
  height: 1.5em;
  width: auto;
}
.aup_banner__column.move-bottom {
  -webkit-transform: translateY(12rem) translateX(-27rem);
  transform: translateY(12rem) translateX(-27rem);
}
.aup_banner__column.move-right {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
.aup_banner__column.small h2 {
  font-size: 2em;
}

body.route-realisations_index .realisations__intro {
  height: fit-content;
  max-height: 40rem;
  transition: max-height 1s;
  overflow: hidden;
}
body.route-realisations_index .realisations__back {
  visibility: hidden;
}
body.route-realisations_architecture_index .aup_banner__column.column-1, body.route-realisations_architecture_projet .aup_banner__column.column-1 {
  -webkit-transform: translateY(0) translateX(100%);
  transform: translateY(0) translateX(100%);
}
body.route-realisations_architecture_index .aup_banner__column.column-2, body.route-realisations_architecture_projet .aup_banner__column.column-2 {
  -webkit-transform: translateY(0) translateX(100%);
  transform: translateY(0) translateX(100%);
}
body.route-realisations_architecture_index .aup_banner__column.column-2 h2, body.route-realisations_architecture_projet .aup_banner__column.column-2 h2 {
  font-size: 1.6em;
}
body.route-realisations_architecture_index .aup_banner__column.column-3, body.route-realisations_architecture_projet .aup_banner__column.column-3 {
  -webkit-transform: translateY(10rem) translateX(0);
  transform: translateY(10rem) translateX(0);
}
body.route-realisations_architecture_index .aup_banner__column.column-3 h2, body.route-realisations_architecture_projet .aup_banner__column.column-3 h2 {
  font-size: 1.6em;
}
body.route-realisations_architecture_index .rubrique__intro-item.architecture {
  display: block;
}
body.route-realisations_urbanisme_index .aup_banner__column.column-1, body.route-realisations_urbanisme_projet .aup_banner__column.column-1 {
  -webkit-transform: translateY(0) translateX(0);
  transform: translateY(0) translateX(0);
}
body.route-realisations_urbanisme_index .aup_banner__column.column-1 h2, body.route-realisations_urbanisme_projet .aup_banner__column.column-1 h2 {
  font-size: 1.6em;
}
body.route-realisations_urbanisme_index .aup_banner__column.column-2, body.route-realisations_urbanisme_projet .aup_banner__column.column-2 {
  -webkit-transform: translateY(0) translateX(0);
  transform: translateY(0) translateX(0);
}
body.route-realisations_urbanisme_index .aup_banner__column.column-3, body.route-realisations_urbanisme_projet .aup_banner__column.column-3 {
  -webkit-transform: translateY(0) translateX(0);
  transform: translateY(0) translateX(0);
}
body.route-realisations_urbanisme_index .aup_banner__column.column-3 h2, body.route-realisations_urbanisme_projet .aup_banner__column.column-3 h2 {
  font-size: 1.6em;
}
body.route-realisations_urbanisme_index .rubrique__intro-item.urbanisme {
  display: block;
}
body.route-realisations_paysage_index .aup_banner__column.column-1, body.route-realisations_paysage_projet .aup_banner__column.column-1 {
  -webkit-transform: translateY(0) translateX(0);
  transform: translateY(0) translateX(0);
}
body.route-realisations_paysage_index .aup_banner__column.column-1 h2, body.route-realisations_paysage_projet .aup_banner__column.column-1 h2 {
  font-size: 1.6em;
}
body.route-realisations_paysage_index .aup_banner__column.column-2, body.route-realisations_paysage_projet .aup_banner__column.column-2 {
  -webkit-transform: translateY(10rem) translateX(-100%);
  transform: translateY(10rem) translateX(-100%);
}
body.route-realisations_paysage_index .aup_banner__column.column-2 h2, body.route-realisations_paysage_projet .aup_banner__column.column-2 h2 {
  font-size: 1.6em;
}
body.route-realisations_paysage_index .aup_banner__column.column-3, body.route-realisations_paysage_projet .aup_banner__column.column-3 {
  -webkit-transform: translateY(0) translateX(-100%);
  transform: translateY(0) translateX(-100%);
}
body.route-realisations_paysage_index .rubrique__intro-item.paysage {
  display: block;
}

.realisations {
  /*
    &__container{

      .rubrique__intro-item{
        display: none;
      }

      &.architecture{
        .aup_banner{
          &__column.column-1{
            -webkit-transform: translateY(0) translateX(100%);
            transform: translateY(0) translateX(100%);
          }
          &__column.column-2{
            -webkit-transform: translateY(0) translateX(100%);
            transform: translateY(0) translateX(100%);
            h2{font-size: 1.6em;}
          }
          &__column.column-3{
            -webkit-transform: translateY(10rem) translateX(0);
            transform: translateY(10rem) translateX(0);
            h2{font-size: 1.6em;}
          }
        }

        .rubrique__intro-item.architecture{
          display: block;
        }

      }

      &.urbanisme{
        .aup_banner{
          &__column.column-1{
            -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
            h2{font-size: 1.6em;}
          }
          &__column.column-2{
            -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
          }
          &__column.column-3{
            -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
            h2{font-size: 1.6em;}
          }
        }

        .rubrique__intro-item.architecture{
          display: block;
        }

      }

      &.paysage{
        .aup_banner{
          &__column.column-1{
            -webkit-transform: translateY(0) translateX(0);
            transform: translateY(0) translateX(0);
            h2{font-size: 1.6em;}
          }
          &__column.column-2{
            -webkit-transform: translateY(10rem) translateX(-100%);
            transform: translateY(10rem) translateX(-100%);
            h2{font-size: 1.6em;}
          }
          &__column.column-3{
            -webkit-transform: translateY(0) translateX(-100%);
            transform: translateY(0) translateX(-100%);
          }
        }

        .rubrique__intro-item.architecture{
          display: block;
        }

      }
    }
  */
}
.realisations__container .realisations__intro {
  max-height: 0;
  transition: max-height 1s;
  overflow: hidden;
  margin-bottom: 3rem;
}
.realisations__container .rubrique__intro-item {
  display: none;
}
.realisations__back {
  visibility: visible;
  margin-bottom: 1em;
  margin: 0 10% 1em;
}
.realisations__highlights {
  display: flex;
  flex-direction: row;
  gap: 3rem;
  justify-content: space-around;
  /*
      & > .column {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        justify-content: start;
        align-items: center;
      }
  */
}
.realisations__highlights.column-layout {
  display: flex;
  flex-direction: row;
  gap: 3rem;
  margin-top: 4rem;
  justify-content: space-around;
}
.realisations__highlights.column-layout .realisations__highlights-items {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: start;
  align-items: center;
  width: 30%;
}
.realisations__highlights.row-layout .realisations__highlights-items {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 3rem;
  margin-top: 4rem;
  justify-content: space-around;
}
.realisations__highlights.row-layout .realisations__highlights-items .realisations__item {
  width: 30%;
}
.realisations__column-header h2 {
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}
.realisations__column-header h2 svg {
  height: 1.5em;
  width: auto;
}
.realisations__item {
  margin-top: 0.4em;
}
.realisations__item:hover .realisations__item-projet img {
  opacity: 0.4;
}
.realisations__item:hover .realisations__item-projet .label__container {
  opacity: 1;
}
.realisations__item-projet {
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: end;
  width: 100%;
  height: 12em;
  overflow: clip;
}
.realisations__item-projet img {
  transition: opacity 0.2s linear;
  opacity: 1;
  width: 100%;
  object-fit: cover;
}
.realisations__item-projet .label {
  text-align: right;
  padding-right: 0.4em;
  padding-bottom: 0.4em;
  width: max-content;
}
.realisations__item-projet .label__container {
  font-size: var(--font-small-font-size);
  font-weight: 600;
  transition: opacity 0.2s linear;
  opacity: 0;
  overflow: visible;
  position: absolute;
  width: fit-content;
}

.top-header {
  background-color: var(--site_background);
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
}
.top-header__bg {
  display: flex;
  flex-direction: row;
  border-bottom: solid 1px rgba(31, 166, 198, 0.7607843137);
  background-color: rgba(244, 246, 248, 0.5);
}
.top-header__logo {
  padding-top: 0.5em;
}
.top-header__logo svg.logo {
  height: 9rem;
  margin-bottom: -1px;
  vertical-align: bottom;
  transition: height 1s;
}
.top-header__middle {
  display: flex;
  flex-direction: row;
  gap: 2em;
  justify-content: end;
  align-items: center;
  flex-grow: 1;
  margin: 0.3em 2em;
}
.top-header__middle a.contact {
  font-size: var(--font-small-font-size);
}
.top-header__middle a.contact div {
  font-size: 0.75em;
  opacity: 0;
  transition: opacity 1s;
}
.top-header__middle a.contact:hover div {
  opacity: 1;
}

/* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
.footer {
  display: flex;
  flex-direction: column;
  border-top: solid 1px rgba(31, 166, 198, 0.7607843137);
  background-color: rgba(244, 246, 248, 0.5);
  margin-top: 4em;
  padding: 1em;
}
.footer__zeppelin {
  position: absolute;
  height: 0;
  width: 0;
  right: 16rem;
  text-align: right;
  overflow: visible;
}
.footer__zeppelin svg.zeppelin {
  height: 6rem;
  width: fit-content;
  vertical-align: top;
  position: relative;
  top: -7.6rem;
}
.footer__top {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  gap: 2em;
  justify-content: space-between;
  align-items: top;
  /* ULs/LIs :: */
  /* :: ULs/LIs */
}
.footer__top .footer__company {
  width: 40%;
  max-width: 26em;
  display: flex;
  flex-direction: row;
  flex-grow: 0;
  flex-wrap: wrap;
  justify-content: center;
}
.footer__top .footer__company_left {
  min-width: fit-content;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
}
.footer__top .footer__company_left .logo {
  height: 9rem;
  width: fit-content;
}
.footer__top .footer__company_coords {
  flex-grow: 0;
  min-width: fit-content;
  margin-top: 0;
  font-size: 1.4rem;
}
.footer__top .footer__company_coords * {
  font-size: 1.4rem;
}
.footer__top .footer__zeppelin-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
}
.footer__top .footer__zeppelin-sub .zeppelin-text {
  align-self: center;
}
.footer__top .footer__zeppelin-sub .zeppelin-text .title {
  font-family: "Avantesk Regular", "Sora", Inter, Arial, sans-serif;
  font-size: calc(2rem * 1.4);
  font-weight: 800;
  text-transform: uppercase;
}
.footer__top .footer__zeppelin-sub .zeppelin-text .text {
  font-size: 1.4rem;
}
.footer__top ul.legal {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
}
.footer__top ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  gap: 2em;
  margin-top: 2.1em;
  padding: 0;
}
.footer__top ul li.li-separ {
  color: #76797B;
}
.footer__top ul li a {
  padding: 0.2em 0;
}
.footer__bottom {
  width: 100%;
  text-align: right;
  font-style: italic;
  font-family: "Avantesk Regular", "Sora", Inter, Arial, sans-serif;
  font-size: calc(1.4rem * 1.4);
}

.pagination-component {
  padding-top: 2rem;
  padding-bottom: 3rem;
}
.pagination-component .pagination {
  list-style-type: none;
}
.pagination-component .pagination li {
  display: inline-block;
}
.pagination-component .pagination .arrow.disabled {
  visibility: hidden;
}
.pagination-component .pagination-centered {
  text-align: center;
}
.pagination-component .pagination a {
  font-family: Inter;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  color: #373F41;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
.pagination-component .pagination li.active {
  background: #F9FAFB;
  border-radius: 0;
  border: solid 1px #52bad2;
  padding: 0 0.2em;
  opacity: 1;
  transition: opacity 0.4s;
}
.pagination-component .pagination li.active a {
  color: #000;
}
.pagination-component .pagination li.active a:hover {
  background: unset;
  border: unset;
}
.pagination-component .pagination:hover li.active {
  opacity: 0.5;
}
.pagination-component .pagination:hover li.active:hover {
  opacity: 1;
}
.pagination-component .pagination a:hover:not(.active) {
  background: #E8E8E8;
  border-radius: 1px;
  border: solid 1px #26b2d2;
}

.projet-file__container {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
  gap: 2em;
}
.projet-file__container h1, .projet-file__container h2, .projet-file__container h3, .projet-file__container h4 {
  font-family: unset;
}
.projet-file__titre {
  margin-bottom: 1em;
}
.projet-file__image-main {
  text-align: center;
}
.projet-file__image-alt {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.projet-file__image-alt img {
  width: 45%;
  margin: 2%;
}
.projet-file__text {
  margin: 2rem;
}
.projet-file__text p {
  margin-top: 1rem;
}
.projet-file__contents {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 2em;
}
.projet-file__contents-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4%;
  font-size: var(--font-normal-font-size);
  line-height: var(--font-normal-line-height);
}
.projet-file__contents-row.text_col_3 {
  gap: 3%;
}
.projet-file__contents-row.text_col_3 .col {
  width: 30%;
}
.projet-file__contents-row-img {
  width: 48%;
}
.projet-file__contents-row-img.single {
  width: 100%;
}
.projet-file__contents-row h3, .projet-file__contents-row h4, .projet-file__contents-row ul {
  margin-bottom: 1em;
}
.projet-file__contents-row ul {
  padding: 0 1em;
}
.projet-file__contents-row li, .projet-file__contents-row p {
  margin-bottom: 0.4em;
}