*{box-sizing:border-box}
body{margin:0 auto;padding-bottom:2rem;font-family:ralewayReg,Arial,sans-serif;color:#3a485f;font-size: 12px}
header{display:flex;align-items:center;flex-wrap:nowrap;height: 7em;max-width:1000px;}
.lat{width:15%}
.centre{width:70%;text-align:center}
#img-entete{Width:90%;height:auto;max-width:400px;}
#titre{padding:0 1rem}
#titre p{font-size:1.4em;}
#logo-gdf{Width:80%;height:auto;padding: 10% 0 0 15%;}
h1{margin:0;padding:0;text-align:center}
form{padding:0 1rem;margin-bottom:2rem}
h2{margin:1rem 0}
h2:first-child{margin:0}
.fl-n1{display:flex;justify-content:space-between;flex-wrap:wrap}
.fl-n1>div{width:100%;margin-bottom:.8rem}
.coord{position:relative}
.coord input{color:#3a485f;font-size:1rem;border:none;border-bottom:1px solid #3a485f;height:3rem;width:100%;padding-top:1.5rem;}
.coord div{position:absolute;bottom:.2rem;font-size:1rem;line-height:1rem;transition:all.4s}
.coord input:focus{outline:none;border-bottom-width:2px}
.coord input:focus+div,.coord div.fill{bottom:1.8rem;font-size:.9rem}
.asterisk{color:#f45d5c;font-size:1.4em;display:inline-block}
.input-date{padding:.5rem;border:2px solid #3a485f;width:100%;max-width:8rem;border-radius:2rem;font-size:1rem;cursor:pointer;text-align:center;transition:box-shadow .3s}
.input-date:focus,.actif{box-shadow:0 0 0 3px #f4ae5e;outline:none}
.fleche-date{width:1.5rem;margin:0 .6rem;flex-shrink:0;stroke:#3a485f;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;fill:none}
#pers{display:flex;flex-direction:column}
.nb-pers{position:relative;width:6.25rem;margin:.5rem 0;font-size:1rem;text-decoration:none;cursor:pointer}
select{appearance:none;text-transform:none;position:relative;padding:.6rem 2.5rem .5rem 1.6rem;width:100%;color:#3a485f;border:.125rem solid #3a485f;border-radius:2rem;background-color:transparent;cursor:pointer;transition:box-shadow .3s ease-in-out;font-size:1rem}
select:focus{box-shadow:0 0 0 3px #f4ae5e;outline:none}
.select-label{position:absolute;top:.75rem;left:7rem}
#select-picto{stroke:#3a485f;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;fill:none}
.select-picto{position:absolute;pointer-events:none;bottom:.65rem;right:1rem;width:1.5rem;height:1rem}
textarea{border-radius:.5rem;border:1px solid #3a485f;padding:1.25rem;min-width:100%;max-width:100%;font-family:sans-serif;font-size:100%;min-height:10rem;margin-bottom:1rem;transition:box-shadow .3s ease-in-out}
textarea:focus{box-shadow:0 0 0 3px #f4ae5e;outline:none}
#btns{display:flex;flex-direction:column;margin:0;text-align:center}
.btn-envoi{appearance:none;padding:.5rem 1.2rem;margin:auto;display:inline-block;font-size:1.2rem;line-height:1.2;text-decoration:none;background-color:#f12e2c;color:#fff;border-width:0;border-radius:60em;transition:all .3s ease-in-out;max-width:17rem;cursor:pointer}
.btn-envoi:hover{box-shadow:0 0 0 3px #f4ae5e}
.btn-annul{margin:1rem auto;text-decoration:underline;cursor:pointer;}
.btn-annul:hover{text-decoration:unset}
.fl-vh-center{display:flex;justify-content:center;align-items:center}
#cal-sel{display:none;overflow:visible;z-index:4;position:absolute;padding:0 2em 1em;border:1px solid #3a485f;border-radius:.3em;text-align:center;line-height:1.5;font-weight:400;background-color:#FFF;color:#3a485f;box-shadow:0 0 .3rem .2rem rgba(0,0,0,.1);cursor:default}
#fleche-cadre{position:absolute;z-index:5;top:-22px;left:1px;transition:left 1s}
#cal-sel-titre{display:flex;justify-content:space-between;align-items:center;font-size:1.2rem;user-select:none}
[id*="nav-"]{cursor:pointer;padding:0 10px;stroke:#3a485f;stroke-width:5;fill:none}
#nav-d{transform:rotate(180deg)}
#cal-sel table{border:1px solid #3a485f;margin:.4em auto auto;empty-cells:hide;color:#5d5d5d;font-size:.8rem;}
#cal-sel th{height:2em;}
#cal-sel td{width:2.4em;height:2em;font-weight: bold;}
.jchp{color:red;background-color:#fC6;cursor:pointer}
.oo{text-shadow:1px 1px 1px rgba(33,33,33,.25);color:#fff!important;background-color:#749dce!important;}
.ov{color:#fff;background:linear-gradient(140deg,#749dce 35%,#e3e3e3 65%);}
.vo{background:linear-gradient(140deg,#e3e3e3 35%,#749dce 65%);}
.vv{background-color:#e3e3e3!important;cursor:pointer;}
.hz{color:silver;background-color:#e2e2e2}
.ap{cursor:default}
.dispo:hover{background-color:#FC6;color:red;background-image:none;cursor:pointer}
#legend-cal{margin-top:1em;display:flex;justify-content:center;align-items:center;height:1.2em}
#img-va{width:1.2em;height:1.5em;margin-right:.3em;background-color:#e3e3e3}
#img-oc{width:1.2em;height:1.5em;margin-left:1em;margin-right:.3em;background-color:#749dce;}
.chpErr{border:1px solid red;background-color:#fba}
#err-msg,#err-jour,#err-nbj3,#err-nb{padding:.5rem 1.25rem;border:thin solid red;border-radius:.5rem;font-family:sans-serif;color:red;display:none}
#err-jour{border:thin solid #0C0;color:#0C0}
@media (min-width: 768px) {
body{max-width:1000px;font-size: 16px; box-shadow:0 0 1rem rgba(0,0,0,.1)}
#titre{margin:auto;padding:0 2rem;max-width:780px}
form{border-radius:.4rem;padding:1rem 2rem 3rem;max-width:760px;margin:0 auto 5rem;box-shadow:0 0 .4rem .2rem rgba(0,0,0,.1)}
h2:first-child{margin:1rem 0 0.5rem}
.fl-n1>div{width:48%}
#pers{padding-left:10%}
}
/* === Volet menu === */
#icon-aide{cursor:pointer;margin:auto;text-align:center;width:1.2em;height:1.2em;font-size:2em;border:2px solid #3a485f;border-radius:50%;}
#volet{text-align:center;position:fixed;top:90px;right:-19.3em;width:19em;overflow:hidden;z-index:2;background-color:white;box-shadow:0 0 .4rem .2rem rgba(0,0,0,.1);border-radius:8px 0 0 8px;padding:0.3em 0 1em 0;transition:0.4s;}
#volet div:first-child{text-align:right;padding-right: 1em;}
#volet h3{margin-top:0;}
#volet img{width: 100px;height: 100px; border-radius: 50%;}
#btn-volet{cursor:pointer;font-size:2em;font-weight:bold;color:grey;}
#btn-volet:hover{color:darkgray;}
#inpt-volet{display:none;}
#inpt-volet:checked+#volet{right:-2px;transition:all 0.4s;}