/*********** RESET CSS ***********/
    /* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
       */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 16px;
        font: inherit;
        vertical-align: baseline;
    }
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    html {
        text-rendering: optimizeLegibility !important;
        -webkit-font-smoothing: antialiased !important;
    }
    *, *:before, *:after {
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
    }
       
    
/* Light mode */
:root {
    --logo:url(../images/logo.svg) no-repeat;
    --primary-font-family: 'Playfair Display', Helvetica, Arial, sans-serif;
    --secondary-font-family: 'Source Sans 3', Helvetica, Arial, sans-serif;
    --primary-color: #CCAC7A; /* beige ELT */
    --secondary-color: #0C3748; /* dark blue ELT */
    --tertiary-color: #A52834; /* accent red ELT */
    --virtual-color:#2C55CA; /* generic blue virtual */
    --clinic-color:#F9810C; /* generic orange clinic */
    --paragraph-font-color:#141617; /* copy black */
    --title-font-color:#141617; /* copy black */   
    --bg-color: #ffffff; /* white */
    --bg-blue-color: #F4F8F9; /* light blue background ELT */
    --bg-grey-color: #F7F7F7; /* light gray background ELT */
    --bg-medium-grey-color: #E8E9EB;
    --grey-form: #BCBCBD;
    --webform-red : #D70000;
    --webform-red-bg :#F6E4E4;
    --webform-green : #61c663;
    --webform-green-bg :#daffda;
    --cta-ico-arrow-filter-hover:brightness(100);
    --cta-ico-arrow-filter:brightness(0);
    --cta-ico-arrow-prev-filter:brightness(0);
    /* tool link to generate filter color https://codepen.io/sosuke/pen/Pjoqqp */
    --filter : invert(6%) sepia(13%) saturate(377%) hue-rotate(155deg) brightness(98%) contrast(94%);
    --filter-hover : invert(74%) sepia(20%) saturate(672%) hue-rotate(358deg) brightness(94%) contrast(83%);
    }
/* dark mode */
@media (prefers-color-scheme: dark) { 
:root { 
    --logo:url(../images/logo-white.svg) no-repeat;
    --primary-font-family: 'Playfair Display', Helvetica, Arial, sans-serif;
    --secondary-font-family: 'Source Sans 3', Helvetica, Arial, sans-serif;
    --primary-color: #CCAC7A; /* beige ELT */
    --secondary-color: #bce2f0; /* light blue */
    --tertiary-color: #d1616c; /* light red */
    --virtual-color:#6382DB; 
    --clinic-color:#FFB064; 
    --paragraph-font-color:#e9ebec; /* copy light grey */
    --title-font-color:#e9ebec; /* copy light grey */
    --bg-color: #2B2B2B;
    --bg-blue-color: #06090a; 
    --bg-grey-color: #080808;
    --bg-medium-grey-color: #484848;
    --grey-form: #5D5D5D;
    --webform-red : #D76969;
    --webform-red-bg :#5F3939;
    --webform-green : #61c663;
    --webform-green-bg :#314b36;
    --cta-ico-filter:brightness(100);
    --cta-ico-arrow-filter-hover:brightness(0);
    --cta-ico-arrow-filter:brightness(0);
    --cta-ico-arrow-prev-filter:brightness(100);
    /* tool link to generate filter color https://codepen.io/sosuke/pen/Pjoqqp */
    /*--filter : invert(100%) sepia(1%) saturate(7098%) hue-rotate(176deg) brightness(93%) contrast(99%);*/
    --filter : invert(100%) sepia(19%) saturate(319%) hue-rotate(170deg) brightness(95%) contrast(95%);
    --filter-hover : invert(74%) sepia(20%) saturate(672%) hue-rotate(358deg) brightness(94%) contrast(83%);
    }
}
    img:not([src*=".svg"]) {
     filter: var(--image-filter);
    }
    
/***** MAIN CSS *****/
            body {
                background-color: var(--bg-grey-color); 
                font-family:var(--secondary-font-family);
                font-size: 16px; /* VALEUR REFERENCE */ 
                overflow-x: hidden;
            }
            p {
                font-family:var(--secondary-font-family);
                font-size: 1.125em; /* equiv 18px */
                line-height: 1.5;
                font-weight: normal;
                color:var(--paragraph-font-color);
            }
            .fweight-300 {font-weight:300 !important;}
            .fweight-600 {font-weight:600 !important;}
            .fweight-700 {font-weight:700 !important;}
            .fcolor-primary {color:var(--primary-color);  }
            .fcolor-secondary {color:var(--secondary-color);}
            .fcolor-grey {color:var(--paragraph-font-color);}
            .fcolor-darkgrey {color:var(--title-font-color);}
            .fsmaller {font-size: 0.875rem;} /* equiv 14px */
            .color-virtual {color:var(--virtual-color);}
            .color-clinic {color:var(--clinic-color);}
            .icons-svg-filter { filter: var(--svg-fill-color);}
            .align-center {text-align:center;}
            .align-left {text-align:left;}
            .align-right {text-align:right;}
            .uppercase {text-transform: uppercase;}
            h1.underline, h2.underline, h3.underline, p.underline {
                position: relative;
                margin-bottom: 15px;
                padding-bottom: 5px;
            }
            .underline::after {
                content: '';
                width: 95px;
                height: 5px;
                background-color: var(--primary-color);
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                text-align: center;
                z-index: 1;
            }
            .text-center{
                text-align: center;
            }
            .text-center::after {
            }
            .underline.text-center::after {           
                width: 142px;
                height: 6px;
                bottom: -6px;
                left: 50%;
                margin-left: -71px;
            }
            h1 {
                font-family:var(--primary-font-family);
                font-size: 2.5em; /* equiv 40px */
                line-height: 1;
                color:var(--title-font-color);
                font-weight :600 ;
            }
            h2 {
                font-family:var(--primary-font-family);
                font-size: 1.9em; /* equiv 16px */
                color:var(--title-font-color);
                font-weight :600 ; 
            }
            h3 { 
                font-family:var(--tertiary-font--family);
                font-size: 1.13em; /* equiv 18px */
                color:var(--paragraph-font-color);
            }
            h4 {
                font-family:var(--secondary-font-family);
                font-size: 1.125rem; /* equiv 18px */
            }
            hr {
                height: 1px;
                color:var(--grey-form);
                background-color: var(--grey-form);
                border: 0;
                padding:0;
            }
            a {
                text-decoration: underline;
                color:var(--paragraph-font-color);
            }
            /***** MAIN CONTENT *****/
            .pagewrapper{
                position: relative;
                overflow-x: hidden;
            }
            #container-fluid {
                margin:0 auto;
                width:100%;
                overflow-x: hidden;
                overflow-y: auto;
            }
            #content {
                max-width:600px;
                margin: 0 auto;
            }
            section {
                max-width:600px;
                margin-left: auto;
                margin-right: auto;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-flex-wrap: wrap;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                -webkit-justify-content: space-around;
                -ms-flex-pack: space-around;
                justify-content: space-around;
                flex-direction: column;
                -ms-flex-direction: column;
                -webkit-flex-direction: column;
            }
           
            /*****  HAMBURGER MENU*****/
            
            .menu-wrapper .menu {
                position: absolute;
                right: 20px;
                top: 20px ;
                z-index: 11;
                width: 30px;
                height: 30px;
                cursor: pointer;
                
            }
            
            .menu-wrapper .hamburger {                            
                position: absolute;
                top: 10px;
                left: 10px;
                width: 30px;
                height: 3px;
                border-radius: 10px;
                background: var(--paragraph-font-color);
                opacity:40%;
                display: block;
                -webkit-transform-origin: center;
                transform-origin: center;
                -webkit-transition: .5s ease-in-out;
                transition: .5s ease-in-out;
            }
            
            .menu-wrapper .hamburger:after, .menu-wrapper .hamburger:before {
                -webkit-transition: .5s ease-in-out;
                transition: .5s ease-in-out;
                content: "";
                position: absolute;
                display: block;
                width: 100%;
                height: 100%;
                border-radius: 10px;
                height: 3px;
                background: var(--paragraph-font-color);                
            }            
            .menu-wrapper .hamburger:before { top: -10px; }            
            .menu-wrapper .hamburger:after { bottom: -10px; }          
            
            
            .menu-wrapper.active  .menu {
                position: fixed;
            }
            .menu-wrapper.active .menu .hamburger {
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
                background: var(--paragraph-font-color);
                
            }
            
            .menu-wrapper.active  .menu .hamburger:after {
                -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
                background: var(--paragraph-font-color);
                bottom: 0;                
            }
            
            .menu-wrapper.active  .menu .hamburger:before {
                -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
                top: 0;
                
            }
            
            
            .menu-wrapper .menu-items {
                width: 100vw;
                height: 100vh;
                position: fixed;
                top: 0px;
                right: 0px;
                z-index: -1;
                background: var(--bg-medium-grey-color);
                -webkit-transition: .25s 0s ease-in-out;
                transition: .25s 0s ease-in-out;
                opacity: 0;
            }
            
            
            .menu-wrapper.active .menu-items{
                z-index: 10;
                opacity: 1;
            }
            .menu-wrapper.active  .menu + ul { 
                -webkit-transition: 1s ;
                transition: 1s ;
                opacity: 1;
             }
            
            .menu-wrapper ul {
                position: absolute;
                width: 100%;
                padding: 90px 20px;
                text-align: center;
            }
            
            .menu-wrapper ul li{
                border-bottom: 1px solid var(--paragraph-font-color);
            }
            
            .menu-wrapper a {
                margin-bottom: 0.2em;
                display: block;
                font-family: var(--primary-font-family);
                color: var(--paragraph-font-color);
                text-decoration: none;
                font-size: 1.8em;
                font-weight: 700;
                padding: 15px;
            }
  
            /*****  SECTION INTRO *****/
            .intro {
                padding: 1.5em 1.2em 0.8em;
                background: var(--bg-blue-color);  
                min-height: 230px;
            }
            .intro p{
                color: var(--title-font-color);
            }
            /*****  SECTION 1 FORMULAIRE *****/
            .form-structure {
                background-color: var(--bg-color);
                min-width: 335px;
                padding: 20px 20px 30px;
                display: flex;
                min-height: 73vh;
                align-items: center;
                justify-content: center;
            }
            
            /*****  SECTION FOOTER *****/
            footer {
                width: 100%;
                margin-left: auto;
                margin-right: auto;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-flex-wrap: wrap;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                -webkit-justify-content: space-between;
                -ms-flex-pack: space-between;
                justify-content: space-between;
                flex-direction: column;
                -ms-flex-direction: column;
                -webkit-flex-direction: column;
                z-index: 999999;
                background: var(--bg-grey-color);
                position: relative;
            }
            .menu-wrapper.active + #container-fluid  + footer{
                position: fixed;
                bottom: 0;
            }
            .footer-logo{
                background: var(--logo) center center;
                margin: 0rem 15px;
                min-height: 70px;
                max-width: 220px;
                width: 220px;
                justify-content: center;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                flex: 1;
                flex-direction: column;
                text-align: center;
                margin-bottom: 25px;
            }
        
            .footer-copy {
                margin: 0 auto;
                width: 350px;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                flex: 1;
            }
            .footer-copy p, .footer-copy a{
                color:var(--paragraph-font-color);
                font-size: 0.6875rem; /* equiv 11px */
            }
            
            .footer-copy p{
                margin-bottom: 20px;
            }
            /***** MOBILE FIRST *****/
            /* mixin for Mobiles/Tablet Portrait up : max-width 600px; */
            
            @media screen and (max-width : 280px) {
                .footer-copy{
                    width: 200px;
                }
            }
            /* mixin for 601 and up; */
            @media screen and (min-width : 601px) {
                section, #content {
                    max-width: inherit;
                }
            }
            
            /* mixin for 1023 and up; */
            @media screen and (min-width : 1023px) {
                .menu-wrapper .menu-items {
                    width: 50vw;
                }
                #content {
                    max-width: initial;
                }
                section {
                    max-width:initial;
                }
                .intro {
                    padding: 1.5rem 0;
                }
                
                .intro p {
                    font-size:1.125rem; /* equiv 18px */
                    max-width: 600px;
                    
                }
                .menu-wrapper.active + #container-fluid + footer {
                    position: relative;
                    
                }
                footer {          
                    border-top: 3px solid #FFF;          
                    flex-direction: row;
                    -ms-flex-direction: row;
                    -webkit-flex-direction: row;
                }
                .footer-copy p{
                    margin: 20px;
                }
                
            }
            /* mixin for Tablet Landscape up; */
            @media screen and (min-width : 601px) and (max-width : 900px) {
                
            }
            /* mixin for Desktop up; */
            @media screen and (min-width : 901px) and (max-width : 1200px) {
                .menu-wrapper .hamburger:after, .menu-wrapper .hamburger:before {
                    height: 2px;                  
                }
              
            }
            /* mixin for Big Desktop up */
            @media screen and (min-width : 1201px) and (max-width : 2500px) {
                .menu-wrapper .hamburger:after, .menu-wrapper .hamburger:before {
                    height: 2px;                  
                }
            }