/* --------------------------------------------
----                                       ----
----  EN MODE DE FONCTIONNEMENT TELEPHONE  ----
----                                       ----
---------------------------------------------*/


@media screen and (max-width:767.98px) {
    body .content a {
        text-decoration: none;
        color: snow;
    }
    .content {
        padding: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: auto;
        height: auto;
    }
    .info {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-bottom: 20px;
        width: auto;
        height: auto;
        /* border: solid brown; */
    }
    .formulaire {
        width: 90%;
        height: auto;
        margin-bottom: 20px;
        /* border: solid brown; */
    }
    .telephone {
        padding-top: 5px;
        text-align: center;
        margin: 10px;
        width: 225px;
        height: 120px;
        border-radius: 15px;
        border: solid #595454;
        background-color: #595454;
        opacity: 0.85;
        color: snow;
        text-shadow: 1px 1px 2px black, 0 0 1em rgb(81, 80, 80), 0 0 0.2em rgb(140, 140, 143);
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
    .localisation {
        padding-top: 5px;
        padding-bottom: 2px;
        text-align: center;
        margin: 10px;
        width: 225px;
        height: 120px;
        border-radius: 15px;
        border: solid #4B8BAF;
        background-color: #4B8BAF;
        opacity: 0.85;
        color: snow;
        letter-spacing: -0.052em;
        text-shadow: 1px 1px 2px rgb(66, 77, 96), 0 0 1em rgb(103, 157, 187), 0 0 0.2em rgb(140, 140, 143);
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
    .email {
        padding-top: 5px;
        text-align: center;
        margin: 10px;
        width: 225px;
        height: 120px;
        border-radius: 15px;
        border: solid #595454;
        background-color: #595454;
        opacity: 0.85;
        color: snow;
        text-shadow: 1px 1px 2px black, 0 0 1em rgb(81, 80, 80), 0 0 0.2em rgb(140, 140, 143);
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
    .telephone h2 {
        margin-top: 2px;
    }
    .localisation h2 {
        margin-top: 2px;
        margin: 0;
    }
    .localisation p {
        margin: 0;
    }
    .email h2 {
        margin-top: 2px;
    }
    .sujet {
        font-size: 1.2em;
        display: flex;
        text-align: center;
        align-items: center;
        float: left;
    }
    .donnees label {
        font-size: 1.5em;
        vertical-align: top;
        float: left;
        text-align: left;
    }
    input {
        font-size: 1.3em;
        width: 100%;
        border: solid 1px rgb(1, 1, 1);
        background-color: #c4c4c47e;
        border-radius: 5px;
        margin-bottom: 5px;
        padding-left: 5px;
    }
    .radio {
        margin-left: 10px;
    }
    input[type="radio"] {
        font-size: 1.5em;
        /* -ms-transform: scale(1.8); */
        /* IE 9 */
        /* -webkit-transform: scale(1.8); */
        /* Chrome, Safari, Opera */
        transform: scale(1.2);
        /* margin-right: 10px; */
        margin-left: 5px;
        margin-top: 10px;
        margin-bottom: 10px;
        width: 100%;
    }
    textarea {
        width: 100%;
        font-size: 1.5em;
        border: solid 1px black;
        background-color: #c4c4c47e;
        border-radius: 5px;
        resize: none;
        padding-left: 5px;
        width: 100%;
    }
    /* div bouton */
    .bouton {
        /* border: solid brown; */
        width: auto;
        height: auto;
        margin-bottom: 20px;
    }
    /* design bouton valider */
    .valider {
        background-color: #88B957;
        opacity: 0.53;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 8px 20px;
        cursor: pointer;
        border-radius: 10px;
    }
    .valider:hover {
        background-color: #3f6a15;
        opacity: 0.53;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 8px 20px;
        cursor: pointer;
        border-radius: 10px;
    }
    /* design bouton annuler */
    .annuler {
        background-color: #57A1B9;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 8px 20px;
        cursor: pointer;
        border-radius: 10px;
    }
    .annuler:hover {
        background-color: #2c738b;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 8px 20px;
        cursor: pointer;
        border-radius: 10px;
    }
    /* ---------- */
}



/* -----------------------------------------
----                                    ----
----  EN MODE DE FONCTIONNEMENT PC      ----
----                                    ----
--------------------------------------------
*/


@media screen and (min-width:768px) {
    body .content a {
        text-decoration: none;
        color: snow;
    }
    .content {
        padding: 10px;
        margin: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;
    }
    .info {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin-bottom: 20px;
        width: auto;
        height: auto;
        /* border: solid brown; */
    }
    .formulaire {
        width: auto;
        height: auto;
        margin-bottom: 20px;
        /* border: solid brown; */
    }
    .telephone {
        padding-top: 5px;
        text-align: center;
        margin: 10px;
        width: 225px;
        height: 120px;
        border-radius: 15px;
        border: solid #595454;
        background-color: #595454;
        opacity: 0.85;
        color: snow;
        text-shadow: 1px 1px 2px black, 0 0 1em rgb(81, 80, 80), 0 0 0.2em rgb(140, 140, 143);
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
    .localisation {
        padding-top: 5px;
        text-align: center;
        margin: 10px;
        width: 225px;
        height: 120px;
        border-radius: 15px;
        border: solid #4B8BAF;
        background-color: #4B8BAF;
        opacity: 0.85;
        color: snow;
        letter-spacing: -0.052em;
        text-shadow: 1px 1px 2px rgb(66, 77, 96), 0 0 1em rgb(103, 157, 187), 0 0 0.2em rgb(140, 140, 143);
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
    .email {
        padding-top: 5px;
        text-align: center;
        margin: 10px;
        width: 225px;
        height: 120px;
        border-radius: 15px;
        border: solid #595454;
        background-color: #595454;
        opacity: 0.85;
        color: snow;
        text-shadow: 1px 1px 2px black, 0 0 1em rgb(81, 80, 80), 0 0 0.2em rgb(140, 140, 143);
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
    .telephone h2 {
        margin-top: 2px;
    }
    .localisation h2 {
        margin-top: 2px;
        margin: 0;
    }
    .localisation p {
        margin: 0;
    }
    .email h2 {
        margin-top: 2px;
    }
    .donnees label {
        width: 150px;
        font-size: 2em;
        vertical-align: top;
        float: left;
        text-align: left;
    }
    input {
        font-size: 2em;
        border: solid 1px rgb(1, 1, 1);
        background-color: #c4c4c47e;
        border-radius: 5px;
        margin-bottom: 5px;
        padding-left: 5px;
        width: 100%;
    }
    .sujet {
        font-size: 2em;
        display: flex;
        text-align: center;
        align-items: center;
        float: left;
    }
    .radio {
        margin-left: 10px;
    }
    .radio_label {
        width: 150px;
        vertical-align: top;
        float: left;
        text-align: left;
    }
    input[type="radio"] {
        /* -ms-transform: scale(1.8); */
        /* IE 9 */
        /* -webkit-transform: scale(1.8); */
        /* Chrome, Safari, Opera */
        transform: scale(1.8);
        margin-right: 10px;
        margin-left: 10px;
        margin-top: 8px;
        width: 100%;
        align-items: flex-start;
    }
    textarea {
        font-size: 2em;
        border: solid 1px black;
        background-color: #c4c4c47e;
        border-radius: 5px;
        resize: none;
        padding-left: 5px;
        width: 100%;
    }
    /* div bouton */
    .bouton {
        /* border: solid brown; */
        width: auto;
        height: auto;
        margin-bottom: 20px;
        padding-left: 20px;
    }
    /* design bouton valider */
    .valider {
        background-color: #88B957;
        opacity: 0.53;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 8px 20px;
        cursor: pointer;
        border-radius: 10px;
    }
    .valider:hover {
        background-color: #3f6a15;
        opacity: 0.53;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 8px 20px;
        cursor: pointer;
        border-radius: 10px;
    }
    /* design bouton annuler */
    .annuler {
        background-color: #57A1B9;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 8px 20px;
        cursor: pointer;
        border-radius: 10px;
    }
    .annuler:hover {
        background-color: #2c738b;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 8px 20px;
        cursor: pointer;
        border-radius: 10px;
    }
}