/* Moreac.com */
/* 01 Fonts */
/* 02 Textes */
/* 03 Général */
/* 04 Accueil */
/* 05 Intégrateur */
/* 06 Dessinateur */

:root {/* À mettre en premier dans les CSS ! */
  /* https://www.color-hex.com/color-palette/1037649
  #b71313	(183,19,19)   rouge
  #fccf2d	(252,207,45)  jaune
  #88be19	(136,190,25)  vert
  #2d6bba	(45,107,186)  bleu
  #5f2872	(95,40,114)   violet
  */
  --blue: #2d6bba;
  --violet: #5f2872;
  --red: #b71313;
  --green: #88be19;
  --yellow: #fccf2d;
  --dark: #333;
}

/* 01 Fonts */
/* Textes */
@font-face {
  font-family: 'ames';
  src: url('../Fonts/ames.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
/* Titres */
@font-face {
  font-family: 'game_on';
  src: url('../Fonts/game_on.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
body,
h2 .numbers,
.h2 .numbers {
  font-family: 'ames';
}

/* 02 Textes */
body {
  background-color: #fff;
  color: var(--dark);

}
.home {
  background-color: var(--yellow);
}
h1,h2,.h1,.h2 {
  font-family: 'game_on';
}

/* 03 Général */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.overflow {
 overflow: hidden;
}
 .overflow .illustration {

 }
  .img-responsive {
    height: auto;
    max-width: 100%;
  }

/* 04 Accueil */
/* Général */
.home {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 180px 1fr 24px;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  min-height: 99vh;/* Sinon ascenseur... */
}
  .home .header {
    grid-area: 1 / 1 / 2 / 2;
    padding: 20px;
    text-align: center;
  }
    .home h1 {
      margin: 0;
      color: #000;
      font-size: calc(4rem + 1.5vw);
      line-height: 1;
    }
  .home .footer {
    grid-area: 3 / 1 / 4 / 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
  }
    .footer p {
      margin-bottom: 0;
      padding: 2px 5px 0 0;
    }
    .home .footer p {
     text-align: right;
    }
/* Intégrateur */
.home .main {
  grid-area: 2 / 1 / 3 / 2;
}
  .home .main .container-fluid,
  .home .main .row {
    height: 100%;
  }
    .home .col-md-6 {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 50%;
      padding: 30px 20px;
      text-align: center;
    }
    .home .col-md-6,
    .page,
    .page-case {
      background-image: url(../Img/page-froissee.png), url(../Img/tache-01.svg);
      background-repeat: no-repeat, no-repeat;
      background-position:  0 0, right -40px bottom -20px;
      background-size: cover, 152px auto;
    }
    .home .integrateur,
    .home .dessinateur {
    background-color: var(--blue);
    color: #fff;
    }
      .home .home-img {
        border: 5px solid #FFF;
        border-radius: 50%;
        height: 100px;
        margin-bottom: 20px;
        width: 100px;
      }
      .home .col-md-6 .h2-title {
        margin: 0;
        font-size: 2.5rem;
        line-height: 1;
      }
        .h2-title .home-link {
          color: #fff;
        }
        .h2-title .home-link:is(:focus-visible,:focus,:hover,:active) {
          text-decoration: none;
        }
          .h2-title .home-link::before {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            top: 0;
            content: '';
          }
    /* Dessinateur */
    .home .dessinateur {
      background-color: var(--red);
    }

/* 05 Intégrateur */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
  .page.integrateur {
    background-color: var(--blue);
  }
/* Header + menu */
.page .header {
  flex-direction: column;
  padding: 10px;
  color: #fff;
  text-align: center;
}
.integrateur .header {
  background-color: var(--violet);
}
  .page .page-title {
    font-size: calc(2rem + 1.5vw);
    line-height: 1;
  }
   .page .page-title .h1-link {
    color: #fff;
    text-decoration: none;
   }
  .main-nav .site-menu {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
  }
    .site-menu .menu-link {
      color: #fff
    }
    .site-menu .is-active .menu-link {
      color: var(--yellow);
      text-decoration: none;
    }
    .site-menu .menu-link:is(:focus-visible,:focus,:hover,:active) {
      text-decoration: none;
    }
/* Page */
.page .main {
  padding: 20px 0;
}
  .page-case {
    border: 2px solid #000;
    padding: 20px;
    background-color: #fff;
    background-size: cover, 96px auto;
    overflow: hidden;/* Images + float */
  }
  .page-case + .page-case {
    margin-top: 20px
  }
    .page-case *:last-child {
      margin-bottom: 0;
    }
    .page-case h2 {
      margin-bottom: 20px;
      padding-left: 80px;
      background: url(../Img/main.svg) no-repeat left 5px / 64px 32px;
      font-size: 3rem;
      line-height: 1;
      word-break: break-word;
    }
     .page-case h2 .numbers {
       font-size: 75%;
     }
    .page-case .case-img-link {
      margin: 0 20px 20px 0;
      float: left;
    }
     .case-img-link .illustration {
       max-height: 100%;
       max-width: 100%;
     }
    .page-case p {
      font-size: .875em;
    }
    .page-case h3 {
     font-size: calc(1rem + 0.6vw);
    }
    .page-case .row-list {/* Page parcours, bloc musique */
     gap: 20px 0;
    }
/* Footer */
.page .footer {
  margin-top: auto;
  padding: 5px;
  color: #fff;
  text-align: right;
}

/* 06 Dessinateur */
.page.dessinateur {
  background-color: var(--red);
}
 .dessinateur .header {
   background-color: var(--violet);
 }
 :is(.dessinateur,.integrateur) .footer .link {
  color: #fff;
 }
 :is(.dessinateur,.integrateur) .footer .link:is(:focus-visible,:focus,:hover,:active) {
  text-decoration: none;
 }