/* enlever la banniere yapla dans le bas des pages */
.poweredBy-wrapper {
    display: none;
}

/* menu top right */
li.header-ext.header-ext-login {
    font-size: 14px;
    font-weight: 600;
    padding: 12px 0; /* cette ligne a un impact sur le menu du bas en mode cellulaire */
}

/* ------------------------- entete menu top right ------------------------- */
.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}
.navbar-toggle .icon-bar {  
    width: 40px;
    height: 4px;
    border-radius: 4px;
}

\* ------------------------ hamburger menu ---------------------------------- *\
.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}

/* ----------- controle de la hauteur de la bannière de chaque page sous le menu par défaut 600px ----------------- */
.mod-banner__img {
    height: 400px;
    background-size: cover;
}
@media screen and  (max-width: 1000px) {
.mod-banner__img {
    height: 200px;
    background-size: cover;
    }
}

/* ------------------------- espace sous la bannière -------------------------- */
.container {
    padding-top:30px;
}

/* ------------------------- couleur présentation nos articles ------------------------- */
.panel-default > .panel-heading {
    color: #FFFFFF;
    background-color: #a23020;
    border: 1px solid darkred;
}

.panel-group .panel-heading + .panel-collapse > .panel-body {
    border: 1px solid darkred;
}

/* ------------------------- lien bas de page ------------------------- */
.link { color: #FFFFFF; } /* CSS link color (white) */
.link:hover { color: #f39c12; text-decoration: none; } /* CSS link hover (orange foncé) */

/* --------------------------- Position du logo entete ----------------------- */
@media (max-width: 768px) {
    .mod-header-part {
        text-align:center;
    }
}

/* ------------------------- Lien sur bouton gris ------------------------- */
/* ---------- ref https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_shadow ------ */
.bouton {
  background-color: #424242; /* gris menu */
  border: none;
  border-radius: 10px;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}
.bouton:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
    background-color: #a23020;
    color: #ffffff;
}
.bouton:focus {
    color: #ffffff;
}

/* ------------------------- Disposition réactive à 4 colonnes ------------------------- */
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 25%;
  padding: 20px;
}

.column3 {
  float: left;
  width: 33.33%;
  padding: 20px;
}

.column2 {
  float: left;
  width: 50%;
  padding: 20px;
}

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

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}  
/* ------------------------- FIN -  Disposition réactive à quatre colonnes ------------------------- */

/* ------------------------- Disposition réactive à 2 colonnes ------------------------- */
* {
  box-sizing: border-box;
}

/* ------------------------- 2 colonnes égales les unes à coté des autres ------------------------- */
.column2 {
  float: left;
  width: 50%;
  padding: 20px;
}

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

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column2 {
    width: 100%;
  }
}  
/* ------------------------- FIN -  Disposition réactive à 2 colonnes ------------------------- */

/* ------------------------- 3 colonnes égales les unes à coté des autres ------------------------- */
.column3 {
  float: left;
  width: 33%;
  padding: 20px;
}

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

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column3 {
    width: 100%;
  }
}  
/* ------------------------- FIN -  Disposition réactive à 3 colonnes ------------------------- */

/* ------------------------- DIV ET TABLE page conseil d'administration ---------------------------- */
/* div contactez-nous */
div.conseil-adm {
    padding: 2px;
}
/* td contactez-nous  */
td.conseil-adm {
    text-align:center;
    border:2px solid darkred;
    padding: 5px;
}
/* ------------------------- FIN - DIV ET TABLE page conseil d'administration ---------------------- */

/* ------------------------- controler vidéo sur la page Moto Pro -------------------------*/
@media screen and (min-width: 1190px) {
  .videolarge {
    width:920px;
  }
}
@media screen and (max-width: 1189px) {
  .videolarge {
    width:880px;
  }
}
@media screen and (max-width: 990px) {
  .videolarge {
    width:700px;
  }
}
@media screen and (max-width: 780px) {
  .videolarge {
    width:500px;
  }
}

@media screen and (max-width: 380px) {
  .videolarge {
    width:360px;
  }
}
/* ------------------------- FIN - controler vidéo sur la page Moto Pro -------------------------*/

/* ----------------------- entete haut en tout temps et entete bas mode cellulaire -------------- */
.mod-header .header-ext-login {
    background-color:#000000;
    color:white;
}
.header-ext-login a:hover {
    color: white;
}