/*==================================*/
/* OPTIMISATIONS GLOBALES      */
/*==================================*/

* {
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    overflow-y: auto;
    font-family: 'Quicksand', sans-serif;
    font-weight: 300;
    background-color: #fff;
    margin: 0;
}

body, td, th {
    font-family: 'Quicksand', sans-serif;
}

td {
    padding: 2px;
    margin-left: 3px;
}

/*==================================*/
/* TYPOGRAPHIE           */
/*==================================*/

h1 {
    color: #666;       /* Couleur du texte gris */
    font-size: 9px;   /* Taille de la police */
    font-weight: normal; /* Optionnel : pour que le h1 ne soit pas trop gras */
}


/* Liens */
a {
    color: #4d90fe;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #666;
}

.Style8 {
    font-weight: 700;
}

/* Titres */
.titre, .titre_gris {
    color: #FFF;
    font-size: 18px;
    margin-left: 10px;
    font-weight: 100;
}

.titre_gris {
    color: #666;
}

.grandtitre_gris {
    color: #666;
    font-size: 38px;
    margin-left: 10px;
    font-weight: 400;
}

/* Textes */
.texte_market, .texte_rose, .texte_2, .texte_bonus, .texte_gris, .texte_rouge,
.texte_grise, .lien-entete, .texte_menu, .texte_menu2, .texte_blanc_gros,
.texte_mini, .texte_kini, .texte_kini_blanc, .texte_mini_blanc, .texte_mini_orange,
.texte_mini2, .texte_mini_fille {
    font-family: 'Quicksand', sans-serif;
}

.texte_market { color: #C69; font-size: 15px; margin-left: 10px; }
.texte_rose { color: #e62118; font-size: 20px; }
.texte_2 { color: #36F; font-size: 19px; }
.texte_blanc { color: #FFF; font-size: 15px; }
.texte_bonus { color: #3CF; font-size: 17px; }
.texte_gris { color: #666; font-size: 15px; }
.texte_rouge { color: #e62118; font-size: 15px; }
.texte_grise { color: #fff; font-size: 15px; }
.lien-entete { color: #FFF; font-size: 12px; }
.texte_menu { color: #fff; font-size: 19px; font-style: normal; }
.texte_menu2 { color: #333; font-size: 18px; font-style: normal; }
.texte_blanc_gros { color: #FFF; font-size: 24px; }
.texte_mini { color: #666; font-size: 14px; }
.texte_mini strong { font-weight: bold !important; }
.texte_mini em { font-style: italic !important; }
.texte_kini { color: #666; font-size: 12px; }
.texte_kini_blanc { color: #fff; font-size: 12px; }
.texte_mini_blanc { color: #F60; font-size: 12px; }
.texte_mini_orange { color: #39F; font-size: 15px; }
.texte_mini2 { color: #999; font-size: 10px; }
.texte_mini_fille { color: #F6C; font-size: 15px; }
.inscription { font-size: 50px; font-weight: 700; color: #03E4E0; }

/*==================================*/
/* IMAGES              */
/*==================================*/

img.zoomEffect, img.photo {
    border-radius: 10px;
    box-shadow: 1px 5px 4px #aaa;
    margin-top: 5px;
    margin-bottom: 0px;
    transition: all 0.3s ease-in-out 0s;
    opacity: 0.9;
}

img.rond {
    border-radius: 50%;
    object-fit: cover;
}

img.zoomEffect:hover {
    opacity: 1;
    box-shadow: 5px 5px 4px #aaa;
}

.image {
    box-shadow: 5px 5px 4px #aaa;
}

/*==================================*/
/* FORMULAIRES         */
/*==================================*/

.form, select.form {
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    color: #333;
    width: 250px;
    padding: 5px;
    margin: 1px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 3px;
    box-sizing: border-box;
}

.form_rouge, select.form_rouge {
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    color: #333;
    width: 250px;
    padding: 3px;
    margin: 1px;
    border: 2px solid #e62118;
    background-color: #fff;
    border-radius: 3px;
    box-sizing: border-box;
}

/* Autres styles de formulaire */
.form-video { width: 160px; padding: 3px; margin: 1px; border: 1px solid #ccc; background-color: #f1f1f1; border-radius: 3px; }
.champform { color: #000; background-color: #fff; font-size: 14px; border: 1px solid #999; padding: 2px; vertical-align: middle; border-radius: 3px; }
.champform2 { color: #000; width: 88%; background-color: #fff; font-size: 15px; border: 1px solid #999; padding: 10px; vertical-align: middle; border-radius: 3px; }
.champform3 { color: #000; width: 72%; background-color: #fff; font-size: 15px; border: 1px solid #999; padding: 8px; vertical-align: middle; border-radius: 3px; }
.champform_ordi { color: #000; background-color: #f5f5f5; font-size: 15px; padding: 8px; border: 1px solid #999; margin-top: 5px; border-radius: 5px; }
.liste { width: 95%; font-size: 18px; color: #666; background-color: #F0F0F0; }
.liste2 { width: 95%; font-size: 18px; color: #E9E9E9; background-color: #000; }

/*==================================*/
/* BOUTONS             */
/*==================================*/

/* Styles généraux des boutons */
.bouton, .bouton_blanc, .bouton_rose, .bouton_noir, .bouton_rose,
.bouton_bleu, .bouton_facebook, .bouton_rouge2, .bouton_gris, .bouton_orange,
.bouton_vertclair, .bouton_vert, .bouton_rouge {
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    border: 0;
    border-radius: 20px;  /* coins arrondis style pill */
    text-decoration: none;
    padding: 8px 16px;     /* padding plus confortable */
    margin-left: 5px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}

/* Boutons spécifiques */
.bouton_envoi { 
    background: #e62118 url(../icone/ic_action_send_now.png) center right no-repeat; 
    display: block; 
    border: none; 
    height: 32px; 
    width: 90px; 
    font-size: 14px; 
    color: #fff; 
    border-radius: 20px; 
    padding: 8px 16px;
}

.bouton { 
    color: #FFF; 
    background-color: #ff4081; 
    margin-right: 12px; 
}

.bouton_blanc { 
    color: #fff; 
    background-color: #4d90fe; 
    width: auto; 
}
.bouton_blanc:hover { 
    box-shadow: 1px 1px 12px #555; 
}

.bouton_rose { 
    color: #fff; 
    background-color: #ff4081; 
    width: auto; 
}

.bouton_noir { 
    color: #FFF; 
    background-color: #666; 
    width: 160px; 
}

.bouton_bleu { 
    color: #FFF; 
    background-color: #4d90fe; 
    width: auto; 
}

.bouton_facebook { 
    color: #FFF; 
    background-color: #3b5998; 
    width: auto; 
}

.bouton_rouge2 { 
    color: #FFF; 
    background-color: #ea4335; 
    width: 160px; 
}

.bouton_gris { 
    color: #FFF; 
    background-color: #666; 
    width: auto;
}

.bouton_orange { 
    color: #FFF; 
    background-color: #ff9900; 
    width: 160px; 
}

.bouton_vertclair, .bouton_vert { 
    color: #FFF; 
    background-color: #ff4081; 
    width: auto; 
}

.bouton_rouge { 
    color: #FFF; 
    background-color: #e62118; 
    margin-right: 12px; 
}

.bouton:visited,
.bouton:active,
.bouton_blanc:visited,
.bouton_blanc:active,
.bouton_rose:visited,
.bouton_rose:active,
.bouton_noir:visited,
.bouton_noir:active,
.bouton_rose:visited,
.bouton_rose:active,
.bouton_bleu:visited,
.bouton_bleu:active,
.bouton_facebook:visited,
.bouton_facebook:active,
.bouton_rouge2:visited,
.bouton_rouge2:active,
.bouton_gris:visited,
.bouton_gris:active,
.bouton_orange:visited,
.bouton_orange:active,
.bouton_vertclair:visited,
.bouton_vertclair:active,
.bouton_vert:visited,
.bouton_vert:active,
.bouton_rouge:visited,
.bouton_rouge:active {
    color: #FFF !important;
}

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

.menu_btn { background: #ff4081 url(../img/menu_bg.png) center center no-repeat; display: block; height: 35px; width: 35px; position: fixed; top: 0; right: 7px; }
#menu { height: 100%; position: fixed; background: #f5f5f5; top: 0; bottom: 0; width: 190px; right: -190px; z-index: 9999; }
#menu ul { padding: 0; margin: 0; list-style: none; color: #666; }
#menu ul li { height: 25px; padding-left: 17px; line-height: 24px; border-bottom: 1px solid #ccc; background-color: #f5f5f5; position: relative; }
#menu ul li.active { background: #ff9900; }
#menu ul li:hover { background: #000; color: #fff; }
#menu ul li a { color: #666; text-decoration: none; font-family: 'Quicksand', sans-serif; font-size: 15px; display: block; }
#menu ul li a:hover, #menu ul li ul li a:hover { color: #fff; font-weight: 400; }
#menu ul ul { display: none; position: absolute; right: 190px; width: 175px; top: 0px; margin: 0px; padding: 0px; }
#menu li:hover ul.niveau2 { display: block; }
#menu ul li ul li:hover { background: #e62118; color: #fff; }
.close { display: block; background: #f5f5f5 url(../icone/ic_action_next_item.png) center center no-repeat; height: 34px; width: 34px; position: absolute; top: 0; left: -35px; }
.close i {
    font-size: 36px;                    /* taille de l'icône */
    color: #000;                        /* icône noire */
    line-height: 1;
}

/*==================================*/
/* DIVERS              */
/*==================================*/
/* Styles pour les select */
.liste {
    border-radius: 8px;
    padding: 5px 10px;
    margin: 3px;
    max-width: 320px;
    background: #4d90fe;
    color: #fff;
    border: 0px;
}

/* Style pseudo */
.pseudo {
    display:block;
    max-width:110px;
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:center;
}


#conteneur { width: 170px; }
#compteur { text-align: left; width: 80px; margin: 1px auto 0; font: 9px Arial; }
.mauvais { color: #c00; }
.erreur { color: #36F; }
.petit { font-size: x-small; }
.profile { margin: 0 auto; width: 33px; height: 33px; border-radius: 50%; background: #47a3da; }
hr { height: 1px; border: 0; color: #ccc; background-color: #ccc; }
div#side { width: 300px; height: 250px; position: absolute; bottom: 3px; right: 3px; }

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.material-icons.md-60 { font-size: 60px; }
.material-icons.md-90 { font-size: 90px; }

/*==================================*/
/* EFFETS              */
/*==================================*/

.surbrillance {
    background: #fff;
    animation: anim 2s linear forwards 0s;
}

@keyframes anim {
    0% { background: #4d90fe; }
    100% { background: #fff; }
}

/*==================================*/
/* MEDIA QUERIES DESKTOP      */
/*==================================*/

/* Tablette et ordinateurs */
@media only screen and (min-width: 1024px) {
    body {
        overflow-x: hidden;
        overflow-y: auto;
        font-family: 'Quicksand', sans-serif;
        font-weight: 300;
        background-color: #fff;
        margin: 0;
    }

    .pubmobile { position: fixed; bottom: 0; right: 0; }
    .titre, .titre_gris, .titre_banc {
        font-family: 'Quicksand', sans-serif;
        font-size: 23px;
        margin-left: 10px;
        font-weight: 400;
        padding: 8px;
    }

    .titre { color: #666; }
    .titre_gris { color: #666; }
    .titre_banc { color: #fff; }
}

/* Grands écrans d'ordinateur */
@media only screen and (min-width: 1266px) {
    .form, select.form {
        width: 350px;
        padding: 6px;
        margin: 3px;
        font-size: 15px;
    }

    .form_rouge, select.form_rouge {
        width: 350px;
        padding: 6px;
        margin: 3px;
        font-size: 15px;
    }


    /* Styles de texte */
    .texte_mini { font-size: 14px; color: #333; }
    .texte_market { font-size: 16px; padding-left: 5px; }
    .texte_rose { font-size: 26px; }

    /* Styles de menu */
    .menu_btn { display: none; height: 37px; width: 37px; }
    #menu { background: #23232c; left: 0; width: 210px; color: #d1d1d7; }
    #menu ul { color: #91919a; }
    #menu ul li { height: 28px; padding-left: 17px; line-height: 26px; border-bottom: 1px solid #32323d; background-color: #23232c; }
    #menu ul li a { color: #91919a; font-size: 15px; }
    #menu ul li:hover, #menu ul li ul li:hover { background: #191922; color: #fff; }
    #menu ul ul { display: none; position: absolute; left: 210px; width: 180px; top: 0px; margin: 0px; padding: 0px; }
    .pubmobile { position: fixed; top: 75px; right: 0; }
}

/* PUB */
.pub_google, .pub_google2, .pub_google_carre {
    display: none;
}
.chat-input-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: #fff;
    max-width: 700px;      /* largeur maxi */
    margin: 0 auto;        /* centre horizontalement */
    width: 100%;           /* prend toute la largeur dispo jusqu'à 600px */
    box-sizing: border-box; /* évite les débordements avec le padding */
}

.chat-input-container img {
    border-radius: 50%;
    width: 45px;
    height: 45px;
    object-fit: cover;
}
.chat-input-container textarea {
    flex: 1;
    resize: none;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 10px;
    font-family: 'Quicksand', sans-serif;
}
.chat-input-container button {
    background: #4d90fe;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
}
.chat-input-container button:hover { background: #357ae8; }

#loading_send { display: none; margin-left: 10px; }
.material-icons.sync { animation: spin 1s linear infinite; }
@keyframes spin { 0%{transform:rotate(0deg);}100%{transform:rotate(360deg);} }