/* ---- Style du bouton PAPILLON OUT ---- */
.button-papillon-out {
    position: relative;

    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    box-sizing: border-box;
    display: block;   /* 🔑 clé absolue */
    padding-top: 5px;
    padding-bottom: 5px;
    max-height: 40px; 
    border-radius: 10px;

    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);

    font-size: 14px;
    font-family: 'Courier New', Courier, monospace;

    font-family:monospace;
    font-weight:normal;
    color: hsl(26, 100%, 9%);

    text-align: left;
    margin: 2px;


    border: 1px solid transparent;
    background:
      linear-gradient(#ffffff, #ffffff) padding-box,
      linear-gradient(
        270deg,
        #2ed573,   /* vert */
        #1e90ff,   /* bleu */
        #a55eea,   /* violet */
        #2ed573
      ) border-box;
    background-size: 400% 400%;
    background-color: #ffffff;

    transition: background-color 0.3s, transform 0.3s;


    /* Animation du dégradé */
    animation: papillon-border 2s ease infinite;
    }

  .button-papillon-out:hover {
    background:
    linear-gradient(#e3d2ff, #e3d2ff) padding-box,
    linear-gradient(
        270deg,
        #2ed573,   /* vert */
        #1e90ff,   /* bleu */
        #a55eea,   /* violet */
        #2ed573
      ) border-box;
    transform: scale(1.01);
  }


  @keyframes papillon-border {
    0%   { background-position:   0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
  }   



  /* ---- Style du bouton PAPILLON IN ---- */
 .button-papillon-in {
    padding-left: 15px;
    position: relative;

    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    box-sizing: border-box;
    display: block;   /* 🔑 clé absolue */
    padding-top: 5px;
    padding-bottom: 5px;
    max-height: 40px; 
    border-radius: 10px;

    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
    box-shadow: linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(
      270deg,
      #07acfe,   /* vert */
      #ea5eff,   /* bleu */
      #a83406,   /* violet */
      #5dba07
    ) border-box;

    font-size: 14px;
    font-family: 'Courier New', Courier, monospace;
    font-family:monospace;
    font-weight:normal;
    color: hsl(26, 100%, 9%);

    text-align: left;
    margin: 2px;


    border: 1px solid transparent;
    background:
      linear-gradient(#ffffff, #ffffff) padding-box,
      linear-gradient(
        270deg,
      #07acfe,   /* vert */
      #ea5eff,   /* bleu */
      #a83406,   /* violet */
      #5dba07
      ) border-box;
    background-size: 400% 400%;
    background-color: #ffffff;
    /* Animation du dégradé */
    animation: papillon-border 3s ease infinite;
   
    transition: background-color 0.3s, transform 0.3s;
 }

 .button-papillon-in:hover {
    background:
    linear-gradient(#e3d2ff, #e3d2ff) padding-box,
    linear-gradient(
      270deg,
      #fee507,   /* vert */
      #ea5eff,   /* bleu */
      #a83406,   /* violet */
      #d5ab2e
    ) border-box;
  background-size: 400% 400%;
  background-color: #fcb36b;
    transform: scale(1.01);
 }




 /* ---- Style du bouton PAPILLON SEND ---- */
 .button-papillon-send {
    display: block;
    margin: 0 auto; /* Centrer le bouton horizontalement */
    margin-bottom: 50px; /* Ajouter un espace en dessous */
    margin-top: 50px; /* Ajouter un espace en dessous */

    font-family: 'Courier New', Courier, monospace;
    font-weight:normal;
    font-size: 12px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 4px;
    text-align: left;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3);
    background-color: #ffffff;

    cursor: pointer;
    margin: 0px;

    transition: background-color 0.3s, transform 0.3s;
 }
 .button-papillon-send:hover {
    background-color: #a0cefc;
    transform: scale(1.01);
 }





 /* ---- Style petit PAPILLON en bouton ---- */
.button-papillon-icon {
    position: relative;
   
    padding-top: 1px;
    padding-bottom: 1px;
    height: 50px;
    width: 50px;
    border-radius: 50px;

    box-shadow: none; /*2px 4px 10px rgba(0, 0, 0, 0.3);*/

    font-size: 14px;
    font-family: 'Courier New', Courier, monospace;

    color: hsl(26, 100%, 9%);

    text-align: center;
    margin: 2px;

    border: 0.5px solid transparent;
    background:
      linear-gradient(#ffffff, #ffffff) padding-box,
      linear-gradient(
        270deg,
        #2ed573,   /* vert */
        #1e90ff,   /* bleu */
        #a55eea,   /* violet */
        #2ed573
      ) border-box;
    background-size: 400% 400%;
    background-color: #ffffff;

    transition: background-color 0.3s, transform 0.3s;

    /* Animation du dégradé */
    animation: papillon-border 2s ease infinite;
    }


  .button-papillon-icon:hover {

    border: 2px solid transparent;
    background:
    linear-gradient(#7ec9ff, #006affd7) padding-box,
/*    radial-gradient(#ffecd2, #ffecd2) padding-box,*/

    linear-gradient(
        270deg,
        #2ed573,   /* vert */
        #1e90ff,   /* bleu */
        #a55eea,   /* violet */
        #2ed573
      ) border-box;
  
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
      border: 1px solid black;
  
  }


  @keyframes papillon-border {
    0%   { background-position:   0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
  }   




/* ---- bouton PAPILLON BULLE de message ---- */
.papillon-wrapper {
    position: relative;
    display: inline-block;
}

.papillon-bulle {
    display: none;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);

    color: #000000;
    padding: 5px;
    z-index: 1000;

    border-radius: 10px;
    width: 300px;
    text-align: center;
    
    border: 1px solid transparent;
    background:
      linear-gradient(#ffffff, #ffffff) padding-box,
      linear-gradient(
        90deg,
        #2ed573,   /* vert */
        #1e90ff,   /* bleu */
        #a55eea,   /* violet */
        #2ed573
      ) border-box;
        background-size: 400% 400%;
        background-color: #ffffff;

        transition: background-color 0.3s, transform 0.3s;
box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);

    /* Animation du dégradé */
    animation: papillon-border 1s ease infinite;
    }

    @keyframes papillon-border {
        0%   { background-position:   0% 50%; }
        50%  { background-position: 100% 50%; }
        100% { background-position:   0% 50%; }
      }   
    
.papillon-texte {
    font-family: 'Arial', sans-serif;
    font-weight:bolder;
    font-size: 14px;
    text-align:left;
    color: #000000;
}