/* GENERAL */
:root {
    --white: #ffffff;
    --text: #2d2d2d;
    --dk-red: #851C1A;
    --lt-grey: #f2f2f2;
    --grey: #707070;
    --medium-grey:#b9b9b9;
    --lt-red: rgba(133,28,26,0.2);
    --s-red: rgba(133,28,26,0.35);
    --sans-serif: helvetica, arial, sans-serif;
    --dk-bg:#2d2d2d;
    --space: 1.5em;
    --lt-green: rgba(14,136,31,0.2);
    --s-green: rgba(14,136,31,0.35);
    --green: #28a745;
    --warning: rgba(255,193,7);
    --lt-warning:rgba(255, 193, 7, 0.3);
    --danger: rgba(240,9,32);
    --lt-danger:rgba(240,9,32,.3);
}

@keyframes example {
    0% {
        background-color: rgba(243, 71, 69, 0);
        color:black;
    }


    100% {
        background-color: rgba(243, 71, 69, 0.25);
        color: #851C1A;
    }
}

.vva {
    margin: 10px;
    padding: 10px;
    text-align: center;
    border-radius: 1rem;
    animation-name: example;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

html, input, body, textarea{
    font-family: var(--sans-serif);
    font-size: 16px;
    line-height: 1.5em;
}  
.siteWrapper{
    margin: 1em;
}
a, a:link, a:visited{
    color: var(--dk-red);
    font-weight: bold;
    transition: all .2s ease-in-out;
}
a:hover{
    color: rgba(150, 49, 48, 0.7);
    transition: all .2s ease-in-out;
} 
a.none{text-decoration: none;}

.relative{position: relative;}
.dn{display: none;}
.smalltext{
    font-size: 0.7em;
    color: var(--grey);
}
.stxt{font-size: 14px;}
.btxt{font-size: 18px;}
.bbtxt{font-size: 3em;}
.italic{font-style: italic;}

.sous{text-decoration: underline;}

.grey{color: var(--grey);}
.txt{color: var(--text);}
.red, .e-client .fa-heart{color: var(--dk-red)}

.tc{text-align: center;}
.tr{text-align: right;}
.txtl{text-align: left;}

.w-100 {width:100%;}
.mp{margin: 0 auto;}
.mt{margin-top: var(--space);}
.ml{margin-left: var(--space);}
.mb{margin-bottom:var(--space);}
.pr{padding-right: var(--space);}

.larg-max img, .devis-container img, .acceuildevis img{
    width: 100%;
    max-width: 100%;
}
.larg-max, .vcon{
    max-width: 1280px;
    margin: 0 auto;
}

.vcon img{width: 100%;}
.number{font-size: 10px;}

.footer{
    text-align: center;
    padding:3em 0 1em 0;
}
.footer, .footer a{
    font-size:11px;
    color: var(--grey);
    font-weight: normal;
}
.devis-container{
    max-width: 1280px;
    margin: 0 auto;
}
.createAccount, .LoginPanel{
    margin: 0 auto;
    padding:1em;
    float: none;
    width: unset;
}
.dnnFormItem{margin-bottom:0.7em}

.alert{
    padding:.75em;
    border:1px solid var(--grey);
    background-color: var(--lt-grey);
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    margin: .5em auto;
}
.alert i{font-size:2em;transition: all .2s ease-in-out;}
.alert.warning{border-color: var(--warning);background-color: var(--lt-warning);}
.alert.warning i{color: var(--warning);}
.alert.danger{border-color: var(--danger); background-color: var(--lt-danger);}
.alert.danger i{color: var(--danger);}
.alert.success{border-color: var(--green);background-color: var(--lt-green);}
.alert.success i{color:var(--green)}
.alert i:hover{color:var(--text);cursor: pointer;}
.alert > span{flex-grow: 1;}


/* FLEX LAYOUT */
.flex-no-wrap{display:flex;align-items:center;}
.flex-grow{flex-grow: 1;}
.flex-c-gap{column-gap: .75em;}
.flex-wrap-center{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap:.5em;
}


@media screen and (max-width:700px) {
    .fblock700{display: block;}
    .fblock700 > .ml{margin-left:0;}
}


/* GRID LAYOUT */

.grid1, .grid2-1{
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    row-gap: 0.75em;
    margin-bottom: 30px;
    align-items: center;
}
.grid3{
    display: grid;
    grid-template-columns: auto 1fr 30px;
    row-gap: 0.75em;
    align-items: center;
}
.grid4{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    row-gap: 0.75em;
    margin-bottom: 30px;
}
.grid3-1{
    max-height: 300px;
    overflow-y: auto;
    background-color: var(--s-red);
}
.grid3-2{
    row-gap: 0.5em;
}
.grid2{
    display: grid;
    grid-template-columns: auto auto;
    row-gap: 0.7em;
    margin: 0 auto;
    position: relative ;
}
.gridLogin{
    display: grid;
    grid-template-columns: auto;
    row-gap: 0.2em;
    margin-bottom:0.7em;
    align-items: center;
}
.gridContact{
    display: grid;
    grid-template-columns:1fr;
}
.gridContact >img{display:none;}

.gridContact2{
    display: grid;
    grid-template-columns: auto;
    row-gap: 0.7em;
}

.grid-vva{
    display: grid;
    grid-template-columns: 1fr;
}
.grid-vva .vva{
    border:var(--dk-red) 2px solid;
    animation: none;
    display: flex;
    align-items: center;
}
.grid-vva .vva i{
    color:var(--dk-red);
    font-size:1.5em;
}
.grid-vva .vva .flex{
    align-items: center;
    justify-content: center;
    margin-bottom:1em;
    column-gap: 1em;
}

.gr-26{ 
    grid-row: 2 / span 6;
}
.gr-94{ 
    grid-row: 9 / span 4;
}
.gr-155{ 
    grid-row: 15 / span 5;
}
.gr-217{ 
    grid-row: 21 / span 7;
}
.gr-299{ 
    grid-row: 29 / span 9;
}
.gr-388{
    grid-row: 38 / span 8;
}
.gr-474{ 
    grid-row: 47 / span 4;
}
.gc-12{
    grid-column: 1 / span 2;
}
.gc-21{
    grid-column: 2 / span 1;
}
.gc-22{
    grid-column: 2 /span 2;
}
.gc-3100{
    grid-column: 3 / span 1;
}
.gc-130{
    grid-column: 1 / span 3;
}
.gc-140{
    grid-column: 1 / span 4;
}

.info, .quest, .devis, .adhe{
    margin: 0 2em;
}


/* PARAGRAPHES */
.p-rouge{
    color: var(--dk-red);
    font-size: 0.8em;
    padding: 0.5em;
}
.p-un{
    font-size: 1.45em;
    line-height: 1.2em;
}
.p-deux{
    font-size: 20px;
    margin-bottom: 30px;
}

.menu a p + p{
    font-weight: normal;
    margin-top: 0;
}
.menu a p{
    color: var(--text);
    margin: 1.5em 0;
}

.txt-rouge{
    color: var(--dk-red);
    font-weight: bold;
}

.txt-red{
    color: var(--dk-red);
}

.bold{
    font-weight: bold;
}

.grid2-1 .p-deux:first-child{
    margin: 1em 0;
}

.grid2-1 .p-deux:nth-child(2){
    margin: 0 0 1em 0;
}

.grid2-1 .mtb{
    margin: 1em 0 0 0;
}

.grid2-1 p{
    margin: 0;
}

.vcon .grid3 p{
    margin: 0;
}

.vatt .grid3 p{
    margin: 1em auto !important;
}

.vcot .txt{
    color: var(--text);
}



    /* INPUT ET CASES */
    .form-control, .custom-select, .dnnLoginService input[type="text"], .dnnLoginService input[type="password"]{
        border-radius:1.5rem;
        border: 1px var(--medium-grey) solid;
        padding: 0.25em 0.5em;
        margin: 0;
        font-size: 16px;
        box-sizing: border-box;
    }

    
    .custom-select{
        height: 34px;
        font-size: 100%;;
    }

    .grid2-1 select{
        margin: auto 7em;
        text-align: center;
    }

    .grid2-1 .tt-l{
        margin: 0;
        text-align: left;
    }

    .grid2-1 .rougeTitle{
        margin: 0 auto;
        text-align: center;
    }

    textarea{
        border-radius:0.5em;
        border: 1px var(--medium-grey) solid;
        padding: 0.25em 0.5em;
        margin:0 0.5em;
        box-sizing: border-box;
    }

    .grid2-1 input{
        margin: 0 auto;
    }

    .pl{
        margin: auto 5em !important;
    }

    .pp{
        width: 50px;
        margin: 0 !important;
    }

    .questionnairemrp input[type=text] {
        margin: 0 1em;
    }

    .relative > input.form-control{ /*rattrapage de la largeur à cause de la liste déroulante */
        width:100%;
    }
    .listeVille{
        position: absolute;
        top: 36px;
        z-index:100;
        background-color: #ffffff;
        border: 1px solid var(--medium-grey);
        padding:0;
        list-style: none;
        margin: 0;
        left:17px;
        border-radius:.5em;
        font-size: 90%;
        line-height: 1.1em;
    }
    .listeVille li{
        padding:.5em 1em;
        transition: all .2s ease-in-out;
    }

    .listeVille li:hover{
        background-color: #e0e0e6;
        cursor: pointer;
    }

    




/* BOUTON */
.btn, .dnnPrimaryAction, .dnnFormItem input[type="submit"], a.dnnPrimaryAction{
    color:var(--lt-grey);
    background: var(--dk-red);
    padding: 15px 20px;
    border-radius: 1rem;
    font-weight: bold;
    font-size:100%;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    transition: all 0.2s ease-in-out;
}
.dnnPrimaryAction, .dnnFormItem input[type="submit"], a.dnnPrimaryAction{
    padding: 6px 15px;
}

.btn:hover, .dnnPrimaryAction:hover, .dnnFormItem input[type="submit"]:hover, a.dnnPrimaryAction:hover{
    background: rgba(150, 49, 48, 0.7);
    color: var(--lt-grey);
}

.grid2-1 .btn, .grid3-2 .btn{
    padding: 0.5em 4em;
    font-weight: inherit;
    font-size: 18px;
}

.dnnFormItem button, .dnnFormItem input[type="button"], .dnnFormItem input[type="reset"], .dnnSecondaryAction, a.dnnSecondaryAction, ul.dnnAdminTabNav li a, .dnnLogin .LoginTabGroup span {
    background: var(--medium-grey);
    padding: 6px 15px;
    border-radius: 1rem;
    -webkit-box-shadow: none;
    box-shadow: none;
    text-shadow: none;
    color: var(--text);
    transition: all 0.2s ease-in-out
}

.dnnFormItem button:hover, .dnnFormItem input[type="button"]:hover, .dnnFormItem input[type="reset"]:hover, .dnnSecondaryAction:hover, a.dnnSecondaryAction:hover, ul.dnnAdminTabNav li a:hover, .dnnLogin .LoginTabGroup span:hover {
    background: var(--lt-grey);
    color: var(--text);
}







    /* LIENS */
    

    .menu > a{
        margin-bottom: 50px;
    }

    a.greyTitle, a:link.greyTitle{
        color: var(--white);
        font-weight: inherit;
    }

    a.greyTitle:hover{
        background-color: var(--dk-red);
        color: var(--white);
    }

    a.rougeTitle, a:link.rougeTitle{
        color: var(--dk-red);
        font-weight: inherit;
    }

    a.rougeTitle:hover{
        background-color: rgba(150, 49, 48, 0.7);
        color: var(--white);
    }

    a.redTitle, a.rougeTitle:visited{
        color: var(--white);
    }

    /*.vcon a{
        color: var(--text);
    }*/

    .vcon a:hover, .vatt a:hover .fal, .vatt .grey{
        color: var(--grey);
    }

    .vcot a.txt-red{
        color: var(--dk-red);
    }

    .vcot a:hover.txt-red{
        color: rgba(150, 49, 48, 0.7);
    }





/* TITRES ET FOND */
.redTitle{
    color:var(--lt-grey);
    background-color: var(--dk-red);
    padding: 10px;
    border-radius: 1rem;
    font-weight: bold;
    display: inline-block;
}

.greyTitle{
    color:var(--white);
    background-color: var(--medium-grey);
    padding: 10px;
    border-radius: 1rem;
    display: inline-block;
    text-align: center;
    font-size: 1.3em;
    position: relative;
}

.rougeTitle{
    color:var(--dk-red);
    background-color: rgba(150, 49, 48, 0.35);
    padding: 10px;
    border-radius: 1rem;
    font-weight: bold;
    display: inline-block;
}

.fondrouge, .fond-rouge{
    color:var(--dk-red);
    background-color: rgba(243, 71, 69, 0.15); 
    padding: 10px;
    border-radius: 1rem;
    grid-column-end: span 2;
    display: flex;
    align-items: center;
}

.fondgris{
    color:var(--text);
    background-color: rgba(112, 112, 112, 0.10); 
    padding: 10px;
    border-radius: 3em;
    grid-column-end: span 2;
    align-items: center;
}

.fondrouge > i, .fond-rouge > i{
    font-size: 2em;
    color: var(--dk-red);
    margin-right:10px;
}

.pti{
    display: flex;
    align-items: center;
    gap: 1.5em;
}

.pti > i{
    font-size: 2em;
}



    /* ICONES ET IMAGE*/
    .devis-container .fa, .devis-container .fab, .devis-container .fad, .devis-container .fal, .devis-container .far, .devis-container .fas{
        display: none;
    }

    .e-devis .fa, .e-devis .fab, .e-devis .fad, .e-devis .fal, .e-devis .far, .e-devis .fas{
        display: none;
    }

    .e-client .fa, .e-client .fab, .e-client .fal, .e-client .far{
        display: none;
    }

    .img{
        width: 140px;
        height: 140px;
        margin: 0 auto;
    }

    .vcon .img{
        width: 5em;
        height: 5em;
        margin: 0 auto;
    }

    .menu .fal, .e-client .fal{
        color: var(--text);
    }

    .fas.fa-mouse-pointer, .fas.fa-pen-square, .fad.fa-phone-square-alt, .fad.fa-comments-alt, .fad.fa-file-alt, .fad.fa-envelope{
        font-size: 1.1em;
        margin-left: 0.2em;
    }

    .fclient .fas.fa-pen-square{
        color: #a90d0a;
    }

    .vcon .fal.fa-file-alt, .fal.fa-check-square, .fal.fa-square, .vcot .fal.fa-file-alt.pi{
        font-size: 1.1em;
    }

    .vatt .fal.fa-file-alt{
        font-size: 5em;
    }

    .vatt .fas.fa-phone-square-alt{
        font-size: 1.5em;
    }


/* FLEX */

.flex{
    display: flex;
    flex-wrap: wrap;
}
.flexcol{
    flex-direction: column;
}
.e-client{display: flex;}
.e-client > .flex{flex-direction: column;flex-grow: 1;padding-left:1.5em;}
.flex.com strong{width:175px;}
.e-client .flex .flex .edit{flex-grow:1;text-align: right;}
.e-client .edit i{font-size: 1.4em;}
.e-client .flex .flex{align-items: center;}
.e-client > .flex > span > i{font-size: 1em;}
.e-client > .flex > span > i:first-of-type{padding-left: 1em;padding-right: .5em;}
.e-client .txt-red{padding-left:.5em;}


/*----------------------------------------------------------------------------------------------------------------------------------------------------------------*/


/* ICONES ACCEUIL */

span.menuDisk{
    background-color:var(--lt-grey);
    border:1px solid var(--text);
    border-radius:50%;
    margin:0 auto;
    width:5rem;
    height:5rem;
    line-height:4.5rem;
    flex-shrink: 0;
    transition:background-color .2s ease-in-out, border .2s ease-in-out;
}

.questionnaire span.menuDisk.rouge, .questionnairemrp span.menuDisk.rouge{
    margin: 0 !important;
}

        span.green-circle{
            background-color:var(--lt-green);
            border:1px solid var(--green);
            border-radius:50%;
            margin-bottom: -0.1em;
            width:1rem;
            height: 1rem;
            line-height:1rem;
            transition:background-color .2s ease-in-out, border .2s ease-in-out;
            display: inline-block;
        }

        span.red-circle{
            background-color:var(--lt-red);
            border:1px solid var(--dk-red);
            border-radius:50%;
            margin-bottom: -0.1em;
            width:1rem;
            height: 1rem;
            line-height:1rem;
            transition:background-color .2s ease-in-out, border .2s ease-in-out;
            display: inline-block;
        }

    



    span.menuDisk.vert{ /* autour du disque normal*/
        background-color: var(--lt-green);
        border:1px solid var(--s-green);
        transition:background-color .2s ease-in-out, border .2s ease-in-out;
    }

    div span.vert {
        background-color:var(--lt-green);
        border: 1px solid var(--green);
    }

    span.menuDisk:hover.vert{ /* autour du disque en hoover*/
        background-color:var(--s-green);
        border: 1px solid var(--green);
    }

    .menu .vert .fal{
        color: var(--green);
    }


    span.menuDisk.rouge{ /* autour du disque normal*/
        background-color: var(--lt-red);
        border:1px solid var(--s-red);
        transition:background-color .2s ease-in-out, border .2s ease-in-out;
    }

    .contrats .menu span.rouge {
        background-color:var(--lt-red);
        border: 1px solid var(--dk-red);
    }

    span.menuDisk:hover.rouge{ /* autour du disque en hoover*/
        background-color:var(--s-red);
        border: 1px solid var(--dk-red);
    }

    .menu .rouge .fal{
        color: var(--dk-red);
    }
    
    .tc .menuDisk.rouge{
        background-color: var(--s-red);
        border:1px solid var(--dk-red);
    }

    .grid3 .menuDisk.rouge{
        background-color: var(--s-red);
        border:1px solid var(--dk-red);
        display: none;
    }

    .vcon .grid3 .menuDisk.rouge{
        display: block;
    }

    

span.menuDisk:hover{
    background-color:var(--s-red);
    border: 1px solid var(--dk-red);
}
.menuDisk .fa-stack-1x, span.menuDiskOn .fa-stack-1x {
    font-size: 3rem;
    line-height:5rem;
    bottom:0 !important;
}


span.menuDiskOn{
    background-color:var(--lt-red);
    border: 1px solid var(--dk-red);
    border-radius:50%;
    margin: 0 auto;
    width:5rem;
    height:5rem;
    line-height:4.5rem;
}
.menuDisk .fa-2x {
    font-size: 2.5em !important;
}
.fa-1-5x{
    font-size:1.5rem;
}

/* SOUS MENU */

.greyTitle.active{
    background-color: var(--dk-red);
}

/* HEAD */

.header{
    background: var(--dk-bg);
    color:var(--white);
    display:flex;
    justify-content: space-between;
    align-items:center;
    padding:10px;
}
.header h1{
    margin:0;
    flex-grow: 1;    
}
.header h1 a{
    color: #fff;
    font-weight: bold;
    font-size:2rem;
}
.header  > a > img{
    height:50px;
    width: 50px;
    padding-right:10px;
}
.header a{text-decoration: none;font-weight: normal;color:var(--text);}
.header > a, .header > a:link{
    color: #fff;
    font-weight: 300;
    text-decoration: none;
    font-size:3em;
    position: relative;
    transition: all .2s ease-in-out;
}
.header > a:hover{
    color: rgba(255, 255, 255, 0.7);
}
.header ul{
    list-style: none;
    margin:0;
    display: none;
    position: absolute;
    right:-200px;
    top:74px;
    color:var(--text);
    padding:.75em 1em;
    z-index: 100;
    background-color: var(--lt-grey);
    text-align: center;
    transition: all .5s ease-in-out;
}
.header hr{margin: .5em 0;}


.framed {  /*Rouge*/
    border: 4px solid var(--dk-red);
    border-radius: 1.5rem;
    padding:0.75em 0.5em;
}

.framedgrey {  
    border: 1px solid var(--medium-grey);
    border-radius: 0.9em;
    padding:0.75em;
}


.menuBar2{
    border-top: 1px solid var(--grey);
    margin: 1em 0.99em;
}




/* Nouvel ecran fiche renseignement & questionnaire RCP */
.grid-d-r {
    display: grid;
    grid-template-columns: 140px 1fr;
    row-gap: .75em;
    align-items: center;
}

.grid-address {
    display: grid;
    grid-template-columns: 150px 1fr;
    row-gap: .75em;
    align-items: center;
}
.grid-d-r .ml, .grid-address .ml{
    margin-left:0;
}

.grid-questionnaire{
    display: grid;
    grid-template-columns:1fr;
    row-gap: .75em;
}

.titre {
    grid-column: span 2;
}

.row-span-3, .row-span-4, .row-span-5, .row-span-8 {
    display: none;
}
.row-span-8 ~ .col-span-2{
    grid-column: span 2;
}
.col-span-4{
    grid-column: span 2;
}






/* Partie Responsive */
@media screen and (max-width: 470px) {
    .dnnLoginService .dnnLabel{
        display: block;
        float: none;
        width: 100%;
        padding: 0;
        text-align: left;
    }
}

@media  screen and (min-width: 640px) {
    .menu{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .menu > a{
        margin: 0 1em;
    }

    .menu .fa, .menu .fab, .menu .fad, .menu .fal, .menu .far, .menu .fas {
        margin: 0;
    }

    .grid2-1 select{
        margin: 0 15em;
    } 

    .grid2-1 input{
        margin: 0 12em;
        text-align: center;
    }

    .questionnairemrp .grid2-1 input{text-align: left;}

    .questionnairemrp input[type=checkbox]{margin: 0;}

    .gc-2100{grid-column: 2 / span 1;}

    .gc-31{grid-column: 3 / span 1;}

    .gridContact{
        grid-template-columns:50% 1fr;
        column-gap: 1em;
        align-items: end;
    }
    .gridContact >img{display:block;}


    /* Nouvel ecran fiche renseignement */
    .grid-d-r {
        display: grid;
        grid-template-columns: 1fr 150px 1fr 170px;
        row-gap: .75em;
        align-items: center;
    }

    .grid-address {
        display: grid;
        grid-template-columns: 130px 150px 100px 1fr;
        row-gap: .75em;
        align-items: center;
    }
        .grid-d-r .ml, .grid-address .ml {
            margin-left: var(--space);
        }

    .titre {
        grid-column: span 4;
    }

    .row-span-3, .row-span-4, .row-span-5, .row-span-8 {
        display: none;
    }

    .col-span-2 {grid-column: span 2;}

    .col-span-3 {grid-column: span 3;}

    .col-span-4 {grid-column: span 4;}

    .lbl-ville{
        text-align:right;
        padding-right:1em;
    }
}

@media screen and (min-width: 767px) {
    .fa, .fab, .fad, .fal, .far, .fas {
        display: inline-block !important;
        font-size: 3.5em;
        color: var(--text);
        /*margin: 0 20px;*/
    }

    .grid1, .grid2-1{
        grid-template-columns: 100px 1fr 1fr;
    }

    .grid3{
        grid-template-columns: 100px 1fr 30px;
    }

    .gr-11, .gr-26, .gr-53, .gr-94, .gr-97, .gr-155, .gr-187, .gr-217, .gr-268, .gr-299, .gr-353, .gr-388, .gr-474, .gr-613, .gr-662, .gr-702, .gr-3912{
        display:block;
        align-self: flex-start;
    }

    .gr-11{grid-row: 1 / span 1;}

    .gc-13{grid-column: 1 / span 3;}

    .gr-53{grid-row: 5 / span 3;}

    .gr-97{grid-row: 9 / span 7;}

    .gr-187{grid-row: 18 / span 7;}

    .gr-268{grid-row: 26 / span 8;}

    .gr-353{grid-row: 35 / span 3;}

    .gr-613{grid-row: 61 / span 3;}

    .gr-662{grid-row: 66 / span 2;}

    .gr-702{grid-row: 70 / span 2;}

    .gr-3912{grid-row: 39 / span 12;}

    .grid2{
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 0.5em;
        row-gap: 1em;
    }

    .grid2 .e-devis{margin: 0;}

    .grid2 .greyTitle{margin: 0 1em;}

    .grid2-1 .nsm{grid-column: 1 / span 3;}

    .grid2-1 div .txt-rouge{
        text-align: left;
    }

    .info{grid-column: 1;}

    .quest{grid-column: 2;}

    .devis{
        grid-row-start: 1;
        grid-column: 3;
    }

    .adhe{
        grid-row-start: 1;
        grid-column: 4;
    }

    .e-devis{
        grid-column: 1 / span 4;
    }


    .menuBar{
        border-top: 1px solid var(--medium-grey);
        width: 100%;
        top: 19px;
        position: absolute;
        z-index: -1;
    }

    .greyTitle.active .arrow{
        position: absolute;
        bottom: -18px;
        left:47%;
        right:47%;
        border-right: 8px solid transparent;
        border-bottom: 10px solid var(--dk-red);
        border-left: 8px solid transparent;
    }

    .mtb{grid-column: 2 / span 2;}

    .gr-14{grid-row: 1 / span 4;}

    .gr-13{grid-row: 1 / span 3;}

    .gr-15{grid-row: 1 / span 5;}

    .grid3 .menuDisk.rouge{display: block;}

    .vcon .gimg{
        width: 446px !important;
        height: 213px !important;
        margin: 0 auto !important;
    }

    .inforcp .gimg{
        width: 100%;
    }
    
    .vcon .img{
        width: 5em;
        height: 5em;
        margin: 0 auto;
    }

    .framedgrey1024{
        width: max-content !important;
        margin-left: auto;
        margin-right: auto;
    }

    .vatt .grid3{
        grid-template-columns: 1fr 1fr 1fr;
    }

    .gc-110{grid-column: 1 / span 1;}

    .gc-21000{grid-column: 2 / span 1;}

    .gc-31000{grid-column: 3 / span 1;}

    .flexrow{flex-direction: row !important;}

    .ddn{display: none;}

    .dn{display: block;}

    .createAccount, .LoginPanel{
        width:700px;
        max-width: 700px;
    }
    .gridLogin{
        display: grid;
        grid-template-columns: auto 1fr;
        row-gap: 0.7em;
        margin-bottom:0.7em;
    }
    /*.form-control, .custom-select, .dnnLoginService input[type="text"], .dnnLoginService input[type="password"]{
        margin: 0 .5rem;
    }*/
    .gridContact{
        display: grid;
        grid-template-columns: 40% 1fr;
        column-gap: 1em;
        margin: 0 auto;
        align-items: end;
    }
    .gridContact >img{display:block;}


    /* Nouvel ecran fiche renseignement & Questionnaire RCP */
    .grid-d-r {
        grid-template-columns: 150px 1fr 150px 1fr;
    }

    .grid-address {
        grid-template-columns: 150px 150px 130px 1fr;
    }

    .grid-questionnaire{
        grid-template-columns: 100px 1fr;
        gap: .75em;
    }
}


@media screen and (min-width: 1024px){
    .grid1{
        grid-template-columns: 110px 125px 1fr 110px 1fr;
        max-width: 100%;
    }

    .inforcp .grid2-1, .infomrp .grid2-1{column-gap: 0.5em;}

    .inforcp .mt{margin-top: 0;}

    .gc-24{grid-column: 2 / span 4;}

    .gr-22{grid-row: 2 / span 2;}

    .gr-26{grid-row: 2 / span 4;}

    .gr-94{grid-row: 6 / span 3;}

    .gr-155{grid-row: 10 / span 3;}

    .gr-217{grid-row: 14 / span 5;}

    .gr-299{grid-row: 20 / span 4;}

    .gr-388{grid-row: 27 / span 4;}

    .gr-474{grid-row: 36 / span 3;}


    .devis-container .fondrouge{
        grid-column: 2 / span 4;
        grid-row-start: 25;
    }

    .p-rouge{
        grid-column: 4 / span 2;
        text-align: right;
    }

    .un, .deux, .trois{grid-column: 2 / span 2;}

    .gc-23{grid-column: 2 / span 3;}

    .gc-33{grid-column: 3 / span 3;}

    .gc-42{grid-column: 4 / span 2;}

    .gc-220{grid-column: 2 /span 2}

    
    .ml{margin-left: 2em;}

    .menu{margin: 4em auto 3em auto;}

    .menu > a{margin: 0 1.5em;}

    .grid2-1{
        grid-template-columns: 110px 1fr 1fr 190px;
        max-width: 100%;
    }

    .grid2-1 .nsm{grid-column: 1 / span 4;}

    .grid2-1 select{margin: auto 3em;}

    .gc-14{grid-column: 1 / span 4;}

    .gc-41{grid-column: 4 / span 1;}

    .gr-52{grid-row: 5;}
    .gr-5-2{grid-row: 5 / span 2;}

    .gc-32{grid-column: 3 / span 2;}

    .gc-210{grid-column: 2 / span 1;}

    .gr-83{grid-row: 8 / span 3;}

    .gr-143{grid-row: 14 / span 3;}

    .gr-194{grid-row: 19 / span 4;}

    .grid2-1 input{margin: 0 auto;}

    .gr-252{grid-row: 25 / span 2;}

    .gr-288{grid-row: 28 / span 8;}

    .gc-310{grid-column: 3 / span 1;}
    
    .ptl{margin: 0 0 0 5em !important;}

    .tl{margin: 0 0 0 6em !important;}

    .pp{margin: 0 0 !important;}

    .tal{text-align: left;}

    .gr-402{grid-row: 40 / span 2;}
    
    .gr-432{grid-row: 43 / span 2;}

    .gr-462{grid-row: 46 / span 2;}

    .grid4{column-gap: 1em;}

    .grid3-3, .grid3-4, .grid3-1{grid-column: 1 / span 2;}

    .grid3-2{
        grid-column: 3 / span 2;
        grid-row: 1 / span 3;
    }

    .gc-1300{grid-column: 1 / span 3;} 

    .grid3-1{max-height: 600px;}

    .vcon .grid3{
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .vatt .grid3-5{
        grid-template-columns: 1fr 1fr 1fr;
    }

    .gc-11{grid-column: 1 / span 1;}

    .gc-120{grid-column: 1 / span 2;}

    .gr-43{grid-row: 4 /span 3;}

    .menuBar2{margin: 1em auto;}

    .vatt .menuBar2, .inforcp .menuBar2{
        margin: 1em 1em;
    }

    .gr-12{grid-row: 1 / span 2;}

    .gr-33{grid-row: 3 / span 3;}

    .dnone{
        display: none;
        width: 1em;
    }

    .gr-71{grid-row: 7 / span 1;}

    .gr-81{grid-row: 8 / span 1;}

    .gr-91{grid-row: 9 / span 1;}

    .txtl1024{margin-left: 1.5em;}

    .gr-82{grid-row: 8 / span 2;}

    .gridContact{
        display: grid;
        grid-template-columns: 30% 1fr;
        column-gap: 2em;
        margin: 0 6em;
        align-items: end;
    }
    .gridContact >img{display:block;}



    /* Nouvel ecran fiche renseignement & questionnaire RCP */
    .grid-d-r{
        grid-template-columns: 100px 150px 1fr 170px 1fr;
    }
    .grid-address {
        grid-template-columns: 100px 150px 150px 130px 1fr;
    }

    .titre{
        grid-column:2 / span 4;
    }

    .row-span-3{
        display:block;
        grid-row: span 3;
        align-self:start;
        justify-self:center;
    }
    .row-span-4 {
        display: block;
        grid-row: span 4;
        align-self: start;
        justify-self: center;
    }
    .row-span-5 {
        display: block;
        grid-row: span 5;
        align-self: start;
        justify-self: center;
    }
    .row-span-8 {
        display: block;
        grid-row: span 8;
        align-self: start;
        justify-self: center;
    }

    .grid-vva{
        grid-template-columns: 1fr 25%;
        column-gap: 1.5em;
    }
    .grid-vva .vva{
        padding:50px 30px;
        margin-top:0;
    }
    .grid-vva .vva .flex{
        flex-direction:column;
        column-gap: 0;
    }
    .grid-vva .vva i{font-size:2em;}
    
}