@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap');

body, html {
   padding:0;
   margin:0;
   overflow-x:hidden;
   font-family:'Roboto', sans-serif;
   font-size:18px;
   line-height:22px;
   color:#303030;
}

img {
   display:block;
   max-width:100%;
   height:auto;
}

h1 {
   font-size:2em;
   font-weight:700;
   margin-bottom:60px;
}

h2 {
   font-size:1.4em;
   font-weight:400;
}

h3 {
   font-size:1.12em;
   font-weight:400;
}

h4 {
   font-size:1em;
   font-weight:400;
}

a {
   color:#0083b4;
}

.none {
   text-decoration:none;
}

p {
   font-size:0.9em;
}

button {
   width:100%;
   height:48px;
   max-width:300px;
   margin:60px auto 0;
   padding:0 20px;
   display:block;
   border:0;
   border-radius:5px;
   color:#fff;
   letter-spacing:0.03em;
   font-size:1em;
   letter-spacing:0.03em;
   cursor:pointer;
   background-color:#8cc63f;
   transition:0.27s;
}

button:hover {
   background-color:#6d9834;
   transition:0.27s;
}

.bleu {
   width:100%;
   height:48px;
   max-width:300px;
   margin:15px auto 0;
   padding:0 20px;
   display:block;
   border:0;
   border-radius:5px;
   color:#fff;
   letter-spacing:0.03em;
   font-size:1em;
   letter-spacing:0.03em;
   cursor:pointer;
   background-color:#0087bc;
   transition:0.27s;
}

.bleu:hover {
   background-color:#005d81;
   transition:0.27s;
}

input[type="button"] {
   width:100%;
   height:48px;
   max-width:300px;
   padding:0 20px;
   display:block;
   border:0;
   border-radius:5px;
   color:#fff;
   letter-spacing:0.03em;
   font-size:1em;
   letter-spacing:0.03em;
   cursor:pointer;
   background-color:#8cc63f;
   transition:0.27s;
}

input[type="button"]:hover {
   background-color:#6d9834;
   transition:0.27s;
}

.container {
   max-width:1150px;
   width:100%;
   margin:0 auto;
   padding:0 25px;
   box-sizing:border-box;
}

.container-plan-virage {
   padding:0 30px;
}

.row {
   display:-ms-flexbox;
   display:flex;
   -ms-flex-wrap:nowrap;
   flex-wrap:nowrap;
   width:100%;
}

.row-wrap {
   display:-ms-flexbox;
   display:flex;
   -ms-flex-wrap:wrap;
   flex-wrap:wrap;
   width:100%;
}

.col-2 {
   width:100%;
   max-width:50%;
   float:left;
}

.col-33 {
   width:100%;
   max-width:33.3333%;
   float:left;
}

.col-66 {
   width:100%;
   max-width:66.6666%;
   float:left;
}

.col-4 {
   width:100%;
   max-width:25%;
   float:left;
}

.col-60 {
   width:100%;
   max-width:29.65%;
   float:left;
}

.col-5 {
   width:100%;
   max-width:20%;
   float:left;
}

.arriere-plan-blanc {
   width:100%;
   height:auto;
   padding:60px;
   position:relative;
   opacity:0.95;
   z-index:6;
   box-sizing:border-box;
   background-color:#fff;
   display:block;
   margin:15% auto 10%;
   box-shadow:0px 0px 10px #c6c6c6;
   -moz-box-shadow:0px 0px 10px #c6c6c6;
   -webkit-box-shadow:0px 0px 10px #c6c6c6;
}

.arriere-plan-blanc a {
   display:contents;
}

.arriere-plan-blanc input[type="button"] {
   margin:40px auto 0;
}

.arriere-plan {
   position:fixed;
   z-index:-1;
   height:auto;
   width:100%;
   background-image:linear-gradient(#efefef, #fff);
   background-size:cover;
   min-height:100%;
}

.arriere-plan-blanc h2 {
   margin-top:-5px;
   margin-bottom:28px;
   color:#0087bc;
}

.arriere-plan-blanc h3 {
   color:#0087bc;
}

.ruban-gauche {
   position:absolute;
   left:-10px;
   top:60%;
}

.ruban-droit {
   position:absolute;
   right:-10px;
   top:10%;
}

.logo {
   top:20px;
   position:fixed;
}

.logo-cache {
   display:none;
   margin:0 auto 80px;

}

#logo {
   margin-top:20px;
   position:relative;
}

form h3 {
   margin-top:-5px;
   margin-bottom:28px;
   color:#0087bc;
}

input[type="checkbox"] {
   display:none;
}

input[type="checkbox"] + label {
   position:absolute;
   right:53px;
   margin-top:31px;
   background-image:url('../images/oeil.png');
   width:auto!important;
   display:block;
}

input[type="checkbox"]:checked + label {
   position:absolute;
   right:53px;
   margin-top:31px;
   background-image:url('../images/oeil.png');
   width:auto!important;
}

.mises-a-jour {
   z-index:9999;
   display:block;
   position:absolute;
   background-color:rgba(127,127,127,0.6);
   overflow:hidden;
   width:100%;
   height:100%;
}

.mises-a-jour .mises-a-jour-bloc-blanc {
   text-align:center;
   padding:60px 30px;
   background-color:#fff;
   display:block;
   margin-top:7%;
   margin-right:auto;
   margin-left:auto;
   width:80%;
}

.mises-a-jour h2 {
   color:#0087bc;
}

/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
Header
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

header .haut {
   width:100%;
   height:auto;
   background-image:linear-gradient(to right, #68b76e, #0087bc);
   display:block;
   color:#fff;
}

header .haut .droit {
   max-width:50%;
   width:100%;
   text-align:right;
   line-height:42px;
   font-size:0.74em;
   float:left;
}

header .haut .droit a {
   color:#fff;
   text-decoration:none;
}

header .haut .gauche {
   max-width:50%;
   width:100%;
   text-align:left;
   line-height:42px;
   font-size:0.9em;
   float:left;
}

header .col-2 {
   width:100%;
   max-width:50%;
   float:left;
}

header button {
   float:right;
}

.menu-adaptatif {
   display:none;
}

/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
Main Administrateur & Utilisateurs
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

main .col-gauche {
   width:100%;
   height:auto;
   max-height:100%;
   max-width:30%;
   margin-top:36px;
   float:left;
}

main .col-droite {
   width:100%;
   height:auto;
   max-height:100%;
   max-width:70%;
   float:left;
}

.col-gauche h3 {
   margin:0 0 30px;
   font-weight:700;
}

.page {
   margin-top:36px;
   display:block;
   background-color:#f7f7f7;
   height:600px;
   padding:30px 50px;
   box-sizing:border-box;
}

.page p {
   margin-bottom:30px;
}

.page h3 {
   color:#0087bc;
}

.plan-virage {
   width:80%;
   min-height:92px;
   display:block;
}

.plan-virage img {
   max-width:30px;
   float:left;
   height:auto;
   margin-right:20px;
   padding-bottom:58px;
}

.titres-plans {
   font-size:1.05em;
   margin-top:10px;
   margin-bottom:16px;
}

.plan-virage .titre-gauche {
   font-size:0.8em;
   font-weight:700;
   line-height:1.7em;
   margin:8px 0 0;
   top:-6px;
   position:relative;
}

.plan-virage .sous-titre-gauche {
   font-size:0.7em;
   font-weight:400;
   line-height:1.5em;
   margin:0;
   top:-6px;
   position:relative;
}

.plan-virage .date {
   font-size:0.7em;
   font-weight:300;
   line-height:1.3em;
   float:left;
   top:-6px;
   position:relative;
}

.modifier {
   color:#68b76e;
   top:-10px;
   position:relative;
   font-size:0.82em;
   font-weight:300;
   line-height:1.4em;
}

.visualiser {
   color:#0087bc;
   top:-9px;
   position:relative;
   font-size:0.82em;
   font-weight:300;
   line-height:1.4em;
}

.span-date {
   margin-left:12px;
   font-size:0.8em;
   font-style:italic;
}

#divChar {
   width:22%;
   height:46px;
   min-width:307px;
   line-height:46px;
   font-size:1.1em;
   font-weight:700;
   left:39%;
   text-align:center;
   background-color:#000;
   color:#fff;
   border-radius:30px;
   position:fixed;
   top:25px;
   opacity:0;
   transition:0.8s;
   z-index:99;
}


/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
Formulaires connexion | inscription
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.connexion {
   max-width:400px;
   height:auto;
   background-color:#fff;
   display:block;
   margin:10% auto 40px;
   padding:40px;
   box-sizing:border-box;
   box-shadow:0px 0px 10px #c6c6c6;
   -moz-box-shadow:0px 0px 10px #c6c6c6;
   -webkit-box-shadow:0px 0px 10px #c6c6c6;
   position:relative;
   z-index:6;
}

.inscription {
   max-width:600px;
   height:auto;
   background-color:#fff;
   display:block;
   margin:10% auto 40px;
   padding:40px;
   box-sizing:border-box;
   box-shadow:0px 0px 10px #c6c6c6;
   -moz-box-shadow:0px 0px 10px #c6c6c6;
   -webkit-box-shadow:0px 0px 10px #c6c6c6;
   position:relative;
   z-index:6;
}

#connexion h1,
#insription h1 {
   margin-top:0;
}

#connexion h4,
#insription h4 {
   margin-bottom:40px;
}

#connexion input[type="submit"] {
   width:100%;
   height:48px;
   max-width:300px;
   margin:60px auto 0;
   padding:0 20px;
   display:block;
   border:0;
   border-radius:5px;
   color:#fff;
   letter-spacing:0.03em;
   font-size:1em;
   letter-spacing:0.03em;
   cursor:pointer;
   background-color:#8cc63f;
   transition:0.27s;
}

#connexion input[type="submit"]:hover {
   background-color:#6d9834;
   transition:0.27s;
}

.connexion label,
.inscription label {
   font-size:0.9em;
}

.connexion input,
.inscription input {
   width:100%;
   height:48px;
   padding:0 16px;
   font-size:0.9em;
   box-sizing:border-box;
   border:1px solid #cdcdcd;
   border-radius:5px;
   margin:15px 0 11px;
   background-color:#fafbfb;
   transition:1.5s;
}

.connexion input:focus,
.inscription input:focus {
   box-shadow:0px 0px 8px #96daf5;
   -moz-box-shadow:0px 0px 8px #96daf5;
   -webkit-box-shadow:0px 0px 8px #96daf5;
   transition:0.4s;
}

.connexion input[type="submit"],
.inscription input[type="submit"] {
   border:0;
   border-radius:5px;
   color:#fff;
   font-size:1em;
   letter-spacing:0.03em;
   cursor:pointer;
   background-color:#8cc63f;
   transition:0.27s;
}

.connexion input[type="submit"]:hover,
.inscription input[type="submit"]:hover {
   background-color:#6d9834;
   transition:0.27s;
}

.inscription .petit {
   font-size:12px;
   display:block;
   max-width:280px;
}

.paiement-input {
   width:50%;
   height:48px;
   padding:0 16px;
   font-size:0.9em;
   box-sizing:border-box;
   border:1px solid #cdcdcd;
   border-radius:5px;
   margin:15px 0 11px;
   background-color:#fafbfb;
   transition:1.5s;
}

.paiement-input:focus {
   box-shadow:0px 0px 8px #96daf5;
   -moz-box-shadow:0px 0px 8px #96daf5;
   -webkit-box-shadow:0px 0px 8px #96daf5;
   transition:0.4s;
}

.payment-form a {
   text-decoration:none;
}

.inscription .mot-de-passe {
   border:0;
   font-size:1.2em;
}

.erreur-form {
   color:red;
   font-size:0.8em;
   margin:-20px 0 20px;
   text-align:center;
   max-width:282px;
}

.erreur-form-2 {
   color:red;
   font-size:0.8em;
   margin:0 0 20px;
   text-align:left;
   max-width:282px;
}

.mot-de-passe-label {
   color:red;
}

.rc-anchor-normal {
   width:100%;
   max-width:300px;
}

/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
Formulaire Plan Virage
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.petit p {
   font-size:0.66em;
   line-height:1.3em;
}

.petit input,
.petit textarea {
   display:none;
}

.petit .label-line-height-height {
   width:99%!important;
}

.crayon {
   display:inline-block;
   max-width:20px;
   position:relative;
   margin-top:0;
   margin-right:10px;
   padding-left:4px;
   float:right;
   cursor:pointer;
}

.plan-virage-formulaire {
   margin-top:36px;
   overflow-wrap: break-word;
}

.plan-virage-formulaire label {
   text-align:center;
}

.plan-virage-formulaire .label-line-height-height {
   line-height:26px;
   height:64px;
   width:95%;
   position:relative;
   z-index:9;
}

.label-line-height-visualiser {
   line-height:26px!important;
   height:88px!important;
   width:95%;
   position:relative;
   z-index:9;
}

.plan-virage-formulaire .label-petit {
   font-size:0.9em;
}

.plan-virage-formulaire .label-line-height {
   line-height:35px;
}

.progres {
   height:100px;
}

.supprimer {
   position:relative;
   top:33px;
   font-size:0.8em;
}

.titre-section {
   width:100%;
   font-weight:600;
   font-size:28px;
   line-height:60px;
   margin:20px 0 0;
   position:relative;
}

.plan-virage-bandeau-titre {
   width:100%;
   height:50px;
   line-height:50px;
   font-size:28px;
   font-weight:700;
   color:#fff;
   padding-left:20px;
   margin-top:25px;
   margin-bottom:38px;
   text-transform:uppercase;
   box-sizing:border-box;
   display:block;
   float:left;
   background-image:linear-gradient(to right, #0087bc, #68b76e);
}

.plan-virage-titre {
   width:70%;
   float:left;
   height:45px;
   margin-bottom:30px;
}

.plan-virage-titre input::placeholder {
   font-style:italic;
   color:#464646;
}

.plan-virage-formulaire .plan-virage-titre input {
   font-size:1.4em;
   margin-bottom:0;
   margin-left:23px;
   width:100%;
   float:unset;
}

.invisible {
   visibility:hidden;
}

.plan-virage-date {
   width:100%;
   height:44px;
   height:45px;
   line-height:45px;
   float:left;
   margin-left:26px;
}

.planificateur-annuel-date {
   width:100%;
   height:44px;
   height:45px;
   line-height:45px;
   float:left;
   margin-left:26px;
}

.plan-virage-formulaire .plan-virage-date input {
   border:0;
   font-size:0.9em;
   text-align:right;
   cursor:pointer;
   padding:0;
}

.planificateur-annuel .planificateur-annuel-date input {
   border:0;
   font-size:0.9em;
   text-align:right;
   cursor:pointer;
   padding:0;
}

#datepicker {
   float:left;
   text-align:left;
   background-color:#0087bc;
   border-radius:30px;
   width:auto;
   margin-left:0;
   color:#fff;
   text-align:center;
   font-weight:400;
   max-width:127px;
}

.calendrier {
   max-width:40px;
   float:left;
   margin-top:7px;
}

.plan-virage-rencontre {
   height:35px;
   line-height:35px;
   width:100%;
   display:block;
   float:left;
   margin-bottom:20px;
   margin-left:26px;
}

.plan-virage-rencontre p {
   float:left;
   height:35px;
   line-height:35px;
   margin:0;
}

.plan-virage-formulaire .plan-virage-rencontre input {
   width:60%;
   float:left;
   margin:0 0 0 12px;
   height:35px;
   line-height:35px;
}

.plan-virage-formulaire label {
   width:100%;
   display:block;
   font-weight:900;
   line-height:60px;
   float:left;
}

.plan-virage-formulaire input {
   width:96%;
   float:right;
   line-height:44px;
   height:44px;
   box-sizing:border-box;
   padding:0 12px;
   margin:0 5px 10px 5px;
   border:1px #c2c2c2 solid;
   font-size:0.8em;
}

.plan-virage-formulaire .valeurs {
   width:33%;
}

.plan-virage-formulaire textarea {
   font-family:'Roboto', sans-serif;
   width:96%;
   float:right;
   height:98px;
   line-height:24px;
   box-sizing:border-box;
   padding:9px 12px;
   margin:0 5px 10px 5px;
   border:1px #c2c2c2 solid;
   font-size:0.8em;
   resize:none;
}

.plan-virage-formulaire .textarea-line-height {
   line-height:48px;
}

.plan-virage-formulaire .margin-none {
   margin-left:0;
   width:100%;
}

.plan-virage-formulaire .priorite {
   width:99%;
   float:left;
   margin-right:0;
}

.plan-virage-formulaire .float-right {
   float:right!important;
   margin-right:0;
}

.plan-virage-formulaire .duree {
   width:99%;
   float:left;
   margin-left:-1px;
}

.fleche-progres {
   background-image:url('../images/fleche-progres.png');
   background-repeat:no-repeat;
   width:38px;
   height:98px;
   margin-left:7.2%;
   margin-top:-21px;
   opacity:1;
   position:absolute;
   z-index:2;
}

.fleche-progres-2 {
   background-image:url('../images/fleche-progres.png');
   background-repeat:no-repeat;
   width:38px;
   height:98px;
   margin-left:7.2%;
   margin-top:-24px;
   opacity:1;
   position:absolute;
   z-index:2;
}

.plan-virage-bandeau {
   width:100%;
   height:50px;
   line-height:47px;
   font-weight:700;
   color:#fff;
   padding-left:20px;
   margin-top:0;
   margin-bottom:10px;
   box-sizing:border-box;
   display:block;
   float:left;
   background-image:linear-gradient(to right, #0087bc, #68b76e);
}

.plan-virage-bandeau-relative {
   width:100%;
   height:40px;
   line-height:40px;
   font-weight:700;
   color:#fff;
   padding-left:20px;
   box-sizing:border-box;
   display:block;
   float:left;
   background-image:linear-gradient(to right, #0087bc, #68b76e);
   position:relative;
}

.plan-virage-bandeau-relative-grand {
   width:100%;
   height:63px;
   line-height:40px;
   font-weight:700;
   color:#fff;
   padding-left:20px;
   box-sizing:border-box;
   display:block;
   float:left;
   background-image:linear-gradient(to right, #0087bc, #68b76e);
   position:relative;
}

.plan-virage-formulaire .plan-virage-enregistrer {
   background:linear-gradient(to right, #c0c0c0, #a5a5a5);
   max-width:200px;
   font-size:1em;
   margin:0 auto;
   float:unset;
   color:#fff;
   cursor:pointer;
   border-radius:5px;
   transition:0.2s ease-in-out;
}

.plan-virage-enregistrer:hover {
   opacity:0.7;
   transition:0.2s ease-in-out;
}

.single-duree {
   width:98%!important;
   float:right!important;
   line-height:24px!important;
   height:44px!important;
   box-sizing:border-box!important;
   padding:9px 12px!important;
   margin:0 0 10px 5px!important;
   border:1px #c2c2c2 solid!important;
   font-size:0.8em!important;
   resize:none;
}

.single-left {
   width:100%!important;
   float:right!important;
   line-height:24px!important;
   height:44px!important;
   box-sizing:border-box!important;
   padding:9px 12px!important;
   margin:0 5px 10px 5px!important;
   border:1px #c2c2c2 solid!important;
   font-size:0.8em!important;
   resize:none;
}

.single {
   width:96%!important;
   float:right!important;
   line-height:24px!important;
   height:44px!important;
   box-sizing:border-box!important;
   padding:9px 12px!important;
   margin:0 5px 10px 5px!important;
   border:1px #c2c2c2 solid!important;
   font-size:0.8em!important;
   resize:none;
}

.arriere-plan-vert {
   display:block;
   height:auto;
   padding-bottom:20px;
   background-image:linear-gradient(to bottom, #fff,#97dd9b);
}

.arriere-plan-bleu {
   display:block;
   height:auto;
   padding-bottom:20px;
   background-color:#047dac;
}

.arriere-plan-gris {
   display:block;
   height:auto;
   padding-bottom:44px;
   background-color:#f7f7f7;
}

.arriere-plan-gris-visuel {
   display:block;
   height:auto;
   background-color:#f7f7f7;
}

button[name="modifier"] {
   background-color:#0087bc;
   margin:20px 0 0;
}

button[name="modifier"]:hover {
   background-color:#00719d;
   margin:20px 0 0;
}

/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
Plan Virage Visuel 001
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.plan-virage-visuel-001 {
   overflow-wrap:break-word;
   margin-top:36px;
}

.plan-virage-visuel-001 .plan-virage-rencontre {
   margin-left:0;
}

.plan-virage-visuel-001 .plan-virage-rencontre h3 {
   color:unset;
}

.plan-virage-visuel-001 .plan-virage-date {
   margin-left:0;
}

.visuel-colonnes {
   font-size:0.9em;
   line-height:1.46em;
}

.visuel-colonnes-planificateur {
   font-size:0.9em;
   line-height:1.46em;
   padding:0 13px;
}

.titre-colonne {
   font-size:18px;
   font-weight:900;
   line-height:60px;
   text-align:center;
}

.titre-colonne-2 {
   font-size:18px;
   font-weight:900;
   line-height:28px;
   text-align:center;
   height:81px;
   padding-top:10px;
}

.texte-blanc {
   color:#fff;
}

.duree-colonne {
   font-size:0.82em;
   line-height:13px;
   max-width:25%;
}

.chiffre {
   font-weight:700;
   margin:0 4px;
}

.rangee {
   height:50px;
   overflow-y:auto;
}

.rangee2 {
   height:105px;
   overflow-y:auto;
}

.plan-virage-visuel-001 .col-5 {
   padding:0 10px;
   box-sizing:border-box;
}

.plan-virage-visuel-001 br {
   height:60px;
}

.planificateur-titre {
   width:70%;
   float:left;
   height:45px;
   margin-bottom:30px;
}

/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
Planificateur annuel
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.planificateur-annuel {
   margin-top:36px;
   overflow-wrap:break-word;
}

.planificateur-annuel label {
   width:100%;
   display:block;
   font-weight:900;
   font-size:17px;
   margin:12px 0;
   line-height:27px;
   text-align:center;
   text-transform:uppercase;
   float:left;
}

.planificateur-annuel input {
   width:96%;
   float:right;
   line-height:44px;
   height:44px;
   box-sizing:border-box;
   padding:0 12px;
   margin:0 5px 10px 5px;
   border:1px #c2c2c2 solid;
   font-size:0.8em;
}

.planificateur-annuel textarea {
   font-family:'Roboto', sans-serif;
   width:96%;
   float:right;
   height:98px;
   line-height:38.5px;
   box-sizing:border-box;
   padding:0 12px;
   margin:0 5px 10px 5px;
   border:1px #c2c2c2 solid;
   font-size:0.8em;
}

.col-planificateur-annuel-objectifs-001 {
   background-image:linear-gradient(to right, #68b76e, #0087bc);
   width:100%;
   max-width:47.5%;
   float:left;
   padding-left:30px;
   box-sizing:border-box;
}

.col-planificateur-annuel-objectifs-001 .col-5-planificateur {
   width:100%;
   max-width:49.5%;
   float:left;
}

.col-trimestres {
   width:100%;
   float:left;
   padding-right:30px;
   box-sizing:border-box;
}

.col-planificateur-annuel-objectifs-sans-background {
   width:100%;
   max-width:47.5%;
   float:left;
   padding-left:30px;
   box-sizing:border-box;
}

.col-planificateur-annuel-objectifs-002 {
   background-color:#f7f7f7;
   width:100%;
   max-width:52.5%;
   float:left;
   padding-right:30px;
   box-sizing:border-box;
}

.col-planificateur-annuel-objectifs-003 {
   width:100%;
   max-width:44%;
   float:left;
}

.col-planificateur-annuel-objectifs-visuel-003 {
   width:100%;
   max-width:36%;
   float:left;
}

.input-col-planificateur-annuel-objectifs-002 {
   width:89%!important;
   float:left!important;
}

.col-planificateur-annuel-objectifs-002 .col-5-planificateur {
   width:100%;
   max-width:47.5%;
   float:left;
}

.col-5-planificateur-visuel {
   width:100%;
   max-width:44%;
   float:left;
}

.col-5-planificateur {
   width:100%;
   max-width:23.75%;
   float:left;
}

.col-pourcentage {
   width:100%;
   max-width:8.5%;
   float:left;
}

.col-pourcentage-2 {
   width:100%;
   max-width:5%;
   float:left;
}

.col-pourcentage-2 input {
   width:83%!important;
}

.col-5-planificateur-2 {
   width:100%;
   max-width:22.75%;
   float:left;
}

.bande-trimestres {
   height:55px;
   margin-top:38px;
   width:100%;
}

.menu-trimestres {
   margin:0;
   width:100%;
}

.menu-trimestres li {
   float:left;
   list-style:none;
   color:#fff;
   background-color:#0087bc;
   border-radius:4px;
   padding:8px 9px;
   margin-top:9px;
   margin-left:10px;
   cursor:pointer;
   transition:0.25s;
}

.menu-trimestres li:hover {
   background-color:#62c3e9;
   transition:0.25s;
}

.trimestres {
   float:left;
   font-size:20px;
   line-height:55px;
   margin-right:10px;
}

#un-trimestre {
   width:100%;
   display:-ms-flexbox;
   display:flex;
}

#deux-trimestre {
   display:none;
   width:100%;
}

#trois-trimestre {
   display:none;
   width:100%;
}

#quatre-trimestre {
   display:none;
   width:100%;
}

.planificateur-annuel .textarea-line-height {
   line-height:48px;
}

.label-pourcentage {
   font-size:18px;
   line-height:54px!important;
   word-wrap:normal;
   margin:31px 0;
}

.planificateur-annuel .margin-none {
   margin-left:0;
   width:100%;
}

.planificateur-annuel-titre {
   width:70%;
   float:left;
   height:45px;
   margin-bottom:30px;
}

.planificateur-annuel-titre input::placeholder {
   font-style:italic;
   color:#464646;
}

.planificateur-annuel-titre input {
   font-size:1.4em;
   margin-bottom:0;
   margin-left:23px;
   width:100%;
   float:unset;
}

.planificateur-annuel .plan-virage-enregistrer {
   background:linear-gradient(to right, #c0c0c0, #a5a5a5);
   max-width:200px;
   font-size:1em;
   margin:0 auto;
   float:unset;
   color:#fff;
   cursor:pointer;
   border-radius:5px;
   transition:0.2s ease-in-out;
}

.plan-virage-enregistrer:hover {
   opacity:0.7;
   transition:0.2s ease-in-out;
}

.col-pourcentage input {
   width:83%;
}

.trimestre {
   text-align:center;
}

.trimestre-sans-date {
   height:84px;
}

.input-date-trimestre {
   height:28px!important;
   position:relative;
   left:50%;
}

.somme {
   position:absolute;
   margin-top:672px;
   text-align:right;
   width:100%;
   max-width:300px;
   right:3%;
}

.somme input {
   color:#0087bc;
   font-weight:700;
   max-width:60px;
   border:0;
   height:22px;
   font-family:'Roboto', sans-serif;
   font-size:18px;
   padding:0;
   background-color:unset;
   float:left;
}

.somme-texte {
   float:left;
   line-height:22px;
}

.somme-bleue {
   color:#0087bc;
   font-weight:700;
}

.somme-pourcentage {
   color:#0087bc;
   font-weight:700;
   line-height:22px;
   margin-left:-20px;
   float:left;
}

.symbol-pourcentage {
   float:left;
}

.date-trimestre-visuel {
   margin-top:92px;
   height:24px;
   text-align:center;
}

.archives {
   bottom:0;
   position:relative;
   font-size:16px;
   margin-top:20px;
}

/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
Popup
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.popup {
   position:fixed;
   top:50%;
   left:50%;
   transform:translate(-50%, -50%) scale(0);
   z-index:10;
   background-color:#fff;
   max-width:80%;
   width:360px;
   transition:400ms ease-in-out;
}

.popup.active {
   transform:translate(-50%, -50%) scale(1);
   transition:400ms;
}

.popupSupprimer {
   position:fixed;
   top:50%;
   left:50%;
   transform:translate(-50%, -50%) scale(0);
   z-index:10;
   background-color:#fff;
   max-width:50%;
   width:400px;
   transition:400ms ease-in-out;
}

.popupSupprimer.active {
   transform:translate(-50%, -50%) scale(1);
   transition:400ms;
}

.popup .container,
.popupSupprimer .container {
   width:unset;
}

.popup header,
.popupSupprimer header {
   width:100%;
   height:30px;
}

.popup header button,
.popupSupprimer header button {
   text-align:right;
   font-size:1em;
   top:-60px;
   right:14px;
   background:none;
   color:#000;
   width:30px;
   position:absolute;
}

.popup a,
.popupSupprimer a {
   text-decoration:none;
}

.popup h3,
.popupSupprimer h3 {
   line-height:1.5em;
   text-align:center;
}

.popup input[type="submit"] {
   width:100%;
   height:48px;
   max-width:300px;
   margin:60px auto 25px;
   padding:0 20px;
   display:block;
   border:0;
   border-radius:5px;
   color:#fff;
   letter-spacing:0.03em;
   font-size:1em;
   letter-spacing:0.03em;
   cursor:pointer;
   background-color:#8cc63f;
   transition:0.27s;
}

.popup input[type="submit"]:hover {
   background-color:#6d9834;
   transition:0.27s;
}

.form-supprimer button {
   margin-bottom:25px;
}

button[name="conserver"] {
   margin-bottom:40px;
}

#arrierePlan {
   position:fixed;
   opacity:0;
   top:0;
   left:0;
   right:0;
   bottom:0;
   background-color:rgba(0,0,0,0.5);
   pointer-events:none;
   transition:400ms ease-in-out;
}

#arrierePlan.active {
   opacity:1;
   pointer-events:all;
   transition:400ms;
}

#arrierePlanSupprimer {
   position:fixed;
   opacity:0;
   top:0;
   left:0;
   right:0;
   bottom:0;
   background-color:rgba(0,0,0,0.5);
   pointer-events:none;
   transition:400ms ease-in-out;
}

#arrierePlanSupprimer.active {
   opacity:1;
   pointer-events:all;
   transition:400ms;
}

button[name="supprimer"] {
   background-color:#bf0000;
}

button[name="supprimer"]:hover {
   background-color:#a10000;
}

button[name="conserver"] {
   background-color:#0087bc;
   margin-top:0;
}

button[name="conserver"]:hover {
   background-color:#00719d;
}


/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
Calendrier
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.ui-datepicker {
	width:17em;
	display:none;
   font-size:16px;
   box-shadow:0 0 6px #bdbdbd;
}

.ui-datepicker .ui-datepicker-header {
	position:relative;
   height:28px;
   line-height:28px;
   background-color:#fff;
}

.ui-datepicker .ui-datepicker-prev {
	position:absolute;
	top:2px;
   left:4px;
	width:1.8em;
	height:1.8em;
   cursor:pointer;
   color:#3d3d3d;
}

.ui-datepicker-next {
	position:absolute;
	top:2px;
   right:8px;
	width:1.8em;
	height:1.8em;
   cursor:pointer;
   color:#3d3d3d;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display:block;
}

.ui-datepicker .ui-datepicker-title {
	margin:0 2.3em;
	line-height:1.8em;
	text-align:center;
}

.ui-datepicker .ui-datepicker-title select {
	font-size:1em;
	margin:1px 0;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width:45%;
}

.ui-datepicker table {
	width:100%;
	font-size:.9em;
	border-collapse:collapse;
   background-color:#e6e6e6;
}

.ui-datepicker th {
	padding:.5em .3em;
	text-align:center;
	font-weight:bold;
	border:0;
   background-color:#d0d0d0;
}

.ui-datepicker td {
	border:0;
	padding:1px;
}

.ui-datepicker td span,
.ui-datepicker td a {
	display:block;
	padding:.2em;
   text-align:center;
	text-decoration:none;
   color:#3d3d3d;
}

.ui-datepicker .ui-datepicker-buttonpane {
	background-image: none;
	margin:.7em 0 0 0;
	padding:0 .2em;
	border-left:0;
	border-right:0;
	border-bottom:0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
	float:right;
	margin:.5em .2em .4em;
	cursor:pointer;
	padding:.2em .6em .3em .6em;
	width:auto;
	overflow:visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float:left;
}

/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
Footer
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

footer {
   width:100%;
   height:auto;
   padding:30px 0;
   display:block;
   margin-top:80px;
   background-image:linear-gradient(to right, #68b76e, #0087bc);
   color:#fff;
   font-size:0.8em;
   line-height:1.5em;
   text-align:center;
}

footer a {
   color:#fff;
   text-decoration:none;
}

.footer-petit {
   font-size:0.82em;
}

#footer-home {
   font-size:13px;
   line-height:20px;
   margin-top:0;
   text-align:center;
   width:100%;
   background-image:none;
   color:#303030;
}

#footer-home a {
   color:#0087bc;
}

/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
Zone administrateur
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

.header-administrateur {
   position:fixed;
   width:100%;
   z-index:12;
}

.header-administrateur .haut .droit {
   max-width:25%;
   width:100%;
   text-align:right;
   line-height:42px;
   font-size:0.74em;
   float:left;
}

.header-administrateur .haut .gauche {
   max-width:25%;
   width:100%;
   float:left;
}

.header-administrateur .haut .droit a {
   color:#fff;
   text-decoration:none;
}

.header-administrateur .milieu {
   max-width:50%;
   width:100%;
   font-size:0.82em;
   line-height:42px;
   float:left;
}

.activite {
   color:#777;
   margin-left:20px;
   line-height:44px;
}

.milieu ul {
   text-align:center;
   margin:0;
}

.milieu ul li {
   list-style:none;
   display:block;
   margin:0 26px;
   float:left;
}

.milieu ul li a:hover {
   opacity:0.78;
   transition:0.2s;
}

.milieu ul li a {
   color:#575757;
   background-color:#f3f3f3;
   border-radius:6px;
   color:#575757;
   padding:4px 16px;
   text-decoration:none;
   transition:0.2s;
}

.main-administrateur {
   margin-top:206px;
   position:relative;
}

.main-main-seul {
   margin-top:100px;
}

.main-administrateur .col-gauche {
   width:100%;
   height:auto;
   max-height:100%;
   max-width:30%;
   margin-top:36px;
   float:left;
}

.main-administrateur .col-droite {
   width:100%;
   height:auto;
   max-height:100%;
   max-width:70%;
   float:left;
}

.main-administrateur h2 {
   color:#0087bc;
   margin-bottom:30px;
   text-align:center;
}

.main-administrateur h2 {
   width:100%;
}

.main-administrateur h3 {
   color:#68b76e;
   vertical-align:middle;
   display:inline-block;
   margin-top:5px;
}

#logo-administrateur {
   position:absolute;
   margin-top:62px;
}

.utilisateur-plans-virage {
   width:100%;
   font-size:0.86em
}

.utilisateur-plans-virage td {
   border-bottom:1px solid #d1d1d1;
}

.utilisateur-plans-virage tr:last-child td {
   border-bottom:0;
}

.utilisateur-plans-virage th {
   text-align:left;
   padding-bottom:10px;
}

.utilisateur-plans-virage .visualiser {
   top:0;
}

.fiche-utilisateur td:first-child {
   min-width:180px;
}

.fiche-utilisateur input {
   width:96%;
   float:right;
   line-height:44px;
   height:44px;
   box-sizing:border-box;
   padding:0 12px;
   margin:0 5px 10px 5px;
   border:1px #c2c2c2 solid;
   font-size:0.8em;
}

.fiche-utilisateur textarea {
   width:96%;
   float:right;
   line-height:22px;
   box-sizing:border-box;
   padding:4px 12px;
   margin:0 5px 10px 5px;
   border:1px #c2c2c2 solid;
   font-size:0.8em;
   font-family:'Roboto', sans-serif;
}

.fiche-utilisateur .enregistrer {
   background:linear-gradient(to right, #c0c0c0, #a5a5a5);
   max-width:200px;
   font-size:1em;
   margin:20px auto 0;
   float:unset;
   color:#fff;
   cursor:pointer;
   border-radius:5px;
   transition:0.2s ease-in-out;
}

.fiche-utilisateur .enregistrer:hover {
   opacity:0.7;
   transition:0.2s ease-in-out;
}

.fiche-utilisateur .reinitialiser {
   width:96%;
   float:right;
   line-height:44px;
   height:44px;
   box-sizing:border-box;
   padding:0 12px;
   margin:0 5px 10px 5px;
   font-size:0.8em;
   cursor:pointer;
}

.main-administrateur .desactiver {
   margin-top:60px;
}

.main-administrateur .supprimer {

}

.main-administrateur .plan-image-gauche {
   max-width:30px;
   float:left;
   height:auto;
   margin-right:20px;
}

.afficher {
   text-align:right;
   font-size:0.9em;
   margin-bottom:20px;
}

.home {
   width:100%;
   text-align:left;
}

.home th {
   padding-bottom:10px;
}

.home td {
   font-size:0.86em;
   border-bottom:1px solid #d1d1d1;
   border-collapse:collapse;
}

.col-gauche-utilisateur-seul {
   width:50%;
   float:left;
   font-size:0.9em;
}

.col-droite-utilisateur-seul {
   width:50%;
   float:left;
   margin:0 0 0 40px;
   font-size:inherit;
}

.col-droite-utilisateur-seul textarea {
   width:56%;
   min-height:120px;
   padding:10px;
   box-sizing:border-box;
   font-size:0.9em;
   font-family:'Roboto', sans-serif;
}

.col-droite-utilisateur-seul label {
   min-width:200px;
   display:inline-block;
   line-height:1.52em;
}

.col-droite-utilisateur-seul input {
   font-size:0.9em;
   border:0;
}

.top {
   vertical-align:top;
   margin-top:2px;
}

.gras {
   font-weight:700;
}

.page {
   margin-top:36px;
   display:block;
   background-color:#f7f7f7;
   height:auto;
   padding:30px 50px;
   box-sizing:border-box;
}

.page p {
   margin-bottom:30px;
}

.page h3 {
   color:#0087bc;
}

.plan-virage {
   width:80%;
   height:auto;
   display:block;
}

.plan-virage {
   cursor:pointer;
}

.plan-virage img {
   max-width:30px;
   float:left;
   height:auto;
   margin-right:20px;
}

.plan-virage h1 {
   font-size:0.7em;
   font-weight:700;
   line-height:1.16em;
   margin:-3px 0 0;
}

.plan-virage .date {
   font-size:0.6em;
   font-weight:300;
   float:left;
}

/*---------------------------------------------------------------------------
-----------------------------------------------------------------------------
@ Queries
-----------------------------------------------------------------------------
----------------------------------------------------------------------------- */

@media only screen and (max-width : 1380px) {

   .col-pourcentage input {
      padding:0 2px;
   }

}

@media only screen and (max-width : 1190px) {

   .label-line-height {
      font-size:15px;
      padding-bottom:5px;
   }

}

@media only screen and (max-width : 1200px) {

   .visuel-colonnes {
      font-size:0.72em;
   }

   .rangee {
      height:56px;
      overflow-y:auto;
   }

}

@media only screen and (max-width : 1100px) {

   .planificateur-annuel label {
      font-size:15px;
   }

   .planificateur-annuel p {
      font-size:0.86em;
      margin-bottom:20px;
   }

   .milieu ul li {
      margin:0 12px;
   }

}

@media only screen and (max-width : 970px) {

   .rangee {
      height:66px;
   }

   .arriere-plan-blanc {
      margin:20% auto 10%;
   }

   .arriere-plan-blanc h2 {
      line-height:40px;
   }

}

@media only screen and (max-width : 955px) {

   .plan-virage-formulaire label {
      font-size:14px;
   }

}

@media screen and (max-width:900px) {

   .display {
      display:none;
   }

}

@media only screen and (max-width : 880px) {

   .milieu ul {
      float:right;
   }

   #home .row {
      -ms-flex-wrap:wrap;
      flex-wrap:wrap;
   }

   #home .col-gauche {
      max-width:100%;
   }

   #home .col-droite {
      max-width:100%;
   }

}

@media only screen and (max-width:850px) {

   .label-line-height {
      height:75px;
   }

}

@media only screen and (max-width:800px) {

   .planificateur-annuel .row {
      -ms-flex-wrap:wrap;
      flex-wrap:wrap;
   }

   .col-planificateur-annuel-objectifs-001 {
      max-width:100%;
   }

   .col-planificateur-annuel-objectifs-002 {
      max-width:100%;
   }

   .col-5-planificateur {
      max-width:100%;
   }

}

@media screen and (max-width:780px) {

   .connexion, .inscription {
      margin:20% auto 40px;
   }

   .arriere-plan-blanc {
      margin:30% auto 10%;
   }

}

@media screen and (max-width:750px) {

   .plan-virage-formulaire label {
      font-size:12px;
      line-height:50px;
   }

}

@media screen and (max-width:700px) {

   .row-wrap .col-2 {
      max-width:100%;
   }

   .plan-virage-titre {
      width:96%;
   }

}

@media screen and (max-width:690px) {

   #payment-form input[type="text"],
   #payment-form input[type="email"] {
      width:100%;
   }

   .connexion, .inscription {
      margin:30% auto 40px;
   }

   .header-second .row {
      -ms-flex-wrap:wrap;
      flex-wrap:wrap;
   }

   .header-second .col-2 {
      max-width:100%;
   }

   header .haut .gauche {
      max-width:100%;
   }

   .menu-administrateur {
      display:none;
   }

   .menu-adaptatif {
      display:block;
      margin:0;
      padding:0;
   }

   .menu-adaptatif li {
      line-height:45px;
      text-align:center;
      list-style:none;
      border-bottom:1px solid #d5d5d5;
   }

   .menu-adaptatif li a {
      color:#5d5d5d;
      text-decoration:none;
   }

   #logo-administrateur {
      display:none;
   }

   .main-administrateur {
      margin-top:270px;
   }

}

@media screen and (max-width:640px) {

   .plan-virage-formulaire .col-4 {
      max-width:100%;
   }

   .plan-virage-formulaire .col-5 {
      max-width:100%;
   }

   .plan-virage-formulaire .col-60 {
      max-width:100%;
   }

   .plan-virage-formulaire textarea {
      width:100%;
   }

   .plan-virage-formulaire input {
      width:100%;
   }

   .plan-virage-formulaire label {
      font-size:16px;
      width:100%;
   }

   .plan-virage-formulaire .label-line-height {
      height:auto;
   }

}

@media screen and (max-width:520px) {

   .connexion, .inscription {
      max-width:unset;
      width:100%;
   }

   .arriere-plan-blanc {
      margin:145px auto 10%;
   }

}

@media only screen and (max-width:500px) {

   .col-planificateur-annuel-objectifs-002 {
      padding-right:0;
   }

   .col-planificateur-annuel-objectifs-002 .col-5-planificateur {
      max-width:100%;
   }

   .col-planificateur-annuel-objectifs-003 {
      max-width:100%;
   }

   .titre-section {
      font-size: 20px;
   }

   #un-trimestre,
   #deux-trimestre,
   #trois-trimestre,
   #quatre-trimestre {
      display:unset!important;
   }

   .bande-trimestres,
   #premier_somme,
   #deuxieme_somme,
   #troisieme_somme,
   #quatrieme_somme {
      display:none;
   }

   .col-pourcentage {
      display:none;
   }

   .planificateur-annuel p {
      width:100%;
   }

   .planificateur-annuel textarea {
      width:96%!important;
      float:unset!important;
      margin:0 6px 10px 10px !important;
   }

   .input-date-trimestre {
      left:unset;
      margin:0 auto 10px!important;
      width:80%!important;
      float:unset!important;
   }

   .col-planificateur-annuel-objectifs-001 .col-5-planificateur {
      max-width:100%;
      float:unset;
   }

   .col-planificateur-annuel-objectifs-001 {
      padding-left:0;
   }

   .planificateur-annuel .plan-virage-enregistrer {
      margin:38px auto 0!important;
      display:block;
      float:unset!important;
   }

   .header-second button {
      float:unset!important;
   }

   .header-second a {
      text-decoration:none;
   }

   .planificateur-annuel-titre {
      width:100%;
   }

   .planificateur-annuel-titre input {
      margin-left:0;
   }

   .plan-virage-bandeau-titre {
      font-size:20px;

   }

}

@media screen and (max-width:480px) {

   .connexion, .inscription {
      margin:0 auto;
   }

}

@media screen and (max-width:420px) {

   .arriere-plan-blanc {
      padding:30px;
   }

   #connexion {
      padding:unset;
   }

}

@media screen and (max-width:400px) {

   .plan-virage-date {
      margin:40px 0;
   }

   .span-date {
      display:none;
   }

   .header-second a {
      text-decoration:none;
   }

   button[name="accueil"] {
      margin:60px auto!important;
      display:block;
      float:unset!important;
   }

   input[name="enregistrer"] {
      margin:0 auto!important;
      display:block;
      float:unset!important;
   }

}