/* ---- Style du bouton GENERIQUE ---- */
button {

    padding:5px;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: 10px;
    font-size: 14px;
    border-radius: 30px;
    border: none;
    background-color: #d5ceb3;
    color: black;
    cursor: hand;
    transition: background-color 1.3s;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2); /* Ombre pour un effet de profondeur */
    margin-bottom: 20px; /* Ajouter un espace en dessous */
    margin-top: 20px; /* Ajouter un espace en dessous */
}


/* ---- Style des boutons HORIZONTAUX ---- */
.boutons-en-ligne-horizontale {
        display: flex;
        margin: auto;
        gap: 12px;
        align-items: center;
        justify-content: center;
        width: 100%;
        align-items: center;
        justify-content: center;
}

/* ---- Style du tooltip ---- */
.tooltip-wrapper {
    position: relative;
    display: inline-block;

}
.tooltip-text {
    visibility: hidden;
    display: inline-block;
    background-color: #fff7e0;
    color: #000;
    border: 3px solid #ffffff;
    text-align: left;
    padding: 5px;
    border-radius: 10px;
    color: #2e1a09;
    position: relative;
    z-index: 1;
    top: 120%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 250px;
    font-size: 0.9em;
    box-shadow: 0 0 4px rgba(0,0,0,0.2);

    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.3);
}

.tooltip-wrapper:hover .tooltip-text {
    visibility: visible;
}


.button:hover {
    background-color: #7dbb02;
}


.button-emoji {
    font-size: 14px;
    border-radius: 30px;
    border: none;
    background-color: transparent;
    color: black;
    cursor: hand;
    transition: none;
}

.button-emoji:hover {
    background-color: transparent;
}



/* ---- Style du bouton TEXTE simple ---- */
.bouton-texte {
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 14px;
    border-radius: 0px;
    border: none;
    background-color: transparent;
    color: rgb(105, 160, 243);
    cursor: pointer;
    transition: background-color 1.3s;
    box-shadow: none;
    margin-bottom: 0px;
    margin-top: 0px;
    text-transform: uppercase;
    text-decoration: none;
}
    .bouton-texte:hover {
        color: #001eb5;
        text-decoration: none;
        background-color: transparent ;     
        box-shadow: none;
font-weight: bold;
        transform: scale(1.05);
    
    }


/* ---- Style du bouton IMPORTANT ---- */
.important-button {
    padding: 12px 30px;
    font-size: 14px;
    border-radius: 25px;
    border: none;
    background-color: #414256; /* meme couleur que la surbrillance regions */
    color: rgb(255, 255, 255);
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3); /* Ombre pour un effet de profondeur */
    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 */
    }

    .important-button:hover {
        background-color: #70cc00; /* Rouge plus foncé au survol */
        transform: scale(1.05); /* Légère augmentation de la taille au survol */
    }



/* ---- Style du bouton PORTEUR ---- */
.button-porteur {
 padding-top: 0px;
 padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 12px;
    font-size: 15px;
 
    width: 100%;
    box-sizing: border-box;
    display: block;   /* 🔑 clé absolue */

    text-align:left; 
    margin-left: 5px;
    margin: 1px ; /* Centrer le bouton horizontalement */
  
    border-radius: 25px;
    border: none;
 
 
    font-size: 16px;
    font-weight: 400;
    font-family: Georgia, 'Times New Roman', Times, serif;
    
    color:  #2b2420; 
   
    transition: background-color 0.3s, transform 0.3s;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3); /* Ombre pour un effet de profondeur */
    background-color: #dfe5cb; /* meme couleur que la surbrillance regions */
   
   
}
.button-porteur {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.porteur-left {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.porteur-right {
    text-align: right;
    min-width: 80px; /* espace réservé pour que ça ne bouge pas */
    
}




/* ---- Style du bouton GUIDE ---- */
.bouton-guide {
    text-align: left;
    text-decoration: none;
margin: 5px;
    border-radius: 5px;
    font-size: 14px;
    font-family: 'Arial', sans-serif;
    font-style: italic;
    color: #5f5435;
    background-color: rgb(250, 248, 172);
}

.bouton-guide:hover {
    background-color: rgb(248, 246, 139);
    transform: scale(1.01);
}

/* ---- Style du bouton PROGRAMME ---- */

.button-programme {

    background-color: #f8ffc3;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;

    width: 100%;
    box-sizing: border-box;
    display: block;   /* 🔑 clé absolue */

    text-align: left;
    margin: 2px;

    border: 2px solid #ffffff;
    border-radius: 10px;

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

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

.button-programme:hover {
    background-color: #d7f877; /* ✅ gris au survol */
    transform: scale(1.00);
}
 
/* ---- Style du bouton INTENTION ---- */

.button-intention {
    background-color: #fffdf8;

    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;

    width: 100%;
    box-sizing: border-box;
    display: block;   /* 🔑 clé absolue */

    text-align: left;
    margin: 2px;

    border: 2px solid #ffffff;
    border-radius: 10px;

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

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

    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.button-intention:hover {
    background-color: #fff3d2; /* ✅ jaune paille au survol */
    transform: scale(1.02);
}

.intention-left {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}

.intention-right {
    text-align: right;
    min-width: 80px; /* espace réservé pour que ça ne bouge pas */
    
}


/* BOUTON INTENTION-MATCH */
.button-intention_MATCH {
    background-color: #fffdf8;

    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;

    width: 100%;
    box-sizing: border-box;
    display: block;   /* 🔑 clé absolue */

    text-align: left;
    margin: 2px;

    border: 2px solid #ffffff;
    border-radius: 10px;

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

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

    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.button-intention_MATCH:hover {
    background-color: #fff3d2; /* ✅ jaune paille au survol */
    transform: scale(1.02);
}

.intention-left_MATCH {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
}

.intention-right_MATCH {
    text-align: right;
    min-width: 80px; /* espace réservé pour que ça ne bouge pas */
    
}


/* ---- Style des listes de BOUTONS PROJET ---- */

/* ---- Style du bouton PROJET ---- */
.liste-boutons-items {
    width: 600px;
    margin: 5px auto; /* centré */
}

.button-projet {
 
    background-color: #f0d8bf;

    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;

    width: 100%;
    box-sizing: border-box;
    display: block;   /* 🔑 clé absolue */

    text-align: left;
    margin: 3px;

    border: 2px solid #ffffff;
    border-radius: 10px;

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

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

    .button-projet:hover {
        background-color: #dbaa7a; /* ✅ gris au survol */
        transform: scale(1.02);
    }


/* ---- Style du bouton LIKE ---- */
.button-like {
    background-color: #d2eef7;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;

    width: 100%;
    box-sizing: border-box;
    display: block;   /* 🔑 clé absolue */

    text-align: left;
    margin: 2px;

    border: 2px solid #ffffff;
    border-radius: 10px;

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

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

    .button-like:hover {
    background-color: #9bdcee; /* ✅ gris au survol */
    transform: scale(1.01);
    }






/* ---- Style du bouton ACTION ---- */
.button-action {
    min-width: 60%;
    max-width: 70%;

    padding: 10px;
    text-align: left;
    margin: 0px;
    background-color: #b2d297;
    border-radius: 00px;

    font-size: 14px;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #000000;

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

}


/* ---- Style du bouton MATCH ---- */
.button-match {

    background: #e0e3ca;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;

    width: 100%;
    box-sizing: border-box;
    display: block;   /* 🔑 clé absolue */

    text-align: left;
    margin: 2px;

    border: 2px solid #ffffff;
    border-radius: 10px;

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

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

.button-match:hover {
    background: #e9fed9;
    border-color: #d6ffa3;
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.12);
}


/* texte du nom */
.button-match .intention-nom {
    flex-grow: 1;
    font-weight: 600;
    padding-left: 5px;
}

/* Résultats avec étoiles */
.button-match .intention-ressemblance {
    white-space: nowrap;
    font-size: 1.2rem;
}


.score-table {
    width: 100%;
    border: none;
    border-collapse: collapse;
    background-color: transparent;
    box-shadow: none;
    margin: 0px;
    padding: 0px;

}

.score-table td {
    text-align: right;
    padding: 0px;
    border: none;

    margin: 0px;
    box-shadow: none;
}
    .score-table td:first-child {
        text-align: right;
        border: none;
        padding: 0px;
        margin: 0px;
        box-shadow: none;
    }
    .score-table td:last-child {
        text-align: left;
        border: none;
        padding: 0px;
        margin: 0px;
        box-shadow: none;
    }
.score-table tr {
    border: none;
    border-collapse: collapse;
    background-color: transparent;
    box-shadow: none;
    margin: 0px;
    padding: 0px;
    box-shadow: none;
}







/* ---- Style du bouton MENU ---- */
.button-menu {
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 14px;
    margin: 10px auto;
    margin-right: 10px;
    margin-left: 10px;
    border-radius: 50px;
    border: none;
    background-color: #e1e1e1;
    color: #000000;
}

.button-menu-desactivated {
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 14px;
    margin: 10px auto;
    margin-right: 10px;
    margin-left: 10px;
    border-radius: 50px;
    border: none;
    background-color: #e1e1e1;
    color: #279dfe;
}

.button-menu:hover {
    background-color: #a2cd60;
    transform: scale(1.01);
}


.button-ref_contrat {
    background-color: #4468a2;
    color: #ffffff;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;

    width: 100%;
    box-sizing: border-box;
    display: block;   /* 🔑 clé absolue */

    text-align: left;
    margin: 2px;

    border: 2px solid #ff0000;
    border-radius: 10px;

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

    transition: background-color 0.3s, transform 0.3s;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
  
}
.button-ref_contrat:hover {
    background-color: #0d498e;
    transform: scale(1.01);
}

.button-contrat {
    background-color: #5f301a;
    color: #ffffff;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;

    width: 100%;
    box-sizing: border-box;
    display: block;   /* 🔑 clé absolue */

    text-align: left;
    margin: 2px;

    border: 2px solid #ffffff;
    border-radius: 10px;

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

    transition: background-color 0.3s, transform 0.3s;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
  
}
.button-contrat:hover {
    background-color: #371204;
    transform: scale(1.01);
}