body {
    text-align: center;
    /*background-color: #3350ff;*/
    background-color: blue;
    color: blue;
    font-size: 100%;
    position:relative;
    min-width:100vh;
    height:100vh;
    /*width: 80%;*/
}

.imgcentrale{
    max-width:100%;
    max-height:100%;
}

.h1 {
    font-size: 3em;
    align-content: flex-end;
    text-align: left;
    height: 60px;
    /*height: auto;*/
    background-color: white;
    color: blue;
}

.grille {
    /*height: 720px;*/
    max-width: 100%;
    max-height: 60%;
    /*display: block;*/
    /*grid-template-columns: repeat(3, 300px);*/
    /*grid-template-columns: repeat(3,1fr);*/
    /*grid-template-columns: 60px 1fr 1px 2fr 5px;*/
    grid-template-columns: 20px 1fr 20px 1fr;
    /*grid-template-rows: repeat(1, 250px);*/
    /*grid-template-rows: repeat(1, 1fr);*/
    grid-template-rows: 1fr;
    /*grid-column-gap: 60px;*/
    grid-column-gap: 0em;
    /*grid-column-gap: 1px;*/
    /*grid-row-start:inherit;*/
    /*grid-row-gap: 30px;*/
    /*grid-gap: 0em 20px;
    height: 60px;
    display: flex;*/
    display: grid;
    /*align-items: stretch;*/
    /*vertical-align:auto;*/
}

/*.grillelien {
    grid-template-columns: repeat(2,3fr);
    grid-template-rows: repeat(2, 250px);
    display: grid;
}*/

.lienbox1 {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 1;
    /*width:500px;*/
    /*height:60px;*/
}

.lienbox2 {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
    /*width:500px;*/
    /*height:60px;*/
}
.box1 {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 1;
    /*width:500px;*/
    /*height:60px;*/
}

.box2 {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
    /*column-width: 1px;*/
    /*max-width:1px;*/
    /*width:650px;*/
    /*height:60px;*/
}

.box3 {
    grid-column-start: 3;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 1;
    column-width: 10px;
}

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

.box5 {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 2;
}

.imgcontact {
    max-width:inherit;
}

@keyframes defilement-rtl {
    0% {
        transform: translate3d(0,0,0); /* position initiale à droite */
    }

    100% {
        transform: translate3d(-100%,0,0); /* position finale à gauche */
    }
}

/* le block conteneur */
#marquee-rtl {
    /*max-width: 55em; /* largeur de la fenêtre */
    /*max-width:100%;
        max-height:100%;*/
    /*margin: 1em auto 2em;*/
    /*border: 2px solid #F0F0FF;*/
    /*width:2fr;*/
    /*background-color: blue;*/
    width: 100%;
    /*width:auto;*/
    height: auto;
    /*display: block;*/
    /*overflow:scroll;*/
    overflow: visible;
    /*overflow: hidden;*/ /* masque tout ce qui dépasse */
    /*box-shadow: 0 .25em .5em #CCC,inset 0 0 1em .25em #CCC;*/
    /*box-shadow: 0 .25em .5em #4953ec,inset 0 0 1em .25em #4953ec;*/
    box-shadow: 0 0 0 0;
}

/* le bloc défilant */
.marquee-rtl > :first-child {
    display: inline-block; /* modèle de boîte en ligne */
    /*padding-right: 2em;*/ /* un peu d'espace pour la transition */
    /*padding-left: 100%;*/ /* placement à droite du conteneur */
    padding-left: 100%;
    white-space: nowrap; /* pas de passage à la ligne */
    animation: defilement-rtl 8s infinite linear;
    animation-name: defilement-rtl; /* référence à la règle @keyframes mise en oeuvre */
    animation-delay: 0s; /* valeur à ajuster suivant la longueur du message */
    animation-iteration-count: infinite; /* boucle continue */
    /*animation-timing-function: linear;*/ /* pas vraiment utile ici */
}

video {
    animation-play-state: running;
}

#pdf {
    height: 550px;
    width: 450px;
}

p {
    font-size: 1.5em;
    line-height: 1.3em;
    background-color: blue;
    color: white;
}

.logo {
    /*width :300px;
    height:60px; */
    border-radius: 10px;
    max-width: 100%;
    max-height: 100%;
    text-align: center;
    margin-bottom: 5px;
    /*border-radius:10px;*/
}

.menu { /* boite qui contient le menu (les onglets) */
    /*margin-left: 290px;
    margin-top: -60px;*/
    /*background-image: url(../Images/bandeau_2.png);
    background-repeat: repeat-x;
    align-content: flex-end;*/
    align-content: center;
    text-align: center;
    display: compact;
    flex-direction: row;
    margin-left: auto;
    height: 50px;
    /*max-height:80%;*/
    /*width: 530px;*/
    /*padding-top: 12px;*/ /* marge intérieure haute */
    /*padding-bottom: 0px;*/ /* marge intérieure basse */
}

.onglet {
    /*background-image: url(../images/btn_menu7.png);
    background-repeat: repeat-x;*/
    background-color: #FFFFFF;
    /*background-image: url(../Images/bandeau_2.png);*/
    background-repeat: repeat-x;
    background-color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    color: #3350ff;
    padding-left: 10px;
    padding-right: 10px;
    letter-spacing: -1px;
    margin-bottom: 50px;
    margin-left: 5px;
    border: thick rgba(255,255,255,0.4);
    /*height: 400px;*/
    /*height:auto;*/
    top: 0;
}

.onglet-taille {
    /* choisir image ou background */
    /*background-image: url(../Images/bandeau_2.png);*/
    background-color: aqua;
    border-radius: 10px;
    /*height: 60px;*/
}

/*.onglet { /* style des liens se trouvant dans un onglet inactif */
/*display: flex;
    flex-direction: row;*/
/*height:auto;
    background-color: aqua;
    color: darkblue;
}
*/

.onglet-actif { /* style de l'onglet de la page active */
    /*display: flex;
    flex-direction: row;*/
    border-radius: 10px;
    height: 60px;
    background-color: white;
    color: blue;
}

.page {
    /*width: 950px;
    height: 600px;*/
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border-radius: 10%;
}

.page_lien {
    width: 600px;
    height: 300px;
    margin-left: 10px;
    margin-right: auto;
    text-align: left;
}

.combo {
}
/**/
label,
footer {
    /*font-family: sans-serif;*/
    font-family: Helvetica;
}

/*#commentaire {
    list-style-type: none;
    font-size: 1.5em;
    line-height: 1.3em;
    background-color: blue;
    color: white;
}*/

#commentaire {
    text-align: center;
    list-style-type: none;
    font-size: 2em;
    line-height: 1.5em;
    background-color: blue;
    color: white;
}

li {
    list-style-type: none;
    font-size: 1.5em;
    line-height: 1.3em;
    background-color: blue;
    color: white;
}

/*.li2 {
    list-style-type: none;
    font-size: 2em;
    line-height: 1.3em;
    background-color: blue;
    color: white;
}*/

.ulcontact {
}

.ulfinannee {
    font-size:x-large;
}

ul {
    border: thick;
    border-color: white;
    border-style: double;
}

a {
    text-decoration: none
}

label {
    font-size: 3rem;
    padding-right: 10px;
}

.labelselect {
    /*font-family:'Times New Roman', Times, serif;*/
    /*padding-left:650px;*/
    text-align: left;
    font-size: larger;
    text-decoration: underline;
    color: white;
    /*background-color: black;*/
}

/*p {
    text-decoration: wavy;
    color: white;
    font-size:larger;
}*/

/*form {
    position: center;
}*/

.specialite {
    border-radius: 30%;
}

.selection {
    position: center;
}

select {
    font-size: large;
}

.select-style {
    margin-left: 40%;
    margin-bottom: 5px;
    /*border: 1px solid #0f056b;*/ /* bleu nuit */
    border: 1px solid #03224c; /* bleu marine */
    /*border: 1px solid #333;*/ /* noir */
    /*width: 180px;*/
    width: 240px;
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    background: #fff;
    position: relative;
}

    .select-style select {
        padding: 5px 8px;
        width: 130%;
        border: none;
        box-shadow: none;
        background-color: transparent;
        background-image: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }

    .select-style:after {
        top: 50%;
        left: 85%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(0, 0, 0, 0);
        border-top-color: #000000;
        border-width: 5px;
        margin-top: -2px;
        z-index: 100;
    }

    .select-style select:focus {
        outline: none;
    }

/*  Custom dropdown arrow cover */
/*.custom-dropdown::before { 
width: 2em;
right: 0;
top: 0;
bottom: 0;
border-radius: 0 3px 3px 0;
}*/

footer {
    font-size: .8rem;
    position: absolute;
    bottom: 30px;
    left: 30px;
}

.output {
    background: center no-repeat url('../Images/Resized_20201115_132803.jpg');
    position: relative;
}
/**/
.bloc {
    width: 650px;
    height: 271px
}

.textarea {
    width: 200px;
    font-family: tahoma;
    font-size: 11px;
    text-align: left;
    border-style: solid;
    border-width: 1px;
    border-color: #CC0033;
    background-color: white;
    color: #505050;
    padding: 2px 5px;
    margin: 0 5px 8px 0;
}

#msgzone {
    overflow: auto;
    width: 400px;
    height: 110px;
}

.msgarea {
    /*size: 10;*/
    width: 400px;
    height: 110px;
    resize: none;
    font-family: tahoma;
    font-size: 11px;
    text-align: left;
    border-style: solid;
    border-width: 1px;
    border-color: #CC0033;
    background-color: white;
    color: #505050;
    padding: 2px 5px;
    margin: 0 5px 8px 0;
}

.mentions {
    text-decoration: underline;
    text-align: inherit;
    cursor: pointer
}

/*h1 {
    text-shadow: 1.5em;
}

h2 {
    text-shadow: 4px,4px,4px,blue;
}*/

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /*Set the fixed height of the footer here*/
    height: 0px;
    /*background-color: #F3F3F3;
    padding-top: 10px;
    padding-bottom: 0px;*/
}

/* diaporama */

.diapo {
    position: relative;
    overflow: hidden;
}

#nav-droite, #nav-gauche {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 3em;
}

#nav-droite {
    right: 20px;
}

#nav-gauche {
    left: 20px;
}

.elements {
    display: flex;
    transition: 1s linear;
}

.element {
    flex: 1 0 100%;
    position: relative;
}

    .element > img {
        width: 100%;
    }

.caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background-color: rgba(255,255,255,0.4);
    padding: 30px;
}

.selectionImage {
    position: center;
}

    .selectionImage > img {
        position: center;
        /*top:0;
    left:0;*/
    }

        .selectionImage > img:first-child {
            z-index: 4;
        }

.image0 {
    visibility: visible;
    z-index: 4;
}

/*.image1{
    visibility:hidden;
    z-index:3;
}*/

.image1 {
    margin: 0 10% 10% 10%;
}

/*@viewport {
    orientation:portrait;
}*/

/* OK !!!*/
/*@media {
    * {background-color:blue; zoom: 0.5;}
    @viewport{
        width:device-width;
        zoom: 0.5;
    }
}*/

/*------------------------------------- PC réso type S 1440x900 web 1269x747 Firefox sinon 1440x757 Chrome -------------------------------------*/
@media only screen and (max-height: 900px) and (max-width:1200px) {
    * {
        background-color: blue;
        /*zoom: 0.5;*/
    }

    @viewport {
        orientation: landscape;
        width: device-width;
        /*height: device-height;*/
        /*zoom:0.5;*/
    }

    .grille {
        text-align: center;
        /*margin-bottom: -10px;*/
        zoom:0.6;
        max-height: 50%;
        max-width: 100%;
    }

    #marquee-rtl {
        zoom: 0.8;
        height: 60%;
        overflow: visible;
        box-shadow: 0 0 0 0;
    }

    .select-style {
        margin-left: 40%;
        margin-bottom: 5px;
        /*border: 1px solid #0f056b;*/ /* bleu nuit */
        border: 1px solid #03224c; /* bleu marine */
        /*border: 1px solid #333;*/ /* noir */
        /*width: 180px;*/
        width: 240px;
        border-radius: 10px;
        overflow: hidden;
        background-color: #fff;
        background: #fff;
        position: relative;
    }
}

/*-------------------------------------tablette portrait ------------------------------------------*/
@media only screen and (max-height: 800px) and (max-width:620px) {
    * {
        background-color: blue;
        /*zoom: 0.9;*/
    }

    @viewport {
        /*zoom: 0.9;*/
        width: device-width;
    }

    .logo {
        margin-left: -300px;
        max-height: 70%;
        max-width: inherit;
    }

    .page .menu {
        /*align-content: center;*/
        text-align: left;
        display: compact;
        flex-direction: row;
        max-width: 100%;
        margin-left:50px;
        /*text-align: left;*/
        height: 70px;
        zoom: 0.55;
    }

    .page .onglet {
        background-repeat: repeat-x;
        background-color: white;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 40px;
        color: #3350ff;
        padding-left: 2px;
        padding-right: 2px;
        margin-bottom: 50px;
        text-align: left;
        height: 60px;
    }

    .page .onglet-taille {
        height: 60px;
        text-align: left;
        background-color: aqua;
    }

    .page .onglet-actif {
        height: 60px;
        text-align: left;
        background-color: white;
    }

    .grille {
        margin-left: 50px;
        max-height: 300%;
        max-width: 33%;
        zoom: 0.45;
    }

    #marquee-rtl {
        width: 50%;
        height: auto;
        overflow: visible;
        box-shadow: 0 0 0 0;
    }

    .imgcentrale {
        /*text-align: left;*/
        max-width: 60%;
        max-height: 60%;
        margin-left: -280px;
    }

    .combo{

    }

    .image0 {
        visibility: visible;
        z-index: 4;
        text-align: center;
        align-content: center;
        max-width: 75%;
        /*margin-left:0px;*/
        margin-right: 0px;
        zoom: 0.7;
        margin-left: -395px;
    }

    #commentaire {
        text-align: center;
        list-style-type: none;
        font-size: 2em;
        line-height: 1.3em;
        background-color: blue;
        color: white;
        max-width: 60%;
    }

    ul {
        border: thick;
        border-color: white;
        border-style: double;
        text-align: center;
        align-content: center;
        max-width: 55%;
        max-height:80%;
    }

    li.imgcontact {
        max-width: 100%;
        /*max-height:90%;*/
        text-align: left;
        margin-left: 0px;
    }

    .select-style {
        /*margin-left: -395px;*/
        margin-left: 20%;
        margin-bottom: 5px;
        border: 1px solid #03224c; /* bleu marine */
        width: 240px;
        border-radius: 10px;
        overflow: hidden;
        background-color: #fff;
        background: #fff;
        position: center;
    }
}

/*-------------------------------------tablette paysage ------------------------------------------*/
@media only screen and (max-height: 500px) and (max-width:1000px) {
    * {
        background-color: blue;
        zoom: 0.9;
    }

    @viewport {
        zoom: 0.9;
        width: device-width;
    }


    .labelselect {
        text-align: left;
        /*font-size: small;*/
        text-decoration: underline;
        color: white;
    }

    .ulcontact {
        text-align: center;
        align-content: center;
        max-width: 100%;
        margin-top: 1px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .grille {
        margin-left: -10px;
        zoom: 0.6;
        text-align: center;
        max-height: 45%;
        max-width: 100%;
    }

    .imgcentrale {
        margin-top:3px;
        align-content: center;
        max-width: 100%;
        max-height:70%;
        zoom: 0.6;
    }

    .page .menu {
        max-width: 100%;
        /*margin-left: auto;*/
        text-align: center;
        /*height: 20%;*/
        /*margin-top: -10px;*/
        /*margin-bottom: 5px;*/
        margin-bottom: 1px;
        zoom: 0.9;
    }

    .select-style {
        margin-left: 45%;
        margin-bottom: 5px;
        border: 1px solid #03224c; 
        width: 240px;
        border-radius: 10px;
        overflow: hidden;
        background-color: #fff;
        background: #fff;
        position: center;
    }
}

    /*-------------------------------------téléphone portrait ------------------------------------------*/
@media only screen and (max-height: 700px) and (max-width:400px) {

    * {
        background-color: blue;
        zoom: 0.9;
    }

    @viewport {
        zoom: 0.9;
        width: device-width;
    }

    .logo {
        /*margin-left: -430px;*/
        max-height: 70%;
        max-width: inherit;
    }

    .page .menu {
        max-width: 100%;
        margin-left: auto;
        text-align: left;
        height: 70px;
        zoom: 0.55;
    }

    .page .onglet {
        background-repeat: repeat-x;
        background-color: white;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 40px;
        color: #3350ff;
        padding-left: 2px;
        padding-right: 2px;
        margin-bottom: 50px;
        text-align: left;
        height: 60px;
    }

    .page .onglet-taille {
        height: 60px;
        text-align: left;
        background-color: aqua;
    }

    .page .onglet-actif {
        height: 60px;
        text-align: left;
        background-color: white;
    }

    .grille {
        margin-left: -10px;
        max-height: 300%;
        /*max-width: 33%;*/
        min-width: 40%;
        /*zoom: 0.45;*/
        zoom: 0.5;
    }

    #marquee-rtl {
        width: 50%;
        height: auto;
        overflow: visible;
        box-shadow: 0 0 0 0;
    }

    .imgcentrale {
        align-content: center;
        max-width: 50%;
        margin-left: -350px;
        /*zoom: 0.9;*/
    }

    .image0 {
        visibility: visible;
        z-index: 4;
        text-align: center;
        align-content: center;
        max-width: 60%;
        margin-left: -395px;
    }

    #commentaire {
        text-align: center;
        list-style-type: none;
        font-size: 2em;
        line-height: 1.3em;
        background-color: blue;
        color: white;
        max-width: 60%;
    }

    /*ul {
        border: thick;
        border-color: white;
        border-style: double;
        text-align: center;
        align-content: center;
        max-width: 55%;
    }
*/
    .ulcontact {
        text-align: center;
        align-content: center;
        max-height: 100%;
        /*max-width: 100%;
        margin-top: 1px;
        margin-left: 10px;
        margin-right: 10px;*/
    }

    li.imgcontact {
        max-width: 100%;
        /*text-align: left;*/
        text-align: center;
        margin-left: 0px;
        zoom: 0.5;
    }

    .select-style {
        /*margin-left: -395px;*/
        text-align: center;
        align-content: center;
        margin-left: 18%;
        /*margin-right: 200px;*/
        margin-bottom: 5px;
        border: 1px solid #03224c; /* bleu marine */
        /*width: 240px;*/
        max-width: 100%;
        border-radius: 10px;
        overflow: visible;
        background-color: #fff;
        background: #fff;
        position: center;
    }

    .combo{
        text-align:center;
        }
    }

    /*-------------------------------------téléphone paysage ------------------------------------------*/
/*@media only screen and (max-height: 300px) and (max-width:720px) {*/
@media only screen and (max-height: 300px) and (max-width:780px) {
    * {
        background-color: blue;
        zoom: 0.9;
    }

    @viewport {
        zoom: 0.9;
        width: device-width;
        height: device-height;
    }

    .logo {
        /*margin-left: -630px;*/
        /*max-height: 80%;*/
        margin-top: -10px;
        margin-bottom: 5px;
        max-height: 60%;
        text-align: center;
        /*max-height:inherit;*/
        max-width: inherit;
        zoom: 0.8;
    }

    .page .menu {
        max-width: 100%;
        /*margin-left: auto;*/
        text-align: center;
        height: 20%;
        margin-top: -10px;
        /*margin-bottom: 5px;*/
        margin-bottom: 1px;
        zoom: 0.55;
    }

    .page .onglet {
        background-repeat: repeat-x;
        background-color: white;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 40px;
        color: #3350ff;
        /*padding-left: 2px;
        padding-right: 2px;*/
        padding-left: 15px;
        padding-right: 15px;
        /*height: 30px;*/
        height: 20%;
    }

    .page .onglet-taille {
        /*height: 30px;*/
        height: 20%;
        text-align: left;
        background-color: aqua;
    }

    .page .onglet-actif {
        /*height: 60px;*/
        height: 20%;
        text-align: left;
        background-color: white;
    }

    .grille {
        /*margin-left: -10px;*/
        text-align: center;
        max-height: 45%;
        max-width: 100%;
        zoom: 0.45;
    }

    /*.combo {
        margin-top: 5px;
        margin-bottom: -60px;
    }*/

    #marquee-rtl {
        width: 50%;
        height: 50%;
        overflow: visible;
        box-shadow: 0 0 0 0;
    }

    .imgcentrale {
        align-content: center;
        /*min-width: 50%;
        max-height:20%;*/
        /*max-height: 10%;*/
        /*margin-left: -395px;*/
        /*min-width: 100%;*/
        /*margin-bottom:-15px;*/
        zoom: 0.45;
        object-fit: scale-down;
    }

    .image0 {
        visibility: visible;
        z-index: 4;
        text-align: center;
        align-content: center;
        /*max-width: 60%;*/
        /*margin-left: -395px;*/
        /*zoom: 0.6;*/
        object-fit: scale-down;
        margin-bottom: -30px;
        margin-top: 0px;
        zoom: 0.55;
        object-fit: scale-down;
    }

    #commentaire {
        align-content: center;
        text-align: center;
        list-style-type: none;
        /*font-size: 0.5em;*/
        font-size: 2em;
        line-height: 1.5em;
        background-color: blue;
        color: white;
        max-width: 100%;
    }

    label {
        font-size: 1rem;
        padding-right: 10px;
    }

    .labelselect {
        /*font-family:'Times New Roman', Times, serif;*/
        /*padding-left:650px;*/
        text-align: left;
        /*font-size: small;*/
        text-decoration: underline;
        color: white;
        /*background-color: black;*/
    }

    .ulcontact {
        text-align: center;
        align-content: center;
        max-width: 100%;
        margin-top: 1px;
        margin-left: 10px;
        margin-right: 10px;
    }

    /*ul {
        border: thick;
        border-color: white;
        border-style: double;
        text-align: center;
        align-content: center;
        max-width: 55%;
    }*/

    li {
        display: block;
        max-height: 50%;
        /*font: small;*/
    }

        li.imgcontact {
            max-width: 100%;
            text-align: left;
            margin-left: 0px;
        }

    .select-style {
        margin-top: 10px;
        margin-left: 40%;
        text-align: center;
        align-content: center;
        /*margin-bottom: 5px;*/
        border: 1px solid #03224c; /* bleu marine */
        width: 240px;
        border-radius: 10px;
        overflow: hidden;
        background-color: #fff;
        background: #fff;
        position: center;
    }
}

    /*@media only screen and (max-width: 1080px) {
    @media desktop {
        body {
            background-color: yellow;
        }
    }
}*/

    /*@media (max-width: 2000px) {
    @viewport {
        zoom:2;
        width:device-width;
    }
}*/

    /*@media only screen and (max-width: 1080px) {
    * {
        zoom: 50%;
    }
}*/

    /*@media screen and (max-width:64em){
    h1{
        font-size:2.5em;
    }
}
*/