@import url("https://fonts.googleapis.com/css?family=Poppins:400,700");
* {box-sizing: border-box;}

html,
body {
  height: 100%;
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  margin:0;
  padding:0;
  color:#1b313b;
  background:#fff;
}

img {max-width:100%}
a {text-decoration:underline;color:#144b65;transition: all 0.3s ease-out;}
h1, h2 {padding:1%;}

#main-container-upload, #main-container {
  margin:50px auto;
  width:95%;
  max-width:1500px;
}

#main-container-upload {margin:10px auto 50px;}

.container, .container-meta {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content:flex-start;
}

h3, .conteneur-bp #texte-fiche h2 {
  color: #262626;
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  margin-bottom: 4px;
  padding:0;
}
.conteneur-bp h3, .conteneur-bp #texte-fiche h2 {font-size: 1.5rem;}
h3.upload-succes {color:#54cd76;font-size:1.5rem;font-weight:bold;padding:1% 1% 3% 1%;}
h3.upload-succes span {color:#ffb200;text-transform:uppercase;font-size:1.8rem;}

p {
  font-size: 17px;
  font-weight: 400;
  line-height: 20px;
  color: #666666;
}
p.small {
  font-size: 14px;
}

p.small-bas-droite {
  font-size:0.7rem;
  text-align:right;
  font-style: italic;
  width:70%;
  float:right;
  font-weight:bold;
  line-height:0.8rem;
}

header {top:0px;margin:0 auto;width:100%;}

a#aller-au-contenu {float:left;display:block;font-size:0.85rem;font-weight:bold;margin-left:20px;margin-top:5px;}
a#aller-au-contenu:hover {color:#23a6ad;}

.top-menu, .top-menu li {margin:0;list-style: none;padding:0;}
.top-menu {width:100%;margin:0 auto;padding:10px 15% 10px 15%;}
.top-menu {display:flex;justify-content:space-around;}
.top-menu li {text-transform:uppercase;font-size:0.8rem;font-weight:bold;}
.top-menu li a {text-decoration: none;color:#144b65;transition: all 0.2s ease-out;}
.top-menu li a:hover {text-decoration: underline;color:#23a6ad;}


.sous-menu {position:relative;width:70%;margin:0;padding:0px 0 20px 0;}
.sous-menu li {background:#fff;border-radius:3px;padding:4px 7px;}
.sous-menu li a {font-weight:400;}

p#titre-site {text-align:center;margin:10px 0 0 0;font-size:1rem;text-transform: uppercase;font-weight:bold;}
p#titre-site a {color:#144b65;text-decoration:none;transition: all 0.2s ease-out;}
p#titre-site a:hover {color:#00838d;}

#lang {float:right;margin-top:10px;margin-right:20px;}
#lang a {text-decoration:none;display:inline-block;background:#0c3b44;color:#ecf1f1;padding:2px 5px;margin:0 3px;font-weight:bold;transition: all 0.2s ease-out;}
#lang a:hover {background:#3e808d;}

.login-page #main-container {text-align:center;margin:20px auto;}

.login-page form {margin:0 auto;width:70%;text-align:center;}
.login-page input {
  display:block;
  margin:10px auto;
  padding:10px;
  width:250px;
}

.login-page input.box-button {
  margin-top:25px;
  width:200px;
  padding:15px 0 12px 0;
  background:#007897;
  color:#fff;
  border:none;
  font-size:1.1rem;
  line-height:1.1rem;
  font-weight:bold;
  text-transform: uppercase;
  cursor: pointer;
}

.login-page input.box-button:hover {background:#144b65;transition: all 0.3s ease-out;}

.go-corner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 32px;
  height: 32px;
  overflow: hidden;
  top: 0;
  right: 0;
  background-color: #00838d;
  border-radius: 0 4px 0 32px;
}

#container-familles .card3 .go-corner.incontournable, .go-corner.incontournable {background-color:#db2151;}
#container-familles .card3 .go-corner.incontournable .go-arrow {color:#fff;}
.go-arrow {
  margin-top: -4px;
  margin-right: -4px;
  color: white;
  font-family: courier, sans;
  font-size:17px;
}


.card3 {
  display: block;
  top: 0px;
  position: relative;
  width:23%;
  background-color: #f2f8f9;
  border-radius: 6px;
  padding: 32px 24px;
  margin: 1%;
  text-decoration: none;
  overflow: hidden;
  border: 1px solid #f2f8f9;
  transition: all 0.3s ease-out;
}

.card3 .odd span {
  color:#fff;
  font-size:0.7rem;
  font-weight:normal;
}
.card3 .odd span.incontournable {text-transform:none;}
.card3 .odd span.css-recommandation {background:#2054a2;}
.card3 .odd span.css-conseil {background:#0b8e76;}

.card3 .go-corner {opacity: 0.7;transition: all 0.3s ease-out;}
.card3:hover {border: 1px solid #00838d;z-index: 500;}
.card3:hover p {color: #00838d;}
.card3:hover .go-corner {transition: opactiy 0.3s linear;opacity: 1;}

#container-familles .card3 {width:31.3333333%;background:#0c3b44;}
#container-familles .card3:hover {background:#3e808d;}
#container-familles .card3:hover p {color: #d2e7eb;}
#container-familles .card3 p {color: #ecf1f1;}
#container-familles .card3 h2 {color: #ecc706;font-size:1.2rem;}
#container-familles .card3 .go-corner {background-color:#ecf1f1;opacity:1;}
#container-familles .card3 .go-arrow {color:#3e808d;}

#container-familles .card3.bgd-1 {background:#3e808d;}
#container-familles .card3.bgd-2 {background:#0c3b44;}
#container-familles .card3.bgd-1:hover {background:#2c6a76;}
#container-familles .card3.bgd-2:hover {background:#185864;}

#container-familles .card3.bgd-1 .famille-carte span {background:#fcd40c;color:#144b65;text-transform: uppercase;}
#container-familles .card3.bgd-2 .famille-carte span {background:#fcd40c;color:#144b65;text-transform: uppercase;}
#container-familles .odd-card h2 {color: #fff;}

.recommandation {
  background:#2b7c86;
  padding:2% 2%;
  margin:0.5% 0.5%;
}

.recommandation h2 {color:#fff;}

.incontournables-famille {float:right;margin-bottom:10px;}
.famille {clear:both;}

.entete-famille {display:flex;justify-content: space-between;align-items:center;border-left:3px solid #0c3b44;margin-left:2%;width:98%;}
.entete-famille {font-size:0.8rem;}
.incontournables-famille a {transition: all 0.3s ease-out;font-weight:bold;font-size:0.9rem;}
.incontournables-famille a:hover {color:#23a6ad;transition: all 0.3s ease-out;}
p#affichage-filtre {display:none;padding:1%;}
p#affichage-filtre span, p#filtre-niveau1 span {
  display:inline-block;
  background:#0fb2bc;
  color:#fff;
  font-size:1.5rem;
  line-height:1.5rem;
  vertical-align: middle;
  margin-right:5px;
  padding:2px 5px;
  cursor:pointer;
  transition: all 0.3s ease-out;
}

p#affichage-filtre a, p#filtre-niveau1 a {text-decoration:none;font-weight:bold;transition: all 0.2s ease-out;}
p#affichage-filtre a:hover, p#filtre-niveau1 a:hover {text-decoration:underline;color:#23a6ad;}

.entete-famille h1 {padding:0 0 0 1%;margin:0;font-size:1.4rem;}
.description-famille p {
  margin-left:2%;
  width:98%;
  padding-left:1%;
  padding-top:10px;
  margin-bottom:50px;
  margin-top:0;
  line-height:1.5rem;
  font-size:0.9rem;
  border-left:3px solid #0c3b44;
  font-style:italic;
}

p#affichage-filtre span:hover {background:#144b65;}

.entete-reco {display:flex;justify-content: space-between;}
div.lien-famille {text-align:right;}
div.lien-famille a {color:#fff;font-size:0.8rem;}
div.lien-famille a:hover {color:#fcd40c;font-size:0.8rem;}

.conteneur-bp div.lien-famille a {color:#144b65;font-size:0.8rem;font-weight:bold;}

.famille-carte span, .odd span {display:inline-block;padding:5px 5px;border-radius:3px;background:#fff;color:#144b65;font-size:0.8rem;font-weight:bold;margin-bottom:5px;}
.famille-carte span a, .odd span a {text-decoration: none;transition: all 0.3s ease-out;}
.famille-carte span a, .odd span a:hover {text-decoration: none;color:#7bd1bc;}
.odd span.la-famille {background:#fcd40c;color:#144b65;text-transform:uppercase;font-size:1.2rem;margin:20px 0 0 0;}
.odd span.incontournable {background:#db2151;color:#fff;text-transform:uppercase;}

.entete-reco .odd span.la-famille {font-size:0.8rem;}

footer {
  text-align:center;
  margin:0px auto;
  padding:20px;
  background:#2b7c86;
  width:100%;

}

.conteneur-bp h1 {font-size:2rem;width:90%;margin-top:10px;}

footer p {font-size:0.9rem;color:#fff;}
footer p a {color:#fff;}

p.type-recommandation {border-left:5px solid #2054a2;padding-left:10px;}
p.type-conseil {border-left:5px solid #20a28a;padding-left:10px} 

.conteneur-bp {
  max-width:1300px;
  width:90%;
  border-bottom:5px solid #b5d4d8;
  padding:0px 3% 70px 3%;
  margin:0 auto;
}

.conteneur-bp p {line-height:1.7rem;padding:0;margin:0;}
.entete-reco-crit p {padding:0;margin:20px 0 0 0;font-weight:bold;}
#chapeau p, #chapeau h2, #chapeau h3 {color:#fff;}
#chapeau {color:#fff;padding:2%;}
.chapeau-type-recommandation {background:#2054a2;border-left:8px solid #e2be0b;}
.chapeau-type-conseil {background:#0b8e76;border-left:8px solid #e2be0b;}
.bp-incontournable {border-left:8px solid #db2151;}

.impacts {display:flex;align-items: stretch;}
#chapeau .impacts p span {font-size:1.7rem;font-weight:bold;display:block;padding-top:5px;}
#chapeau .impacts p {background:#fff;color:#144b65;padding:5px 10px;margin:10px;border-radius:3px;font-size:0.9rem;font-weight:bold;line-height:2rem;text-align:center;text-transform:uppercase;}


.impact-vert {color:#30aa83;}
.impact-bleu {color:#0088e8;}
.impact-gris {color:#67737c;}

#container-fiche {
  display: flex;
  align-items: stretch;
  justify-content:space-between;
}
#container-fiche #chapeau {
  width:39%;
}
#container-fiche #texte-fiche {
  width:57%;
}

#container-fiche p {margin:5px 0;padding:5px 0;} 

.priorite-recurrence, .acteurs-metiers {
  display:flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content:flex-start; 
}

.priorite-recurrence {border-top:2px solid #fff;margin-top:30px;}

.priorite-recurrence div {width:33.333333333333%;padding:5% 0;text-align:center;}

.priorite-recurrence h3 {color:#fff;text-transform:uppercase;padding:0;margin:0;font-size:0.9rem;}
.priorite-recurrence p {color:#fff;padding:0;margin:0;text-align:center;font-size:0.9rem;}

.priorite-recurrence .difficulte p {font-size:1.4rem;}

 h2#elements-complementaires {border-top:2px solid #2054a2;margin-top:30px;padding-bottom:0;padding-left:0;}


.acteurs-metiers div {padding:0% 3%;margin:0;width:33.333333%;}
.acteurs-metiers div:first-of-type {padding:0;margin:0;}

.acteurs-metiers div ul li {line-height:1rem;padding:5px 0;margin:5px 0;}

.conteneur-bp .acteurs-metiers h3 {font-size:1.1rem;}

h2.titre-recommandation {cursor:pointer;transition: all 0.3s ease-out;padding:0;color:#ecf1f1;}

button {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

button,
input { /* 1 */
  overflow: visible;
}


button,
select { /* 1 */
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

h2.titre-recommandation button {
  transition: all 0.3s ease-out;
  padding:0;
  color:#ecf1f1;
  text-decoration:none;
  background:none;
  border:0;
  font-weight:bold;
  font-size:1.5rem;
  text-align:left;
  cursor:pointer;
}
h2.titre-recommandation button:hover {color:#e2be0b;}
h2.titre-recommandation:hover {color:#e2be0b;}
h2.titre-recommandation span {display:inline-block;transform:rotate(90deg);font-size:3rem;line-height:2rem;vertical-align:text-top;transition: all 0.3s ease-out;}

.autres {margin-top:70px;padding:0 5%;}
#fiche-bonne-pratique .container {padding:1% 2%;background:#2b7c86;border:50px solid #fff;border-top-width:0px;border-bottom-width:0px;}
#fiche-bonne-pratique #main-container {margin-top:50px;}

a.burger-menu {display:none;}

#acces-referentiel {
  background:#0c3b44;
  color:#fff;
  padding:11px 17px;
  display:inline-block;
  text-decoration: none;
  text-transform: uppercase;
  font-weight:bold;
  margin-left:1%;
}

#acces-referentiel:hover {background:#2b7c86;}

#moteur-recherche form {padding:0 2% 2% 2%;display:flex;}
#moteur-recherche form .text {width:50%;display:block;height:40px;margin:0 10px;padding-left:5px;border:1px solid #0c3b44;}
#moteur-recherche form .submit {
  width:100px;
  display:block;
  height:40px;
  padding:3px;
  font-family:'Poppins';
  background:#0c3b44;
  font-weight:bold;
  color:#fff;
  border:none;
  cursor:pointer;
  transition: all 0.3s ease-out;
}

#moteur-recherche form .submit:hover {background:#3e808d;}

span.recherche-filtre {
  background:#0c3b44;  
  padding:2px 9px;
  margin:0 15px 0 8px;
  transition: all 0.2s ease-out;
  display:inline-block;
  cursor:pointer;
  float:right;
}

.incontournables-famille span.recherche-filtre {margin-right:7px;}

span.recherche-filtre a {
  transform:rotate(-45deg);
  display:inline-block;
  font-weight:bold;
  text-decoration:none;
  color:#ecf1f1;
  font-size:1.2rem;

}
span.recherche-filtre:hover {background:#3e808d;}

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

  #container-familles .card3, .card3 {width:31%;}

  header p#titre-site {clear:both;}

  a#aller-au-contenu {margin:15px 10px 20px 10px;}

  header nav#menu-principal {
   display:none;
   width:100%;
  }  
   
   header .top-menu {
   display:block; 
    width:100%;
    padding:10px 30px 40px 30px;
  }

  header .top-menu li {
    height:37px;
    line-height:37px;
    border-bottom:1px solid #7bd1bc;
  }

  header .top-menu li a {
    font-size:1rem;
  }

  a.burger-menu {
    display:block;
    width:100%;
    background:#0fb0a3;
    color:#fff;
    margin-top:10px;
    padding:0 0 5px 0;
    text-decoration:none;
    text-align:center;
    font-size:1.4rem;
  }

  a.burger-menu:hover {background:#144b65;transition: all 0.2s ease-out;}
  a.burger-menu span {font-size:2rem;} 

  .sous-menu {flex-flow:wrap;width:100%;padding-bottom:10px;}
  .sous-menu li {width:20%;margin:3px 1%;text-align:center;padding:5px 10px;} 

  #container-fiche {display: block;}
  #container-fiche #texte-fiche, #container-fiche #chapeau {width:100%;} 

}

@media only screen and (max-width: 782px) {
  #container-familles .card3, .card3 {width:100%;}

  .odd span {margin-top:15px;}

  .conteneur-bp {width:100%;}

  #main-container > h2 {padding:10px 0 8px 0;margin:0;}

  .entete-famille {display:block;margin-bottom:20px;margin-left:1%;}

  .conteneur-bp {padding-top:30px;padding-bottom:30px;margin-bottom:30px;}
  

  #fiche-bonne-pratique .container {padding:1%;background:#2b7c86;border:0px solid #ecf1f1;}

  .incontournables-famille {float:none;margin-top:20px;margin-left:20px;}

  .acteurs-metiers {display:block;}
  .acteurs-metiers div, .acteurs-metiers div:first-of-type {width:100%;padding:0;}
  
}


/* ACCESSIBILITÉ */

[type=submit]:focus, [type=search]:focus, [type=text]:focus, select:focus, a:focus {
    outline: .2rem dashed #144b65;
    outline-offset: .3rem;
}


.recommandation .odd a:focus, .recherche-filtre a:focus {outline-offset: .8rem;}



footer a:focus, #fiche-bonne-pratique .container a:focus, .recommandation a:focus {
    outline: .2rem dashed #fff;
}