* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}

a {
    text-decoration: none;
}

a:hover {
    color: inherit;
    /* ou spécifie la couleur que tu veux lors du survol si tu veux la conserver */
}

.form-horizontal {
    margin-left: 15px;
}

#header {
    position: absolute;
    top: 0;
    width: 100%;
    height: auto;
    padding-left: 25px;
    background-color: #fff;
}

.row {
    margin: 0;
}

#top {
    text-align: center;
}

.logo {
    text-align: left;
    margin-left: 15px;
    height: 62px;
}

#menu {
    text-align: right;
    margin-top: 43px;
}

.head,
#menu {
    font-size: 16px;
    color: #000;
    vertical-align: middle;
    font-weight: bold;
}

#beige {
    margin-top: 82px;
    background-color: #e2dac7;
}

#blanc {
    margin-top: 10px;
}

.accroche {
    padding-top: 10px;
}

.col-sm-12.img {
    padding-top: 10px;
    padding-bottom: 15px;
}

.picture {
    width: 100%;
    height: auto;
    text-align: center;
}

.mob {
    width: 100%;
    height: auto;
}

h1 {
    font-size: 20px;
    text-align: center;
    padding: 0 10px;
    padding-right: 0px;
    padding-left: 0px;
    color: #fff;
}

.bando {
    font-size: 16px;
    text-align: center;
    color: #fff;
}

.middle {
    border-right: 1px solid #000;
}

.middle,
.center {
    text-align: center;
    padding-right: 0px;
    padding-left: 0px;
    height: 131px;
}

.center {
    padding-right: 15px;
}

#white {
    height: 200px;
    padding-top: 45px;
    width: 100%;
    margin-left: 30px;
}

#jaune {
    background-color: #e7a102;
    padding: 30px 0;
}

#tendance {
    padding-top: 20px;
    margin-left: 30px;
}

.bleu {
    color: #000;
    font-weight: bold;
    font-size: 20px;
}

#footer {
    text-align: center;
    font-size: 16px;
    background-color: #fff;
    padding-bottom: 20px;
}

#bottom,
#bas {
    color: #000;
}

#contact {
    font-size: 26px;
    color: #000;
    margin: 0;
}

.titre {
    margin-top: 7px;
}

.perso {
    margin-left: 30px;
    width: 19px;
}

.txttitre {
    font-size: 16px;
    color: #666;
    padding-left: 28px;
    padding-top: 5px;
    text-align: justify;
    padding-right: 15px;
}

label.code {
    width: 50%;
}

.captcha {
    clear: both;
}

.copy {
    padding-left: 30px;
}

#valid,
#info {
    background-color: #fdbe30;
    color: #fff;
    border: none;
    height: 24px;
    line-height: 14px;
}

.deconnexion {
    color: #999;
    font-size: 13px;
    margin-left: 15px;
}

.col-sm-10.taille {
    width: 50%;
}

.form-control.large {
    width: 100%;
}

.control-label.big {
    width: 40%;
}

.control-label.born {
    margin-right: 15px;
}

.form-control.day,
.col-sm-offset-2.desabo,
.form-control.large,
#copie {
    margin-left: 0px;
}

#copie {
    margin-left: 15px;
}

.pad {
    padding-right: 0px;
    padding-left: 0px;
    width: 14%;
    margin-right: 4px;
}

.date {
    padding: 2px;
}

.interets {
    padding-left: 0px;
    width: 25%;
    float: left;
}

.gauche {
    margin-right: 20px;
}

.choice {
    color: #555;
    font-weight: normal;
    margin-bottom: 0px;
}

h3 {
    Font-size: 14px;
    font-weight: bold;
    color: #000;
    margin: 0;
    padding: 10px 0 10px 28px;
}

h3.abo {
    padding-left: 26px;
    margin-top: 30px;
}

.nopad {
    margin-bottom: 5px;
}

.form-group.modif {
    margin: 20px 0 20px 10px;
}

.control-label.passe {
    width: 40%;
}

.form-control.medium {
    width: 100%;
    margin-left: 0px;
    margin-top: 0px;
}

.form-group.htrois {
    margin-bottom: 0px;
}

.left {
    float: left;
    width: 50%;
}


.col-sm-6.colle {
    width: 50%;
}
.col-sm-6.colle2 {
    width: 100%;
}

.club {
    font-size: 14px;
    color: #666;
    text-align: justify;
    margin: 10px 30px 0 26px;
}

.form-group.fond {
    background-color: #e7a102;
    margin: 15px 30px 0 26px;
    padding: 10px 0;
}

.news {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}

.choix {
    color: #fff;
}

.form-control.jour {
    margin-left: 15px;
}

#check {
    margin-left: 0%;
}

#creer {
    margin-left: 3%;
}

#modifcreer {
    margin-left: 7%;
}

#cap {
    margin-left: 80px;
    width: 80%;
}

.membre {
    padding-bottom: 10px;
}

.control-label.recopy {
    width: 100%;
}

.mention {
    font-size: 12px;
    color: #666;
    margin-left: 28px;
    margin-right: 28px;
    text-align: justify;
}

.legale {
    margin-left: 28px;
    margin-bottom: 10px;
}

.bold {
    font-weight: bold;
}

.col-sm-12.photo {
    padding-right: 0px;
    text-align: right;
    margin-top: 45px;
}

.oubli {
    color: #666;
    text-decoration: underline;
    padding-left: 200px;
}

.form-group.mot {
    margin-bottom: 0px;
}

#connexion {
    padding-left: 168px;
    padding-top: 10px;
}

#conect {
    height: 35px;
    background-color: #fdbe30;
    border: none;
    color: #fff;
    background-image: linear-gradient(#e7a102, #e76802);
}

.mail {
    margin-top: 40px;
}

.email {
    margin-left: 15px;
}

#oubli {
    margin-left: 15px;
    width: 65%;
}

.caracteres {
    color: #a9a9a9;
    margin-top: 25px;
    margin-left: 200px;
}




.container-flex {
    display: flex;
    width: 750px;
    margin: auto;
}

.container-flex>div {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    box-sizing: border-box;
    align-items: center;
    border-right: 1px solid #fff;
}

.container-flex>div:last-child {
    border-right: none;
}

.h-captcha{
    padding-left: 26px;
}


.mention-formulaire-inscription{
    text-align: justify;
    padding-left: 28px;
    padding-top: 10px;
}


@media (max-width:768px) {

    .mention-formulaire-inscription{
        padding-left: 0;
    }


    .h-captcha{
        padding-left: 0;
    }

    .col-sm-6.colle {
        width: 100%;
    }

    div#background-site{
        margin-top: 120px;
    }

    .container-flex {
        flex-direction: column;
        width: auto; /* Valeur initiale pour width */
        margin: 0; /* Valeur initiale pour margin */
    }

    .container-flex>div {
        border-right: none;
        border-bottom: 1px solid #fff;
    }

    .container-flex>div:last-child {
        border-bottom: none;
    }


    #header {
        text-align: center;
        height: auto;
        padding-left: 0px;
    }

    .logo-parent {
        text-align: center;
      }    

    .logo {
        text-align: center;
        padding-left: 0px;
        margin-left: 0px;
    }

    .head {
        width: 100%;
    }

    #menu {
        text-align: center;
        margin-top: 20px;
    }

    #beige {
        margin-top: 150px;
    }

    #blanc {
        margin-right: 15px;
    }

    #jaune {
        padding: 0px;
    }

    #white {
        margin-right: 15px;
        height: auto;
        padding-top: 0px;
    }

    .middle {
        border-right: none;
        border-bottom: 1px solid #000;
    }

    .middle,
    .center {
        margin-right: 15px;
        margin-top: 20px;
    }

    .perso {
        margin-left: 3px;
        margin-right: 15px;
        float: left;
    }

    .txttitre {
        padding-left: 0px;
        padding-right: 0px;
    }

    .form-control {
        width: 90%;
    }

    .control-label,
    .form-control.day,
    .interets,
    .middle,
    .center,
    #white,
    #blanc {
        margin-left: 15px;
    }

    .form-control.day {
        margin-bottom: 10px;
    }

    .copy {
        padding-left: 15px;
    }

    #copie,
    #cap {
        margin-top: 15px;
    }

    #check {
        padding: 0px;
    }

    #creer,
    #check,
    #modifcreer {
        text-align: center;
    }

    .left,
    .interets {
        float: none;
    }

    .left {
        width: 100%;
    }

    .interets {
        width: 100%;
    }

    h3,
    .col-sm-2.num,
    .col-sm-8.num,
    #modifcreer {
        padding-left: 0px;
    }

    .control-label.big,
    #copie,
    .row,
    #cap,
    .control-label.recopy,
    #modifcreer,
    .mention,
    .legale,
    .email,
    .form-control {
        margin-left: 0px;
    }

    #tendance {
        margin-left: 15px;
    }

    .mention {
        margin-right: 0px;
    }

    .control-label.big,
    label.code {
        width: 100%;
    }

    .htrois {
        padding-bottom: 10px;
    }

    .col-sm-10.taille {
        width: 96%;
    }

    .pad {
        width: 91%;
        padding-right: 15px;
    }

    .nopad {
        margin-bottom: 15px;
    }

    .control-label.passe {
        width: 100%;
        padding-left: 0px;
    }

    .form-group.fond {
        margin: 15px 0px 0px 0px;
    }

    .form-group.modif {
        margin: 20px 20px 20px 0px;
    }

    h3.abo {
        padding-left: 0px;
    }

    .club {
        margin: 10px 0px 0px 0px;
    }

    .deconnexion {
        padding-left: 20px;
    }

    .form-group.modification {
        margin: 20px;
    }

    #cap {
        width: 96%;
    }

    .col-sm-12.photo {
        padding-right: 15px;
        text-align: center;
        margin-top: 45px;
    }

    .mob1 {
        width: 100%;
        height: auto;
    }

    .oubli {
        padding-left: 15px;
    }

    #connexion {
        padding-left: 0px;
        text-align: center;
    }

    .mail {
        margin-top: 40px;
    }

    .form-horizontal {
        margin-left: 0px;
    }

    #oubli {
        width: 90%;
    }

    .col-sm-2.num {
        margin-bottom: 5px;
    }


    .caracteres {
        margin-left: 15px;
    }


}