/*********** 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;
    }
    * {
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
    }


/***** Personnalisation des Variables ELT *****/
/* 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;
    --image-filter: grayscale(0%);
    --svg-fill-color:invert(0%);
    --icon-filter-color:#0C3748; /* dark blue ELT */
    }
/* 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;
    --image-filter: grayscale(30%);
    --svg-fill-color: invert(100%);
    }
}
    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 */ 
            }
            p {
                font-family:var(--secondary-font-family);
                font-size: 1rem; /* equiv 16px */
                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: 20px;
                padding-bottom: 15px;
            }
            .underline::after {
                content: '';
                width: 175px;
                height: 5px;
                background-color: var(--primary-color);
                position: absolute;
                bottom: 0;
                margin-left: auto;
                margin-right: auto;
                left: 0;
                right: 0;
                text-align: center;
                z-index: 1;
            }
            h1 {
                font-family:var(--primary-font-family);
                font-size: 2.0625rem; /* equiv 33px */
                font-weight: 700;
                line-height: 1;
                color:var(--title-font-color);
            }
            h2 {
                font-family:var(--primary-font-family);
                font-size: 1rem; /* equiv 16px */
                font-weight: 600;
            }
            h3 { 
                font-family:var(--secondary-font-family);
                font-size: 1.25rem; /* equiv 20px */
                line-height: 1.2;
            }
            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 *****/
            #container-fluid {
                margin:0 auto;
                width:100%;
                overflow:auto;
            }

            /*****  HEADER *****/
            header {
                width:100%;
                z-index: 600;
                position:fixed;
                background-color: var(--bg-grey-color);
                box-shadow: 0px 1px 30px rgba(112, 112, 112, 0.2);
                -webkit-box-shadow: 0px 1px 30px rgba(112, 112, 112, 0.2);
                -moz-box-shadow: 0px 1px 30px rgba(112, 112, 112, 0.2); 
            }
            .header-info {
                max-width:600px;
                height:80px;
                position:relative;
                margin:0 auto;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-flex-direction: row;
                -ms-flex-direction: row;
                flex-direction: row;
                -webkit-flex-wrap: nowrap;
                -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
                -webkit-justify-content: space-between;
                -ms-flex-pack: space-between;
                justify-content: space-between;
            }
            .header-info .logo {
                min-width:230px;
                display: block;
                background: var(--logo);
            }
            nav{
                max-width:150px;
                margin:auto 0.5rem auto 0;
                position:relative;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-flex-direction: row;
                -ms-flex-direction: row;
                flex-direction: row;
                -webkit-flex-wrap: nowrap;
                -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
                align-items:center;
                -webkit-align-items:center;
                -ms-align-items:center;
                -webkit-justify-content: flex-end;
                -ms-flex-pack: flex-end;
                justify-content: flex-end;
            }
            .cta-contact { 
                background-color:var(--bg-medium-grey-color);
                border:1px solid var(--bg-medium-grey-color);  
                padding: 1.1rem 1rem;
            }
            .cta-contact a{ 
                text-decoration: none;
                font-size: 1.125rem; /* equiv 18px */  
                display: inline;
            }
            img.icon-phone {
                display: inline-block !important;
                vertical-align: middle !important;
            }
            .cta-contact p{
                display: none;
                vertical-align: middle;
            }
            .cta-contact:hover {
                border:1px solid var(--title-font-color);
                transition: all 300ms ease 0s;
                -webkit-transition:all 300ms ease 0s;
            }
            .cta-language {
                background-color:var(--bg-grey-color);
                margin:0 0 0 0.8rem;
                border:1px solid var(--title-font-color); 
                padding: 1.12rem 1rem;
            }
            .cta-language p, .cta-language a{ 
                color:var(--title-font-color);
                text-decoration: none;
                font-size: 1.125rem; /* equiv 18px */
                text-transform: uppercase;
                text-align:center;
                padding:0;
            }
            .cta-language:hover {
                border:2px solid var(--title-font-color);
                transition: all 200ms ease 0s;
                -webkit-transition:all 200ms ease 0s;
            }


            /***** MOBILE FIRST *****/
            /* mixin for Mobiles/Tablet Portrait up : max-width 600px; */

            /* mixin for Tablet Landscape up; */
            @media screen and (min-width : 601px) and (max-width : 900px) {
                .header-info {
                    max-width:900px;
                }
                .header-info img.logo {
                    max-width:300px;
                }
                nav{
                    min-width:400px;
                    margin:auto 0.5rem auto 0;
                }
            }

            /* mixin for Desktop up; */
            @media screen and (min-width : 901px) and (max-width : 1200px) {
                .header-info { 
                    max-width:1200px;
                }
                .header-info img.logo {
                    max-width:300px;
                }
                nav{
                    min-width:550px;
                    margin:auto 0.5rem auto 0;
                }
                .cta-contact {
                    padding:1rem 1.8rem;
                }
                .cta-contact p{
                    display: inline-block;
                    vertical-align: middle;
                    font-size: 1.125rem; /* equiv 18px */
                    padding:0 0 0.1rem 1rem;
                }
                .cta-contact:hover img {
                    transform:translateX(5px);
                }
                .cta-language p, .cta-language a{ 
                    font-size:1rem; /* 18px */
                }
                h1 {
                    font-size: 2.5rem; /* equiv 40px */
                }
            }

            /* mixin for Big Desktop up */
            @media screen and (min-width : 1201px) and (max-width : 2500px) {
                .header-info { 
                    max-width:1200px;
                }
                .header-info img.logo {
                    max-width:350px;
                }
                nav{
                    min-width:520px;
                }
                .cta-contact  {
                    padding:1rem;
                }
                .cta-contact p{
                    display: inline-block;
                    vertical-align: middle;
                    font-size: 1.125rem; /* equiv 18px */
                    padding:0 0 0.1rem 1rem;
                }
                .cta-contact:hover img {
                    transform:translateX(5px);
                }
                .cta-language p, .cta-language a{ 
                    font-size:1rem;
                }
                h1 {
                    font-size: 2.5rem; /* equiv 40px */
                }
            }


            /**********  MAIN CONTENT  **********/
            #content {
                max-width:600px;
                padding: 80px 0 0 0;
                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;
            }
            .two-columns {
                width:100%;
                margin-left:auto;
                margin-right: auto;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                -webkit-flex-wrap: nowrap;
                -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
            }

            /*****  SECTION INTRO *****/
            #intro {
                padding: 1rem 1rem 1.5rem;
            }
            /* ajustement step 3*/
            #intro-step3 {
                padding: 1rem 1rem 0rem;
            }
            #intro p{
                color: var(--title-font-color);
            }


            
            /*****  SECTION STEPS Bandeau *****/
            #steps {
                background-color: var(--bg-medium-grey-color);
                min-width: 335px;
                margin: 0 20px;
                padding: 20px;
            }
            /* version mobile only */
            #steps-mobile{
                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: row;
                -ms-flex-direction: row;
                -webkit-flex-direction: row;
                position: relative;
            }
            #steps-mobile.second-step:before{
                content: '';
                width: 50%;
                height: 3px;
                background-color: var(--secondary-color);
                position: absolute;
                top: 19px;
                z-index: 1;
            }
            #steps-mobile.third-step:before{
                content: '';
                width: 100%;
                height: 3px;
                background-color: var(--secondary-color);
                position: absolute;
                top: 19px;
                z-index: 1;
            }
            #steps-mobile::after{
                content: '';
                width: 100%;
                height: 3px;
                background: var(--bg-color);
                position: absolute;
                top: 19px;
            }
            h2.step-title-mobile {
                text-align: center;
                padding:1.2em 0 0;
            }
            #steps-desktop {
                display: none;
            }
            .dot {
                height: 40px;
                width: 40px;
                border-radius: 50%;
                display: inline-block;
                text-align: center;
                line-height: 35px;
                z-index:20;
            }
            .step-active{
                background-color: var(--secondary-color);
                color:var(--bg-color);
                border:2px solid var(--bg-grey-color);
            }
            .step-noactive{
                background-color: var(--bg-color);
                color:var(--title-font-color);
                border:1px solid var(--grey-form);
            }

            /*****  SECTION 1 FORMULAIRE *****/
            #form-structure {
                background-color: var(--bg-color);
                min-width: 335px;
                margin: 0 20px;
                padding: 20px;
            }

            /*****  SECTION FOOTER *****/
            footer {
                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-between;
                -ms-flex-pack: space-between;
                justify-content: space-between;
                flex-direction: column;
                -ms-flex-direction: column;
                -webkit-flex-direction: column;
            }
            .footer-copy{
                margin: 2rem auto;
                width: 89%;
            }
            .footer-copy p, .footer-copy a{
                color:var(--paragraph-font-color);
                font-size: 0.6875rem; /* equiv 11px */
            }

            /***** MOBILE FIRST *****/
            /* mixin for Mobiles/Tablet Portrait up : max-width 600px; */

            /* mixin for Tablet Landscape up; */
            @media screen and (min-width : 601px) and (max-width : 900px) {
                #content {
                    max-width: 900px;
                }
                section {
                    max-width:900px;
                }
                .two-columns {
                    -webkit-flex-direction: row;
                    -ms-flex-direction: row;
                    flex-direction: row;
                }
                #intro, #intro-step3 {
                    padding: 1rem 0;
                }
                #intro p {
                    max-width: 600px;
                    margin: auto;
                }
                 #steps-desktop {
                    display: none;
                }
                footer {
                    max-width:900px;
                    flex-direction: row;
                    -ms-flex-direction: row;
                    -webkit-flex-direction: row;
                }
                .footer-copy {
                    width:94%;
                }
            }

            /* mixin for Desktop up; */
            @media screen and (min-width : 901px) and (max-width : 1200px) {
                #content {
                    max-width: 1200px;
                }
                section {
                    max-width:1200px;
                    flex-direction: row;
                    -ms-flex-direction: row;
                    -webkit-flex-direction: row;
                }
                .two-columns {
                    -webkit-flex-direction: row;
                    -ms-flex-direction: row;
                    flex-direction: row;
                }
                #intro {
                    padding: 1.5rem 0;
                }
                #intro-step3 {
                    padding: 1.5rem 0 0;
                }
                #intro p {
                    font-size:1.125rem; /* equiv 18px */
                    max-width: 600px;
                    margin: auto;
                }
                #steps {
                    max-width: 1200px;
                }
                #steps-mobile, h2.step-title-mobile {
                    display: none;
                }
                #steps-desktop{
                    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: row;
                    -ms-flex-direction: row;
                    -webkit-flex-direction: row;
                }
                #steps-desktop h2{
                    display: inline;
                    padding: 0 0 0 10px;
                }
                #form-structure {
                    max-width: 1200px;
                }
                footer {
                    max-width:1200px;
                    flex-direction: row;
                    -ms-flex-direction: row;
                    -webkit-flex-direction: row;
                }
                .footer-copy {
                    width:95%;
                }
            }

            /* mixin for Big Desktop up */
            @media screen and (min-width : 1201px) and (max-width : 2500px) {
                #content {
                    max-width: 1200px;
                }
                #content-step2 {
                    max-width:1200px;
                     flex-direction: row;
                    -ms-flex-direction: row;
                    -webkit-flex-direction: row;
                }
                section {
                    max-width:1920px;
                    flex-direction: row;
                    -ms-flex-direction: row;
                    -webkit-flex-direction: row;
                }
                .two-columns {
                    -webkit-flex-direction: row;
                    -ms-flex-direction: row;
                    flex-direction: row;
                }
                #intro{
                    padding: 1.5rem 0;
                }
                #intro-step3 {
                    padding: 1.5rem 0 0;
                }
                #intro p {
                    font-size:1.125rem; /* equiv 18px */
                    max-width: 600px;
                    min-width: 600px;
                    margin: auto;
                }
                #steps {
                    max-width: 1200px;
                    margin: 0;
                }
                 #steps-mobile, h2.step-title-mobile {
                    display: none;
                }
                #steps-desktop{
                    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: row;
                    -ms-flex-direction: row;
                    -webkit-flex-direction: row;
                }
                #steps-desktop h2{
                    display: inline;
                    padding: 0 0 0 10px;
                }
                #form-structure {
                    max-width: 1200px;
                    margin: 0;
                }
                footer {
                    max-width:1200px;
                    flex-direction: row;
                    -ms-flex-direction: row;
                    -webkit-flex-direction: row;
                }
                .footer-copy {
                    width:96%;
                }
            }