/* généralités */

    html{
      scrollbar-width: none;
    }
    html::-webkit-scrollbar {
      display: none;
    }

    * {
      cursor:url("cursor_dot.svg") 16 16,default;
    }

    body {
      background-color: white;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    h1 {
      font-family:Arial, Helvetica, sans-serif;
      font-weight: bold;
      font-size:75px;
      background: white;
    }

    h2 {
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      font-style: italic;
      font-size: 30px;
      -webkit-text-stroke-width: 1px;
      -webkit-text-stroke-color: black;
      color:white
    }

    h3 {
      font-family:Arial, Helvetica, sans-serif;
      font-weight:bolder;
      font-style:italic;
      font-size:20px;
    }

    p {
      font-family: Arial, Helvetica, sans-serif;
      font-size:15px;
    }

    a {
      text-decoration: none;
      font-size: inherit;
      font-family:inherit;
      color:inherit;
    }

    .index {
      display:flex;
      flex-direction:row;
      justify-content: space-between;
    }
    
    .index > img {
      width:46vw;
      margin:0 2vw;
      object-fit: contain;
    }
    .title-bloc {
      margin:.6vw;
      flex: auto;
    }

    .text-bloc {
      margin:.2vw;
      width: 8.49vw;
      flex: auto;
    }
    
    .text-bloc a {
      display: inline-block;
    }

    .text-bloc a:hover {
      cursor:url(cursor.svg) 16 16,default;
      font-weight:bold;
      transform: translateX(10px);
    }

    .intro {
      display:flex;
      flex-direction:row;
      justify-content: center;
      min-height:80vh;
    }

    .text-intro {
      margin:2vw;
      width:20vw;
      min-height:80vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .text-intro a {
      display: inline-block;
    }

    .text-intro a:hover {
      cursor:url(cursor.svg) 16 16,default;
      font-weight:bold;
      transform: translateX(10px);
    }

    .image-intro {
      margin:2vw;
      max-width:72vw;
      height:80vh;
    }
    .image-intro > img {
      height: 100%;
    }

    .container {
      margin:2vw;
      display:flex;
      flex-direction: column;
    }
    .container img {
      width:100%;
      margin:1vw;
    }

    /* header */

    header {
      margin-top: -50px;
      z-index: 10;
      display:flex;
      justify-content: space-between;
      position: fixed;
      flex-direction: row;
      width:98vw;
    }

    #quit a:hover {
      cursor:url(cursor.svg) 16 16,default;
      transform: rotate(45deg);
    }
    
    /* frise */

    .scroll-container {
        width: 100vw;
        height: 90vh;           /* hauteur visible */
        overflow-x: auto;        /* scroll horizontal */
        overflow-y: hidden;      /* bloque le vertical */
        scroll-behavior: smooth;          
        display: flex;
        flex-direction: row;
        overflow-x: auto; /* masque scroll bar */
        overflow-y: hidden;
       -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .scroll-container::-webkit-scrollbar {
      height: 0;
      display: none;
    }

    .scroll-container img {
        height: 100%;
        display: inline-block;
    }

@media (max-width:800px)  { /* version mobile */

    h1 {
      font-size:36px;
    }

    h2 {
      font-size: 24px;
    }

    h3 {
      font-size:16px;
    }

    .index {
      display:flex;
      flex-direction:column;
      justify-content: start;
    }
    .index > img {
      width:100%;
    }


    .title-bloc {
      margin:.6vw;
      flex:auto;
      justify-self: start;
    }

    .text-bloc {
      margin:.2vw;
      width: 100%;
      flex: auto;
    }
    
    .intro {
      display:flex;
      flex-direction:column-reverse;
      justify-content: start;
      margin-top: -10px;
      height:auto;
    }

    .text-intro {
      margin:2vw;
      width:100%;
      height:auto;
      display: flex;
      flex-direction: column;
      justify-content: start;
      height:auto;
    }

    .image-intro {
      margin:0vw;
      min-width:102vw;
      align-self: center;
      height:auto;
    }


    

    /* header */

    header {
      margin-top: 0px;
      z-index: 10;
      display:flex;
      justify-content: start;
      position: fixed;
      flex-direction: column-reverse;
      width:98vw;
      flex-wrap: nowrap;
    }

    .desktop {
      display: none;
    }
    
    /* frise */

    .scroll-container {
        width: 100vw;
        height: 90vh;           /* hauteur visible */
        overflow-x: auto;        /* scroll horizontal */
        overflow-y: hidden;      /* bloque le vertical */
        scroll-behavior: smooth;          
        display: flex;
        flex-direction: row;
        overflow-x: auto; /* masque scroll bar */
        overflow-y: hidden;
       -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .scroll-container::-webkit-scrollbar {
      height: 0;
      display: none;
    }

    .scroll-container img {
        height: 100%;
        display: inline-block;
    }

    .footer p {
      font-size: 10px;
    }



    }