@charset "UTF-8";
/* ----------------------------------- */
/* ---------->>> MIXINS <<<----------- */
/* ----------------------------------- */
/* ----------------------------------------- */
/* ---------->>>   MAG DÉCO   <<<----------- */
/* ----------------------------------------- */
/* -------------------------------------------- */
/* ---------->>> GUIDE TECHNIQUE <<<----------- */
/* -------------------------------------------- */
.colorama {
  overflow: hidden; }
  .colorama h2 {
    margin-top: 0;
    font-size: 24px; }
  .colorama .carre-couleur {
    width: 12.375%;
    padding-bottom: 12.375%;
    float: left;
    position: relative;
    color: #ffffff; }
    .colorama .carre-couleur:hover {
      color: #ffffff;
      text-decoration: none; }
    .colorama .carre-couleur a {
      color: #ffffff; }
      .colorama .carre-couleur a:hover {
        color: #ffffff;
        text-decoration: none; }
    .colorama .carre-couleur .contenu {
      position: absolute;
      left: 3px;
      right: 3px;
      top: 3px;
      bottom: 3px;
      -moz-border-top-right-radius: 10px;
      -webkit-border-top-right-radius: 10px;
      border-top-right-radius: 10px;
      -moz-border-bottom-left-radius: 10px;
      -webkit-border-bottom-left-radius: 10px;
      border-bottom-left-radius: 10px; }
      .colorama .carre-couleur .contenu .nom-couleur {
        text-shadow: 0 0 3px #000;
        padding: 3px;
        position: absolute;
        bottom: 0;
        right: 0; }
        .colorama .carre-couleur .contenu .nom-couleur p {
          word-wrap: break-word;
          text-align: right;
          font-size: 12px;
          margin-bottom: 0;
          line-height: 1; }
        .colorama .carre-couleur .contenu .nom-couleur .texte-fonce {
          color: #000; }
      .colorama .carre-couleur .contenu.couleur {
        background-color: #777777; }
        .colorama .carre-couleur .contenu.couleur.lavandin {
          background-color: #a8abca; }
        .colorama .carre-couleur .contenu.couleur.lime {
          background-color: #cdd946; }
        .colorama .carre-couleur .contenu.couleur.blanc {
          background-color: #ffffff; }
        .colorama .carre-couleur .contenu.couleur.blanc-casse {
          background-color: #f0eee2; }
        .colorama .carre-couleur .contenu.couleur.contour {
          border: 1px solid #eeeeee; }
      .colorama .carre-couleur .contenu.image {
        overflow: hidden;
        padding: 0; }
  @media screen and (max-width: 768px) {
    .colorama .carre-couleur {
      width: 25%;
      padding-bottom: 25%; } }

.degrade {
  background-color: #ffffff;
  padding: 10px; }
  .degrade h2 {
    margin-bottom: 20px; }
  .degrade .carres {
    margin: auto; }
  .degrade .carre-couleur {
    width: 9%;
    padding-bottom: 9%;
    float: left;
    position: relative; }
    .degrade .carre-couleur.degrade-blanc {
      background-color: white;
      box-shadow: 0 0 0 1px #bbbbbb inset; }
    .degrade .carre-couleur.degrade-beige {
      background-color: #E8D9AC; }
    .degrade .carre-couleur.degrade-bleu {
      background-color: #7988D7; }
    .degrade .carre-couleur.degrade-brun {
      background-color: #907366; }
    .degrade .carre-couleur.degrade-gris {
      background-color: #939592; }
    .degrade .carre-couleur.degrade-jaune {
      background-color: #FFE300; }
    .degrade .carre-couleur.degrade-violet {
      background-color: #7C357F; }
    .degrade .carre-couleur.degrade-orange {
      background-color: #FF8B00; }
    .degrade .carre-couleur.degrade-rose {
      background-color: #E38BAE; }
    .degrade .carre-couleur.degrade-rouge {
      background-color: #A92328; }
    .degrade .carre-couleur.degrade-vert {
      background-color: #C0CF60; }
  @media screen and (max-width: 768px) {
    .degrade .carre-couleur {
      width: 16.66667%;
      padding-bottom: 16.66667%; } }
  .degrade .active:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -14px;
    border-bottom: 14px solid #fff;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent; }
  .degrade .active.degrade-blanc:before {
    border-bottom-color: #bbbbbb; }
  .degrade .lien-toutes-couleurs {
    text-align: right;
    margin-top: 10px;
    margin-bottom: 0; }
    .degrade .lien-toutes-couleurs a {
      color: #000; }