/*   version 1 du 01-05-2023   
modif pour topnav a{.. }   si smartphone */
* {
    box-sizing: border-box;
}

body {
    margin: 5px;
    background: #fefef6;
    font-size: 1rem;
    font-family: "Hevetica Neue", Helvetica, Arial, sans-serif;
}
/* Style the header */
.header {
    background-color: rgb(242, 244, 225);
    color: #585942f1;
    padding: 4px;
    text-align: center;
}

/* Style the top navigation bar */
.topnav {
    font-size: 1.5rem;
    overflow: hidden;
    background-color: rgb(242, 244, 225);
}

/* Style the topnav links */
.topnav a {
    float: left;
    width: 25%;  
    display: block;
    color: inherit;
    text-align: center;
    padding: 3px 10px;
    text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
    color: rgba(69, 8, 251, 0.59);

    background-color: #ddd;

}

input {
    padding: 8px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border-radius: 6px;
    border-width: 2px;
    padding: 5px;
}

input.larger {
    transform: scale(3);
    margin: 30px;
}

input:invalid {
    border: 2px dashed red;
    background-color: #FDD;
}

label {
    padding: 12px 12px 12px 0;
    display: inline-block;
}

span.couleur_rouge {
    color: rgb(197, 14, 14);
}

span.couleur_verte {
    color: rgb(35, 185, 42);
    font-size: 20px;
}

span.couleur_bleu {
    color: rgb(59, 8, 240);
}

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    padding: 0 2em;
    color: rgb(88, 17, 229);
    text-align: center;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.5rem;
    letter-spacing: .1rem;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 6px;
    border: 1px solid #bbb;
    cursor: pointer;
}


/* Create three unequal columns that floats next to each other */
.column {
    float: left;
    padding: 10px;
}

/* Left and right column */
.column.side {
    width: 10%;
}

/* Middle column */
.column.middle {
    width: 80%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 580px) {

  .column.side,    
    .column.middle {
        width: 100%;
    }
        /* Style the topnav links */
        .topnav a {
            font-size: 0.8em;
            float: left;
            /*  width: 25%;  */
         /*   display: block; */
    color: inherit; 
    /* color: rgb(35, 185, 42);  */
            text-align: center;
            padding: 3px 3px;
         /*   padding: 3px 10px;  */
            text-decoration: none;
        }
}