@charset "utf-8";

.lfloat					{float:left;} /* 05/12/2022 */

.bouton::-moz-focus-inner{
  border: 0;
  padding: 0;
}

.bouton{
  display: inline-block;
  zoom: 1;
  padding: 3px 5px;
  margin: 0;
  cursor: pointer;
  border: 1px solid #bbb;
  overflow: visible;
  font: bold 13px arial, helvetica, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  margin-right: 1px;
    /*color: #555;	*/
  
  background-color: #ddd;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
  background-image: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
  background-image: -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
  background-image: linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
  
  -webkit-transition: background-color .2s ease-out;
  -moz-transition: background-color .2s ease-out;
  -ms-transition: background-color .2s ease-out;
  -o-transition: background-color .2s ease-out;
  transition: background-color .2s ease-out;
  background-clip: padding-box; /* Fix bleeding */
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
  text-shadow: 0 1px 0 rgba(255,255,255, .9);
  
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.bouton:hover{
  background-color: #eee;
  color: #555;
}

.bouton:active{
  background: #e9e9e9;
  position: relative;
  top: 1px;
  text-shadow: none;
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
}

.bouton[disabled], .bouton[disabled]:hover, .bouton[disabled]:active{
  border-color: #eaeaea;
  background: #fafafa;
  cursor: default;
  position: static;
  color: #999;
  /* Usually, !important should be avoided but here it's really needed :) */
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/*                                                                              les boutons : 22 */
.bouton.arrow_tresbas	{padding: 0mm 0mm 0mm 0mm;width:6mm; height:4mm;}
.bouton.arrow_bas			{padding: 1mm 1mm 1mm 1mm;width:6mm; height:6mm;}
.bouton.arrow					{padding: 1mm 1mm 1mm 1mm;width:6mm; height:8mm;}

.bouton.veryverytiny	{padding: 1mm 1mm 1mm 1mm;width:9mm;  height:6mm;}
.bouton.very_tiny			{padding: 1mm 3mm 1mm 1mm;width:11mm; height:6mm;}
.bouton.moyen					{padding: 1mm 1mm 1mm 1mm;width:18mm; height:6mm;}
.bouton.tiny_bas			{padding: 1mm 1mm 1mm 1mm;width:22mm; height:6mm;}
.bouton.long_bas			{padding: 1mm 1mm 1mm 1mm;width:52mm; height:6mm;}

.bouton.tinish				{padding: 2mm 1mm 2mm 1mm;width:16mm; height:8mm;}
.bouton.tiny					{padding: 2mm 1mm 2mm 1mm;width:22mm; height:8mm;}
.bouton.tinymoyen			{padding: 2mm 1mm 2mm 1mm;width:30mm; height:8mm;}
.bouton.tinylong			{padding: 2mm 1mm 2mm 1mm;width:34mm; height:8mm;}
.bouton.long					{padding: 2mm 1mm 2mm 1mm;width:52mm; height:8mm;}

.bouton.large					      {text-transform: uppercase; width:30mm; height:10mm;} 
.bouton.tinylong_large			{padding: 2mm 1mm 2mm 1mm;width:34mm; height:10mm;}
.bouton.large_etroit	      {text-transform: uppercase; width:14mm; height:10mm;} 
.bouton.large_très_etroit	  {text-transform: uppercase; width:9mm; height:10mm; text-align: justify;} 
.bouton.tres_large		      {text-transform: uppercase; width:30mm; height:12mm;}

.bouton.small					{padding: 4px 12px;}
.bouton.mid 					{padding: 8px 24px;}
.bouton.flex_6				{padding: 1mm 1mm 1mm 1mm; height:6mm;}
.bouton.flex_8				{padding: 2mm 1mm 2mm 1mm; height:8mm;}
/*                                                                              les boutons active : 22 */
.bouton.arrow_tresbas:active          {top:1px;}
.bouton.arrow_bas:active              {top:1px;}
.bouton.arrow:active                  {top:1px;}

.bouton.veryverytiny:active           {top:1px;}
.bouton.very_tiny:active              {top:1px;}
.bouton.moyen:active                  {top:1px;}
.bouton.tiny_bas:active               {top:1px;}
.bouton.long_bas:active               {top:1px;}

.bouton.tinish:active                 {top:1px;}
.bouton.tiny:active                   {top:1px;}
.bouton.tinymoyen:active              {top:1px;}
.bouton.tinylong:active               {top:1px;}
.bouton.long:active                   {top:1px;}

.bouton.large:active                  {top:4px;}
.bouton.tinylong_large:active         {top:1px;}
.bouton.large_etroit:active           {top:4px;}
.bouton.large_très_etroit:active      {top:2px;}
.bouton.tres_large:active             {top:4px;}

.bouton.small:active                  {top:2px;}
.bouton.mid:active                    {top:3px;}
.bouton.flex_6:active	                {top:2px;}
.bouton.flex_8:active                 {top:2px;}


/*                                                                              les couleurs / 17 */
.bouton.darkblue, .bouton.darkgreen, .bouton.green,  .bouton.red,    .bouton.blue,   .bouton.orange, .bouton.rose,  .bouton.rosebonbon, 
.bouton.violet,   .bouton.brown,     .bouton.pink,   .bouton.purple, .bouton.orchid, .bouton.blanc,  .bouton.jaune, .bouton.black,      
.bouton.lightblue, .bouton.lightgreen
{
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,0)));
  background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
  background-image: -o-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
  background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));
}


.bouton.green             {  background-color: green;  border-color: green;}
.bouton.green:hover       {  background-color: #62c462;}
.bouton.green:active      {  background: green;}

.bouton.darkgreen         {  background-color: darkgreen;  border-color: #57a957;}
.bouton.darkgreen:hover   {  background-color: #57a957;}
.bouton.darkgreen:active  {  background: darkgreen;}

.bouton.lightgreen         {  background-color: lightgreen;  border-color: #57a957;}
.bouton.lightgreen:hover   {  background-color: #57a957;}
.bouton.lightgreen:active  {  background: darkgreen;}

.bouton.blue              {  background-color:blue;  border-color: #269CE9;}
.bouton.blue:hover        {  background-color: #70B9E8;}
.bouton.blue:active       {  background: #269CE9;}

.bouton.darkblue              {  background-color:darkblue;  border-color: #269CE9;}
.bouton.darkblue:hover        {  background-color: #70B9E8;color: darkblue;}
.bouton.darkblue:active       {  background: #269CE9;}

.bouton.lightblue         {  background-color: lightblue;  border-color: #269CE9;color: darkblue;}
.bouton.lightblue:hover   {  background-color:blue;color: white;}
.bouton.lightblue:active  {  background: #269CE9;}

.bouton.orange            {  background-color: orange;  border-color: #269CE9;}
.bouton.orange:hover      {  background-color: #FFCC00;}
.bouton.orange:active     {  background: #269CE9;}

.bouton.rose              {  background-color: #FF66CC;  border-color: #FF66CC;}
.bouton.rose:hover        {  background-color: #FF99CC;}
.bouton.rose:active       {  background: #FF66CC;}

.bouton.red               {  background-color: #ca3535;  border-color: #c43c35;}
.bouton.red:hover         {  background-color: #ee5f5b;}
.bouton.red:active        {  background: #c43c35;}

.bouton.violet            {  background-color: violet;  border-color: #CC33FF;}
.bouton.violet:hover      {  background-color: #FFCCFF;}
.bouton.violet:active     {  background: #CC33FF;}

.bouton.brown             {  background-color: brown;  border-color: #0066FF;}
.bouton.brown:hover       {  background-color: #dfb119;}
.bouton.brown:active      {  background: rgb(92, 45, 8);}

.bouton.pink              {  background-color:pink;  border-color: #FF66CC;}
.bouton.pink:hover        {  background-color: #FF99CC;}
.bouton.pink:active       {  background: #FF66CC;}

.bouton.purple              {  background-color:purple;  border-color: #FF66CC;}
.bouton.purple:hover        {  background-color: #FF99CC;}
.bouton.purple:active       {  background: #FF66CC;}

.bouton.orchid              {  background-color:orchid;  border-color: #FF66CC;}
.bouton.orchid:hover        {  background-color: #FF99CC;}
.bouton.orchid:active       {  background: #FF66CC;}

.bouton.blanc              {  background-color: white;  border-color: #FF66CC;color: black;}
.bouton.blanc:hover        {  background-color: #e4d0da;}
.bouton.blanc:active       {  background: #FF66CC;}

.bouton.jaune              {  background-color: yellow;  border-color: #FF66CC; color: black;}
.bouton.jaune:hover        {  background-color: #c9d96c;}
.bouton.jaune:active       {  background: #FF66CC;}

.bouton.black              {  background-color: black#FF66CC;  border-color: #FF66CC; color: black;}
.bouton.black:hover        {  background-color: #FF99CC;}
.bouton.black:active       {  background: #FF66CC;}

/* Group boutons */
.bouton-group,
.bouton-group li{
  display: inline-block;
  display: inline;
  zoom: 1;
}

.bouton-group{
  font-size: 0; /* Inline block elements gap - fix */
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  padding: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
}

.bouton-group li{
  margin-right: -1px; /* Overlap each right bouton border */
}

.bouton-group .bouton{
  font-size: 13px; /* Set the font size, different from inherited 0 */
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}

.bouton-group .bouton:active{
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset;
  box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset;
}

.bouton-group li:first-child .bouton{
  -moz-border-radius: 3px 0 0 3px;
  -webkit-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}

.bouton-group li:first-child .bouton:active{
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset;
  box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset;
}

.bouton-group li:last-child .bouton{
  -moz-border-radius: 0 3px 3px 0;
  -webkit-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}

.bouton-group li:last-child .bouton:active{
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset;
  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset;
  box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset;
}

.centered {
  margin:50px auto;
  text-align:center;
}