drupal-quartiersdedemain/web/themes/custom/quartiers_de_demain/css/quartiers_de_demain.css

/*quartiers_de_demain*/
/*global*/
/* Colors used for quartiers_de_demain */
@media (min-width: 48rem) {
  :root {
    font-size: calc(1rem + ((1vw - .48rem) * 1.389));
    /* .48rem = viewportWidthMinimum /100 */
    /* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */ } }

@media (min-width: 120em) {
  :root {
    font-size: 2rem; } }

/*marianne*/
@font-face {
  font-family: 'Marianne';
  src: url("../fonts/Marianne/Marianne-Thin.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Thin.woff") format("woff");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'Marianne';
  src: url("../fonts/Marianne/Marianne-Thin_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Thin_Italic.woff") format("woff");
  font-weight: 300;
  font-style: italic; }

@font-face {
  font-family: 'Marianne';
  src: url("../fonts/Marianne/Marianne-Light.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Light.woff") format("woff");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'Marianne';
  src: url("../fonts/Marianne/Marianne-Light_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Light_Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic; }

@font-face {
  font-family: 'Marianne';
  src: url("../fonts/Marianne/Marianne-Regular.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Regular.woff") format("woff");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: 'Marianne';
  src: url("../fonts/Marianne/Marianne-Regular_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Regular_Italic.woff") format("woff");
  font-weight: 600;
  font-style: italic; }

@font-face {
  font-family: 'Marianne';
  src: url("../fonts/Marianne/Marianne-Medium.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Medium.woff") format("woff");
  font-weight: 800;
  font-style: normal; }

@font-face {
  font-family: 'Marianne';
  src: url("../fonts/Marianne/Marianne-Medium_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Medium_Italic.woff") format("woff");
  font-weight: 800;
  font-style: italic; }

@font-face {
  font-family: 'Marianne';
  src: url("../fonts/Marianne/Marianne-Bold.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Bold.woff") format("woff");
  font-weight: 900;
  font-style: normal; }

@font-face {
  font-family: 'Marianne';
  src: url("../fonts/Marianne/Marianne-Bold_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-Bold_Italic.woff") format("woff");
  font-weight: 900;
  font-style: italic; }

@font-face {
  font-family: 'Marianne';
  src: url("../fonts/Marianne/Marianne-ExtraBold.woff2") format("woff2"), url("../fonts/Marianne/Marianne-ExtraBold.woff") format("woff");
  font-weight: 1000;
  font-style: normal; }

@font-face {
  font-family: 'Marianne';
  src: url("../fonts/Marianne/Marianne-ExtraBold_Italic.woff2") format("woff2"), url("../fonts/Marianne/Marianne-ExtraBold_Italic.woff") format("woff");
  font-weight: 1000;
  font-style: italic; }

/*Font Awesome*/
@font-face {
  font-family: 'Font Awesome';
  src: url("../fonts/Font Awesome/fontawesome-webfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal; }

.layout-container {
  position: relative;
  width: 100vw;
  background-color: white;
  font-family: "Marianne", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.8rem;
  top: 0%;
  left: 0%;
  overflow: hidden;
  display: flex;
  flex-flow: row wrap; }
  .layout-container header {
    flex: 0 0 100%; }
  .layout-container footer {
    flex: 0 0 100%; }
  .layout-container main {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr); }
  .layout-container .content_container {
    display: grid;
    grid-template-columns: repeat(12, 1fr); }

.layout-content {
  grid-column: 1 / span 12; }

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
ul {
  list-style-type: none; }

a {
  text-decoration: none; }

:link {
  color: black; }

:visited {
  color: black; }

html.js body {
  margin: 0 !important; }

html.js body div.dialog-off-canvas-main-canvas div.layout-container {
  margin: 0 !important; }

svg.mailto {
  display: none; }

svg.ext {
  display: none; }

/*partials*/
header {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
  grid-template-rows: repeat(3, 1fr);
  height: 150px;
  background-color: white;
  z-index: 99;
  width: 100vw;
  max-width: 100vw;
  position: -webkit-sticky;
  position: sticky;
  position: relative;
  top: 0;
  border-bottom: 1px solid #808080; }
  @media (max-width: 800px) {
    header {
      width: 800px; } }
  header .contextual-region {
    width: max-content; }
  header .header_left_container {
    grid-column: 1 /span 11;
    grid-row: 1 /span 3;
    display: flex;
    flex-direction: row;
    border-right: 1px solid #808080;
    padding-left: 40px; }
    header .header_left_container #block-quartiers-de-demain-logoepau-2 {
      height: 150px; }
    header .header_left_container img {
      width: auto;
      height: 150px; }
  header .header_right_container {
    padding-right: 10px; }
    header .header_right_container .language-switcher-language-url ul {
      display: flex;
      flex-direction: row;
      font-size: 0.8rem;
      padding: 0; }
      header .header_right_container .language-switcher-language-url ul li:nth-child(1)::after {
        content: "/"; }
      header .header_right_container .language-switcher-language-url ul .is-active {
        font-weight: 600; }
  header .header_nav_container {
    display: none;
    grid-row: 3;
    grid-column: 1 /span 12;
    position: absolute;
    top: 100%;
    width: 100%;
    background: #e8ebf4;
    border-bottom: 1px solid #808080;
    border-top: 1px solid #808080;
    font-size: 1rem; }
    header .header_nav_container #block-quartiers-de-demain-entete {
      grid-column: 1 /span 11;
      order: 2;
      margin: auto; }
      header .header_nav_container #block-quartiers-de-demain-entete h2 {
        display: none; }
  header .display-nav-opened {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 10px; }
  header .open-block, header .open-block.opened {
    cursor: pointer; }
    header .open-block span, header .open-block.opened span {
      display: block;
      width: 58px;
      height: 2px;
      position: relative;
      background: black;
      border-radius: 3px;
      z-index: 1; }
  header .open-block {
    height: 100%;
    display: grid;
    align-items: center;
    margin: auto; }
    header .open-block span {
      margin-bottom: 13px;
      transform-origin: 4px 0px; }
  header .open-block.opened {
    margin: auto; }
    header .open-block.opened span {
      transform-origin: center;
      margin-bottom: 0; }
    header .open-block.opened > div > span:first-child {
      transform: translateY(57%) rotate(45deg); }
    header .open-block.opened > div > span:nth-child(2) {
      transform: rotate(-45deg); }
    header .open-block.opened > div > span:nth-child(3) {
      display: none; }

.footer {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(1, 1fr);
  background-color: white;
  padding-top: 1rem;
  border-top: 1px solid #808080; }
  .footer section {
    width: fit-content; }
  .footer h2, .footer ul {
    margin: 0; }
  .footer #footer-left {
    grid-column: 1 /span 5;
    grid-row: 1;
    padding-left: 40px; }
    .footer #footer-left .footer_left_container {
      display: flex;
      flex-direction: row; }
      .footer #footer-left .footer_left_container #block-quartiers-de-demain-logoepau {
        height: 150px; }
      .footer #footer-left .footer_left_container img {
        width: auto;
        height: 150px; }
  .footer #footer-middle {
    grid-column: 6 /span 7;
    grid-row: 1; }
    .footer #footer-middle #block-quartiers-de-demain-pieddepage ul li {
      padding-bottom: 0.2rem; }
  .footer #footer-right {
    grid-column: 10 / 12;
    grid-row: 1; }
    .footer #footer-right #block-quartiers-de-demain-socialmedialinks {
      flex-direction: column; }
      .footer #footer-right #block-quartiers-de-demain-socialmedialinks h2 {
        display: flex;
        flex-direction: column;
        font-size: 0.8rem;
        font-weight: 400;
        padding-bottom: 1rem; }
        .footer #footer-right #block-quartiers-de-demain-socialmedialinks h2::before {
          content: "Nous contacter";
          padding-bottom: 1rem;
          font-weight: 600; }
  @media (max-width: 891px) {
    .footer div {
      flex-wrap: wrap; } }
  @media (max-width: 520px) {
    .footer div {
      flex-direction: column; } }

.layout-sidebar-first {
  display: flex;
  justify-content: end; }
  .layout-sidebar-first .sidebar_first_container {
    width: 80%; }
    .layout-sidebar-first .sidebar_first_container #block-quartiers-de-demain-views-block-statics-block-1 {
      text-transform: uppercase; }

/*pages*/
#presentation {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px; }
  #presentation .layout-content {
    grid-column: 3 / 11;
    order: 2;
    padding-top: 3rem;
    padding-bottom: 6rem; }
    @media (max-width: 891px) {
      #presentation .layout-content {
        width: 90%; } }
    @media (max-width: 500px) {
      #presentation .layout-content {
        padding-top: 0; } }
    #presentation .layout-content .content_container {
      display: flex; }
      #presentation .layout-content .content_container #block-quartiers-de-demain-titredepage {
        display: none; }
      #presentation .layout-content .content_container article.node-type-static {
        width: 100%; }
        #presentation .layout-content .content_container article.node-type-static div.field_body h2 {
          font-size: 0.8rem;
          font-weight: 600;
          margin-bottom: 0; }
        #presentation .layout-content .content_container article.node-type-static div.field_body p {
          margin-top: 0; }
  #presentation aside {
    grid-column: 1 /span 2;
    order: 1;
    margin-top: 5rem; }
    @media (max-width: 891px) {
      #presentation aside {
        margin-left: 5%;
        margin-top: 9rem; } }
    @media (max-width: 500px) {
      #presentation aside {
        width: 80%;
        margin-top: 3rem; } }

.partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage {
  grid-column: 3 /span 9;
  grid-row: 1;
  margin-top: 3rem; }
  .partenaires .layout-content .content_container #block-quartiers-de-demain-titredepage h1 {
    text-transform: uppercase;
    color: #f7002b;
    font-size: 1.6rem;
    font-weight: 300; }

.partenaires .layout-content .content_container .views-element-container {
  grid-column: 3 /span 9;
  grid-row: 2; }
  .partenaires .layout-content .content_container .views-element-container .node-type-partenaire {
    width: 100%;
    padding-bottom: 3rem;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(auto-fill); }
    @media (max-width: 810px) {
      .partenaires .layout-content .content_container .views-element-container .node-type-partenaire {
        display: flex;
        flex-direction: column; } }
    .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_logo {
      grid-column: 1 /span 2;
      grid-row: 1 /span 3;
      padding-right: 1rem;
      margin: auto; }
      .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_logo img {
        object-fit: contain;
        max-width: 200px;
        max-height: 200px; }
    .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_title {
      grid-column: 3 /span 8;
      grid-row: 1;
      font-weight: 500;
      font-size: 0.6rem;
      margin-left: 1rem; }
    .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_body {
      grid-column: 3 /span 8;
      grid-row: 2;
      margin-left: 1rem; }
    .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien {
      grid-column: 3 /span 8;
      grid-row: 3;
      border-bottom: 2px solid #0732c2;
      width: fit-content;
      padding-bottom: 0.5rem;
      margin-left: 1rem; }
      .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a {
        display: inline-flex;
        align-items: center; }
        .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a svg {
          display: none; }
        .partenaires .layout-content .content_container .views-element-container .node-type-partenaire .field_field_lien a::before {
          display: inline-block;
          content: url("../images/noun-arrow-to-right.svg");
          padding-right: 0.5rem;
          padding-top: 0.2rem; }

.node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage {
  grid-column: 3 /span 9;
  grid-row: 1;
  margin-top: 3rem; }
  .node-type-static .layout-content .content_container #block-quartiers-de-demain-titredepage h1 {
    text-transform: uppercase;
    color: #f7002b;
    font-size: 1.6rem;
    font-weight: 300; }

.node-type-static .layout-content .content_container article.node-type-static {
  grid-column: 3 /span 9;
  grid-row: 2; }
  .node-type-static .layout-content .content_container article.node-type-static div.field_body h2 {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0; }
  .node-type-static .layout-content .content_container article.node-type-static div.field_body p {
    margin-top: 0; }