html{
    scroll-behavior: smooth;
  }
  
  body {
      margin: 0;
      font-family: Alexandria, sans-serif;
      font-weight: 200;
      /*--accent-font: VT323;*/
      /* --accent-font: Boldonse; */
      /* --accent-font: Arial; */
      /*
      applat fond : #BD1D3C 
      titre FG : #E1264A
      titre shadow : #801328
      */

      --accent-color: #a50323;
      /* --accent-color: #136880; */
    }

    .section {

      & >div,
      & nav {
        margin: auto;
        margin-bottom: -1px;
        width: 70%;

        & a{
          text-decoration: none;
          color: black;
        }

        & button{
          display: inline-block;
          padding: 6px 16px;
          background-color: #ffffff;
          text-decoration: none;
          border: 0;

          &.contact{
            border-radius: 16px;
            color: black;
            border: 1px solid black;
          }
        }

      }
    }

    .menu-top {
      position: sticky;
      top: 0;

      background-color: white;
      z-index: 10;

      & nav {

        display: flex;
        /* width: 100%; */
        justify-content: space-between;
        align-items: center;
        /* padding: 5px 0; */

        & .menu-logo {
          /* flex-basis: 0; */
          /* flex-shrink: 1; */
          /* display: inline-block; */
          /* width: 150px; */

          & img {
            height: 3em;
            /* width: 100%; */
          }
        }

        .menu-right {
          display: flex;
          align-items: center;
          gap: 20px;
        }

        & ul {
          /* display: flex; */
          display: block;
          padding: 0;
          margin: 0;
        }

        & li {
          display: inline-block;
          margin: 0 5px;
          padding: 5px;
          font-size: 0.9em;

          & a {
            text-decoration: none;
            color: black;
          }
          & a:visited {
            color: black;
          }
        }

        & li:first-child {
          margin-left: 0;
        }

        & li:last-child {
          margin-right: 0;
        }

        & li.CTA-contact {
          border: solid 1px black;
          border-radius: 10px;
          padding: 7px 10px;
        }

        & li.selected {
          font-family: var(--accent-font);
          color: var(--accent-color);
        }
      }
    }

    .hero-header {

      padding: 2em 0;

      /* background-color: #BD1D3C; */
      background-color: var(--accent-color);
      color: white;

      & >div {
        /* background-color: black; */
        /* mix-blend-mode: darken; */
      /* background-color: var(--accent-color); */

      }

      & ul {
        padding: 0;
        margin: 0;
      }

      & li {
        display: block;
        text-transform: uppercase;
        font-size: 2em;
      }

      & h1 {
        color: var(--accent-color);
        font-family: var(--accent-font);
        font-weight: 400;
        /* font-size: 20.5vw; */
        margin: 0.5em 0 0 0;
        position: relative;

        & .nom-diplome {
          position: absolute;
          bottom: 0.4em;
          left: 0.1em;
          color: black;
          opacity: 0.2;
          z-index: 999;
        }

        & .nom-formation {
          text-transform: uppercase;
          /* display: block; */
          /* color: #E1264A; */
          color: white;
          /* color: var(--accent-color); */
          opacity: 0.5;
          mix-blend-mode: overlay;
        }
      }

      & .baseline {
        text-align: justify;
        text-align-last: justify;
        font-weight: 300;
        /* letter-spacing: 10px; */
        /* line-height: ; */
      }

    }

    .menu-bottom {
      position: sticky;
      top: 4em;

      background-color: white;
      border-bottom: solid 1px;
      border-color: var(--accent-color);
      
      font-size: 0.8em;

      & nav {
        padding: 1em 0;
        /* margin-bottom: 5px;         */
        font-weight: 300;
        
        & ul {
          padding: 0;
          margin: 0;
          display: flex;
          flex-wrap: nowrap;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
          -ms-overflow-style: none;
        }
        
        & li { 
          flex-shrink: 0;
          display: inline-block;
          margin: 0 2.2%;
          padding: 1em 0;
          padding-bottom: calc(1em - 5px);
        }
        
        & li:first-child {
          padding-left: 0;
          margin-left: 0;
        }
        
        & li:last-child {
          padding-right: 0;
          margin-right: 0;
        }
        
        & li.selected {
          border-bottom: solid 5px;
          border-color: var(--accent-color);
        }

      }
    }

    .main {
      margin-top: 5em;

    }

    .container {
      width: 90%;
      margin: 0 auto;
      padding-top: 2em;
    }

    .current_page_item {
      color: var(--accent-color);
      font-family: var(--accent-font);
      font-size: 25px;
    }

    .nom-diplome, .nom-formation {
      display: block;
      white-space: nowrap;
    }

    .block-pattern{
      padding-top: 75px;
      padding-bottom: 50px;
    }

    /***  css pour appliquer la couleur et la typographie d'accentuation sur tous les textes en italique ***/
    em{
      color: var(--accent-color);
      font-family: var(--accent-font);
    }
    .sous_menu_avec_panel1 em{
      color: color-mix(in srgb, var(--accent-color) 40%, white);
    }