:root {
    --slowgreen: #506858;
}


html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;

    /* Set default font size so that 10point is 1emBy default 1em is 16point.10/16 = 0.625After that, ems specified are same as point/pixelsie 12 point is 1.2em, 10point is 1em etc*/
    /*font-size: 62.5%;*/

    /* part of screen jumping fix */
    /* overflow-y: scroll; /* A;ternative method to add scrollbars to prevent jumping page - not all browsers support this */
}


body {
    margin: 0;
    padding: 0;
    font-family: 'Times New Roman', Times, serif !important;
    font-size: clamp(10px, 1.4vw, 48px);
    color: #FEFEFE;
    text-align: center;

}



img {
    border: 0;
    margin: 0px;
    padding: 0px;
}

form label {
    margin: 0px 0px 2px 0px;
}
/*
iframe {
    opacity: 90%;
}
*/
.span1 { width: 80px; }
.span2 { width: 160px; }
.span3 { width: 240px; }
.span4 { width: 320px; }
.span5 { width: 400px; }
.span6 { width: 480px; }
.span7 { width: 560px; }
.span7 { width: 640px; }


/* Give most elements the same font size and family as the body */
div,
span,
p,
input,
textarea,
button,
table,
th,
tr,
td,
ol,
ul,
li,
blockquote,
form,
a {
    font-size: inherit;
    font-family: inherit;
}


h1 {
    font-size: 4vh;
    text-align: center;
    margin: 0;
    margin: 3vh 0vw 3vh 0vw;
    font-weight: 500;
    font-family:'Times New Roman', Times, serif;
}

h2 {
    font-size: 3vh;
    text-align: center;
    margin: 4rem 0rem 1rem 0rem;
    font-weight: normal;
    font-family:'Times New Roman', Times, serif;
}

h3 {
    margin: 1rem 0rem 0rem 0rem;
}

p {
    line-height: 1.0;
    text-align: center;
    margin: 1rem 0rem 1rem 0rem;
    font-size: inherit;
}

p.footnote {
    font-size: 0.8rem;
    margin: 0.5rem;
}

p + ul {
    margin-bottom: 0rem;
}

h1.nobanner {
    margin-top: 5rem;
}

ul {
    list-style-position: outside;
    /*list-style-type: none;
    list-style: none;*/
    margin: 0px;
    padding: 0px;
    /*color: gray;*/
}

li {
    margin: 0px;
    padding: 0px;
}



#logo {
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2))
}


footer {
    display: grid;
    align-content: end;
    color: whitesmoke;
    background-color: rgb(64, 83, 70);
}

/* Menu button rollover */
#menu a:hover {
    opacity: 100% !important;
}

/* Make menu buttons show as "down" on their relevant page */
/* Body of the page has an id with the page name */
/* so we can use that to change the attributes of a specific button on that page */

#bienvenue a.bienvenue {
    opacity: 90% !important;
}

#trouvez a.trouvez {
    opacity: 90% !important;
}

#horaires a.horaires {
    opacity: 90% !important;
}

#contact a.contact {
    opacity: 90% !important;
}


#hero header #menu {
    text-align: center;
    width: 100%;
    display: block;
}

#hero header #menu a {
    text-align: center;
    display: block;
    text-align: center;
    color: #FEFEFE;
    background-color: #506858;
    opacity: 60%;
    border-radius: 8px;
    margin: 0.4rem 0px 0.4rem 0px;
    padding: clamp(5px, 1vh, 2vh);
    cursor: pointer;
    display:block;
    text-decoration: none;
  }


#hero blockquote {
    grid-column: 3;
    width: 30vw;
    align-self: center;
    color: rgba(0,0,0,0.7); /*var(--slowgreen);*/
    font-size: 6vh;
    font-style: italic;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
  }


/********************************************************************************/

main {
    align-items: center;
    display: block;
    text-align: left;
    font-size: clamp(1.1rem, 2.4vh, 5vh);
    color: #FEFEFE;
}

main hr {
    width: 50%;
}

main ul li {
    padding-left: 0px;
    margin-top: 10px;
    list-style: none;
    text-align: center;
}

/*
 __  __
|  \/  | __ _ _ __
| |\/| |/ _` | '_ \
| |  | | (_| | |_) |
|_|  |_|\__,_| .__/
             |_|

*/

#trouvez main {
    padding: 1px 0vw 0vh 0vw;  /* 1px fixes h1 margin collapse */
    width: 100%
}

#trouvez main iframe {
    width: 100%;
    height: 70vh;
}






/*
   ____            _             _
  / ___|___  _ __ | |_ __ _  ___| |_
 | |   / _ \| '_ \| __/ _` |/ __| __|
 | |__| (_) | | | | || (_| | (__| |_
  \____\___/|_| |_|\__\__,_|\___|\__|

*/

#contact main form input {
    width: 100%;
}

#contact main form {
    width: 100%;
    font-size: clamp(18px, 3vh, 5vh);
}

#contact main form .fieldheader {
    font-size: 2.4vh;
    text-align: left;
    margin: 3vh 0vw 0vh 0vw;
    display: block;
    width: 100%;
}

input[type=text],
input[type=number],
input[type=tel],
input[type=email],
input[type=date],
select,
textarea {
    border: 1px solid var(--slowgreen);
    border-radius: 8px;
    padding: 0 0.5rem 0 0.5rem;
    color:  --slowgreen;
    font-size: 3vh;
    width: 100%;
    box-sizing: border-box;
    line-height: 4vh;
    height: 5vh;
    background-color: white;
}


input[type=text]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=email]:focus,
input[type=date]:focus,
select:focus,
textarea:focus {
    outline: none;
    border: 2px solid  black;
    /*box-shadow: 0px 0px 1px 3px  var(--slowgreen);*/
}

textarea {
    height: 18vh;
    line-height: 4vh;
}

.super {
    vertical-align: super;
    font-size: 1.6vh;
    color: #e5097f;
}

#contact main form .required {
    /*font-size: 0.8rem;*/
    color: #999;
    /*margin-left: 0.2rem;*/
}
/******************************************************************************/
/* CUSTOM CHECHBOX */
/******************************************************************************/

input[type=checkbox] {
    -webkit-appearance: none;
    border: 1px solid #ccc;
    height: 18px;
    width: 18px;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

input[type=checkbox]:checked {
    background-color: #e5097f;
    border: 1px solid #e5097f;
    outline: none;
}

/******************************************************************************/

form button {
    background-color: rgba(139, 151, 137, 1);
    border-radius: 8px;
    padding: 0.25rem 1rem 0.25rem 1rem;
    margin: 2rem 0 0 0;
    color: white;
    font-size: clamp(18px, 2vh, 5vh);
    display: inline-block;
    text-decoration: none;
    white-space: nowrap;
    border-style: solid;
    border: none;
    cursor: pointer;
    outline: none;
    z-index: 2;
}

form button:active {
    background-color: rgba(80, 104, 88, 1);
}


/* generic form */

form .line {
    width: 100%;
    text-align: start;
}

form .message {
    width: 100%;
}


#horaires .table {
    display: grid;
    grid-template-columns: min-content min-content; /* 2 columns */
    gap: 4px 20px; /* row gap / column gap */
    width: min-content;   /* key line */
    margin: 0 auto;       /* keep it centered */
}

#horaires .table > div:nth-child(2n) {
    white-space: nowrap;
}