figureslibres.cc/user/themes/figureslibres-v2/css/theme.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a, a:active, a:focus, a:visited {
  text-decoration: none;
  color: inherit;
}

@font-face {
  font-family: "Lato";
  font-weight: bold;
  font-style: normal;
  src: url("../fonts/Lato/Lato-bold/Lato-bold.ttf") format("truetype"), url("../fonts/Lato/Lato-bold/Lato-bold.woff") format("woff"), url("../fonts/Lato/Lato-bold/Lato-bold.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-weight: normal;
  font-style: italic;
  src: url("../fonts/Lato/Lato-italic/Lato-italic.ttf") format("truetype"), url("../fonts/Lato/Lato-italic/Lato-italic.woff") format("woff"), url("../fonts/Lato/Lato-italic/Lato-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-weight: bold;
  font-style: italic;
  src: url("../fonts/Lato/Lato-bold-italic/Lato-bold-italic.ttf") format("truetype"), url("../fonts/Lato/Lato-bold-italic/Lato-bold-italic.woff") format("woff"), url("../fonts/Lato/Lato-bold-italic/Lato-bold-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/Lato/Lato-regular/Lato-regular.ttf") format("truetype"), url("../fonts/Lato/Lato-regular/Lato-regular.woff") format("woff"), url("../fonts/Lato/Lato-regular/Lato-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Syne";
  font-weight: bold;
  font-style: normal;
  src: url("../fonts/Syne/Syne-bold/Syne-bold.ttf") format("truetype"), url("../fonts/Syne/Syne-bold/Syne-bold.woff") format("woff"), url("../fonts/Syne/Syne-bold/Syne-bold.woff2") format("woff2");
}
@font-face {
  font-family: "Syne";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/Syne/Syne-regular/Syne-regular.ttf") format("truetype"), url("../fonts/Syne/Syne-regular/Syne-regular.woff") format("woff"), url("../fonts/Syne/Syne-regular/Syne-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Avara";
  font-weight: bold;
  font-style: italic;
  src: url("../fonts/Avara/Avara-bold-italic/Avara-bold-italic.ttf") format("truetype"), url("../fonts/Avara/Avara-bold-italic/Avara-bold-italic.woff") format("woff"), url("../fonts/Avara/Avara-bold-italic/Avara-bold-italic.woff2") format("woff2");
}
@font-face {
  font-family: "ManifontGrotesk";
  font-weight: bold;
  font-style: italic;
  src: url("../fonts/ManifontGrotesk/ManifontGrotesk-bold-italic/ManifontGrotesk-bold-italic.ttf") format("truetype"), url("../fonts/ManifontGrotesk/ManifontGrotesk-bold-italic/ManifontGrotesk-bold-italic.woff") format("woff"), url("../fonts/ManifontGrotesk/ManifontGrotesk-bold-italic/ManifontGrotesk-bold-italic.woff2") format("woff2");
}
@font-face {
  font-family: "ManifontGrotesk";
  font-weight: normal;
  font-style: italic;
  src: url("../fonts/ManifontGrotesk/ManifontGrotesk-italic/ManifontGrotesk-italic.ttf") format("truetype"), url("../fonts/ManifontGrotesk/ManifontGrotesk-italic/ManifontGrotesk-italic.woff") format("woff"), url("../fonts/ManifontGrotesk/ManifontGrotesk-italic/ManifontGrotesk-italic.woff2") format("woff2");
}
@font-face {
  font-family: "PlayfairDisplay";
  font-weight: normal;
  font-style: italic;
  src: url("../fonts/PlayfairDisplay/PlayfairDisplay-italic/PlayfairDisplay-italic.ttf") format("truetype"), url("../fonts/PlayfairDisplay/PlayfairDisplay-italic/PlayfairDisplay-italic.woff") format("woff"), url("../fonts/PlayfairDisplay/PlayfairDisplay-italic/PlayfairDisplay-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Rumeur";
  font-weight: bold;
  font-style: normal;
  src: url("../fonts/Rumeur/Rumeur-bold/Rumeur-bold.ttf") format("truetype"), url("../fonts/Rumeur/Rumeur-bold/Rumeur-bold.woff") format("woff"), url("../fonts/Rumeur/Rumeur-bold/Rumeur-bold.woff2") format("woff2");
}
@font-face {
  font-family: "Moche";
  font-weight: bold;
  font-style: normal;
  src: url("../fonts/Moche/Moche-bold/Moche-bold.ttf") format("truetype"), url("../fonts/Moche/Moche-bold/Moche-bold.woff") format("woff"), url("../fonts/Moche/Moche-bold/Moche-bold.woff2") format("woff2");
}
@font-face {
  font-family: "Redaction50";
  font-weight: bold;
  font-style: normal;
  src: url("../fonts/Redaction50/Redaction50-bold/Redaction50-bold.ttf") format("truetype"), url("../fonts/Redaction50/Redaction50-bold/Redaction50-bold.woff") format("woff"), url("../fonts/Redaction50/Redaction50-bold/Redaction50-bold.woff2") format("woff2");
}
@keyframes arrowIndex {
  30% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(20px);
  }
  70% {
    transform: translateY(0px);
  }
}
.picto {
  display: block;
  cursor: pointer;
  background-color: #0e1229;
}

.picto-url {
  display: inline-block;
  width: 12px;
  height: 10px;
}

h1, h2 {
  font-family: Syne, Sans-serif;
  font-size: 1.8em;
  line-height: 1.1em;
}

h4 {
  display: block;
  padding-top: 0.8rem;
  width: 100%;
  font-family: Syne, Sans-serif;
  font-size: 1.25em;
  cursor: pointer;
}
h4 a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

h4:first-of-type {
  padding-top: 0;
}

h4 + p {
  margin-bottom: 0.5rem !important;
}
h4 + p em {
  display: block;
  font-size: 0.75em;
  cursor: pointer;
}
h4 + p em > img {
  display: inline-block;
  height: 0.75em;
  width: 0.75em !important;
  margin-bottom: unset !important;
  margin-left: 0.3rem;
  transform: rotate(0deg);
  transition: transform 0.4s ease-out;
}
h4 + p em > img.open {
  transform: rotate(180deg);
}

h4 + p + p {
  margin-bottom: 0 !important;
  line-height: 1.45em;
  padding-bottom: 0rem;
  font-size: 0.75em;
  max-height: 0px;
  height: auto;
  overflow: hidden;
  transition: max-height 0.4s ease-out, padding-bottom 0.4s ease-out;
}

h4 + p + p.open {
  max-height: 50vh;
  padding-bottom: 1rem;
}

h4 + p + p + h2 {
  margin-top: 1.5rem;
}

p, ul, figcaption {
  font-family: Lato, Sans-serif;
  font-size: 1.2em;
  line-height: 1.25em;
}

strong {
  font-weight: bold;
  font-family: Syne, Sans-serif;
}

em {
  font-style: italic;
}

body {
  overflow-x: hidden;
  color: #0e1229;
  background-color: #f5f5f5;
  transition: background-color 0.4s ease-out;
}
body header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
}
body header #nav-container {
  height: 7vh;
  padding: 0 3vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f5f5;
  transition: background-color 0.4s ease-out;
}
body header #nav-container h1 {
  cursor: pointer;
}
body header #nav-container #burger {
  width: 25px;
  height: 23px;
}
body header nav {
  position: absolute;
  background-color: #0e1229;
  top: -100vh;
  width: 100%;
  height: calc(100vh - 7vh);
  display: flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.4s ease-out, top 0.7s ease-out, background-color 0.4s ease-out;
}
body header nav #crossMenu {
  position: absolute;
  top: 2vh;
  right: 3vw;
  background-color: #f5f5f5;
  width: 25px;
  height: 23px;
}
body header nav ul {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}
body header nav ul li {
  text-align: center;
  color: #f5f5f5;
}
body header nav ul li a {
  display: block;
  margin: 4vh 0;
  padding: 2.5vh 0;
  width: 100%;
  font-family: Syne, Sans-serif;
  font-size: 2.2em;
}
body header nav ul li.selected a {
  color: #0e1229;
  background-color: #f5f5f5;
}
body header nav.mobile-nav-open {
  top: 0;
  opacity: 1;
}
body header:after {
  content: "";
  display: block;
  width: 100%;
  height: 4vh;
  background: linear-gradient(to bottom, #f5f5f5, #f5f5f500);
  opacity: 1;
  transition: opacity 0.4s ease-out;
}
body header.plain_bg:after {
  opacity: 0;
}
body main {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin-top: calc(7vh + 4vh);
  z-index: 0;
}
body main .content {
  position: absolute;
  padding: 0 3vw;
}
body main .content h2, body main .content p, body main .content ul {
  margin-bottom: 30px;
}
body main .content h2 a, body main .content p a, body main .content ul a {
  text-decoration: underline;
  text-underline-offset: 0.1em;
  transition: text-underline-offset 0.4s ease-out;
}
body main .content h2 a:hover, body main .content p a:hover, body main .content ul a:hover {
  text-underline-offset: 0.15em !important;
}
body main .content .projet-card {
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}
body main .content .projet-card img, body main .content .projet-card video {
  border-radius: 10px;
  width: 100%;
}
body main .content .projet-card .loader {
  min-height: 200px;
  width: 20px;
  opacity: 0.4;
}
body main .content .projet-card a {
  width: 100%;
  display: flex;
  justify-content: center;
}
body main .content .projet-card a figcaption {
  color: #0e1229;
  background-color: transparent;
  padding: 0;
  margin-top: 5px;
  position: relative;
  font-size: 0.95em;
  transition: opacity 0.4s ease-out;
}
body main .content .projet-card a figcaption .publique-title {
  font-family: PlayfairDisplay, serif;
  font-style: italic;
}
body main .content .projet-card a figcaption .sociale-title {
  font-family: ManifontGrotesk, sans-serif;
  font-weight: bold;
  font-style: italic;
}
body main .content .projet-card a figcaption .culturelle-title {
  font-family: Avara, serif;
  font-weight: bold;
  font-style: italic;
}
body main .content .card-displayed {
  display: block;
}
body main .content .card-hidden {
  display: none;
}
body main #index-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body main #index-content .animateText {
  text-decoration: underline 1px;
}
body main #index-content #loader-index {
  position: absolute;
  height: 80vh;
  width: 100vw;
  background-color: #f5f5f5;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
body main #index-content #main-p-index p {
  font-size: 2.2em;
}
body main #index-content #main-p-index #figureslibres {
  font-family: Syne, sans-serif;
  font-weight: bold;
}
body main #index-content #main-p-index #publique {
  font-family: PlayfairDisplay, serif;
  font-style: italic;
}
body main #index-content #main-p-index #sociale {
  font-family: ManifontGrotesk, sans-serif;
  font-weight: bold;
  font-style: italic;
}
body main #index-content #main-p-index #culturelle {
  font-family: Avara, serif;
  font-weight: bold;
  font-style: italic;
}
body main #index-content #extrait-projets > div {
  max-height: 0vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px 20px;
  align-items: flex-start;
}
body main #index-content #extrait-projets > div div figure {
  align-items: flex-start;
}
body main #index-content #extrait-projets > div div:last-of-type {
  width: auto;
  margin-top: 1vh;
  text-align: center;
  font-size: 1.2em;
  grid-column-end: span 2;
}
body main #index-content #extrait-projets > div div:last-of-type p {
  cursor: pointer;
  margin-bottom: 5px;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
body main #index-content #extrait-projets > div div:last-of-type p span {
  border-bottom: solid 1px #0e1229;
  padding-bottom: 1px;
}
body main #index-content #extrait-projets > div div:last-of-type p span #publique-link {
  font-family: PlayfairDisplay, serif;
  font-style: italic;
}
body main #index-content #extrait-projets > div div:last-of-type p span #sociale-link {
  font-family: ManifontGrotesk, sans-serif;
  font-weight: bold;
  font-style: italic;
}
body main #index-content #extrait-projets > div div:last-of-type p span #culturelle-link {
  font-family: Avara, serif;
  font-weight: bold;
  font-style: italic;
}
body main #index-content #extrait-projets > div div:last-of-type p .picto {
  display: inline-block;
  height: 10px;
  width: 25px;
  margin-left: 8px;
  transition: margin-left 0.4s ease-out;
}
body main #index-content #extrait-projets > div div:last-of-type p:first-of-type:hover + p .picto, body main #index-content #extrait-projets > div div:last-of-type p:last-of-type:hover .picto {
  margin-left: 13px;
}
body main #index-content #second-p-index p {
  font-size: 2.2em;
}
body main #index-content #second-p-index #commanditaires {
  font-family: Moche, sans-serif;
  font-weight: bold;
}
body main #index-content #second-p-index #projets {
  font-family: Redaction50, serif;
  font-weight: bold;
}
body main #index-content #commanditaires-grid {
  width: 85vw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px 40px;
  align-items: center;
}
body main #index-content #commanditaires-grid img {
  filter: grayscale(100%);
  opacity: 0.7;
  width: 100%;
}
body main #index-content #arrow-container {
  margin-top: 30px;
  margin-bottom: 0vh;
  transition: transform 0.8s ease-out, margin-bottom 0.4s ease-out;
}
body main #index-content #arrow-container .picto {
  width: 45px;
  height: 37px;
}
body main #index-content #arrow-container #arrowIndex {
  animation: arrowIndex 4s infinite ease-out;
}
body main #index-content .container {
  overflow-y: hidden;
  height: auto;
  max-height: 0vh;
  margin-top: 0vh;
  opacity: 0;
  transition: opacity 0.4s ease-out, 0.7s 0.4s ease-out, max-height 1.2s ease-out, margin-top 1s ease-out;
}
body main #index-content a {
  text-decoration: none;
}
body main #projets-index {
  width: 100%;
}
body main #projets-index #filter-index {
  text-align: center;
  width: 100%;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
body main #projets-index #filter-index .filter-button {
  cursor: pointer;
  filter: grayscale(1);
  opacity: 0.4;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.95em;
  min-height: 1.25em;
  display: inline-block;
  transition: opacity 0.4s ease-out, filter 0.4s ease-out;
}
body main #projets-index #filter-index .filter-button:hover {
  filter: grayscale(0) !important;
  opacity: 1 !important;
}
body main #projets-index #filter-index p {
  margin-bottom: 1rem;
}
body main #projets-index #filter-index #publique-filter {
  font-family: PlayfairDisplay, serif;
  font-style: italic;
  background-color: #ffaeab;
}
body main #projets-index #filter-index #sociale-filter {
  font-family: ManifontGrotesk, sans-serif;
  font-weight: bold;
  font-style: italic;
  background-color: #71ff94;
}
body main #projets-index #filter-index #culturelle-filter {
  font-family: Avara, serif;
  font-weight: bold;
  font-style: italic;
  background-color: #feff74;
}
body main #projets-index hr {
  width: 66%;
  margin-bottom: 4vh;
  opacity: 0.4;
}
body main #projets-index .projets-grid {
  width: 94vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body main #projets-index .projets-grid > div {
  width: 80%;
}
body main #projets-index .title-category {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}
body main #projets-index .title-category h2 {
  margin: 0;
  max-width: 60%;
}
body main #projets-index .title-category .chevron-category {
  display: inline-block;
  width: 25px;
  height: 23px;
  max-height: 10px;
  margin-left: 6px;
  transition: transform 0.4s ease-out;
}
body main #projets-index .title-category .close {
  transform: rotate(180deg);
}
body main #text-content {
  display: flex;
  flex-direction: column-reverse;
}
body main #text-content img {
  width: 100%;
}
body main #reader {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body main #reader figure {
  width: 100%;
  min-height: 200px;
  display: flex;
  justify-content: center;
}
body main #reader img, body main #reader video {
  cursor: pointer;
  max-width: 100%;
}
body main #reader .loader {
  max-width: 20px;
}
body main #reader #header-project {
  z-index: 1;
  display: block;
  position: fixed;
  height: 6vh;
  width: 100%;
  top: -4vh;
  transition: top 0.4s ease-out;
}
body main #reader #header-project h2 {
  margin: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 3px 0;
  padding-top: 1.8vh;
  padding-left: 3vw;
  font-size: 1.2em;
}
body main #reader #header-project h2 span {
  transform: translate(0, 0);
  display: inline-block;
  white-space: nowrap;
}
body main #reader #header-project h2 .scrollText:after {
  content: attr(data-text);
  padding-left: 20px;
  white-space: nowrap;
}
body main #reader #header-project h2.info-project-publique {
  background: linear-gradient(to bottom, #ffaeab, #ffaeab 60%, rgba(255, 174, 171, 0));
}
body main #reader #header-project h2.info-project-publique span {
  font-family: PlayfairDisplay, serif;
  font-style: italic;
}
body main #reader #header-project h2.info-project-sociale {
  background: linear-gradient(to bottom, #71ff94, #71ff94 60%, rgba(113, 255, 148, 0));
}
body main #reader #header-project h2.info-project-sociale span {
  font-family: ManifontGrotesk, sans-serif;
  font-weight: bold;
  font-style: italic;
}
body main #reader #header-project h2.info-project-culturelle {
  background: linear-gradient(to bottom, #feff74, #feff74 60%, rgba(254, 255, 116, 0));
}
body main #reader #header-project h2.info-project-culturelle span {
  font-family: Avara, serif;
  font-weight: bold;
  font-style: italic;
}
body main #reader #header-project #gradient-long-title {
  position: absolute;
  height: 4vh;
  width: 40px;
  top: 1.5vh;
  right: 16.5%;
  background: linear-gradient(to left, #f5f5f5, #f5f5f500);
}
body main #reader #header-project + a {
  z-index: 2;
}
body main #reader #close-project {
  position: fixed;
  right: 3vw;
  top: 2.3vh;
  width: calc(25px - 5px);
  height: calc(23px - 5px);
}
body main #reader figure#cover-image-mobile {
  margin-top: -2vh;
  margin-bottom: 2vh;
}
body main #reader figure#cover-image {
  display: none;
}
body main #reader figure#cover-image-mobile,
body main #reader figure#cover-image {
  position: relative;
  margin-top: 3vh;
}
body main #reader figure#cover-image-mobile img,
body main #reader figure#cover-image img {
  filter: grayscale(0);
  transition: filter 0.4s ease-out;
  mix-blend-mode: normal;
}
body main #reader figure#cover-image-mobile:hover img,
body main #reader figure#cover-image:hover img {
  filter: grayscale(1);
  mix-blend-mode: darken;
}
body main #reader figure#cover-image-mobile::before,
body main #reader figure#cover-image::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
body main #reader figure#cover-image-mobile:hover::before,
body main #reader figure#cover-image:hover::before {
  opacity: 1;
}
body main #reader figure#cover-image-mobile.sociale:hover::before,
body main #reader figure#cover-image.sociale:hover::before {
  background-color: #71ff94;
}
body main #reader figure#cover-image-mobile.culturelle:hover::before,
body main #reader figure#cover-image.culturelle:hover::before {
  background-color: #feff74;
}
body main #reader figure#cover-image-mobile.publique:hover::before,
body main #reader figure#cover-image.publique:hover::before {
  background-color: #ffaeab;
}
body main #reader #info-project {
  align-self: flex-start;
}
body main #reader #info-project h2 {
  margin-top: 2vh;
  margin-bottom: 0;
  font-size: 1.6em;
  line-height: 1.1em;
}
body main #reader #info-project > div {
  margin-top: 0.3em;
  margin-bottom: 2.5vh;
  font-weight: normal;
  line-height: 1.25em;
}
body main #reader .info-project-publique h2, body main #reader .info-project-publique > div {
  font-family: PlayfairDisplay, serif;
  font-style: italic;
}
body main #reader .info-project-sociale h2, body main #reader .info-project-sociale > div {
  font-family: ManifontGrotesk, sans-serif;
  font-weight: bold;
  font-style: italic;
}
body main #reader .info-project-culturelle h2, body main #reader .info-project-culturelle > div {
  font-family: Avara, serif;
  font-weight: bold;
  font-style: italic;
}
body main #reader #project-description {
  margin-top: 2.2vh;
}
body main #reader #project-images-grid figure {
  position: relative;
  margin-top: 3vh;
}
body main #reader #project-images-grid figure img {
  filter: grayscale(0);
  transition: filter 0.4s ease-out;
  mix-blend-mode: normal;
}
body main #reader #project-images-grid figure:hover img {
  filter: grayscale(1);
  mix-blend-mode: darken;
}
body main #reader #project-images-grid figure::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: opacity 0.4s ease-out;
}
body main #reader #project-images-grid figure:hover::before {
  opacity: 1;
}
body main #reader #project-images-grid figure:hover.sociale::before {
  background-color: #71ff94;
}
body main #reader #project-images-grid figure:hover.publique::before {
  background-color: #ffaeab;
}
body main #reader #project-images-grid figure:hover.culturelle::before {
  background-color: #feff74;
}
body main #reader hr {
  margin-bottom: 2vh;
  width: 66%;
  opacity: 0.5;
  color: #0e1229;
  background-color: #0e1229;
}
body main #reader #related-pages {
  margin-top: 5vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body main #reader #related-pages h3 {
  text-align: center;
  font-size: 1.8em;
  font-family: Syne, Sans-serif;
  margin-bottom: 2vh;
  margin-top: 2vh;
}
body main #reader #related-pages #related-grid {
  width: 80%;
}
body main #reader #related-pages #related-grid .card-displayed {
  margin-top: 1.5vh;
}
body main #reader #related-pages p {
  margin-top: 3vh;
  margin-bottom: 5vh;
}
body main #reader .swiper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(2px);
  box-sizing: border-box;
  z-index: 3;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
body main #reader .swiper .swiper-wrapper {
  z-index: 9;
  display: flex;
  align-items: center;
}
body main #reader .swiper .swiper-wrapper .swiper-slide {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
body main #reader .swiper .swiper-wrapper .swiper-slide img {
  max-height: 90%;
  max-width: 90%;
  object-fit: cover;
}
body main #reader .swiper .swiper-button-next, body main #reader .swiper .swiper-button-prev {
  color: #0e1229;
  padding: 2rem;
  bottom: 5vh;
  top: unset;
}
body main #reader .swiper #close-carousel {
  width: calc(25px - 5px);
  height: calc(23px - 5px);
  position: absolute;
  top: 5vh;
  right: 5vh;
  z-index: 10;
}
body footer {
  display: none;
  position: fixed;
  height: 7vh;
  bottom: 0;
  align-items: center;
  justify-content: center;
  z-index: 1;
  width: 100vw;
}
body footer p {
  width: 100%;
  height: 100%;
  text-align: center;
  color: #f5f5f5;
}
body footer p a {
  display: block;
  background: #0e1229;
  height: 100%;
  width: 100%;
  font-family: Syne, Sans-serif;
  padding: 0.95em 0;
  color: #f5f5f5;
}

@media only screen and (min-width: 576px) {
  body header nav {
    height: 100vh;
  }
  body main #index-content {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  body main #index-content #extrait-projets > div {
    grid-template-columns: repeat(2, 1fr);
  }
  body main #index-content #extrait-projets > div div:last-of-type {
    overflow-x: hidden;
    text-align: right;
    grid-column-end: span 2;
  }
  body main #index-content #extrait-projets > div div:last-of-type p {
    display: inline-block;
  }
  body main #index-content #extrait-projets > div div:last-of-type p .picto {
    margin-right: -6px;
  }
  body main #index-content #extrait-projets > div div:last-of-type p:last-of-type span:first-of-type {
    margin-left: -5px;
    padding-left: 5px;
  }
  body main #index-content #commanditaires-grid {
    width: auto;
    grid-template-columns: repeat(5, 1fr);
  }
  body main #projets-index {
    width: auto;
  }
  body main #projets-index #filter-index {
    justify-content: start;
    flex-direction: row;
    max-width: 100%;
  }
  body main #projets-index #filter-index p:last-of-type {
    margin-left: 8px;
  }
  body main #projets-index hr {
    margin-left: 0;
    width: 75%;
  }
  body main #projets-index .projets-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 10px;
    align-items: start;
  }
  body main #projets-index .projets-grid > div {
    width: 100%;
  }
  body main #reader #close-project {
    width: 12px;
    height: 10px;
    top: 2.5vh;
  }
  body main #reader #cover-image-mobile {
    display: none !important;
  }
  body main #reader #cover-image {
    display: flex !important;
    margin-bottom: 5vh;
  }
  body main #reader h2#main-project-title {
    font-size: 2.9em;
  }
  body main #reader #info-project {
    margin-top: -6vh;
  }
  body main #reader #info-project div {
    margin-top: 0;
    margin-bottom: 8vh;
  }
  body main #reader #project-description {
    font-size: 0.95em;
    margin-bottom: 5vh;
  }
  body main #reader #project-images-grid {
    width: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1em;
  }
  body main #reader #project-images-grid figure {
    margin-top: 0;
    width: 100%;
    min-width: 40vw;
  }
  body main #reader #project-images-grid figure img:not(.loader) {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  body main #reader #project-images-grid figure:last-child:nth-child(odd) {
    grid-column: span 2;
  }
  body main #reader #related-pages #related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: auto !important;
    grid-column-gap: 10%;
  }
  body main #reader #related-pages #related-grid .card-displayed {
    margin-top: 2vh !important;
    width: 100%;
  }
  body main #reader #related-pages #related-grid .card-displayed figure {
    min-height: 80px !important;
  }
  body main #reader #related-pages p {
    margin-top: 3vh;
    margin-bottom: 6vh !important;
  }
  body main #reader .swiper .swiper-button-next, body main #reader .swiper .swiper-button-prev {
    bottom: unset;
    top: var(--swiper-navigation-top-offset, 50%);
  }
  body footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 0 15px;
    height: 4vh;
    right: 3vw;
    border-radius: 20px 20px 0 0;
    background-color: #0e1229;
  }
  body footer p {
    height: auto;
    font-size: 0.95em;
  }
  body footer p a {
    padding: 0;
    background-color: transparent;
  }
}
@media only screen and (min-width: 996px) {
  body header #nav-container {
    display: none;
  }
  body header nav {
    background-color: #f5f5f5;
    position: relative;
    top: 0;
    opacity: 1;
    height: 7vh;
    justify-content: center;
  }
  body header nav #crossMenu {
    display: none;
  }
  body header nav ul {
    width: calc(65vw - 12px);
    max-width: 1300px;
    flex-direction: row;
  }
  body header nav ul li {
    width: auto;
    color: #0e1229;
    height: 0.95em;
    z-index: 0;
  }
  body header nav ul li a {
    display: inline;
    font-size: 0.95em;
    width: auto;
    margin: 0;
    padding: 0;
    transition: color 0.4s ease-out;
  }
  body header nav ul li:hover a {
    color: #f5f5f5;
  }
  body header nav ul li.selected a {
    color: #f5f5f5;
    background-color: transparent;
  }
  body header nav ul li:after {
    content: "";
    display: block;
    position: relative;
    opacity: 0;
    height: 100%;
    width: 100%;
    padding: 4px 12px;
    transform: translateX(-12px) translateY(calc(-100% - 2px + 4px));
    background-color: #0e1229;
    border-radius: 15px;
    z-index: -1;
    transition: opacity 0.4s ease-out;
  }
  body header nav ul .selected:after, body header nav ul li:hover:after {
    opacity: 1;
  }
  body header:after {
    height: 2vh;
  }
  body main {
    display: flex;
    justify-content: center;
    margin-top: calc(7vh + 2vh + 30px);
  }
  body main #index-content > #extrait-projets figure a figcaption {
    background-color: #0e1229;
    color: #f5f5f5;
  }
  body main .content {
    width: 65vw;
    padding: 0;
  }
  body main .content .card-displayed figure a figcaption {
    opacity: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    color: #0e1229;
    font-size: 0.75em;
    border-radius: 0 0 10px 10px;
  }
  body main .content .culturelle-card figure a figcaption {
    background-color: #feff74;
  }
  body main .content .sociale-card figure a figcaption {
    background-color: #71ff94;
  }
  body main .content .publique-card figure a figcaption {
    background-color: #ffaeab;
  }
  body main .card-displayed:hover figure a figcaption {
    opacity: 1;
  }
  body main #index-content #extrait-projets > div {
    grid-template-columns: repeat(4, 1fr);
  }
  body main #index-content #extrait-projets > div div:last-of-type {
    grid-column-end: span 4;
  }
  body main #index-content #commanditaires-grid {
    grid-template-columns: repeat(8, 1fr);
  }
  body main #projets-index {
    width: 65vw;
  }
  body main #projets-index .projets-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  body main #text-content .text-item {
    width: 70%;
  }
  body main #text-content .text-item:first-of-type {
    position: absolute;
    top: 0;
    width: 20vw;
    left: 82%;
  }
  body main #text-content .text-item:first-of-type img {
    width: 70%;
    margin-bottom: 5vh;
  }
  body main #reader {
    margin-top: -10vh;
    width: 60vw;
  }
  body main #reader #header-project {
    width: 100%;
  }
  body main #reader #header-project h2 {
    width: 100%;
    padding: 0;
  }
  body main #reader #header-project h2 span {
    padding-left: 20vw;
    padding-top: 1.4vh;
    height: 1.25em;
  }
  body main #reader #header-project #gradient-long-title {
    right: 34.2vw;
  }
  body main #reader #cover-image {
    width: 66.666%;
    box-sizing: border-box;
    margin: 0 10vw;
  }
  body main #reader #info-project {
    width: 100%;
    box-sizing: border-box;
    padding: 0 10vw;
    margin-top: 2vh;
    margin-bottom: 4vh;
  }
  body main #reader #info-project h2 {
    min-width: 95%;
    border-right: solid 1px rgba(0, 0, 0, 0.4);
    margin-top: 0;
    margin-bottom: 1vh;
  }
  body main #reader #info-project div {
    margin-bottom: 2vh;
  }
  body main #reader .info-project-culturelle h2 {
    line-height: 1.25em !important;
  }
  body main #reader #close-project {
    width: 25px;
    height: 23px;
    top: calc(4vh + 11.5px);
    right: calc(30vw - 25px - 2vw);
    transform: scale(1, 1);
    transition: top 0.4s ease-out, right 0.4s ease-out, transform 0.4s ease-out;
  }
  body main #reader .scrolled-cross {
    top: 1.4vh !important;
    right: 20vw !important;
    transform: scale(0.7, 0.7) !important;
  }
  body main #reader #project-description {
    padding: 0 10vw;
    align-self: flex-start;
  }
  body main #reader #project-images-grid {
    width: auto;
    margin-bottom: 6vh;
  }
  body main #reader #project-images-grid figure {
    min-width: 15vw;
  }
  body main #reader #related-pages hr {
    margin-bottom: 4vh;
  }
  body main #reader #related-pages h3 {
    margin-top: 0;
  }
  body main #reader #related-pages #related-grid {
    width: 100%;
    grid-column-gap: 3%;
  }
  body main #reader #related-pages #related-grid div figure {
    min-width: 10vw;
  }
  body main #reader #related-pages p {
    align-self: flex-end;
  }
  body footer {
    height: 4vh;
    width: auto;
    right: 12%;
  }
  body footer p {
    width: inherit;
  }
  body footer p a {
    font-size: 1.2em;
  }
}
@media only screen and (min-width: 1500px) {
  body main #index-content #main-p-index p {
    font-size: 2.9em;
  }
  body main #index-content #arrow-container {
    margin-top: 7vh;
  }
  body main #index-content #arrow-container .picto {
    width: 60px;
    height: 54px;
  }
  body main #projets-index .projets-grid {
    column-gap: 2em;
    grid-template-columns: repeat(4, 1fr);
  }
  body main #reader #related-pages {
    padding: 0 10vw;
    box-sizing: border-box;
  }
}

/*# sourceMappingURL=theme.css.map */