@media screen and (min-width: 1664px) {

    body,

    html {

        font-size: 20px;

    }

    /* -- DEBUT -- Intégration d'un texte défilant, masqué au bout de certain temps, voir js associé

*** en fonction des largeurs d'écrans */

    .text_defile {

        /* texte défilant */

        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

        color: rgb(220, 105, 105);

        font-style: oblique;

        font-size: 1.5em;

        font-weight: bolder;

        letter-spacing: 0.2em;

        visibility: visible;

    }

    .cont_defile {

        /* le block conteneur */

        max-width: 100vw;

        margin: 0em auto 0em;

    }

    .cont_defile> :first-child {

        /* le bloc défilant */

        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 */

        white-space: nowrap;

        /* pas de passage à la ligne */

        animation: defilement-rtl 10s 6 linear;

    }

    @keyframes defilement-rtl {

        0% {

            transform: translate3d(0, 0, 0);

            /* position initiale à droite */

        }

        100% {

            transform: translate3d(-100%, 0, 0);

            /* position finale à gauche */

        }

    }

    /* -- FIN -- Intégration d'un texte défilant, masqué au bout de certain temps, voir js associé

*** en fonction des largeurs d'écrans */

    /* -- DEBUT -- Intégration d'un arrière plan fixe avec bannière pour effet "parallaxe" = passage par dessus du reste de la page quand scroll utilisé

*** en fonction des largeurs d'écrans */

    .contenair_un {

        background-image: url("../img/facade_mam.png");

        background-position: center;

        background-attachment: fixed;

        background-repeat: no-repeat;

        background-size: cover;

        height: 100vh;

        width: 100vw;

    }

    .img_ban {

        width: 100vw;

    }

    .imganime {

        /* Intégration d'un oiseau dans la page d'ACCUEIL */

        height: 10%;

        position: sticky;

        top: 50%;

        left: 8%;

    }

    /* Intégration d'un arrière plan en dégradé et orienté*/

    .entete {

        grid-row: 1;

        background: linear-gradient(180deg, rgb(250, 249, 248), 95%, rgb(204, 204, 204));

        position: fixed;

    }

    /* -- FIN -- Intégration d'un arrière plan fixe avec bannière pour effet "parallaxe" = passage par dessus du reste de la page quand scroll utilisé

*** en fonction des largeurs d'écrans */

    /* -- DEBUT -- Organisation de la barre de menu

*** en fonction des largeurs d'écrans */

    .menu_principal {

        display: grid;

        grid-template-columns: repeat(9, 1fr);

        gap: 0.5em;

        height: 5vh;

    }

    #menu_contact {

        grid-column: 1;

    }

    #menu_inscription {

        grid-column: 8;

    }

    #menu_connexion {

        grid-column: 9;

    }

    .btn_icone {

        width: 2em;

    }

    /* -- FIN -- Organisation de la barre de menu

*** en fonction des largeurs d'écrans */

    /* -- DEBUT -- Configuration du CONTENEUR n°1 "EDITO"

*** en fonction des largeurs d'écrans */

    .cont_edito {

        background-image: url("../img/facade_mamillusion.png");

        background-position: center;

        background-attachment: fixed;

        background-repeat: no-repeat;

        background-size: cover;

        min-height: 70vh;

        font-size: 1.3em;

    }

    .cont_edito h1 {

        font-family: "almafi";

        text-align: center;

        color: rgb(227, 159, 158);

        font-size: 1.8em;

    }

    .titre_edito,

    .text_edito {

        padding-left: 10vw;

        padding-right: 10vw;

        text-align: justify;

    }

    .cont_imgmamrelief {

        text-align: center;

    }

    .img_mamrelief {

        width: 40%;

    }

    /* -- FIN -- Configuration du CONTENEUR n°1 "EDITO"

*** en fonction des largeurs d'écrans */

    /* -- DEBUT -- Configuration du CONTENEUR n°2 "ASSMAT"

*** en fonction des largeurs d'écrans */

    .cont_assmat {

        background-image: url("../img/facade_mamillusion.png");

        background-position: center;

        background-attachment: fixed;

        background-repeat: no-repeat;

        background-size: cover;

        min-height: 70vh;

        font-size: 1.3em;

    }

    .cont_assmat h2 {

        font-family: "almafi";

        font-weight: bold;

        text-align: center;

        color: rgb(121, 130, 135);

        font-size: 1.8em;

        margin-top: 0%;

    }

    .titre_assmat,

    .text_assmat {

        padding-left: 10vw;

        padding-right: 10vw;

        text-align: justify;

    }

    .cont_imgassmat {

        text-align: center;

    }

    .img_assmat {

        width: 40%;

    }

    .img_assmat:hover {

        cursor: url("../img/Coccinelle_64.png"), pointer;

    }

    /* -- FIN -- Configuration du CONTENEUR n°2 "ASSMAT"

*** en fonction des largeurs d'écrans */

    /* -- DEBUT -- Configuration du CONTENEUR n°3 "LOCAUX"

*** en fonction des largeurs d'écrans */

    .cont_locaux {

        background-image: url("../img/facade_mamillusion.png");

        background-position: center;

        background-attachment: fixed;

        background-repeat: no-repeat;

        background-size: cover;

        min-height: 70vh;

        font-size: 1.3em;

    }

    .cont_locaux h2 {

        font-family: "almafi";

        font-weight: bold;

        text-align: center;

        color: rgb(155, 169, 172);

        font-size: 1.8em;

        margin-top: 0%;

    }

    .titre_locaux,

    .text_locaux {

        padding-left: 10vw;

        padding-right: 10vw;

        text-align: justify;

    }

    .cont_imgrc,

    .cont_imgetage {

        height: 90wh;

        vertical-align: middle;

    }

    .img_rc,

    .img_etage {

        width: 100%;

    }

    .cont_flecheimgrc,

    .cont_flecheimgetage {

        display: grid;

        grid-template-columns: 2fr 0.5fr 5fr 0.5fr 2fr;

    }

    .fleche_carrousel {

        font-family: "kgarrows";

        font-size: 3em;

        align-self: center;

    }

    .fleche_carrousel:hover {

        cursor: pointer;

        color: steelblue;

        font-weight: bolder;

    }

    /* -- FIN -- Configuration du CONTENEUR n°3 "LOCAUX"

*** en fonction des largeurs d'écrans */

    /* -- DEBUT -- Configuration du CONTENEUR n°4 "SITUATION"

*** en fonction des largeurs d'écrans */

    .cont_situ {

        background-image: url("../img/facade_mamillusion.png");

        background-position: center;

        background-attachment: fixed;

        background-repeat: no-repeat;

        background-size: cover;

        min-height: 80vh;

        font-size: 1.3em;

    }

    .cont_situ h2 {

        font-family: "almafi";

        font-weight: bold;

        text-align: center;

        color: rgb(95, 99, 98);

        font-size: 1.8em;

        margin-top: 0%;

    }

    .titre_situ,

    .text_situ {

        padding-left: 10vw;

        padding-right: 10vw;

        text-align: justify;

    }

    iframe {

        width: 80vw;

        height: 60vh;

        border: 0.5em ridge rgb(155, 169, 172);

        border-radius: 2.5em 0.2em 2.5em 0.2em;

    }

    .cont_imgsitu {

        vertical-align: middle;

        text-align: center;

    }

    /* -- FIN -- Configuration du CONTENEUR n°4 "SITUATION"

*** en fonction des largeurs d'écrans */

    /* -- DEBUT -- Configuration du CONTENEUR n°5 "FOOTER"

*** en fonction des largeurs d'écrans */

    .cont_mentions {

        display: grid;

        grid-template-columns: 2fr 2fr 0.5fr 2fr 0.5fr 1fr;

        height: 3em;

        gap: 0.5em;

        background: linear-gradient(0deg, rgba(227, 159, 158, 0.6), 50%, rgba(155, 169, 172, 1));

    }

    .mention1 {

        text-align: center;

        margin-top: auto;

        margin-bottom: auto;

        font-weight: bold;

        font-size: 1em;

    }

    .mention2 {

        text-align: right;

        margin-top: auto;

        margin-bottom: auto;

        font-size: 1em;

        font-weight: 600;

        font-style: italic;

        color: black;

    }

    .commande {

        font-family: "kgarrows";

        text-align: left;

        margin-top: auto;

        margin-bottom: auto;

        font-weight: bold;

        font-size: 1em;

    }

    .commande:hover {

        cursor: pointer;

        color: blue;

        font-size: 1.3em;

    }

    /* -- FIN -- Configuration du CONTENEUR n°5 "FOOTER"

*** en fonction des largeurs d'écrans */

    /* -- DEBUT -- Configuration du CONTENEUR n°2 regroupant l'ensemble des conteneurs sauf page d'accueil et footer -- Ce conteneur est caché lorsqu'on demande l'affichage des "MENTIONS LEGALES" ou des "CONDITIONS D'UTILSATION"

*** en fonction des largeurs d'écrans */

    .contenair_deux {

        display: contents;

    }

    /* -- FIN -- Configuration du CONTENEUR n°2 regroupant l'ensemble des conteneurs sauf page d'accueil et footer -- Ce conteneur est caché lorsqu'on demande l'affichage des "MENTIONS LEGALES" ou des "CONDITIONS D'UTILSATION"

*** en fonction des largeurs d'écrans */

    /* -- DEBUT -- Configuration du CONTENEUR n°6 "MENTIONS LEGALES" et du CONTENEUR n°7 "CONDITIONS D'UTILISATION" 

*** en fonction des largeurs d'écrans */

    #cont_ml,

    #cont_cu {

        display: none;

    }

    #mentionslegales,

    #cond_util {

        background: linear-gradient(45deg, rgba(227, 159, 158, 0.6), 50%, rgba(155, 169, 172, 1));

        padding: 0em 2em 0em 2em;

        text-align: justify;

    }

    #mentionslegales h2,

    #cond_util h2 {

        font-family: "almafi";

        font-weight: bold;

        text-align: center;

        color: rgb(95, 99, 98);

        font-size: 1.8em;

        margin-top: 0%;

    }

    /* -- FIN -- Configuration du CONTENEUR n°6 "MENTIONS LEGALES" et du CONTENEUR n°7 "CONDITIONS D'UTILISATION" 

*** en fonction des largeurs d'écrans */

    /* -- DEBUT -- Configuration du CONTENEUR ACCUEIL n°8 "ADMIN", n°9 "ASSMAT" et n°10 "FAMILLE"

*** en fonction des largeurs d'écrans */

    .cont_compteadmin,

    .cont_compteassmat,

    .cont_comptefamille {

        background-image: url("../img/facade_mamillusion.png");

        background-position: center;

        background-attachment: fixed;

        background-repeat: no-repeat;

        background-size: cover;

        font-size: 1em;

    }

    .cont_compteadmin h1,

    .cont_compteassmat h1,

    .cont_comptefamille h1 {

        font-family: "stencil";

        text-align: center;

        color: rgb(219, 96, 95);

        font-size: 3em;

        margin: 0;

    }

    #titre_compteadmin,

    #titre_compteassmat,

    #titre_comptefamille {

        height: 8vh;

    }

    .cont_commun {

        height: 62vh;

    }

    .cont_btnadmin,

    .cont_btnassmat {

        display: grid;

        grid-template-areas: "a b" "c d";

        grid-template-columns: 1fr 1fr;

        grid-template-rows: 1fr 1fr;

        gap: 2em;

        width: 100%;

        height: 50vh;

        text-align: center;

        padding-left: 2em;

        padding-right: 2em;

    }

    .cont_btnfamille {

        display: grid;

        grid-template-areas: "a a" "c d";

        grid-template-columns: 1fr 1fr;

        grid-template-rows: 1fr 1fr;

        gap: 2em;

        width: 100%;

        height: 50vh;

        text-align: center;

        padding-left: 2em;

        padding-right: 2em;

    }

    .cont_lien {

        display: grid;

        grid-template-columns: repeat(7, 1fr);

        gap: 1em;

        margin-left: 10%;

        margin-right: 10%;

        font-size: 1.5em;

    }

    .titrelien {

        text-align: right;

        font-weight: bold;

        text-decoration: underline;

    }

    .lienweb {

        text-align: left;

    }

    .lienweb:hover {

        text-decoration: underline overline blue;

        font-weight: bold;

    }

    .cont_msgadmin,

    .cont_msgassmat,

    .cont_msgfamille {

        grid-area: a;

        margin-top: auto;

        margin-bottom: auto;

    }

    .cont_gestuser,

    .cont_facture {

        grid-area: b;

        margin-top: auto;

        margin-bottom: auto;

    }

    .cont_annonce,

    .cont_pdfassmat,

    .cont_pdffamille {

        grid-area: c;

        margin-top: auto;

        margin-bottom: auto;

    }

    .cont_fichieradmin,

    .cont_photoassmat,

    .cont_photofamille {

        grid-area: d;

        margin-top: auto;

        margin-bottom: auto;

    }

    .btn_menucompte {

        width: 15em;

        height: 3em;

        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

        font-size: 2em;

        color: white;

        background: linear-gradient(45deg, rgba(227, 159, 158, 1), 50%, rgba(155, 169, 172, 1));

        border: unset;

        border-radius: 1em;

    }

    .btn_menucompte:hover {

        cursor: pointer;

        font-weight: bold;

        color: rgb(219, 96, 95);

        background: linear-gradient(135deg, rgba(155, 169, 172, 1), 50%, rgba(227, 159, 158, 1));

        border: inset;

    }

    /* --  FIN  -- Configuration du CONTENEUR ACCUEIL n°8 "ADMIN", n°9 "ASSMAT" et n°10 "FAMILLE"

*** en fonction des largeurs d'écrans */

    /* -- DEBUT -- Configuration du CONTENEUR commun n°11 "MESSAGERIE"

*** en fonction des largeurs d'écrans */

    .conteneur_messagerie {

        width: 100%;

        min-height: 61vh;

        max-height: 62vh;

        padding-left: 2em;

        padding-right: 2em;

    }

    .msg_fieldset legend {

        font-size: 2em;

        font-weight: 800;

    }

    .msg_fieldset {

        border: 0.5em double rgb(16, 81, 150);

        border-radius: 0em 1em 0em 1em;

        width: 100%;

        height: 60vh;

        padding: 0.5em;

    }

    .cont_message {

        height: 30vh;

        overflow-y: auto;

    }

    .table_msg {

        width: 100%;

        border: 0.1em solid rgb(16, 81, 150);

        border-collapse: collapse;

        text-align: center;

    }

    .ligne_titre {

        border: 0.1em solid rgb(16, 81, 150);

        height: 3vh;

        background-color: rgb(227, 159, 158);

    }

    .ligne_msg {

        height: 3vh;

    }

    .ligne_msg:hover {

        cursor: pointer;

        background-color: rgb(155, 169, 172);

    }

    th,

    td {

        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

        font-size: 1em;

        border: 0.08em solid rgb(16, 81, 150);

    }

    .td_de,

    .td_pour {

        width: 30%;

    }

    .td_objet {

        width: 50%;

    }

    .td_reçu {

        width: 20%;

    }

    .cont_btnmsg {

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        grid-template-rows: repeat(2, 1fr);

        gap: 1em;

        text-align: center;

    }

    .cont_btnchgtemrec {

        text-align: center;

    }

    #btn_nouvmsg,

    #btn_listprecmsg,

    #btn_listsuivmsg {

        visibility: hidden;

    }

    .btn_msg1 {

        width: 8em;

        height: 1.8em;

        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

        font-size: 1.2em;

        color: white;

        background: linear-gradient(45deg, rgba(227, 159, 158, 0.6), 50%, rgba(155, 169, 172, 1));

        border: unset;

        border-radius: 0.5em;

    }

    .btn_msg2 {

        width: 15em;

        height: 2em;

        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

        font-size: 1.2em;

        color: white;

        background: linear-gradient(45deg, rgba(227, 159, 158, 0.6), 50%, rgba(155, 169, 172, 1));

        border: unset;

        border-radius: 0.5em;

    }

    .btn_msg1:hover,

    .btn_msg2:hover {

        cursor: pointer;

        font-weight: bold;

        color: rgb(219, 96, 95);

        background: linear-gradient(135deg, rgba(227, 159, 158, 0.6), 50%, rgba(155, 169, 172, 1));

        border: inset;

    }

    /* --  FIN  -- Configuration du CONTENEUR commun n°11 "MESSAGERIE"

*** en fonction des largeurs d'écrans */

    /* -- DEBUT -- Configuration du MODAL "FORMULAIRE DE CONTACT","FORMULAIRE D'INSCRIPTION", "FORMULAIRE DE CONNEXION", "FORMULAIRE OUBLI MDP", "CONFIRMATION DE DECONNEXION" , "NOUVEAU MESSAGE", "RECHERCHER MESSAGE", "EDITER MESSAGE", "MESSAGES D'INFORMATIONS", "TOKEN INSCRIPTION" , "NOUVEAU PSD", "VUE PROFIL", "SWITCH PSD"

*** en fonction des largeurs d'écrans */

    .modal_formcontact,

    .modal_forminscri,

    .modal_formconnect,

    .modal_formmdpoublie,

    .modal_confirmdecon,

    .modal_nouveaumsg,

    .modal_recherchermsg,

    .modal_editermsg,

    .modal_msginfo,

    .modal_vueprofil,

    .modal_switchpsd {

        position: fixed;

        top: 0px;

        left: 0px;

        display: flex;

        align-items: flex-start;

        padding-top: 8%;

        justify-content: center;

        width: 100%;

        height: 100%;

        background: rgba(0, 0, 0, 0.8);

        visibility: hidden;

        overflow-y: auto;

    }

    .modal_tokeninfo,

    .modal_newpsd,

    .modal_newpsdNOK {

        position: fixed;

        top: 0px;

        left: 0px;

        display: flex;

        align-items: flex-start;

        padding-top: 15%;

        justify-content: center;

        width: 100%;

        height: 100%;

        background: rgba(0, 0, 0, 0.8);

        visibility: visible;

        overflow-y: auto;

    }

    .contenair_contact,

    .contenair_inscri,

    .contenair_connect,

    .contenair_mdpoublie,

    .contenair_confirmdecon,

    .contenair_nouveaumsg,

    .contenair_recherchermsg,

    .contenair_editermsg,

    .contenair_msginfo,

    .contenair_tokeninfo,

    .contenair_newpsd,

    .contenair_newpsdNOK,

    .contenair_vueprofil,

    .contenair_switchpsd {

        overflow: auto;

        background-image: url("../img/pattern_rose.png");

        background-position: top;

        background-attachment: fixed;

        background-repeat: no-repeat;

        background-size: cover;

        border-radius: 2%;

        width: 35%;

        height: auto;

        padding-left: 2em;

        padding-right: 2em;

        font-size: 1em;

    }

    .contenair_contact h1,

    .contenair_inscri h1,

    .contenair_connect h1,

    .contenair_mdpoublie h1,

    .contenair_confirmdecon h1,

    .contenair_nouveaumsg h1,

    .contenair_recherchermsg h1,

    .contenair_editermsg h1,

    .contenair_msginfo h1,

    .contenair_tokeninfo h1,

    .contenair_newpsd h1,

    .contenair_newpsdNOK h1,

    .contenair_vueprofil h1,

    .contenair_switchpsd h1 {

        font-family: "stencil";

        text-align: center;

        color: rgb(219, 96, 95);

        font-size: 2em;

    }

    .contenair_confirmdecon h2 {

        font-family: "stencil";

        text-align: center;

        color: rgb(16, 81, 150);

        font-size: 1.5em;

    }

    .cont_textconfirmdecon,

    .cont_textmsginfo,

    .cont_texttokeninfo {

        text-align: center;

        font-size: 1.3em;

        margin-left: 1em;

        margin-right: 1em;

    }

    .oeilmdp {

        height: 1.4em;

    }

    .cont_renscontact {

        display: grid;

        grid-template-areas: "a b" "c d" "e f" "g h" "i j";

        grid-template-columns: 1fr 5fr;

        gap: 0.2em;

    }

    .cont_rensvueprofil {

        display: grid;

        grid-template-areas: "a b" "c d" "e f" "g h" "i j" "k l";

        grid-template-columns: 1fr 1fr;

        gap: 0.2em;

    }

    .cont_rensinscri {

        display: grid;

        grid-template-rows: repeat(9, auto);

        grid-template-columns: 0.8fr 0.8fr 0.2fr;

        gap: 0.2em;

    }

    .cont_rensswitchpsd,

    .cont_rensnewpsd {

        display: grid;

        grid-template-rows: repeat(2, auto);

        grid-template-columns: 0.8fr 0.8fr 0.2fr;

        gap: 0.2em;

    }

    .cont_rensconnect {

        display: grid;

        grid-template-rows: repeat(3, auto);

        grid-template-columns: 0.8fr 0.8fr 0.2fr;

        gap: 0.2em;

    }

    .cont_rensmdpoublie {

        display: grid;

        grid-template-areas: "a b";

        grid-template-columns: 1fr 1fr;

        gap: 0.2em;

    }

    .cont_rensnouvmsg,

    .cont_renseditermsg {

        display: grid;

        grid-template-areas: "a b" "c d" "e f";

        grid-template-columns: 1fr 4fr;

        gap: 0.2em;

    }

    .cont_rensrecherchermsg {

        display: grid;

        grid-template-areas: "a b" "c d";

        grid-template-columns: 1fr 4fr;

        gap: 0.2em;

    }

    .cont_confirmdecon,

    .cont_msginfo,

    .cont_tokeninfo {

        display: grid;

        grid-template-columns: 1fr;

    }

    .form_input,

    .input_motctrlin,

    #input_motctrlincontact,

    #input_motctrlinconnect,

    #input_motctrlinmdpoublie {

        width: 100%;

        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

        font-size: 1em;

        padding-left: 0.5em;

        border-radius: 0.2em;

    }

    textarea {

        resize: none;

    }

    .form_label {

        text-align: justify;

    }

    #cont_confchartefonct {

        display: grid;

        grid-template-columns: 1fr 4fr;

        grid-template-rows: 1fr 1fr;

        padding-left: 2em;

        padding-right: 2em;

        gap: 0.5em;

    }

    #label_confchartefonct {

        grid-column: 1/3;

        grid-row: 1;

        color: black;

        text-align: center;

        font-style: oblique;

    }

    #input_confchartefonct {

        grid-column: 1;

        grid-row: 2;

        text-align: center;

    }

    #lien_confchartefonct {

        grid-column: 2;

        grid-row: 2;

        text-align: center;

    }

    .checkbox {

        width: 1.8em;

        height: 1.8em;

    }

    #lien_confchartefonct a {

        color: rgb(219, 96, 95);

    }

    #label_nomcontact,

    #label_pseudomdpoublie,

    #label_destmsg,

    #label_debutcreneaumsg,

    #label_expeditermsg,

    #label_nomprofil {

        grid-area: a;

    }

    #input_nomcontact,

    #input_pseudomdpoublie,

    #select_destnouvmsg,

    #input_debutcreneaumsg,

    #input_expeditermsg,

    #nomprofil {

        grid-area: b;

    }

    #label_prenomcontact,

    #label_titremsg,

    #label_fincreneaumsg,

    #label_titreedidtermsg,

    #label_prenomprofil {

        grid-area: c;

    }

    #input_prenomcontact,

    #input_titremsg,

    #input_fincreneaumsg,

    #input_titreedidtermsg,

    #prenomprofil {

        grid-area: d;

    }

    #label_mailcontact,

    #label_corpsmsg,

    #label_corpseditermsg,

    #label_pseudoprofil {

        grid-area: e;

    }

    #input_mailcontact,

    #input_corpsmsgc,

    #input_corpseditermsg,

    #pseudoprofil {

        grid-area: f;

    }

    #label_titremsgcontact,

    #label_tphprofil {

        grid-area: g;

    }

    #input_titremsgcontact,

    #tphprofil {

        grid-area: h;

    }

    #label_corpsmsgcontact,

    #label_mailprofil {

        grid-area: i;

    }

    #input_corpsmsgcontact,

    #mailprofil {

        grid-area: j;

    }

    #label_groupprofil {

        grid-area: k;

    }

    #groupprofil {

        grid-area: l;

    }

    #cont_ctrlcontact,

    #cont_ctrlconnect,

    #cont_ctrlmdpoublie {

        display: grid;

        grid-template-columns: 4fr 1fr 4fr;

        gap: 1em;

        margin-left: 5%;

        margin-right: 5%;

        text-align: center;

    }

    #cont_ctrlcontact input,

    #cont_ctrlconnect input,

    #cont_ctrlmdpoublie input {

        width: 100%;

        text-align: center;

    }

    .form_labelctrl {

        text-align: center;

    }

    #cont_btnctct,

    #cont_btninscri,

    #cont_btnconnect,

    #cont_btnmdpoublie,

    #cont_btnconfirmdecon,

    #cont_btnnouveaumessage,

    #cont_btnrecherchermessage,

    #cont_btneditermsg,

    #cont_btnswitchpsd {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 1em;

        margin-left: 5%;

        margin-right: 5%;

        text-align: center;

    }

    #cont_valauto {

        display: grid;

        grid-template-columns: 1fr 9fr;

        gap: 1em;

        margin-left: 5%;

        margin-right: 5%;

        text-align: justify;

        font-size: 1em;

    }

    #input_valauto {

        display: flex;

    }

    #valauto {

        margin: auto;

    }

    #cont_btnmsginfo,

    #cont_btntokeninfo,

    #cont_btnnewpsd,

    #cont_btnnewpsdNOK,

    #cont_btnvueprofil {

        display: grid;

        grid-template-columns: 1fr;

        margin-left: 20%;

        margin-right: 20%;

        text-align: center;

    }

    #cont_btnsupprmsg {

        display: grid;

        grid-template-columns: 1fr;

        margin-left: 28%;

        margin-right: 28%;

        text-align: center;

    }

    .mdp_oublie {

        margin-left: 0%;

        margin-right: 60%;

        text-align: center;

        font-size: 0.7em;

        font-style: oblique;

        color: black;

    }

    .mdp_oublie:hover {

        cursor: pointer;

        font-weight: bold;

        color: red;

    }

    .btn_menuprofil {

        width: 12em;

        height: 1.8em;

        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

        font-size: 1.2em;

        color: white;

        background: linear-gradient(45deg, rgba(227, 159, 158, 1), 50%, rgba(155, 169, 172, 1));

        border: unset;

        border-radius: 0.5em;

    }

    .btn_menuprofil:hover {

        cursor: pointer;

        font-weight: bold;

        color: rgb(219, 96, 95);

        background: linear-gradient(135deg, rgba(155, 169, 172, 1), 50%, rgba(227, 159, 158, 1));

        border: inset;

    }

    /* -- FIN -- Configuration du MODAL "FORMULAIRE DE CONTACT","FORMULAIRE D'INSCRIPTION", "FORMULAIRE DE CONNEXION", "FORMULAIRE OUBLI MDP", "CONFIRMATION DE DECONNEXION" , "NOUVEAU MESSAGE", "RECHERCHER MESSAGE", "EDITER MESSAGE", "MESSAGES D'INFORMATIONS", "TOKEN INSCRIPTION" , "NOUVEAU PSD", "VUE PROFIL", "SWITCH PSD"

*** en fonction des largeurs d'écrans */

}