@font-face {
          font-family: StephenType;
          src: url(../fonts/StephenType.otf);
        }
        @font-face {
          font-family: Nunito;
          src: url(../fonts/Nunito-VariableFont_wght.ttf);
        }
        @font-face {
          font-family: NunitoSansCondensed;
          src: url(../fonts/NunitoSans_10pt_Condensed-Regular.ttf);
        }

        body {
          background:#2e2b29;
          font-size: 11pt;
          line-height: 20pt;
          font-family: Nunito, sans-serif;
          color: rgba(255,255,255,0.9);
          margin:0;
          padding:0;
          min-height: 100vh;
        }

    
        html {
        scroll-behavior: smooth;
      }


        .action {
          cursor: pointer;
        }
      h2, h3 {
          position: relative;
        }

        h1 {
          font-family: StephenType;
          font-size: 5em;
          line-height: 1em;
          margin-block-start: 0;
          margin-block-end: 0;
          font-weight: normal;
          margin-left: 0.8em;
          margin-top:0.4em;
          width: 200px;
          position: absolute;
        }
      h2 {
          font-size: 1.75em;
          margin-block-start: 0em;
          margin-block-end: 0;
          margin-inline-start: 0;
          margin-inline-end: 0;
          font-weight: normal;
          line-height: 2em;
          text-align: center;
        }
      h3 {
          font-size: 1.2em;
          color: #d5a347;
          text-transform: uppercase;
        }
        h3 {
          margin:0;
          padding: 0.8em 0 0.5em;
          text-align: center;
        }
        h4 {
          text-align:center;
          font-size:1.2em;
          border: solid 1px #d1a747;
          margin: 24px;
        }

        img.portrait {
          width: 120px;
          height: 120px;
          object-fit: cover;
          border-radius: 50%;
          margin: 24px calc(50% - 60px) -18px;
        }
        p, li {
          width:calc(100% - 48px);
          margin: 0 24px;
          position: relative;
          text-align: justify;
        }

        button {
          background: #c89116;
          color: #fefdfc;
          font-family:NunitoSansCondensed;
          letter-spacing: 0.2em;
          font-size: 1.1em;
          border: solid 2px #d1a747;
          display:block;
          margin:1em auto;
          padding:0.5em 1em;
          cursor: pointer;
          text-transform: uppercase;
          min-width:160px;
          border-radius: 8px;
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.66);
        }

        .banner {
          background-image: url(../media/shanmoue-banniere.jpg);
          position: absolute; top: 0; left:0; right:0;  background-position-x: left; background-position-y: top; background-repeat: no-repeat; background-size: cover; height:100vh; min-height:720px;
        }
        .page {
          position: absolute; top: 0; left:0; right:0;
        }
        .cols {
          width:100%;display:flex; flex-direction: row; justify-content: space-evenly; flex-wrap: wrap;
        }
        .col-2 {
          width:100%;max-width:480px;
        }
        .col-3 {
          width:100%;max-width:320px;
        }
        #menu .cols {
           bottom: 24px;
           position: absolute
        }
        #menu .cols .col-3:nth-child(3) {
          background:rgba(0,0,0,0.2);
          padding: 24px 0 8px;
        }

        #menu {
          background: rgba(0,0,0,0);
          height:100vh;
          min-height:660px;
        }
        #menu .content {
          text-align: center; position: relative; height:100%;width:100%;
        }
        #menu img {
          width:96px;
          margin-bottom:8px;
          opacity:0.85;
        }

        #photographe {
          background:#fefdfc; color: rgba(0,0,0,0.9); padding:72px 0;
        }

        #photographe .content > img {
          width:100%; margin-top:16px;
        }

        #photographe .col-3 img {
          border-radius:50%;width:66%; margin:96px auto; display:block;
        }

        #modele {
          background:#630005;
        }

        #modele .content {
          background-image: url('../media/banniere-modele.jpg'); background-size:auto 100%;background-position: center center; width:100%; height:600px; position: relative;
        }

        #modele h3 {
          padding-bottom:0.8em;  color: #fefdfc;
        }

        #modele ul {
          background: rgba(0,0,0,0); position: absolute; top: 56%; margin-block-start: 0; margin-block-end: 0; list-style-type:none; padding-inline-start:0;
        }

        #modele .content ul.left {
          left:0;
        }
        #modele .content ul.right {
          right:0;
        }

        #modele-2 {
          background:#2e2b29;
          position:relative;
        }
        #modele-2 video {
          display: block;
          width: 100%;
          max-width:960px;
        }
        #modele-2 a {
          display: block;
          position:absolute;
          bottom:0;
          left: calc(50% - 80px);
        }


        #chanteresse {
          background:#fefdfc; color: rgba(0,0,0,0.9);
        }

        #chanteresse .content {
          text-align: center; padding:72px 0;
        }

        #chanteresse h3 {
          padding-bottom:0.8em;
        }

        #chanteresse img {
          width:calc(100% - 48px);
          margin: 0 auto;
          max-width:960px;
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.66);
          border-radius: 8px;
        }

        #liens {
          background:linear-gradient(120deg, #1f6c8f 0%, #242f4b 50%, #443d5f 100%); color: rgba(0,0,0,0.9); padding:72px 0;
        }

        #liens h3 {
          color: #fefdfc;
        }

        #a-propos {
          background:#fefdfc; color: rgba(0,0,0,0.9);padding-bottom:72px;
        }

        #a-propos .col-2 img:first-child {
          width:calc(100% - 192px);max-width:288px; margin:8px 96px 0;
        }

        #a-propos .col-2 img:not(:first-child) {
          width:calc(100% - 48px);max-width:432px; margin: 8px 24px 0;
        }

        .link-container {
          margin: 0 24px 18px;
          padding: 0 4px;
        }


      .card {
        background: white;
        color: rgba(0,0,0,0.9);
          min-height: 56px;
          display: flex;
          flex-direction: row;
          box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.66);
          border-radius:8px;
        }

        .footer {
          position: relative;
          text-align: center;
          margin: 48px;
        }
        a {
          text-decoration: none;
          color:inherit;
          font-weight: bold;
        }



        @media screen and (max-width:960px){
        .page-container {
            padding: 24px;
            margin: 24px auto;
          }
      }

      .content {
        width: 100%;
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
      }

      #card {
        width: 100%;
        max-width: 530px;
        margin-left: auto;
        margin-right: auto;
      }

      .card-image {
        width:48px;
        min-width:48px;
        max-width:48px;
        background:black;
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
        background-size:cover;
        background-position: 50%;
      }
      .card-text {
        padding: 8px;
      }
      .card-text-secondary {
        font-weight: normal;
      }

      .card-image-1 {
        background-image: url(../media/formations.png);
      }
      .card-image-2 {
        background-image: url(../media/accompagnement.png);
      }
      .card-image-3 {
        background-image: url(../media/verso.png);
      }
      .card-image-4 {
        background-image: url(../media/blog.png);
      }