@font-face {
    font-family: 'Uni_Neue_regular';
    src: url('fonts/uni-neue/UniNeueRegular.woff2') format('woff2'),
        url('fonts/uni-neue/UniNeueRegular.woff') format('woff'),
        url('fonts/uni-neue/UniNeueRegular.ttf') format('truetype');
}

@font-face {
    font-family: 'Uni_Neue_bold';
    src: url('fonts/uni-neue/UniNeueBold.woff2') format('woff2'),
        url('fonts/uni-neue/UniNeueBold.woff') format('woff'),
        url('fonts/uni-neue/UniNeueBold.ttf') format('truetype');
 }

@font-face {
    font-family: 'Uni_Neue_bold_italic';
    src: url('fonts/uni-neue/UniNeueBold-Italic.woff2') format('woff2'),
        url('fonts/uni-neue/UniNeueBold-Italic.woff') format('woff'),
        url('fonts/uni-neue/UniNeueBold-Italic.ttf') format('truetype');

}

@font-face {
    font-family: 'Uni_Neue_heavy_italic';
    src: url('fonts/uni-neue/UniNeueHeavy-Italic.woff2') format('woff2'),
        url('fonts/uni-neue/UniNeueHeavy-Italic.woff') format('woff'),
        url('fonts/uni-neue/UniNeueHeavy-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Uni_Neue_book';
    src: url('fonts/uni-neue/UniNeueBook.woff2') format('woff2'),
        url('fonts/uni-neue/UniNeueBook.woff') format('woff'),
        url('fonts/uni-neue/UniNeueBook.ttf') format('truetype');
}

@font-face {
    font-family: 'Uni_Neue_thin_italic';
    src: url('fonts/uni-neue/UniNeueThin-Italic.woff2') format('woff2'),
        url('fonts/uni-neue/UniNeueThin-Italic.woff') format('woff'),
        url('fonts/uni-neue/UniNeueThin-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Uni_Neue_regular_italic';
    src: url('fonts/uni-neue/UniNeueRegular-Italic.woff2') format('woff2'),
        url('fonts/uni-neue/UniNeueRegular-Italic.woff') format('woff'),
        url('fonts/uni-neue/UniNeueRegular-Italic.ttf') format('truetype');

}

@font-face {
    font-family: 'Uni_Neue_book_italic';
    src: url('fonts/uni-neue/UniNeueBook-Italic.woff2') format('woff2'),
        url('fonts/uni-neue/UniNeueBook-Italic.woff') format('woff'),
        url('fonts/uni-neue/UniNeueBook-Italic.ttf') format('truetype');

}

@font-face {
    font-family: 'Uni_Neue_thin';
    src: url('fonts/uni-neue/UniNeueThin.woff2') format('woff2'),
        url('fonts/uni-neue/UniNeueThin.woff') format('woff'),
        url('fonts/uni-neue/UniNeueThin.ttf') format('truetype');
}

@font-face {
    font-family: 'Uni_Neue_black';
    src: url('fonts/uni-neue/UniNeueBlack.woff2') format('woff2'),
        url('fonts/uni-neue/UniNeueBlack.woff') format('woff'),
        url('fonts/uni-neue/UniNeueBlack.ttf') format('truetype');
}

@font-face {
    font-family: 'Uni_Neue_black_italic';
    src: url('fonts/uni-neue/UniNeueBlack-Italic.woff2') format('woff2'),
        url('fonts/uni-neue/UniNeueBlack-Italic.woff') format('woff'),
        url('fonts/uni-neue/UniNeueBlack-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Uni_Neue_heavy';
    src: url('fonts/uni-neue/UniNeueHeavy.woff2') format('woff2'),
        url('fonts/uni-neue/UniNeueHeavy.woff') format('woff'),
        url('fonts/uni-neue/UniNeueHeavy.ttf') format('truetype');
}

@font-face {
    font-family: 'Uni_Neue_light';
    src: url('fonts/uni-neue/UniNeueLight.woff2') format('woff2'),
        url('fonts/uni-neue/UniNeueLight.woff') format('woff'),
        url('fonts/uni-neue/UniNeueLight.ttf') format('truetype');
}

@font-face {
    font-family: 'Uni_Neue_light_italic';
    src: url('fonts/uni-neue/UniNeueLight-Italic.woff2') format('woff2'),
        url('fonts/uni-neue/UniNeueLight-Italic.woff') format('woff'),
        url('fonts/uni-neue/UniNeueLight-Italic.ttf') format('truetype');
}


   html
   {
       background: none;
       overscroll-behavior-x: none;
   }
   
   body
   {
      font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
      font-weight:normal; 
      text-rendering:optimizelegibility; -webkit-font-smoothing:antialiased;
      padding: 0;
      margin: 0;
   }
   
   a[x-apple-data-detectors], a[x-apple-data-detectors]:link, a[x-apple-data-detectors]:hover { color:inherit !important; text-decoration:none;}
   
   a
   {
       text-decoration: none;
       color: unset;
   }
   
   .orange
   {
   color: #FF5500;
   }
   
   .gris
   {
       color: #6D7579;
   }
    .masante
    {
        margin: 0;
        padding: 0;
        text-align: center;
        font-family: Uni_Neue_bold;
        font-size: 38px;
        letter-spacing: -1px;
        margin-bottom: 30px;
    }
    
    .texte, .texte_2
    {
       width: 228px;
       margin: 0 auto;
       font-family: Uni_Neue_book;
    }
    
.texte
     {
        margin-bottom: 10px;
     }
     
     
    .ma
    {
       font-family: Uni_Neue_bold_italic;
    }
    
    
    h1, h2, h4
    {
      font-size: unset;
      margin-block-end: unset;
      margin-inline-end: unset;
      margin-block-start: unset;
      font-weight: unset;
    }
    
    
    h2, h4
    {
       display: none;
    }
    
    p {
      text-align: left;
      margin: 0;
      display: none;
    }
    
    .end
    {
      text-align: center;
      margin: 0;
      font-family: Uni_Neue_bold;
      font-size: 25.4px;
	  letter-spacing: -1px;
	  width: 230px;
	  line-height: 1;
	  margin: 0 auto;
	  margin-bottom: 100px;
     text-align: left;

    }
    
    .image_fond
    {
       background-image: url(/img/fond_glossaire.jpg?v=2);
        width: 100%;
        /* height: 110dvh; */
        position: fixed;
        z-index: 0;
        background-repeat: no-repeat;
        top: 0;
        padding-top: env(safe-area-inset-top);
        /* background: aliceblue; */
        height: 100%;
        background-size: cover;
        z-index: 0;
        background-position-y: 48%;
    }
    
    .texte
    {
        margin-bottom: 10px;
        font-size: 36px;
        width: 300px;
        margin-left: 50px;
        line-height: 1.2;
    }
    
    .main_container
    {
        z-index: 20;
        position: absolute;
        top: 200px;
    }
    
    .logo
    {
      background-repeat: no-repeat;
      background-image: url(/img/anim_logo_web.gif);
      background-repeat: no-repeat;
      background-size: contain;
      padding: 0px;
      background-position-y: 5px;
      width: 100px;
      margin-left: 50px;
      height: 26vw;
      z-index: 100;
      position: fixed;
      top: 50px;
      height: 100px;
      box-sizing: border-box;
      background-position-y: 0px;
     }
    
    
    .titre {
        width: 100vw;
         text-align: left;
         font-size: 22vw;
         padding-top: 0px;
         padding-bottom: 0px;
         font-family: Uni_Neue_bold;
         line-height: 1;
         letter-spacing: -0.4vw;
         margin: 0 auto;
         margin-top: 0%;
    }
    
    
    
    /*test pat*/
    #legende
    {
       font-size: 24px;
        color: black;
        z-index: 100;
        position: absolute;
        font-family: Uni_Neue_book;
        line-height: 1.2;
        right: 25px;
        top: 25px;
        background: #ffffffdb;
        padding: 6px;
        transform-origin: top right;
        transform: scale(1.0);
        transition-duration: 0.6s;
    }
    
    #legende.zoom
    {
       transform: scale(1.4);
    }
    
    #graphWrapper
    {
       position: relative;
       width: 100%;
       overflow: hidden;
    }
    
    #graphWrapper.white
    {
       background: #ffffff8a;   
    }
    
    #graphScroll
    {
       overflow-x: auto;
       overflow-y: hidden;
       /*margin-left: var(--graph-y-width);*/
       width: calc(100% - var(--graph-y-width));
       margin-left: 45px;
    }
    
    #graphYAxis
    {
       position: absolute;
       left: 0;
       top: 0;
       z-index: 20;
       pointer-events: none;
       background: transparent;
    }
    
    
    /* profil*/
    
    button
    {
        font-size: 18px;
        font-family: Uni_Neue_book;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        background: black;
        color: white;
        border: none;
        font-weight: 600;
    }
    
    
    .profil_save
    {
       position: fixed;
       inset: 0;
       z-index: 1000;
    
       display: flex;
       align-items: center;
       justify-content: center;
    
       background: rgba(0, 0, 0, .35);
    
       opacity: 0;
       pointer-events: none;
    
       transition: opacity .25s ease;
       width: 100vw;
    }
    
    .profil_save.visible
    {
       opacity: 1;
       pointer-events: auto;
    }
    
    .profil_save_box
    {
      width: 66vw;
     height: 66vw;
     background: #ffffffe3;
     text-align: center;
     top: 9%;
     position: absolute;
     border-radius: 50%;
     padding: 19px;
     font-size: 24px;
     font-family: Uni_Neue_book;
     border: 8px solid #FF5500;
     padding-top: 24px;
     box-sizing: border-box;
     line-height: 1;
    }
    
    .profil_save_buttons
    {
       display: flex;
       justify-content: center;
       gap: 15px;
       margin-top: 25px;
    }
    
    .profil_save_buttons button
    {
       cursor: pointer;
    }
    /*end profil*/
    
    .roller.meal
    {
        width: 100%;
    }
    
    .meal
    {
       width: 100%
    }
    
    .meal_grid
    {
        width: 32%;
        display: inline-block;
    }
    
    .time_grid
    {
        width: 32%;
        display: inline-block;
    }
    
    .roller.time
    {
         width: 50%;
          display: inline-block;
          margin-right: 2px;
     }
    
    .horaires
    {
        width: 45%;
        display: inline-block;
    }
    
    .roller_number
    {
        display: inline-block;
        width: auto;
    }
    
    .roller_unit_icon
    {
       width: 18px;
       display: inline-block;
       position: sticky;
       height: 34%;
       vertical-align: top;
       padding-bottom: 0px;
    }
    
    .roller_value.selected .roller_unit_icon
    {
         height: 40%;
         padding-bottom: 1px;
    }
    
    
    /*
    img.roller_unit_icon
    {
        width: 33px;
        height: 26px;
        display: inline-block;
        position: absolute;
        top: 37px;
    }
    */
    .sepa_tab
    {
       width: 100%;
       height: 4vw;
    }
    
    .drink_title, .time_title, .profil_title
    {
        font-family: Uni_neue_bold;
        letter-spacing: -1.2px;
        margin-bottom: 1vw;
        font-size: 20px;
        text-align: left;
    }
    
    .drink
    {
        width: 46%;
         display: inline-block;
         margin-right: 0;
         margin-bottom: 25px;
    }
    
    .margin_r_0
    {
       margin-right: 0; 
    }
    
    
    #debug, #false_start
    {
       position: fixed;
       z-index: 99999;
       padding: 8px 8px;
       background: #ffffffb0;
       color: black;
       font-family: monospace;
       font-size: 16px;
       line-height: 1.2;
       border-radius: 6px;
       border: 1px solid black;
       opacity: 0;
       transition: opacity .2s ease;
       z-index: 20;
       bottom: 4vw;
       width: 88vw;
       left: 4vw;
       display: grid;
       grid-template-columns: 0.7fr 1fr;
       gap: 4px 20px;
       grid-template-rows: repeat(5, auto);
       grid-auto-flow: column;
       gap: 0 0px;
    }
    
    body
    {
      width: 1440px;
       margin: 0;
       overflow: hidden;
       overflow-x: hidden;
       overflow-y: visible;
       height: 110vh;
       max-width: 1440px;
       margin: 0 auto;
    }
    
    #back, #back_drinks, #back_results, #back_conso_2
    {
      background-image: url(/img/arrow_left.svg);
      background-size: contain;
      background-repeat: no-repeat;
    }
    
    #forward, #forward_drinks, #forward_results, #forward_conso_2
    {
      background-image: url(/img/arrow_right.svg);
      background-size: contain;
      background-repeat: no-repeat;
    }
    
    
    .two_icons
    {
       padding-left: 2vw;
       text-align: right;
       margin-bottom: 2vw;
       display: none;
    }
    
    .two_icons_une
     {
        padding-left: 0;
         text-align: right;
         margin-bottom: 2vw;
         padding-right: 50px;
     }
     
    
    #two_icons_MW
    {
       text-align: left;
       display: block;
       padding-left: 0;
       margin-top: 66px;
    }
    
    /*rollers*/
    .rollers
    {
       justify-content: center;
       margin-top: 40px;
       display: inline-block;
       width: 88vw;
    }
    
    .roller
    {
       width: 25%;
       text-align: center;
       display: inline-block;
    }
    
    .roller.small
    {
       width: 30%;
    }
    
    .roller.small .roller_value
    {
       height: 33px;
    }
    
    .roller.small .roller_window
    {
       height: 99px;
    }
     
    
    .roller_label
    {
       /*
       font-size: 16px;
       margin-bottom: 12px;
       */
    }
    
    .roller_window
    {
       position: relative;
       width: 100%;
       height: 99px;
       overflow: hidden;
       touch-action: none;
       cursor: grab;
    }
    
    .roller_window:active
    {
       cursor: grabbing;
    }
    
    
    /* zone centrale */
    
    .roller_window::before,
    .roller_window::after
    {
       content: "";
       position: absolute;
       left: 0;
       width: 100%;
       height: 33px;
       z-index: 2;
       pointer-events: none;
    }
    
    .roller.small .roller_window::before,
    .roller.small  .roller_window::after
    {
       height: 33px;
    }
    
    .roller_window::before
    {
       top: 0;
       background: linear-gradient(to bottom, rgb(100 100 100 / 40%), rgb(255 255 255 / 0%));
       mix-blend-mode: multiply;
    }
    
    .roller_window::after
    {
       bottom: 0;
       background: linear-gradient(
          to top,
          rgba(100,100,100,0.4),
          rgba(255,255,255,0)
       );
       mix-blend-mode: multiply;
    }
    
    
    /* ligne de sélection */
    
    .roller_window
    {
       border-top: 1px solid rgba(0,0,0,.15);
       border-bottom: 1px solid rgba(0,0,0,.15);
       box-shadow: 1px 1px 1px 0px #00000073;
       /*background: #ffffff5e;*/
       background: linear-gradient(to bottom, transparent 0%, rgb(255 255 255 / 90%) 50%, rgb(255 255 255 / 75%) 50%, transparent 100%);
    }
    
    
    .roller_track
    {
       position: absolute;
       left: 0;
       top: 33px;
       width: 100%;
       will-change: transform;
    }
    
    .roller.small .roller_track
    {
       top: 33px;
    }
    
    .roller_value
    {
       height: 33px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 18px;
       user-select: none;
       opacity: 0.3;
    }
    
    
    /* valeur centrale */
    
    .roller_value.selected
    {
       font-size: 24px;
       opacity: 1;
    }
    
    
    /* unité */
    
    .roller_unit
    {
      font-size: 16px;
      margin-left: 2px;
      vertical-align: top;
      padding-bottom: 1px;
    }
    
    .roller_value.selected .roller_unit
    {
       padding-bottom: 5px;
    }
    
    .screen
    {
       position: absolute;
        width: 1440px;
        padding-left: 50px;
        padding-right: 0px;
        box-sizing: border-box;
        z-index: 50;
        top: 150px;
    }
    
    .page
    {
       position: fixed;
       inset: 0;
       width: 100%;
       height: 100%;
       z-index: 10;
    }
    
    
    /* PAGE D'ACCUEIL */
    .ecran_1
    {
       transform: translateX(0);
       transition: transform .6s ease;
       height: 84vh;
    }
    
    
    /* PAGE FORMULAIRE */
    .ecran_2
    {
       transform: translateX(125%);
       transition: transform .6s ease;
    }
    
    .ecran_2.slide_out
    {
       transform: translateX(-125%);
       transition: transform .6s ease;
    }
    
    
    /* SORTIE DE LA PAGE 1 */
    .ecran_1.slide_out
    {
       transform: translateX(-125%);
    }
    
    
    /* ENTRÉE DE LA PAGE 2 */
    .ecran_2.slide_in
    {
       transform: translateX(0);
       width: 33%;
    }
    
    /*page drinks*/
    .ecran_3
    {
       transform: translateX(250%);
       transition: transform .6s ease;
       left: 31%;
        width: 33%;
    }
    .ecran_3.slide_in
    {
       transform: translateX(0);
       transition: transform .6s ease;
    }
    
    .ecran_3.slide_out
    {
       transform: translateX(-125%);
       transition: transform .6s ease;
    }
    
    /*page conso_2*/
    .ecran_4
    {
       transform: translateX(125%);
       transition: transform .6s ease;
       left: 62%;
       width: 33%;
       padding-top: 115px;
    }
    
    .ecran_4.slide_in
    {
       transform: translateX(0);
       transition: transform .6s ease;
    }
    
    .ecran_4.slide_out
    {
       transform: translateX(-125%);
       transition: transform .6s ease;
    }
    
    
    /*page results*/
    .ecran_5
    {
       transform: translateX(125%);
       transition: transform .6s ease;
       top: 600px;
       width: 1340px;
       left: 50px;
       transition: opacity 1s ease;
       padding-bottom: 4vw;
       background: #ffffffa3;
    }
    
    .ecran_5.white
    {
      background: #ffffff8a;
      transition: opacity 1s ease;
    }
    
    .ecran_5.slide_in
    {
       transform: translateX(0);
       transition: transform .6s ease;
    }
    
    .titre_une
     {
         width: 1340px;
          text-align: left;
          font-size: 310px;
          padding-top: 0px;
          padding-bottom: 0px;
          font-family: Uni_Neue_bold;
          line-height: 0.8;
          letter-spacing: -10px;
          margin-top: 0;
          margin-bottom: 50px;
     }
     
     .titre
       {
         text-align: left;
         padding-top: 0px;
         padding-bottom: 0px;
         font-family: Uni_Neue_bold;
         line-height: 0.8;
         margin: 0 auto;
         margin-top: 0;
         margin-bottom: 50px;
         font-size: 84px;
         letter-spacing: -2px;
         width: 100%;
       }
     
    .footer
    {
       height: 200px;
        bottom: 0;
        position: absolute;
        width: 100vw;
        max-width: 1440px;
    }
    
    
    .main_container
    {
       position: absolute;
        z-index: 0;
        margin: 0 auto;
        padding-bottom: 0;
         width: 100vw;
          overflow-x: hidden;
          overflow-y: visible;
          top: 0;
          height: 110vh;
          display: block;
          max-width: 1440px;
    }
    
    
    /*
    .image_fond
    {
        background-image: url(/img/fond_glossaire.jpg?v=2);
         width: 100%;
         position: fixed;
         z-index: 0;
         background-repeat: no-repeat;
         top: 0;
         padding-top: env(safe-area-inset-top);
         max-width: 1440px;
    }
    
    .image_fond::after
    {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 1s ease;
        
    }
    
    .image_fond.orange::after
    {
       background: url(/img/fond_ethylo_orange.jpg) no-repeat;
       transition: opacity 1s ease;
       background-size: cover;
       max-width: 1440px;
       background-position-y: 48%;
       opacity: 1;
    }
    
    .image_fond.rouge::after
     {
         opacity: 1;
         background: url(/img/fond_ethylo_rouge.jpg) no-repeat;
         transition: opacity 1s ease;
         background-size: cover;
         max-width: 1440px;
         background-position-y: 48%;
     }
    
    */
    
    .image_fond
    {
        background-image: url(/img/fond_glossaire.jpg?v=2);
        width: 100%;
        position: fixed;
        z-index: 0;
        background-repeat: no-repeat;
        top: 0;
        padding-top: env(safe-area-inset-top);
        max-width: 1440px;
    }
    
    .image_fond::before,
    .image_fond::after
    {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 1s ease;
        background-repeat: no-repeat;
        background-size: cover;
        background-position-y: 48%;
        pointer-events: none;
    }
    
    /* ORANGE */
    .image_fond::before
    {
        background-image: url(/img/fond_ethylo_orange.jpg);
    }
    
    .image_fond.orange::before
    {
        opacity: 1;
    }
    
    /* ROUGE */
    .image_fond::after
    {
        background-image: url(/img/fond_ethylo_rouge.jpg);
    }
    
    .image_fond.rouge::after
    {
        opacity: 1;
    }
    
    
     .texte
      {
          line-height: 0.8;
          font-size: 100px;
          margin: 0 auto;
          margin-top: 0;
          margin-left: 0;
          width: 100%;
      }
      
      .bottom
      {
          position: fixed;
           bottom: 25px;
           margin-left: 50px;
           font-size: 36px;
      }
      
      .hello
       {
           /*margin-top: 56px;*/
           padding-top: 0px;
           padding-bottom: 0px;
           margin-top: 50px;
           
       }
       
       .end
       {
          font-size: 25px;
          margin-bottom: 300px;
    
       }
       
       .icon img
       {
       /*height: 20vw;*/
       }
       
       .icon
       {
          height: 80px;
          width: 80px;
          display: block;
          text-align: center;
          margin-top: 25px;
          cursor: pointer;
          transform: scale(1);
          display: inline-block;
          margin-right: 0;
       }
       
       .sepa_tab
       {
          display: none;
       }
       
       
       .time_grid.texte
       {
           width: 100%;
           display: inline-block;
           margin-bottom: 25px;
       }
       
       .meal_grid.texte
       {
           display: inline-block;
           width: 44%;
       }
       
       .roller.small
       {
          width: 33%;
           padding: 0;
           margin-right: 2px;
       }
       
       .drink_rollers
       {
           display: flex;
       }
       
       .time_rollers
       {
           display: flex;
       }
       
       .ecran_4 .titre
       {
           display: none;
       }
       
       .uni_bold
       {
         font-family: Uni_Neue_bold;
         letter-spacing: -1px;
       }
       
       .titre_fake
       {
           width: 1340px;
           text-align: left;
           font-size: 310px;
           padding-top: 0px;
           padding-bottom: 0px;
           font-family: Uni_Neue_bold;
           line-height: 0.8;
           letter-spacing: -10px;
           margin-top: 0;
           margin-bottom: 50px;
        }   
        
        .phone
        {
           display: none;
        }
        
        
        
        
@media(max-width: 1440px)
{
}

@media only screen and (max-device-width : 768px) and (orientation : portrait)
{
   
   .phone
     {
        display: block;
     }
        
   .titre_fake
   {
       font-size: 22vw;
       letter-spacing: -0.8vw;
       margin-top: 22vw;
       margin-bottom: 4vw;
       width: 100vw;
   }
   
   
   .big_numbers
   {
      font-size: 144vw;
      font-family: Uni_Neue_bold_italic;
      color: #ffffff4d;
      z-index: 0;
      position: fixed;
      letter-spacing: -11.5vw;
      top: 39%;
      left: -65vw;
      width: 120vw;
      transform: rotate(-48deg);
      transition: opacity .5s ease;
   }
   
   #big_5, #big_9
   {
      opacity: 0;
   }
   
   #big_5.visible, #big_9.visible
   {
      opacity: 1;
   }
   
   .avertissement, .avertissement_2
   {
      font-family: Uni_Neue_book;
      font-size: 18px;
      line-height: 1;
      background: rgba(255, 255, 255, 0.75);
      padding: 12px;
      box-sizing: border-box;
      width: 92vw;
      display: none;
   }
   
   .avertissement.visible, .avertissement_2.visible
   {
      display: block;
   }
   
   .two_icons_une
   {
      padding-right: 0;
   }
   
   .ecran_4 .titre
   {
       display: block;
   }
   
   .meal_grid.texte
    {
       display: inline-block;
       width: 33.8%;
    }
    
   .titre_une
   {
      font-size: 22vw;
       letter-spacing: -0.8vw;
       margin-top: 0;
       margin-bottom: 4vw;
       width: 100vw;
   }
   
   #legende
   {
      font-size: 16px;
       color: black;
       z-index: 100;
       position: absolute;
       font-family: Uni_Neue_book;
       line-height: 1.2;
       right: 4vw;
       top: 45vw;
       background: #ffffffdb;
       padding: 6px;
       transform-origin: top right;
       transform: scale(1.0);
       transition-duration: 0.6s;
   }
   
   #legende.zoom
   {
      transform: scale(1.4);
   }
   
   #graphWrapper
   {
      position: relative;
      width: 100%;
      overflow: hidden;
   }
   
   #graphScroll
   {
      overflow-x: auto;
      overflow-y: hidden;
      /*margin-left: var(--graph-y-width);*/
      width: calc(100% - var(--graph-y-width));
      margin-left: 45px;
   }
   
   #graphYAxis
   {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 20;
      pointer-events: none;
      background: transparent;
   }
   
   
   /* profil*/
   
   button
   {
       font-size: 18px;
       font-family: Uni_Neue_book;
       border-radius: 50%;
       width: 50px;
       height: 50px;
       background: black;
       color: white;
       border: none;
       font-weight: 600;
   }
   
   
   .profil_save
   {
      position: fixed;
      inset: 0;
      z-index: 1000;
   
      display: flex;
      align-items: center;
      justify-content: center;
   
      background: rgba(0, 0, 0, .35);
   
      opacity: 0;
      pointer-events: none;
   
      transition: opacity .25s ease;
      width: 100vw;
   }
   
   .profil_save.visible
   {
      opacity: 1;
      pointer-events: auto;
   }
   
   .profil_save_box
   {
     width: 66vw;
    height: 66vw;
    background: #ffffffe3;
    text-align: center;
    top: 9%;
    position: absolute;
    border-radius: 50%;
    padding: 19px;
    font-size: 24px;
    font-family: Uni_Neue_book;
    border: 8px solid #FF5500;
    padding-top: 24px;
    box-sizing: border-box;
    line-height: 1;
   }
   
   .profil_save_buttons
   {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-top: 25px;
   }
   
   .profil_save_buttons button
   {
      cursor: pointer;
   }
   /*end profil*/
   
   .roller.meal
   {
       width: 100%;
   }
   
   .meal
   {
      width: 100%
   }
   
   .meal_grid
   {
       width: 32%;
       display: inline-block;
   }
   
   .time_grid, .time_grid.texte
   {
      width: 62.8%;
      display: inline-block;
      margin-right: 2vw;
   }
   

   .roller.time
   {
        width: 47%;
    }
   
   .horaires
   {
       width: 47%;
       display: inline-block;
       margin-right: 1vw;
   }
   
   .roller_number
   {
       display: inline-block;
       width: auto;
   }
   
   .roller_unit_icon
   {
      width: 18px;
      display: inline-block;
      position: sticky;
      height: 34%;
      vertical-align: top;
      padding-bottom: 0px;
   }
   
   .roller_value.selected .roller_unit_icon
   {
        height: 40%;
        padding-bottom: 1px;
   }

   
   /*
   img.roller_unit_icon
   {
       width: 33px;
       height: 26px;
       display: inline-block;
       position: absolute;
       top: 37px;
   }
   */
   .sepa_tab
   {
      width: 100%;
      height: 4vw;
   }
   
   .drink_title, .time_title, .profil_title
   {
       font-family: Uni_neue_bold;
       letter-spacing: -1.2px;
       margin-bottom: 1vw;
       font-size: 20px;
       text-align: left;
   }
   
   .drink
   {
       width: 44.2vw;
       display: inline-block;
       margin-right: 2.0vw;
   }
   
   .margin_r_0
   {
      margin-right: 0; 
   }
   
   
   #debug, #false_start
   {
      position: fixed;
      z-index: 99999;
      padding: 8px 8px;
      background: #ffffffb0;
      color: black;
      font-family: monospace;
      font-size: 16px;
      line-height: 1.2;
      border-radius: 6px;
      border: 1px solid black;
      opacity: 0;
      transition: opacity .2s ease;
      z-index: 20;
      bottom: 4vw;
      width: 88vw;
      left: 4vw;
      display: grid;
      grid-template-columns: 0.7fr 1fr;
      gap: 4px 20px;
      grid-template-rows: repeat(5, auto);
      grid-auto-flow: column;
      gap: 0 0px;
   }
   
   body
   {
      width: 100vw;
      margin: 0;
      overflow: hidden;
      overflow-x: hidden;
      overflow-y: visible;
      height: 110vh;
   }
   
   #back, #back_drinks, #back_results, #back_conso_2
   {
     background-image: url(/img/arrow_left.svg);
     background-size: contain;
     background-repeat: no-repeat;
   }

   #forward, #forward_drinks, #forward_results, #forward_conso_2
   {
     background-image: url(/img/arrow_right.svg);
     background-size: contain;
     background-repeat: no-repeat;
   }

   
   .two_icons
   {
      padding-left: 2vw;
      text-align: right;
      margin-bottom: 2vw;
      display: block;
   }
   
   /*rollers*/
   .rollers
   {
      justify-content: center;
      margin-top: 40px;
      display: inline-block;
      width: 88vw;
   }
   
   .roller
   {
      width: 32.3%;
      text-align: center;
      display: inline-block;
   }
   
   .roller.small
   {
      width: 32.3%;
   }
   
   .roller.small .roller_value
   {
      height: 33px;
   }
   
   .roller.small .roller_window
   {
      height: 99px;
   }
    
   
   .roller_label
   {
      /*
      font-size: 16px;
      margin-bottom: 12px;
      */
   }
   
   .roller_window
   {
      position: relative;
      width: 100%;
      height: 99px;
      overflow: hidden;
      touch-action: none;
      cursor: grab;
   }
   
   .roller_window:active
   {
      cursor: grabbing;
   }
   
   
   /* zone centrale */
   
   .roller_window::before,
   .roller_window::after
   {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: 33px;
      z-index: 2;
      pointer-events: none;
   }
   
   .roller.small .roller_window::before,
   .roller.small  .roller_window::after
   {
      height: 33px;
   }
   
   .roller_window::before
   {
      top: 0;
      background: linear-gradient(to bottom, rgb(100 100 100 / 40%), rgb(255 255 255 / 0%));
      mix-blend-mode: multiply;
   }
   
   .roller_window::after
   {
      bottom: 0;
      background: linear-gradient(
         to top,
         rgba(100,100,100,0.4),
         rgba(255,255,255,0)
      );
      mix-blend-mode: multiply;
   }
   
   
   /* ligne de sélection */
   
   .roller_window
   {
      border-top: 1px solid rgba(0,0,0,.15);
      border-bottom: 1px solid rgba(0,0,0,.15);
      box-shadow: 1px 1px 1px 0px #00000073;
      /*background: #ffffff5e;*/
      background: linear-gradient(to bottom, transparent 0%, rgb(255 255 255 / 90%) 50%, rgb(255 255 255 / 75%) 50%, transparent 100%);
   }
   
   
   .roller_track
   {
      position: absolute;
      left: 0;
      top: 33px;
      width: 100%;
      will-change: transform;
   }
   
   .roller.small .roller_track
   {
      top: 33px;
   }
   
   .roller_value
   {
      height: 33px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      user-select: none;
      opacity: 0.3;
   }
   
   
   /* valeur centrale */
   
   .roller_value.selected
   {
      font-size: 24px;
      opacity: 1;
   }
   
   
   /* unité */
   
   .roller_unit
   {
     font-size: 16px;
     margin-left: 2px;
     vertical-align: top;
     padding-bottom: 1px;
   }
   
   .roller_value.selected .roller_unit
   {
      padding-bottom: 5px;
   }
   
   .screen
   {
      position: absolute;
      width: 100vw;
      padding-left: 4vw;
      padding-right: 4vw;
      box-sizing: border-box;
      top: 24vw;
      z-index: 50;
   }
   
   .page
   {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 10;
   }
   
   
   /* PAGE D'ACCUEIL */
   .ecran_1
   {
      transform: translateX(0);
      transition: transform .6s ease;
      height: 86vh;
   }
   
   
   /* PAGE FORMULAIRE */
   .ecran_2
   {
      transform: translateX(125%);
      transition: transform .6s ease;
      width: 100%;
      left: 0;
   }
   
   .ecran_2.slide_out
   {
      transform: translateX(-125%);
      transition: transform .6s ease;
   }
   
   
   /* SORTIE DE LA PAGE 1 */
   .ecran_1.slide_out
   {
      transform: translateX(-125%);
   }
   
   
   /* ENTRÉE DE LA PAGE 2 */
   .ecran_2.slide_in
   {
      transform: translateX(0);
      width: 100%;
   }
   
   /*page drinks*/
   .ecran_3
   {
      transform: translateX(125%);
      transition: transform .6s ease;
      width: 100%;
      left: 0;
   }
   .ecran_3.slide_in
   {
      transform: translateX(0);
      transition: transform .6s ease;
      width: 100%;
      left: 0;
   }
   
   .ecran_3.slide_out
   {
      transform: translateX(-125%);
      transition: transform .6s ease;
      
   }
   
   /*page conso_2*/
   .ecran_4
   {
      transform: translateX(125%);
      transition: transform .6s ease;
      width: 100%;
      left: 0;
      padding-top: 0;
   }
   .ecran_4.slide_in
   {
      transform: translateX(0);
      transition: transform .6s ease;
      width: 100%;
   }
   
   .ecran_4.slide_out
   {
      transform: translateX(-125%);
      transition: transform .6s ease;
   }
   
   
   /*page results*/
   .ecran_5
   {
      transform: translateX(125%);
      transition: transform .6s ease;
      width: 100%;
      left: 0;
      background: none;
   }
   
   .ecran_5.slide_in
   {
      transform: translateX(0);
      transition: transform .6s ease;
      width: 100%;
   }
   
   .ecran_5.white
    {
      background: #ffffff8a;
      transition: opacity 1s ease;
    }
    
   .titre
    {
        width: 88vw;
        text-align: left;
        font-size: 20vw;
        padding-top: 0px;
        padding-bottom: 0px;
        font-family: Uni_Neue_bold;
        line-height: 0.8;
        letter-spacing: -0.8vw;
        margin-left: 0;
        margin-top: 0;
        margin-right: 0;
        margin-bottom: 4vw;
    }
    
   .footer
   {
      height: 50vw;
   }
   
   .logo
   {
       background-image: url(/img/anim_logo_web.gif);
       background-repeat: no-repeat;
       background-size: contain;
       padding: 0px;
       background-position-y: 5px;
       width: 21vw !important;
       margin-left: 4vw;
       height: 26vw;
       z-index: 100;
      position: fixed;
      top: 4vw;

   }
   
   .main_container
   {
      position: absolute;
       z-index: 0;
       margin: 0 auto;
       padding-bottom: 0;
       
      width: 100vw;
      overflow-x: hidden;
      overflow-y: visible;
      top: 0;
      height: 100vh;
      display: block;
   }
   
   .image_fond
   {
       background-image: url(/img/fond_glossaire.jpg?v=2);
       width: 118vw;
       height: 110dvh;
       position: fixed;
       z-index: 0;
       background-repeat: no-repeat;
       top: 0;
       padding-top: env(safe-area-inset-top);
   }
   
    .texte
     {
        width: 92vw;
        line-height: 1;
        font-size: 24px;
        margin: 0 auto;
        margin-top: 2vw;
     }
     
     .bottom
     {
         position: fixed;
         bottom: 4vw;
         margin-left: 4vw;
         font-size: 20px;
     }
     
     .hello
      {
          /*margin-top: 56px;*/
          padding-top: 0px;
          padding-bottom: 0px;
          margin-top: 50px;
          
      }
      
      .end
      {
	      font-size: 25px;
	      margin-bottom: 300px;

      }
      
      .icon img
      {
      /*height: 20vw;*/
      }
      
      .icon
      {
         height: 16vw;
         width: 16vw;
         display: block;
         text-align: center;
         margin-top: 4vw;
         cursor: pointer;
         transform: scale(1);
         display: inline-block;
         margin-left: 2vw;
      }
      
      #two_icons_MW
      {
         text-align: left;
         margin-top: 0;
         margin-left: 0;
      }
      
      #man
      {
          margin-left: 0;
      }

}

@media only screen and (max-device-width : 768px) and (orientation : landscape)
{
   .profil_save_box
   {
      width: 40vw;
      height: 40vw;
      padding: 19px;
      font-size: 24px;
      border: 8px solid #FF5500;
      padding-top: 85px;
   }
   
   .ecran_4 .titre
   {
       display: block;
   }
   
   .time_grid
   {
      width: 65%;
   }
   
   #two_icons_MW
   {
       text-align: left;
       right: unset;
       left: 0vw;
       top: 35vw;
       padding: 0;
   }
   
   .main_container
   {
      width: 98vw;
      height: 120vh;
      padding-left: 4vw;
      box-sizing: border-box;
    }
    
   .texte
   {
      line-height: 1;
      font-size: 24px;
      margin: 0 auto;
      margin-top: 2vw;
      margin-left: 0;
   } 
    
   #legende
   {
       font-size: 18px;
       top: 18vw;
   }
   
   .sepa_tab
   {
      display: none;
   }
   
   .drink
   {
      width: 22vw;
      display: inline-block;
      margin-right: 0.9vw;
   }
   
   .drinks_grid
   {
      padding-left: 0;
   }
   
   .rollers
   {
      justify-content: center;
      margin-top: 40px;
      display: inline-block;
      width: 94vw;
      padding-bottom: 0;
      box-sizing: border-box;
      margin: 0 !important;
   }
   
   .screen
   {
      width: 100vw;
      padding-left: 0vw;
      padding-right: 0vw;
      top: 28vw;
   }
   
   .roller.small
   {
      width: 30%;
   }
   
   .logo 
   {
      background-size: contain;
      background-position-y: 5px;
      width: 12vw !important;
      margin-left: 4vw;
      height: 14vw;
      z-index: 100;
      position: fixed;
      top: 4vw;
      display: none;
   }
   
   .big_logo
   {
      background-image: url(/img/logo_mspp_white.svg);
      background-repeat: no-repeat;
      background-size: 110vw;
      padding-bottom: 0px;
      background-position-y: -30vw;
      width: 100vw !important;
      height: 100vh;
      z-index: 0;
      position: fixed;
      opacity: 0.3;
      background-position-x: -5vw;
      position: fixed;
   }
   
   .screen
   {
      width: 94vw;
      padding-left: 0vw;
      padding-right: 0;
      top: 4vw;
   }
   
   .two_icons
   {
      padding-left: 2vw;
      text-align: right;
      margin-bottom: 2vw;
      display: inline-block;
      right: 0;
      position: absolute;
      display: block;
   }
   
   .titre
   {
      width: 82vw;
      font-size: 15vw;
      margin-bottom: 4vw;
      display: inline-block;
      margin-left: 0;
   }
   
   .icon
   {
      height: 10vw;
      width: 10vw;
      margin-top: 2vw;
      display: inline-block;
   }


}