/*
Theme Name: Acropolis
Description:
Version: 1.0
Author: BABAWEB
Author URI: https://www.babaweb.fr/
*/

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@font-face {
  font-family: 'icons';
  src: url('assets/fonts/icons/icons.eot?81317296');
  src: url('assets/fonts/icons/icons.eot?81317296#iefix') format('embedded-opentype'),
    url('assets/fonts/icons/icons.woff2?81317296') format('woff2'),
    url('assets/fonts/icons/icons.woff?81317296') format('woff'),
    url('assets/fonts/icons/icons.ttf?81317296') format('truetype'),
    url('assets/fonts/icons/icons.svg?81317296#icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

.icon-right:before { content: '\e800'; } /* '' */
.icon-left:before { content: '\e801'; } /* '' */
.icon-plus:before { content: '\e802'; } /* '' */
.icon-check:before { content: '\e803'; } /* '' */
.icon-chat:before { content: '\e804'; } /* '' */
.icon-calendar:before { content: '\e805'; } /* '' */
.icon-volume-off:before { content: '\e806'; } /* '' */
.icon-volume:before { content: '\e807'; } /* '' */
.icon-right-open:before { content: '\f006'; } /* '' */
.icon-left-open:before { content: '\f007'; } /* '' */
.icon-linkedin:before { content: '\f30c'; } /* '' */

/* CSS Reset */
*, *::before, *::after { box-sizing: border-box; padding: 0; border: 0; border-radius: 0; margin: 0; background: none; text-align: inherit; text-decoration: none; font: inherit; color: inherit; list-style: none; outline: none;} input, button, select, textarea { -webkit-appearance: none; -moz-appearance: none;} a, button { overflow: visible; cursor: pointer;}

/* Accessibility */
.screen-reader-text,
.screen-reader-response {
  display: block;
  width: 0;
  height: 0;

  position: absolute;

  opacity: 0;
  overflow: hidden;
}

:root {
  --header-height: ;
  --viewport-height: 100vh;

  /* Text sizes */
  --text--xs: 0.75rem; /* 12 */
  --text--sm: 0.875rem; /* 14 */
  --text--base: 1rem; /* 16 */
  --text--md: 1.125rem; /* 18 */
  --text--2md: 1.25rem; /* 20 */
  --text--3md: 1.375rem; /* 22 */
  --text--4md: 1.625rem; /* 26 */
  --text--lg: 1.875rem; /* 30 */
  --text--2lg: 2.5rem; /* 40 */ 
  --text--xl: 3.75rem; /* 60 */
  --text--2xl: 7.5rem; /* 120 */

  /* Text families */
  --display-font: 'Inter';
  --heading-font: 'Inter';
  --content-font: 'Inter';

  /* Radius */
  --radius--3xs: .125rem; /* 2px */
  --radius--2xs: .5rem; /* 8px */
  --radius--xs: .625rem; /* 10px */
  --radius--s: 1.25rem; /* 20px */
  --radius--m: 3.75rem; /* 60px */
  --radius--l: 7.5rem; /* 120px */

  /* Spacing */
  --latpad: 5rem;

  /* Container */
  --container--s: 1030px;
  --container--m: 1300px;
  --container--l: 1680px;


	/* Colors */
  --black: #000;
  --white: #FFF;
  --white-30: #ffffff4d;

  --blackish: #0E1215;
  --gold: #E0B400;
  --brown: #AB8900;
  --dark-brown: #7A6200;
  --gray-400: #607690;
  --gray-500: #374453;
  --gray-700: #0E1215;
  --linkedin-blue: #007EBB;
  --vivid-blue: #006FF0;
  --blue: #0058BD; 
  --border-blue: #00408A;
  --dark-blue: #002856;
  --navy-blue: #001124;

  --gradient-blue: linear-gradient(90deg, var(--navy-blue) 0%, var(--dark-blue) 100%);
  --gradient-gold: linear-gradient(90deg, var(--brown) 0%, var(--gold) 100%);
  --gradient-primary-alpha: radial-gradient(var(--color-primary) 0%, var(--color-primary) 45%, transparent 70%);

  --wpcf7-valid: #64B462;
  --wpcf7-error: #cf2828;

  --color-primary: var(--dark-blue);
  --color-secondary: var(--brown);
}

.grecaptcha-badge{
	visibility: collapse !important;
}

body {
  display: flex;
  width: 100%;
  min-height: var(--viewport-height);

  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  
  font-family: var(--content-font), sans-serif;
  font-size: var(--text--base);
  font-weight: 400;
  line-height: 1.5;
}

/* Icons */
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "icons";
  font-style: normal;
  font-weight: normal;
  -webkit-font-Soothing: antialiased;
  -moz-osx-font-Soothing: grayscale;
}

/* Text */
b,
strong {
	font-weight: 700;
}

em,
i {
	font-style: italic;
}

u {
	text-decoration: underline;
}

sup,
sub {
  font-size: .5em;
  line-height: 1;
}

.formatted p {
  color: var(--gray-500);
}

.h1,
.formatted h1 {
  font-size: var(--text--2lg);
}

.h2,
.formatted h2 {
  font-size: var(--text--lg);
}

.h3,
.formatted h3 {
  font-size: var(--text--4md);
}

.h4,
.formatted h4 {
  font-size: var(--text--3md);
}

.h5,
.formatted h5 {
  font-size: var(--text--2md);
}

.h6,
.formatted h6 {
  font-size: var(--text--md);
}

.h1,
.formatted h1,
.h2,
.formatted h2,
.h3,
.formatted h3,
.h4,
.formatted h4,
.h5,
.formatted h5,
.h6,
.formatted h6 {
  font-family: var(--heading-font), sans-serif;
}

.formatted p:not(:first-child),
.formatted ul:not(:first-child),
.formatted ol:not(:first-child),
.formatted h2:not(:first-child),
.formatted h3:not(:first-child),
.formatted h4:not(:first-child),
.formatted h5:not(:first-child),
.formatted h6:not(:first-child) {
  margin-top: 1em;
}

.formatted ol,
.formatted ul {
  padding: 0 0 0 1em;
}

.formatted ol {
  counter-reset: list;
}

.formatted ol li {
  
}

.formatted ol li::before,
.formatted ul li::before {
  
  
  position: relative;
  left: -1em;
}

.formatted ol li::before {
  counter-increment: list;
  content: counter(list);
  color: var(--color-secondary);
  font-weight: 700;
}

.formatted ul li::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-radius: 1em;
  background-color: var(--color-secondary);
  display: inline-block;
  top: -0.2em;
}

.formatted ol li + li,
.formatted ul li + li {
  margin-top: .75em;
}

.formatted a:not([class]) {
  text-decoration: underline;
}

.formatted a:not([class]):hover {
  color: var(--color-secondary);
}

.formatted img,
.formatted iframe {
  display: block;
  max-width: 100%;
}

.formatted img {
  height: auto;
}

.formatted--emphasis {
  font-size: var(--text--lg);
  font-weight: 500;
  color: var(--gray-700);
  letter-spacing: 0.05em;
  line-height: 1.6em;
}
.formatted--emphasis strong,
.formatted--emphasis b {
  font-style: italic;
}

/* Page */
.page {
  width: 100%;
}

/* Formatted title */
.formatted-title {
  font-size: var(--text--xl);
  font-weight: 300;
  line-height: 1.1em;
  white-space: pre-line;
}
.formatted-title b,
.formatted-title strong {
  font-style: italic;
  font-weight: 800;
}
.formatted-title--center {
  position: relative;
  font-size: var(--text--2xl);
  font-style: italic;
  line-height: 1em;
  text-transform: uppercase;
  width: 100%;
  color: var(--color-primary);
  margin-bottom: 3.75rem;
}
.formatted-title--center b,
.formatted-title--center strong {
  font-style: normal;
}
.formatted-title--center::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-secondary);
  position: absolute;
  left: 0;
  bottom: .13em;
}

/* Containers */
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.container .container-inner {
  margin: auto;
  padding: 0 var(--latpad);
  width: 100%;
}
.container--s .container-inner {
  max-width: calc(var(--container--s) + (var(--latpad) * 2));
}
.container--m .container-inner {
  max-width: calc(var(--container--m) + (var(--latpad) * 2));
}
.container--l .container-inner {
  max-width: calc(var(--container--l) + (var(--latpad) * 2));
}

/* Radius */
.radius--corners{
  border-radius: var(--radius--s);
}
.radius--big-left{
  border-radius: var(--radius--l);
  border-top-right-radius: var(--radius--s);
  border-bottom-left-radius: var(--radius--m);
}
.radius--small-left{
  border-radius: var(--radius--m);
  border-top-right-radius: var(--radius--s);
  border-top-left-radius: var(--radius--l);
}
.radius--sharp{
  border-radius: var(--radius--s);
  border-top-right-radius: var(--radius--l);
  border-bottom-right-radius: 0;
}

/* Flexible */
.flex-row {
  width: 100%;
  max-width: var(--container--s);
  margin: auto;
}
.flex-row + .flex-row {
  margin-top: 120px;
}
.container .container-inner-flex {
  margin: 120px auto;
}

/* Buttons */
.multi-texts-btn {
  display: flex;
  flex-direction: column;
  font-size: var(--text--base);
  color: var(--color-primary);
}
.multi-texts-btn .text-top {
  font-style: italic;
}
.multi-texts-btn .text-bottom {
  color: var(--white);
  font-size: var(--text--3md);
  font-weight: 800;
  text-transform: uppercase;
}
.multi-texts-btn .icon{
  margin-top: .25em;
}
.multi-texts-btn--alt .text-bottom{
  color: var(--color-primary);
}
.multi-texts-btn--alt .icon{
  color: var(--color-secondary);
}
.multi-texts-btn--white .text-top,
.multi-texts-btn--white .icon {
  color: var(--white);
}
.multi-texts-btn--color-primary .text-top,
.multi-texts-btn--color-primary .text-bottom,
.multi-texts-btn--color-primary .icon {
  color: var(--color-primary);
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 1.285em 4.285em;
  border-radius: var(--radius--2xs);
  background-color: var(--background-color);
  color: var(--text-color);
  transition: 
    background .15s linear,
    border .15s linear,
    color .15s linear;
}
.btn .text {
  font-weight: 500;
  font-size: var(--text--sm);
}
.btn .icon::before {
  font-size: var(--text--xs);
}
.btn .text + .icon,
.btn .icon + .text {
  margin-left: .715em;
}
.btn:hover {
  color: var(--white);
  background-color: var(--brown);
}
.btn--transparent:hover {
  color: var(--black);
  background-color: var(--white);
}
.btn--blue {
  --background-color: var(--vivid-blue);
  --text-color: var(--white);
}
.btn--white-30 {
  --background-color: var(--white-30);
  --text-color: var(--white);
}

/* Images */
.media--contain,
.media--cover {
  position: relative;

  overflow: hidden;
}

.media--contain img,
.media--cover img,
.media--contain video,
.media--cover video {
  display: block;
  width: auto;
  height: auto;

  position: absolute;
  top: -10000%;
  left: -10000%;
  bottom: -10000%;
  right: -10000%;

  margin: auto;
}

.media--contain img,
.media--contain video {
  max-width: 100%;
  max-height: 100%;
}

.media--cover img,
.media--cover video {
  min-width: 1000%;
  min-height: 1000%;
  
	transform: scale(.1);
}

.media--vertical::before {
  content: '';
  display: block;
  padding-top: 140%;
}

/* Figure in content */
.figure-in-content {
  width: 640px;
}
.figure-in-content::before {
  content: '';
  display: block;
  padding-top: 65%;
}

/* Grid */
.grid {
  --columns-numbers: 1;
  --columns-gap: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--columns-gap);
}

.grid--2-col {
  --columns-numbers: 2;
}

.grid--3-col {
  --columns-numbers: 3;
}

.grid--4-col {
  --columns-numbers: 4;
}

.grid .grid-item {
  width: calc( (100% - ( var(--columns-gap) * ( var(--columns-numbers) - 1) ) ) / var(--columns-numbers) );
}

.grid--masonry {
  display: block;
  columns: 3;
  column-gap: 2.143em;
}
.grid--masonry .grid-item:nth-child(1n)::before {
  padding-top: 82%;
}
.grid--masonry .grid-item:nth-child(2n)::before {
  padding-top: 98%;
}
.grid--masonry .grid-item:nth-child(3n)::before {
  padding-top: 115%;
}
.grid--masonry .grid-item:nth-child(4n)::before {
  padding-top: 88%;
}
.grid--masonry .grid-item:nth-child(5n)::before {
  padding-top: 66%;
}
.grid--masonry .grid-item:nth-child(6n)::before {
  padding-top: 87%;
}
.grid--masonry .grid-item {
  display: inline-flex;
  position: relative;
  overflow: hidden;
}
.grid--masonry .grid-item .picture {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

/* Sliders */
.slick-list,
.slick-track {
  display: flex;

  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
}

.slick-list {
  width: 100%;

  overflow: hidden;
}
.controls {
  display: inline-flex;
  align-items: center;
  margin: 0 auto;
}
.controls .dots {
  margin: 0 2.5rem;
}
.controls .slick-dots {
  display: flex;
  align-items: center;
}
.controls .slick-dots [role=presentation] {
  width: 1em;
  height: .125em;
  border-radius: 1em;
  background-color: var(--gray-400);
}
.controls .slick-dots .slick-active[role=presentation] {
  background-color: var(--gold);
}
.controls .slick-dots [role=presentation] + [role=presentation] {
  margin-left: 1px;
}
.controls .slick-dots [role=presentation] button {
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  visibility:hidden;
  position:relative;
}
.controls .slick-dots [role=presentation] button::after {
  content:'';
  visibility:visible;
  height: 1.5em;
  width: 100%;
  display: block;
  position: absolute;
}
.controls .slick-arrow {
  width: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.controls .slider-right .icon,
.controls .slider-left .icon {
  color: var(--gold);
}
.js-css-slider-container--mobile .controls {
  display: none;
}

/* WPCF7 */
.wpcf7-form {
  position: relative;
}
.form-row{
  display: flex;
  gap: 1.875rem;
  margin-bottom: 1.875rem;
}
.form-row p {
  width: 100%;
}
.form-item {
  display: block;
  position: relative;
  width: 100%;
}
.form-item .name{
  display: inline-block;
  margin-bottom: 1rem;
  pointer-events: none;
  cursor: text;
}
.form-item .form-label{
  color: var(--gray-400);
  display: inline-block;
  position: absolute;
  top: 1em;
  left: 1em;
}
.wpcf7-text,
.wpcf7-date,
.wpcf7-textarea {
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--border-blue);
  border-radius: var(--radius--2xs);
  background-color: var(--navy-blue);
  color: var(--white);
}
.form-item .icon {
  color: var(--white);
  position: absolute;
  right: 1em;
  top: 1em;
  pointer-events: none;
}
.wpcf7-not-valid {
  border: 1px solid var(--wpcf7-error);
}
.wpcf7-not-valid-tip {
  position: absolute;
  left: 0;
  bottom: -1.25rem;
  color: var(--wpcf7-error);
  font-size: var(--text--sm);
  z-index: 1;
}
.wpcf7-acceptance {
  margin-bottom: 3.75rem;
  display: block;
  color: var(--color-secondary);
}
.wpcf7-acceptance label{
  display: flex;
  align-items: center;
}
.wpcf7-acceptance label input::before{
  content: '';
  display: block;
  height: 1.25rem;
  width: 1.25rem;
  border: 1px solid var(--color-secondary);
  border-radius: 2px;
  margin-right: 1.25rem;
}
.wpcf7-acceptance label input:hover::before,
.wpcf7-acceptance label input:focus::before{
  border: 1px solid var(--white);
}
.wpcf7-acceptance label input:checked::before{
  background: var(--color-secondary);
}
.wpcf7-response-output {
  color: var(--white);
  padding: .75em 1em;
  margin: auto;
  margin-top: 1em;
  border-radius: var(--radius--2xs);
  max-width: 800px;
}
[data-status="invalid"] .wpcf7-response-output,
[data-status="unaccepted"] .wpcf7-response-output {
  background: var(--wpcf7-error);
}
[data-status="sent"] .wpcf7-response-output {
  background: var(--wpcf7-valid);
}
.wpcf7-response-output:empty {
  display: none;
}
.wpcf7-form .form-bottom {
  width: 100%;
  max-width: 800px;
  margin: auto;
}
.wpcf7-form .form-bottom .btn {
  width: 100%;
  padding: 3.57em 0;
  justify-content: center;
}

/* Partials */
.layout-reverse {
  flex-direction: row-reverse;
}

.formatted-content {
  column-gap: 2.5rem;
}
.formatted-content--2-col {
  columns:2;
}
.formatted-content--3-col {
  columns:3;
}
.formatted-content--narrow {
  max-width: 500px;
}

.emphasis-content {
  display: flex;
  justify-content: space-between;
}
.emphasis-content .formatted {
  width: 100%;
  max-width: 360px;
}
.emphasis-content .formatted.formatted--emphasis {
  width: 100%;
  max-width: 495px;
}
.emphasis-content .formatted--emphasis + .formatted {
  margin-left: 3.75rem;
}
.emphasis-content.layout-reverse .formatted--emphasis + .formatted {
  margin-left: 0;
  margin-right: 3.75rem;
}
.flex-row + .emphasis-content--full-width {
  margin-top: 105px;
}
.emphasis-content--full-width + .flex-row {
  margin-top: 3.75rem;
}
.emphasis-content--full-width .formatted.formatted--emphasis {
  max-width: unset;
  width: auto;
  margin: auto;
}

.blockquotes-content {
  display: flex;
  justify-content: space-between;
}
.blockquotes-content .blockquotes-container {
  width: 100%;
  max-width: 495px;
}
.blockquote-item {
  border-left: 5px solid var(--color-secondary);
  padding-left: .9375em;
  font-weight: 500;
}
.blockquote-item + .blockquote-item {
  margin-top: 1.25rem;
  color: var(--black);
}
.blockquote-item .blockquote-title {
  font-weight: 700;
  font-size: var(--text--md);
}
.blockquote-item .blockquote-text {
  font-size: var(--text--base);
  color: var(--gray-500);
}
.blockquotes-content--full-width .blockquote-item .blockquote-text {
  color: var(--black);
}
.blockquote-item .blockquote-title + .blockquote-text {
  margin-top: .3125em;
}
.blockquotes-content .formatted {
  width: 100%;
  max-width: 360px;
}
.blockquotes-content .blockquotes-container + .formatted {
  margin-left: 3.75rem;
}
.blockquotes-content.layout-reverse .blockquotes-container + .formatted {
  margin-left: 0;
  margin-right: 3.75rem;
}
.blockquotes-content--full-width .blockquotes-container {
  --gutter-gap: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 3.75rem var(--gutter-gap);
  align-items: flex-start;
}
.blockquotes-content--full-width .blockquote-item {
  width: calc(50% - (var(--gutter-gap) / 2));
}
.blockquotes-content--full-width .blockquotes-container {
  max-width: unset;
}
.blockquotes-content--full-width .blockquote-item + .blockquote-item {
  margin-top: 0;
}

/* Bloc VDO */
.bloc-vdo {
  width: 100%;
  box-sizing: border-box;
}
.bloc-vdo .content-media {
  width: 100%;
  position: relative;
}
.bloc-vdo .content-media:before {
  display: block;
  content:"";
  padding-bottom: 56.25%; /* Pour avoir un ratio de 9/16 */
}
.bloc-vdo .content-media iframe {
  position: absolute;
  top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
}

.gallery-grid {
  max-width: var(--container--l);
}
.gallery-grid .gallery-picture::before {
  content: '';
  display: block;
}
.gallery-grid .gallery-picture {
  margin-bottom: 2.5rem;
}

/* Noise */
.noised {
  position: relative;
  --background-color: var(--color-primary);
}
.noised--html {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1120px;
  z-index: -20;
}
.noised::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -20;
}
.noised::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -20;
}
.noised::before {
  background: var(--gradient-blue);
}
.noised::after {
  background-image: url('assets/img/noise-s.webp');
  opacity: 0.25;
}
.page-template-archive-expertises .noised--html,
.page-template-archive-products .noised--html {
  height: 820px;
}
.page-template-archive-projects > .page > .noised--html {
  display: none;
}
.page-template-archive-projects .container--hero {
  position: relative;
}
.page-template-archive-projects .container--hero > .noised--html {
  height: 100vh;
  bottom: 0;
  top: unset;
}
.page-template-default .noised--html,
.page-template-page-sitemap .noised--html,
.error404 .noised--html {
  height: 105px;
}

/* Highlighted */
.highlighted{
  position: relative;
  display:inline-block;
  transform: rotate(-2.5deg);
  color: var(--white);
  font-weight: 700;
  font-style: italic;
  padding: .2em .25em;
}
.highlighted::before{
  content: '';
  display: block;
  position: absolute;
  transform: rotate(1.2deg);
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-secondary);
}
a.highlighted::before{
  transition:
    transform .15s linear,
    background .15s linear;

}
a.highlighted:hover::before{
  transform: rotate(-1.2deg);
  background-color: var(--dark-brown);
}


/* Trigram */
.responsive-trigram{
  display: none;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.responsive-trigram::before{
  content: '';
  display: block;
  position: absolute;
  border-radius: 2rem;
  width: 3.75rem;
  height: 3.75rem;
}
.icon-trigram{
  display: block;
  position: relative;
  width: 1.875rem;
  opacity: 1;
}
.icon-trigram,
.icon-trigram::before,
.icon-trigram::after{
  transition: 0.2s;
  height: 3px;
  background: var(--white);
  border-radius: 2px;
  transform: translate(0, 0) rotate(0deg);
}
.icon-trigram::before,
.icon-trigram::after{
  content: '';
  display: block;
  position: absolute;
  width: 100%;
}
.icon-trigram::before{
  top: -10px;
}
.icon-trigram::after{
  bottom: -10px;
}
.js-css-mobile-menu--open {
  overflow-y: hidden;
}
.js-css-mobile-menu--open .icon-trigram{
  background: transparent;
}
.js-css-mobile-menu--open .icon-trigram::before{
  transform: translate(0%, 10px) rotate(45deg);
}
.js-css-mobile-menu--open .icon-trigram::after{
  transform: translate(0px, -10px) rotate(-45deg) scale(1, 1);
}

/* Logo */
.logo::before {
  content: '';
  display: block;
  padding-top: 30%;
}

/* Cards slider */
.cards-slider {
  display: flex;
  flex-direction: column;
}
.cards-slider .controls {
  margin-top: 1.25rem;
}
.cards-slider .slick-track {
  gap: 1.25rem;
  align-items: stretch;
}
.cards-slider .slick-slide > div,
.cards-slider .slick-slide div .card {
  height: 100%;
}

/* Card */
.card {
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.5em;
  overflow: hidden;
  min-height: 420px;
}
.card::before {
  background: var(--gradient-gold);
}
.card .number {
  font-weight: 300;
  font-size: var(--text--xl);
  text-align: center;
  letter-spacing: .05em;
  color: var(--dark-brown);
}
.card.noised::after {
  opacity: 0.1;
}
.card .bottom {
  margin-top: 100px;
}
.card .bottom .title {
  font-size: var(--text--lg);
  font-weight: 700;
  font-style: italic;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white);
  width: 100%;
}
.card .bottom .icon {
  color: var(--color-primary);
  display: inline-block;
  width: 100%;
}

/* Portrait pictures */
.portraits-pictures {
  width: 300%;
  max-width: 1160px;
}
.portraits-pictures .slider {
  width: 100%;
  display: flex;
  gap: 2.5em;
}
.portraits-pictures .figure {
  width: 100%;
  max-height: 650px;
}

/* Hover links container */
.hover-links-container {
  display: inline-flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  margin-top: 1.25rem;
  padding-right: 370px;
}
.hover-link {
  font-style: italic;
  position: relative;
  display: inline-block;
  z-index: 1;
  transition:
    opacity .3s ease-in-out;
}
.hover-link .sup-title {
  color: var(--color-secondary);
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  transition:
    transform .3s ease-in-out,
    opacity .3s ease-in-out;
  transform: translateX(-2em);
  opacity: 0;
}
.hover-link .title {
  text-transform: uppercase;
  font-size: var(--text--lg);
  font-weight: 400;
  color: var(--color-primary);
  letter-spacing:0.05em;
  padding: .5em;
  padding-left: 0;
  background: var(--white-30);
  backdrop-filter: blur(30px);
  line-height: 1em;
}
.hover-link .picture {
  background-image: var(--background-picture);
  background-size: cover;
  width: 550px;
  height: 550px;
  position: absolute;
  z-index: -1;
  top: -250px;
  right: -70%;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50px);
  transition:
    transform .3s ease-in-out,
    opacity .3s ease-in-out;
}
.hover-links-container:hover .hover-link {
  opacity: .3;
}
.hover-links-container:hover .hover-link:hover {
  opacity: 1;
}
.hover-link:hover .sup-title {
  transform: translateX(0);
  opacity: 1;
}
.hover-link:hover .picture {
  opacity: 1;
  transform: translateX(0px);
}


/* Wide picture link */
.wide-picture-link {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  min-height: 500px;
  padding: 2.5rem;
  position: relative;
  background-color: var(--color-secondary);
}
.wide-picture-link .background-picture {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--background-picture);
  background-size: cover;
  background-position: center;
  mix-blend-mode: darken;
}
.wide-picture-link .center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: var(--white);
  font-size: var(--text--lg);
  text-align: center;
  position: relative;
  z-index: 1;
}
.wide-picture-link .center::before {
  content: '';
  display: block;
  height: 245px;
  width: 245px;
  background: var(--gradient-primary-alpha);
  position: absolute;
}
.wide-picture-link .center .text-top {
  font-weight: 300;
  font-style: italic;
  position: relative;
}
.wide-picture-link .center .text-bottom {
  font-weight: 700;
  position: relative;
}

/* Wide gallery link */
.wide-gallery-link {
  height: 810px;
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  padding: 3.75rem;
}
.wide-gallery-link::before {
  content: '';
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .6;
  background-color: var(--color-primary);
}
.wide-gallery-link .background-gallery {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.background-gallery .background-gallery-picture {
  width: 100%;
  height: 100%;

  background-image: var(--background-gallery-picture);
  background-size: cover;
  background-position: center;
}
.wide-gallery-link .text-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  width: 100%;
}
.wide-gallery-link .text-row .center {
  color: var(--white);
  text-align: center;
  margin: auto;
  width: 100%;
  max-width: 525px;
}
.wide-gallery-link .text-row .title {
  width: 100%;
  font-size: var(--text--2lg);
  font-weight: 700;
  font-style: italic;
  line-height: 1em;
}
.wide-gallery-link .text-row .text {
  width: 100%;
  font-size: var(--text--2md);
  display: inline-block;
}
.wide-gallery-link .text-row .text + .text {
  margin-top: 1em;
}
.wide-gallery-link .text-row .title + .text {
  margin-top: .5em;
}
.wide-gallery-link .text-row .multi-texts-btn {
  position: absolute;
  top: 0;
  right: 0;
}
.wide-gallery-link + .wide-gallery-link {
  margin-top: 2.5rem;
}

/* Big picture slider */
.big-picture-slider {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.big-picture-slider .slider {
  overflow: hidden;
}
.big-picture-slider .figure::before {
  content: '';
  display: block;
  padding-top: 66%;
}
.big-picture-slider .controls {
  margin-bottom: 3.125rem;
}
.big-picture-slider .btn-volume {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  padding: 1rem;
  height: 3.75rem;
  width: 3.75rem;
  justify-content: center;
}
.big-picture-slider .btn-volume .icon::before {
  font-size: var(--text--2md);
}
.big-picture-slider .js-css-btn-volume--off .icon::before{
  content: '\e806';
}
.big-picture-slider .js-css-btn-volume--on .icon::before{
  content: '\e807';
}
.home .big-picture-slider .controls {
  animation-delay: 5s;
}

/* Portrait */
.portrait {
  display: flex;
  align-items: flex-start;
}
.portrait .left {
  width: 100%;
  max-width: 630px;
}
.portrait .left .picture {
  width: 100%;
}
.portrait .left .picture::before {
  content: '';
  display: block;
  padding-top: 132.5%;
}
.portrait .right {
  width: 360px;
  padding-top: 2.5rem;
  margin-left: 2.5rem;
}
.portrait .right .title {
  font-size: var(--text--xl);
  font-weight: 800;
  position: relative;
  left: -65%;
  white-space: nowrap;
}
.portrait .right .title + .text {
  margin-top: 1em;
}
.portrait .right .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  line-height: 1em;
  font-size: 2em;
}
.portrait .right .social-link::before {
  content: '';
  display: block;
  position: absolute;
  height: 1.5em;
  width: 1.5em;
  border-radius: 2em;
}
.portrait .right .social-link .icon::before{
  color: var(--linkedin-blue);
  background-color: var(--white);
  height: .875em;
  display: block;
  overflow: hidden;
  border-radius: 0.15em;
}
.portrait .right .title + .social-link, 
.portrait .right .text + .social-link {
  margin-top: .75em;
}
.portrait + .portrait {
  margin-top: 3.75rem;
}

/* Hero */
.hero {
  color: var(--white);
  text-align: center;
  position: relative;
  margin-top: 110px;
  margin-bottom: 120px;
}
.hero .sup-title {
  color: var(--color-secondary);
  position: absolute;
  top: -1.5em;
  transform: translateX(-50%);
}
.hero .title {
  max-width: 760px;
  margin: auto;
}
.hero .under-title-container {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.hero .under-title-container .text {
  font-size: var(--text--2md);
  margin-top: 1em;
  line-height: 1em;
}
.hero .under-title-container .text .pre-text {
  color: var(--color-secondary);
}

/* Hero horizontal */
.hero-horizontal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--white);
  position: relative;
}
.hero-horizontal .sup-title {
  color: var(--color-secondary);
  position: absolute;
  right: 0;
}

/* Top Thumbnail */
.top-thumbnail::before {
  content: '';
  display: block;
  padding-top: 66%;
}
.titled-block-grid + .top-thumbnail {
  margin-top: 130px;
}

/* Figure small text */
.figure-small-text {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  max-width: var(--container--s);
  margin: auto;
}
.figure-small-text .figure {
  width: 640px;
  min-height: 400px;
}
.figure-small-text .figure::before {
  content: '';
  display: block;
  padding-top: 65%;
}
.figure-small-text .text {
  color: var(--gray-500);
  width: 230px;
  margin-bottom: 2.5em;
}
.figure-small-text .figure + .text {
  margin-left: 1.875rem;
}

/* Row text links picture */
.row-text-link-picture {
  display: flex;
  align-items: center;
}
.row-text-link-picture .text {
  width: 380px;
  margin-bottom: 1em;
}
.row-text-link-picture .figure {
  margin-top: auto;
}
.row-text-link-picture .links-container {
  max-width: 250px;
  margin: 0 auto;
  padding: 0 1.875rem;
}
.row-text-link-picture .links-container .blue-link {
  font-weight: 700;
  color: var(--color-primary);
  display: inline-block;
  width: 100%;
}
.row-text-link-picture .links-container .blue-link:hover {
  color: var(--color-secondary);
}
.row-text-link-picture .links-container .blue-link + .blue-link {
  margin-top: .625rem;
}

/* Strip link picture */
.strip-link-picture {
  --corner-radius: 130px;
  height: 300px;
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: var(--container--s);
  padding-bottom: 100px;
}
.strip-link-picture .texture {
  border-bottom-right-radius: var(--corner-radius);
  position: absolute;
  top: 0;
  right: 0;
  width: 100vw;
  height: 200px;
  overflow: hidden;
}
.strip-link-picture .texture::before {
  background: var(--brown);
}
.strip-link-picture .texture::after {
  opacity: 0.1;
}
.strip-link-picture .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-right: var(--corner-radius);
  position: relative;
}
.strip-link-picture .figure {
  width: 380px;
}
.strip-link-picture .figure::before {
  content: '';
  display: block;
  padding-top: 105.25%;
}

/* Ajax */
.page .container .js-css-ajax--hidden {
  display: none;
}

/* Titled block */
.titled-block {
  text-align: center;
}
.titled-block .title {
  font-size: var(--text--2md);
  margin-bottom: 1em;
}
.titled-block .text {
  color: var(--white);
  max-width: 230px;
  margin: auto;
}
.titled-block-grid {
  margin: auto;
  max-width: var(--container--m);
  gap: 3rem var(--columns-gap);
}

/* Header */
.header {
  z-index: 10;
  position: relative;
  width: 100%;
}
.header .top {
  z-index: 20;
  position: relative;
}
.header .top .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem var(--latpad);
  padding-right: 1.25rem;
}
.header .top .left {
  margin-right: auto;
}
.header .top .logo {
  width: 205px;
  display: block;
}
.header .top .navigation .list{
  display: flex;
}
.header .top .navigation .item {
  font-size: var(--text--sm);
  text-align: center;
  color: var(--white);
  font-weight: 500;
}
.header .top .navigation .item--current {
  color: var(--color-secondary);
}
.header .top .navigation .item + .item {
  margin-left: 2.85em;
}
.header .top .navigation .link {
  padding: .75em 0;
}
.header .top .navigation .link:hover {
  color: var(--color-secondary);
}
.header .top .center {
  position: absolute;
  margin: auto;
}
.js-css-animated-intro .header .top .right {
  opacity: 0;
  animation-delay: 5s;
  animation-fill-mode: forwards;
  animation-name: final-info-appear;
  animation-duration: 1s;
}
.header .responsive-menu-panel,
.js-css-mobile-menu--open .header .responsive-menu-panel {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100%;

  overflow-y: auto;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-50px);
  transition: .3s;
}
.header .responsive-menu-panel-inner {
  position: relative;
  height: 100%;
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.js-css-mobile-menu--open .header .responsive-menu-panel::before {
  background: var(--gradient-blue);
}
.header .responsive-menu-panel .list {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header .responsive-menu-panel .item {
  font-size: var(--text--2lg);
}
.header .responsive-menu-panel .item + .item {
  margin-top: 1em;
}
.js-css-mobile-menu--open .responsive-menu-panel .btn {
  position: absolute;
  bottom:  3.75rem;
}

/* Anim overlay */
.anim-overlay {
  opacity: .4;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100vh;
  width: 100%;
  display: none;
  overflow: hidden;
}
.anim-overlay .container {
  height: 100%;
}
.anim-overlay .container-inner {
  height: 100%;
  align-items: center;
  justify-content: flex-end;
  display: flex;
  position: relative;
}
.anim-overlay .formatted-title {
  position: absolute;
  top: 0;
  left: var(--latpad);
  transform: translateY(calc(50vh - 1.25em));
  display: inline-block;
  transition: transform .3s ease-in-out;
  color: var(--white);
  opacity: 0;
  max-width: calc(100% - 400px);
  white-space: pre-line;
}
.anim-overlay .logo {
  width: 200px;
  opacity: 0;
}
.home.page-template-index .anim-overlay {
  animation-name: unset;
}

/* Animated intro */
.js-css-animated-intro .anim--global {
  animation-duration: 5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
.js-css-animated-intro {
  overflow: hidden;
  animation-name: show-overflow;
  animation-duration: 5ms;
  animation-delay: 5s;
  animation-fill-mode: forwards;
}
.js-css-animated-intro .anim-overlay {
  display: block;
  opacity: 1;
  z-index: 2;
}
.home.js-css-animated-intro .anim-overlay {
  z-index: unset;
}

@keyframes show-overflow {
  0%{
    overflow: hidden;
  }
  100%{
    overflow: auto;
  }
}

@keyframes slide-from-top {
  0%{
    transform: translateY(-100%);
  }
  100%{
    transform: translateY(0%);
  }
}
.js-css-animated-intro .anim--slide-from-top {
  animation-name: slide-from-top;
  animation-delay: 4s;
  animation-duration: 1s;
  transform: translateY(-100%);
}

@keyframes slide-from-bottom {
  0%{
    transform: translateY(250px);
    opacity: 0;
  }
  100%{
    transform: translateY(0px);
    opacity: 1;
  }
}
.js-css-animated-intro .anim--slide-from-bottom {
  animation-name: slide-from-bottom;
  animation-delay: 4s;
  animation-duration: 1s;

  transform: translateY(250px);
  opacity: 0;
}

@keyframes appear-vanish-opacity {
  0%{
    opacity: 0;
  }
  60%{
    opacity: 1;
  }
  75%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}
.js-css-animated-intro .anim--appear-vanish-opacity {
  animation-name: appear-vanish-opacity;
}

@keyframes final-disappear {
  0%{
    opacity: 1;
    z-index: 2;
  }
  100%{
    opacity: 0;
    z-index: unset;
  }
}
.js-css-animated-intro .anim--final-disappear {
  animation-name: final-disappear;
  animation-delay: 4s;
  animation-duration: 1s;
}

@keyframes final-info-appear {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
.js-css-animated-intro .anim--final-info-appear {
  animation-name: final-info-appear;
  animation-delay: 4s;
  animation-duration: 1s;
  opacity: 0;
}

@keyframes arriving-picture {
  0%{
    opacity: 0;
    transform: translateY(65vh) scale(1.125);
  }
  100%{
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}
.js-css-animated-intro .anim--arriving-picture {
  animation-name: arriving-picture;
  animation-delay: 4s;
  animation-duration: 1s;
  opacity: 0;
  transform: translateY(65vh) scale(1.125);
}

@keyframes title-slide-homepage {
  0%{
    opacity: 0;
    transform: translateY(calc(50vh - 1.25em));
  }
  50%{
    opacity: 0;
  }
  60%{
    opacity: 1;
  }
  80%{
    transform: translateY(calc(50vh - 1.25em));
  }
  100%{
    opacity: 1;
    transform: translateY(185px);
  }
}
.js-css-animated-intro .anim--title-slide-homepage {
  animation-name: final-info-appear;
  animation-delay: 2.5s;
  animation-duration: 1.5s;
}
.home.js-css-animated-intro .anim--title-slide-homepage {
  animation-name: title-slide-homepage;
  animation-fill-mode: backwards;
  animation-delay: 0s;
  animation-duration: 5s;
}
.home.js-css-animated-intro .hero .title {
  animation-name: final-info-appear;
  animation-delay: 5s;
  animation-duration: 5ms;
  animation-fill-mode: forwards;
  opacity: 0;
}

/* Bouncy arrow */
@keyframes bouncy-arrow-forwards {
  0%{
    transform: translateX(0);
  }
  50%{
    transform: translateX(calc((100% - 1em) + 1em ));
  }
  75%{
    transform: translateX(calc((100% - 1em) - .5em ));
  }
  100%{
    transform: translateX(calc(100% - 1em));
  }
}
@keyframes bouncy-arrow-backwards {
  0%{
    transform: translateX(calc(100% - 1em))
  }
  50%{
    transform: translateX(calc(0px - 1em));
  }
  75%{
    transform: translateX(calc(0px + .5em));
  }
  100%{
    transform: translateX(0);
  }
}
.bouncy-arrow{
  pointer-events: none;
}
.js-css-bouncy-arrow--onhover .bouncy-arrow{
  animation-name: bouncy-arrow-forwards;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
.js-css-bouncy-arrow--onleave .bouncy-arrow{
  animation-name: bouncy-arrow-backwards;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

/* Bouncy circle */
@keyframes bouncy-circle-forwards {
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(0.55);
  }
  75%{
    transform: scale(0.65);
  }
  100%{
    transform: scale(0.6);
  }
}
@keyframes bouncy-circle-backwards {
  0%{
    transform: scale(0.6)
  }
  50%{
    transform: scale(1.1)
  }
  75%{
    transform: scale(0.9)
  }
  100%{
    transform: scale(1)
  }
}
.js-bouncy-circle-container .bouncy-circle::before {
  transform-origin: center;
}
.js-css-bouncy-circle--onhover .bouncy-circle::before {
  animation-name: bouncy-circle-forwards;
  animation-duration: .35s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}
.js-css-bouncy-circle--onleave .bouncy-circle::before {
  animation-name: bouncy-circle-backwards;
  animation-duration: .35s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}



/* Footer */
.footer {
  margin-top: auto;
  width: 100%;
}
.footer .top {
  background: var(--color-primary);
  height: 160px;
}
.footer .top .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2.5rem var(--latpad);
  position: relative;
  height: 100%;
}
.footer .top .left {
  margin-right: auto;
  font-size: var(--text--sm);
}
.footer .top .left .link {
  color: var(--white);
  padding: .75em 0;
}
.footer .top .center {
  position: absolute;
  margin: auto;
}
.footer .top .logo {
  width: 285px;
  display: block;
}
.footer .top .right .list {
  display: flex;
}
.footer .top .navigation .item {
  font-size: var(--text--xs);
  text-align: center;
}
.footer .top .navigation .item + .item {
  margin-left: 3.33em;
}
.footer .top .navigation .link {
  color: var(--blue);
  padding: .75em 0;
  font-weight: 500;
}
.footer .bottom {
  background-color: var(--navy-blue);
  display: flex;
  justify-content: center;
  padding: .3125rem 0;
}
.credits {
  color: var(--gray-400);
  font-size: var(--text--xs);
  font-weight: 300;
}
.credits-link {
  font-weight: 500;
  text-decoration: underline;
  padding: .6em 0;
}

/* container--bottom */
.container--bottom {
  margin: 120px 0;
}
.container-flex + .container--bottom {
  margin-top: 0;
}

/* container--map */
.container--map {
  height: 600px;
}
.container--map .container-inner {
  height: 100%;
  background-color: var(--brown);
}

/* container--formatted-content */
.container--formatted-content {
  margin-top: 120px;
}

/* Homepage */
.home .container--homepage-top .container-inner {
  overflow: hidden;
}
.home .hero {
  text-align: left;
  display: flex;
  flex-direction: column-reverse;
  margin-top: 5em;
  margin-bottom: 0;
  width: calc(100% + (2 * var(--latpad)));
}
.home .hero .sup-title {
  position: initial;
  transform: unset;
  margin-top: 1.875em;
}
.js-css-animated-intro.home .hero .sup-title {
  animation-delay: 5s;
  animation-fill-mode: forwards;
  animation-name: final-info-appear;
  animation-duration: 1s;
  opacity: 0;
}
.home .hero .title {
  margin: unset;
  max-width: calc(100% - 400px);
  white-space: pre-line;
}
.home .container--homepage-top + .container--homepage-products {
  margin-top: 120px;
}
.home .container--homepage-products + .container--homepage-expertise {
  margin-top: 3.75rem;
}
.home .container--homepage-expertise + .container--homepage-about {
  margin-top: 180px;
}

.container--homepage-about .row-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container--homepage-about .btn-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0 1.875em;
  margin: auto;
}
.container--homepage-about .btn-container .multi-texts-btn {
  width: 100%;
}

.container--homepage-about .btn-container .multi-texts-btn + .multi-texts-btn {
  margin-top: 5em;
}

/* expertises/products archives */
.page.page-template-archive-expertises.noised::before,
.page.page-template-archive-expertises.noised::after,
.page.page-template-archive-products.noised::before,
.page.page-template-archive-products.noised::after {
  max-height: 820px;
}

/* projects archives */
.container--projects-listing {
  margin-top: 80px;
}
.container--projects-listing .btn-container {
  display: flex;
  justify-content: center;
  margin-top: 120px;
}

/* About page */
.container--portraits {
  margin-top: 120px;
}

/* Contact page */
.container--contact-form {
  margin-bottom: 120px;
}

.page-template-page-contact .page {
  position: relative;
}
.page-template-page-contact .noised--html {
  position: absolute;
  height: 100%;
  top: -110px;
}
.page-template-page-contact .container--hero {
  margin-top: 110px;
  margin-bottom: 80px;
}

.page-template-page-contact {
  background-color: var(--color-primary);
}

.phone-link {
  display: block;
  color: var(--color-secondary);
  font-size: var(--text--2lg);
  margin-top: 1.25em;
  float: left;
  clear: both;
}

.e-mail-link {
  display: block;
  color: var(--white);
  font-size: var(--text--2md);
  margin-top: 2em;
  float: left;
  clear: both;
}

/* Single */
.single-products > .page > .noised--html,
.single-expertises > .page > .noised--html {
  display: none;
}
.single-products .container--hero,
.single-expertises .container--hero {
  position: relative;
}
.single-products .container--hero .noised--html,
.single-expertises .container--hero .noised--html {
  bottom: 0;
  top: -110px;
  height: 100%;
  max-height: 1200px;
}
.single-projects .container--hero .noised--html {
  display: none;
}

/* Sitemap */
.page-template-page-sitemap .pagenav,
.page-template-page-sitemap .pagenav ul {
  margin-top: 1.5rem;
}

/* Tablet */
@media (max-width: 1279px) {
  :root{
    /* Spacing */
    --latpad: 2.5rem;
  }

  /* Formatted */
  .formatted-title--center {
    font-size: var(--text--xl);
  }

  /* Hero */
  .hero {
    margin-top: 120px;
    margin-bottom: 80px;
  }

  /* Wide gallery link */
  .wide-gallery-link {
    height: 600px;
  }
  .wide-gallery-link .text-row {
    flex-direction: column;
    align-items: center;
  }
  .wide-gallery-link .text-row .multi-texts-btn {
    position: initial;
    margin-top: 3.75rem;
  }

  /* Gallery grid */
  .gallery-grid {
    column-gap: 1.5em;
  }
  .gallery-grid .gallery-picture {
    margin-bottom: 1.5rem;
  }

  /* WPCF7 */
  .form-row{
    gap: 1.25rem;
    margin-bottom: 1.25rem;
  }

  /* Header */
  .header .top .center,
  .header .top .right .btn {
    display: none;
  }

  /* Header show / hide */
  .responsive-trigram{
    display: flex;
  }
  .js-css-mobile-menu--open .header .responsive-menu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
  }

  /* Cards slider */
  .cards-slider {
    width: calc(100% + ( 2 * var(--latpad) ) );
    margin-left: calc( -1 * var(--latpad) );
  }
  .cards-slider .slick-track {
    margin-left: var(--latpad);
  }
  .cards-slider .slick-slide {
    flex: 0 0 calc((100% - 1.25rem - var(--latpad)) / 2);
  }

  /* Footer */
  .footer .top {
    height: 100px;
  }
  .footer .top .logo {
    width: 160px;
  }
  .footer .top .navigation .item + .item {
    margin-left: 1.25rem;
  }

  /* Row text links picture */
  .row-text-link-picture {
    margin-bottom: 100px;
  }
  .row-text-link-picture .figure {
    display: none;
  }

  /* Homepage */
  .home .container--homepage-top + .container--homepage-products {
    margin-top: 3.75rem;
  }
  .home .container--homepage-expertise + .container--homepage-about {
    margin-top: 100px;
  }

  /* projects archives */
  .container--projects-listing .btn-container {
    margin-top: 5rem;
  }

  /* expertises archives / products archives */
  .page-template-archive-expertises .controls,
  .page-template-archive-products .controls {
    display: inline-flex;
  }

  /* Contact page */
  .page-template-page-contact .container--hero {
    margin-top: 120px;
    margin-bottom: 80px;
  }
  .phone-link {
    font-size: var(--text--lg);
    margin-top: .75em;
  }
  .e-mail-link {
    margin-top: .5em;
  }
}

/* Small Tablet */
@media (max-width: 950px) {
    /* Portrait */
    .portrait .right {
      padding-top: 1.25rem;
      width: 400px;
    }
    .portrait .right .title {
      font-size: var(--text--2lg);
    }

    /* Formatted */
    .formatted--emphasis {
      font-size: var(--text--3md);
    }

    /* Flexible */
    .flex-row + .flex-row {
      margin-top: 5rem;
    }

    /* Gallery grid */
    .gallery-grid {
      columns: 2;
      margin-left: -1.25rem;
      width: calc(100% + 2.5rem);
    }

    /* Figure small text */
    .figure-small-text .text {
      width: 350px;
    }

    /* Hover links container */
    .hover-links-container {
      padding-right: 0;
    }
    .hover-links-container .sup-title {
      transform: unset;
      opacity: 1;
      line-height: 1em;
      top: -.5em;
    }
    .hover-link + .hover-link {
      margin-top: 1.25rem;
    }
    .hover-link .picture {
      display: none;
    }

    /* Portrait pictures */
    .container--homepage-about .controls {
      display: inline-flex;
    }
    .container--homepage-about .btn-container .multi-texts-btn {
      width: unset;
    }
    .portraits-pictures {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .portraits-pictures .slider {
      width: calc(100% + ( 2 * var(--latpad) ) );
      overflow: hidden;
    }
    .portraits-pictures .slider .slick-list {
      overflow: visible;
    }
    .portraits-pictures .slider .slick-slide {
      width: 375px;
    }
    .portraits-pictures .slider .slick-slide + .slick-slide {
      margin-left: 1.25rem;
    }
    .portraits-pictures .controls {
      margin-top: 1.25rem;
    }

    /* WPCF7 */
    .form-row--wrap {
      flex-wrap: wrap;
    }
    .form-row--wrap .form-item {
      width: calc((100% - 1.25rem) / 2);
    }

    /* Homepage */
    .container--homepage-about .row-inner {
      flex-direction: column;
      width: 100%;
      margin-top: 2.5rem;
    }
    .container--homepage-about .btn-container {
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      max-width: 550px;
      margin: auto;
      margin-top: 2.5rem;
    }
    .container--homepage-about .btn-container .multi-texts-btn + .multi-texts-btn {
      margin-top: 0;
    }
}

/* Mobile */
@media (max-width: 767px) {
  :root{
    /* Spacing */
    --latpad: 1.25rem;
  }

  /* Radius */
  .radius--big-left{
    border-radius: var(--radius--s);
    border-bottom-left-radius: var(--radius--s);
  }
  .radius--small-left{
    border-radius: var(--radius--s);
    border-top-left-radius: var(--radius--s);
  }
  .radius--sharp{
    border-top-right-radius: var(--radius--s);
    border-bottom-right-radius: var(--radius--s);
  }

  /* Animated intro */
  @keyframes arriving-picture {
    0%{
      opacity: 0;
      transform: translateY(0) scale(1.125);
    }
    100%{
      opacity: 1;
      transform: translateY(0px) scale(1);
    }
  }

  /* Noised */
  .noised--html,
  .page-template-archive-expertises .noised--html,
  .page-template-archive-products .noised--html {
    height: 460px;
  }

  /* Formatted */
  .formatted--emphasis {
    font-size: var(--text--2md);
  }
  .formatted-content--narrow {
    max-width: 495px;
  }
  .formatted-content {
    column-gap: 1.875rem;
  }

  /* Anim overlay */
  .anim-overlay .logo {
    opacity: 1;
  }
  .anim-overlay .formatted-title {
    opacity: 1;
  }
  .anim-overlay.noised::before {
    height: 100vh;
    width: 100vh;
  }
  
  /* Reset */
  .js-css-animated-intro .anim--title-slide-homepage,
  .home.js-css-animated-intro .anim--title-slide-homepage,
  .js-css-animated-intro .anim--appear-vanish-opacity,
  .js-css-animated-intro .anim--final-info-appear,
  .home.js-css-animated-intro .hero .title {
    animation: unset;
  }

  @keyframes spinning-background {
    0%{
      transform: rotate(0deg) scale(1.75);
    }
    100%{
      transform: rotate(180deg) scale(1.75);
    }
  }
  .js-css-animated-intro .anim--spinning-background--mobile::before {
    animation-name: spinning-background;
    animation-delay: .5s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
  }

  @keyframes sliding-up-logo {
    0%{
      opacity: 0;
    }
    30% {
      opacity: 1;
      transform: translateY(0);
    }
    70%{
      opacity: 1;
      transform: translateY(-20vh);
    }
    80%{
      opacity: 1;
      transform: translateY(-20vh);
    }
    100%{
      opacity: 0;
      transform: translateY(-25vh);
    }
  }
  .js-css-animated-intro .anim--sliding-up-logo--mobile {
    animation-name: sliding-up-logo;
    animation-delay: 0s;
    animation-duration: 5s;
    animation-fill-mode: forwards;
  }

  @keyframes sliding-up-text {
    0%{
      transform: translateY(9vh);
      opacity: 0;
    }
    50%{
      transform: translateY(4.5vh);
      opacity: 1;
    }
    66%{
      transform: translateY(4.5vh);
      opacity: 1;
    }
    100%{
      transform: translateY(0vh);
      opacity: 1;
    }
  }
  .js-css-animated-intro .page .anim--sliding-up-text--mobile {
    animation-name: sliding-up-text;
    animation-delay: 2s;
    animation-duration: 3s;
    animation-fill-mode: forwards;
  }

  .home.js-css-animated-intro .hero .title {
    opacity: 1;
  }

  .anim-overlay {
    z-index: 2;
    animation-name: unset;
  }
  .anim-overlay .container-inner {
    justify-content: center;
  }
  .anim-overlay .formatted-title{
    left: unset;
    top: unset;
    transform: unset;
    text-align: center;
    animation-name: unset;
    opacity: 0;
    padding: 0 2.5rem;
    padding-bottom: 1.45em;
  }
  .home .anim-overlay .formatted-title{
    max-width: unset;
    display: none;
  }

  /* Hero */
  .hero {
    margin: 3.75rem 0;
    text-align: left;
  }
  .hero .sup-title {
    transform: unset;
    top: -2em;
  }
  .hero .under-title-container {
    text-align: left;
  }
  .hero .under-title-container .text + .text {
    margin-top: .5em;
  }

  /* Hero horizontal */
  .hero-horizontal .sup-title {
    display: none;
  }

  /* Titled block */
  .titled-block-grid {
    flex-direction: column;
    --columns-gap: 1.875rem;
  }
  .titled-block-grid .titled-block {
    width: 100%;
  }
  .titled-block .text {
    max-width: 550px;
  }

  /* Formatted title */
  .formatted-title {
    font-size: var(--text--2lg);
  }
  .formatted-title--center {
    font-size: var(--text--2lg);
    white-space: normal;
    margin-bottom: 1.25rem;
  }

  /* Top Thumbnail */
  .titled-block-grid + .top-thumbnail {
    margin-top: 3.75rem;
  }

  /* Figure in content */
  .figure-in-content {
    width: 100%;
  }

  /* Blockquotes content */
  .blockquotes-content {
    flex-direction: column;
  }
  .blockquotes-content .blockquotes-container + .formatted {
    margin-left: 0;
    margin-top: 2.5rem;
  }
  .blockquotes-content.layout-reverse {
    flex-direction: column-reverse;
  }
  .blockquotes-content.layout-reverse .blockquotes-container + .formatted {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 2.5rem;
  }
  .blockquotes-content--full-width .blockquotes-container {
    --gutter-gap: 1.25rem;
    gap: var(--gutter-gap);
    max-width: 495px;
  }
  .blockquotes-content--full-width .blockquote-item {
    width: 100%;
  }
  .blockquotes-content .formatted {
    max-width: 495px;
  }

  /* Emphasis content */
  .emphasis-content {
    flex-direction: column;
  }
  .emphasis-content .formatted--emphasis + .formatted {
    margin-left: 0;
    margin-top: 2.5rem;
    max-width: unset;
  }
  .emphasis-content .formatted.formatted--emphasis {
    max-width: unset;
  }
  .emphasis-content.layout-reverse {
    flex-direction: column-reverse;
  }
  .emphasis-content.layout-reverse .formatted--emphasis + .formatted {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 2.5rem;
  }

  /* Row text links picture */
  .row-text-link-picture {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0;
  }
  .row-text-link-picture .text {
    width: 100%;
  }
  .row-text-link-picture .links-container {
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
  .row-text-link-picture .text + .links-container {
    margin-top: 2.5rem;
  }
  .row-text-link-picture .figure {
    margin-top: 4.375rem;
    margin-left: -.625rem;
    width: calc(100% + 1.25rem);
    display: block;
  }

  /* Strip link picture */
  .strip-link-picture {
    height: unset;
    padding-bottom: 2.5rem;
  }
  .strip-link-picture .inner {
    flex-direction: column;
    padding-right: 0;
    height: unset;
  }
  .strip-link-picture .texture {
    border-bottom-right-radius: 0;
    top: unset;
    right: calc(-1 * var(--latpad));
    bottom: 0;
  }
  .strip-link-picture .figure {
    width: calc(100% + 1.25rem);
  }
  .strip-link-picture .figure::before {
    padding-top: 105%;
  }
  .strip-link-picture .multi-texts-btn {
    margin-top: 1.875rem;
  }
  .row-text-link-picture + .strip-link-picture {
    margin-top: .625rem;
  }
  .figure-small-text + .strip-link-picture {
    margin-top: 1.25rem;
  }

  /* Hover links container */
  .hover-link .title {
    font-size: var(--text--2md);
  }

  /* Portrait */
  .portrait {
    flex-direction: column;
    position: relative;
    padding-top: 3.5rem;
  }
  .portrait .left {
    max-width: unset;
  }
  .portrait .left .picture {
    max-width: 450px;
    max-height: 500px;
    margin: auto;
  }
  .portrait .right {
    width: 100%;
    padding-top: 1.25rem;
    margin-left: 0;
  }
  .portrait .right .title {
    position: absolute;
    top: 0;
    left: 1rem;
  }
  .portrait .right .title + .text {
    margin-top: 0;
  }

  /* Wide picture link */
  .wide-picture-link {
    border-radius: 0;
  }

  /* Wide gallery link */
  .wide-gallery-link {
    height: 420px;
  }
  .wide-gallery-link + .wide-gallery-link {
    margin-top: .625rem;
  }
  .wide-gallery-link .text-row .title {
    font-size: var(--text--2md);
  }
  .wide-gallery-link .text-row .text {
    font-size: var(--text--base);
  }
  .wide-gallery-link .multi-texts-btn .text-bottom {
    font-size: var(--text--base);
  }
  .background-gallery .background-gallery-picture {
    display: none;
  }
  .background-gallery .background-gallery-picture:first-of-type {
    display: block;
  }

  /* Cards slider */
  .cards-slider .slick-track {
    margin-left: .625rem;
  }
  .cards-slider .slick-slide {
    flex: 0 0 calc(100vw - 1.25rem);
  }

  /* Card */
  .card .number {
    display: block;
  }

  /* Mobile Slider */
  .js-css-slider-container--mobile .controls {
    display: inline-flex;
  }

  /* Figure small text */
  .figure-small-text {
    flex-direction: column;
  }
  .figure-small-text .figure {
    width: 100%;
  }
  .figure-small-text .text {
    width: 100%;
    margin-bottom: 0;
  }
  .figure-small-text .figure + .text {
    margin-left: 0;
    margin-top: 1.25rem;
  }

  /* Gallery grid */
  .gallery-grid {
    --columns-gap: .625rem;
    margin-left: -.625rem;
    width: calc(100% + 1.25rem);
    column-gap: .625rem;
    columns: 1;
  }
  .gallery-grid .gallery-picture {
    margin-bottom: .625rem;
  }

  /* Flex content */
  .flex-row + .flex-row {
    margin-top: 2.5rem;
  }

  /* Flexible */
  .container .container-inner-flex {
    margin: 3.75rem auto;
  }

  /* Container--bottom */
  .container--bottom {
    margin: 3.75rem 0;
  }
  .container--bottom .container-inner {
    padding: 0;
  }

  /* Container--projects-listing */
  .container--projects-listing .js-ajax--items-list {
    margin-left: -.625rem;
    width: calc(100% + 1.25rem);
  }
  .container--projects-listing .btn-container {
    margin-top: 3.75rem;
  }

  /* WPCF7 */
  .form-row {
    flex-direction: column;
    gap: .625rem;
    margin-bottom: .625rem;
  }
  .form-row--wrap .form-item {
    width: 100%;
  }
  .wpcf7-form .form-bottom {
    margin-top: 1.25rem;
  }
  .wpcf7-not-valid-tip {
    bottom: 0rem;
    left: .25em;
  }

  /* Header */
  .header .top .logo {
    width: 135px;
  }

  /* Footer */
  .footer .top {
    height: auto;
  }
  .footer .top .inner {
    flex-direction: column-reverse;
    padding: 3.75rem var(--latpad);
  }
  .footer .top .logo {
    display: none;
  }
  .footer .top .left {
    font-size: var(--text--xs);
    margin-right: unset;
    margin-top: 1.66em;
  }
  .footer .top .left .link {
    font-size: var(--text--xs);
  }
  .footer .top .right .list {
    flex-direction: column;
  }
  .footer .top .right .item + .item {
    margin-left: 0;
    margin-top: 1.66em;
  }

  /* Homepage */
  .home .header {
    position: absolute;
  }
  .home .hero {
    position: absolute;
    z-index: 2;
    margin-top: 0;
    text-align: center;
    width: 100%;
  }
  .home .hero .sup-title {
    margin-top: 2.5rem;
  }
  .home .hero .title {
    padding: 0 2.5rem;
    max-width: unset;
  }
  .home .noised--html {
    display: none;
  }
  .home .container--homepage-top .container-inner {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .home .container--homepage-top .big-picture-slider {
    margin-left: calc(-1 * var(--latpad));
    width: calc(100% + (3 * var(--latpad)));
  }
  .home .container--homepage-top .big-picture-slider .slider {
    border-radius: 0;
    position: relative;
  }
  .home .container--homepage-top .big-picture-slider .slider::before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .7;
    background-color: var(--color-primary);
    z-index: 1;
  }
  .home .container--homepage-top .big-picture-slider .controls {
    display: none;
  }
  .home .container--homepage-top .big-picture-slider .figure::before {
    padding-top: unset;
    height: 100vh;
  }
  .home .container--homepage-top .big-picture-slider .btn-volume {
    display: none;
  }
  .home .container--homepage-top + .container--homepage-products {
    margin-top: 2.5rem;
  }
  .home .container--homepage-expertise + .container--homepage-about {
    margin-top: 3.75rem;
  }

  /* Contact page */
  .container--contact-form {
    margin-bottom: 3.75rem;
  }
  .page-template-page-contact .container--hero {
    margin-top: 3.75rem;
    margin-bottom: 3.75rem;
  }
  .phone-link {
    font-size: var(--text--base);
    margin-top: 3.75rem;
  }
  .e-mail-link {
    font-size: var(--text--base);
    margin-top: .625rem;
  }

  /* About page */
  .container--portraits {
    margin-top: 3.75rem;
  }

  /* Projects archive */
  .container--projects-listing {
    margin-top: .625rem;
  }
}

/* Small Mobile */
@media (max-width: 550px) {
  .container--homepage-about .btn-container {
    flex-direction: column;
  }
  .container--homepage-about .btn-container .multi-texts-btn + .multi-texts-btn {
    margin-top: 2.5em;
  }

  .container--homepage-about .btn-container {
    width: auto;
    margin: auto;
    margin-top: 2.5rem;
  }
  .container--homepage-about .btn-container .multi-texts-btn {
    width: 100%;
  }

  /* Formatted content */
  .formatted-content--2-col {
    columns: 1;
  }
  .formatted-content--3-col {
    columns: 1;
  }

  /* Portrait picture */
  .portraits-pictures .slider .slick-slide {
    width: calc(100vw - 1.25rem);
  }
}