body{margin:0;padding:0; font-family: "Calibri", sans-serif; font-size: 105%; background-color:#957BB7;color:#800080;}
p{margin:0;padding:0;}
a:link {color:#800080;text-decoration:none;}
a:visited {color:#800080;text-decoration:none;}
a:hover {color:#FF55FB;text-decoration:none;}
a:active {
	color:#800080;
	text-decoration:underline;
}
a img{display:block;border:none;margin:0 auto;}
h1{margin:0;padding:0;font-size:1.52em;}
h2{margin:0;padding:0;font-size:1em;}
h3{margin:0;padding:0;font-size:1em;}
.style-entete {background-color:#FFD9FF;-moz-border-radius: 0px 15px 0px 0px; -webkit-border-radius: 0px 15px 0px 0px; border-radius: 0px 15px 0px 0px; }
.style-entete-print {font-size:2em;}
.style-menu-titre{
  font-size:1.1em;
  border-bottom:1px solid #800080;
  color:#800080;
}
.style-menu-titre strong{
  color:inherit;
}
.style-chemin{background-color:#FFFFFF;}
.style-chemin a{color:#0000FF; text-decoration:underline;}
.style-titre{font-size:1.3em;background-color:#FF55FE;color:#FFFFFF;font-weight:bold;line-height:45px; -moz-box-shadow: inset 0px 0px 10px #FFF; -webkit-box-shadow: inset 0px 0px 10px #FFF; box-shadow: inset 0px 0px 10px #FFF;}
.style-fond-0 {background-color:#957BB7;}
.style-fond-1 {background-color:#FFFFFF;-moz-border-radius: 0 15px 15px 0; -webkit-border-radius: 0 15px 15px 0; border-radius: 0 15px 15px 0;}
.style-fond-2 {background-color:#FFD9FF; -moz-border-radius: 15px 15px 0px 0px; -webkit-border-radius: 15px 15px 0px 0px; border-radius: 15px 15px 0px 0px;}
.style-fond-3 {background-color:#D2CAEC;background-image:url(//www.coloring-life.com/images/arbre-zen-v3.jpg);background-repeat:no-repeat;background-position:center bottom;-moz-border-radius: 15px 0px 0px 15px; -webkit-border-radius: 15px 0px 0px 15px; border-radius: 15px 0px 0px 15px; -moz-box-shadow: inset 0px 0px 10px #FFF; -webkit-box-shadow: inset 0px 0px 10px #FFF; box-shadow: inset 0px 0px 10px #FFF; }
.style-fond-5 {background-color:#FFFFFF;-moz-border-radius: 15px 15px 0 0; -webkit-border-radius: 15px 15px 0 0; border-radius: 15px 15px 0 0; }
.style-fond-6 {background-color:#FFD9FF; }
.style-cat {font-size:1.4em; height: 40px;border-bottom:1px solid #976AA5;color: #976AA5;font-weight:bold;}
.style-more {font-weight:bold;}
.style-cookies {color:#FFFFFF; }
#style-cookies {color:#FFFFFF; }
.arrondi1{
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
}

.menu-arrondi1{
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
border:1px solid #976AA5;
}

 /*------------------------------------------------------------ Images ---------------------------------------- */
 
#coloringlife-logo-500-125 {
    height: 125px;
    width: 500px;
    background: url(//www.coloring-life.com/images/sprite-2.jpg) 0 0;
}

#bambou-tres-petit {
	height: 125px;
    width: 122px;
    background: url(//www.coloring-life.com/images/sprite-2.jpg) -280px -125px;
}

#drapeau-fr {
	height: 14px;
    width: 21px;
    background: url(//www.coloring-life.com/images/sprite-2.jpg) -409px -143px;
}

#drapeau-en {
	height: 14px;
    width: 21px;
    background: url(//www.coloring-life.com/images/sprite-2.jpg) -453px -143px;
}

#drapeau-es {
	height: 14px;
    width: 21px;
    background: url(//www.coloring-life.com/images/sprite-2.jpg) -431px -143px;
}

#drapeau-de {
	height: 14px;
    width: 21px;
    background: url(//www.coloring-life.com/images/sprite-2.jpg) -475px -143px;
}

#drapeau-it {
	height: 14px;
    width: 21px;
    background: url(//www.coloring-life.com/images/sprite-2.jpg) -475px -127px;
}

#drapeau-pt {
	height: 14px;
    width: 21px;
    background: url(//www.coloring-life.com/images/sprite-2.jpg) -409px -127px;
}

#drapeau-nl {
	height: 14px;
    width: 21px;
    background: url(//www.coloring-life.com/images/sprite-2.jpg) -431px -127px;
}

#drapeau-jp {
	height: 14px;
    width: 21px;
    background: url(//www.coloring-life.com/images/sprite-2.jpg) -453px -127px;
}

/* =========================
   ENTETE
   ========================= */

.entete-wrapper{
  background-image:
    linear-gradient(
      90deg,
      #f2bce9 0%,
      #fde4f8 60%,
      #f2bce9 100%
    );
}

/* Espacement logo texte */
@media (min-width: 768px){
  .entete-wrapper .row{
    column-gap: 26px;
  }
}

/* Lisibilité du texte */
.entete-wrapper .col-md{
  line-height: 1.45;
}

@media (min-width: 768px){
  .entete-wrapper .col-md{
    max-width: 760px;
  }
}

/* Version desktop avec bambou */
@media (min-width: 992px){
  .entete-wrapper{
    background-image:
      url(//www.coloring-life.com/images/bambou-v3-encore-plus-court.png),
      linear-gradient(
        90deg,
        rgba(247,212,245,0.92) 0%,
        rgba(253,231,251,0.92) 60%,
        rgba(247,212,245,0.92) 100%
      );
    background-repeat: no-repeat, no-repeat;
    background-position: right 18px center, center;
    background-size: auto 100%, cover;
    padding-right: 140px;
  }
}

/* =========================
   LOGO ENTETE
   ========================= */

.cl-header-logo{
  max-width: 200px;
  height: auto;
}

@media (max-width: 768px){
  .cl-header-logo{
    max-width: 170px;
  }
}

/* =========================
   MENU GAUCHE
   ========================= */

.menu-gauche-logo{
  display: flex;
  justify-content: center;
  padding: 26px 0 18px;
  margin-bottom: 10px;
}

#coloring-life-logo-menu-gauche{
  width: 118px;
  height: auto;
  opacity: 0.95;
}

/* =========================
   MENU HORIZONTAL BOOTSTRAP
   ========================= */

.navbar.navbar-light{
  border: 1px solid rgba(111, 26, 110, 0.14) !important;
  border-radius: 14px;
  background: #ffffff !important;
  padding: 8px 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.navbar.navbar-light .navbar-brand{
  color: #7a1976;
  font-weight: 700;
  padding: 8px 10px;
  border-radius: 12px;
}

.navbar.navbar-light .navbar-brand:hover{
  background: #f6e9f7;
  color: #5f0f5c;
}

.navbar.navbar-light .nav-link{
  color: #7a1976;
  font-weight: 600;
  border-radius: 12px;
  padding: 8px 10px;
}

.navbar.navbar-light .nav-link:hover,
.navbar.navbar-light .nav-link:focus{
  background: #f6e9f7;
  color: #5f0f5c;
}

/* Ton bouton dropdown est un button.nav-link, on le rend "icone" */
.navbar.navbar-light .dropdown-toggle{
  width: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Dropdown menu */
.navbar.navbar-light .dropdown-menu{
  border-radius: 14px;
  border: 1px solid rgba(111, 26, 110, 0.14);
  box-shadow: 0 14px 28px rgba(0,0,0,0.12);
  padding: 8px 0;
  margin-top: 8px;
}

/* Items dropdown */
.navbar.navbar-light .dropdown-item{
  color: #7a1976;
  padding: 10px 14px;
}

.navbar.navbar-light .dropdown-item:hover,
.navbar.navbar-light .dropdown-item:focus{
  background: #f6e9f7;
  color: #5f0f5c;
}

/* Pas de fond rose sur la flèche */
.navbar.navbar-light .dropdown-toggle:hover,
.navbar.navbar-light .dropdown-toggle:focus{
  background: transparent !important;
  color: #7a1976;
}

/* Chaque item du menu est un bloc visuel cohérent */
.navbar.navbar-light .nav-item{
  display: flex;
  align-items: center;
  margin-right: 8px;
}

/* Le conteneur texte + flèche */
.navbar.navbar-light .nav-item > .d-flex{
  display: inline-flex;
  align-items: center;
}

/* Texte */
.navbar.navbar-light .nav-link{
  white-space: nowrap;
}

/* Flèche clairement rattachée au texte */
.navbar.navbar-light .dropdown-toggle{
  margin-left: 4px;
  width: 18px;
  min-width: 18px;
  padding: 0;
}

/* Flèche vraiment collée au libellé */
.navbar.navbar-light .dropdown-toggle{
  margin-left: -4px;
  width: 14px;
  min-width: 14px;
  padding: 0;
  line-height: 1;
}

/* La flèche Bootstrap (pseudo élément) prend de la place, on la compresse */
.navbar.navbar-light .dropdown-toggle::after{
  margin-left: 0;
  vertical-align: 0.12em;
}

/* Evite que le bouton ajoute un "padding bouton" Bootstrap */
.navbar.navbar-light .btn.dropdown-toggle{
  padding: 0 !important;
}