/* --------------------------------------------
 * Forms
 ------------------------------------------- */
fieldset {
    border:none;
}

legend {
    padding: 0 10px 10px 0;
    color: #ed1b23;
}

legend.level-1 {
    padding-right:0;
}

label { cursor: pointer; }

input,
select,
textarea {
    width:100%;
    padding: 9px 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border:none;
    background-color: #edeeee;
    cursor: pointer;
}

input[type=radio],
input[type=checkbox] {
    width:10px;
}

input[type=submit] {
    text-transform: uppercase;
    font-family: Staatliches, poppins, arial,sans-serif;
    color: #fff;
    background: #ed1b23;
    box-shadow: 7px 7px 0 0 #cecfd1;
}

input[type='submit'],
input[type='text'],
textarea {
    /* for Safari */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input.btn {
    padding: 28px;
    font-size: 2.143em;
}

.civ_pp .civ_pm_only,
.civ_pm .civ_pp_only {
    display: none;
}

/* chps obligatoire */
.champs-oblig {
    margin: 8px 0 27px;
    font-size: 0.857em;
}

.ch-obl {
    color: #ac3124;
    padding-left: 3px;
}

/* Erreurs */
.texte-erreur {
    color:#D20206;
    font-weight: bold;
    font-size: 1.1em;
    margin-top:20px;
}

.erreur label {
    color: #D20206;
}

.erreur input, .erreur select {
    border-color: #D20206;
}

/*---------- = Give ----------*/
#give {
    margin: 0 -19px 30px;
    background: #edeeee;
    text-transform: uppercase;
    font-family: Staatliches, poppins, arial,sans-serif;
    font-size: 1.714em;
    text-align: center;
}

#give ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

#give li {
    width: calc((100% - 5px) / 2);
}

#give label {
    display: block;
    padding: 4px 10px;
    background-color: #c6c6c6;
    border: solid 4px #c6c6c6;
}

#give .selected label {
    position: relative;
    height: 100%;

    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;

    background-color: #940500;
    border-color: #780501;
    color: #fff;
}

#give .selected label::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -13px;
    margin: auto;

    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 8px 0 8px;
    border-color: #780501 transparent transparent
}

/*---------- = Mes coordonnes ----------*/
/*-- structure --*/
.fieldset.gauche,
fieldset.droite {
    width: 47.55%;
}

.fieldset.gauche {
    float: left;
    position:relative;
    padding-right:15px;
}

fieldset.droite {
    padding-left:15px;
}

/*-- generique --*/
#coordonnees h3 { color: #ed1b23; }

.label-input {
    margin-bottom:15px;
}

#coordonnees .label,
#coordonnees label {
    display:block;
    font-family: Staatliches, poppins, arial,sans-serif;
    font-size: 1.286em;
}

#coordonnees .radio-label,
#coordonnees label span {
    font-family: poppins, arial,sans-serif;
    display:inline;
    text-transform:none;
}

#coordonnees .radio-label {
    display: inline-block;
    margin: 7px 10px 5px 0;
    font-size: 1em;
}

.input-civilite {
    display: flex;
}

.last [type="radio"]:checked,
.last [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

.input-civilite div [type="radio"]:checked,
.input-civilite div [type="radio"]:not(:checked) {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.last [type="radio"]:checked + label,
.last [type="radio"]:not(:checked) + label,
.input-civilite div [type="radio"]:checked + label,
.input-civilite div [type="radio"]:not(:checked) + label {
    position: relative;
    padding-left: 20px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}

.last [type="radio"]:checked + label:before,
.last [type="radio"]:not(:checked) + label:before,
.input-civilite div [type="radio"]:checked + label:before,
.input-civilite div [type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 14px;
    height: 14px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}

.last [type="radio"]:checked + label:after,
.last [type="radio"]:not(:checked) + label:after,
.input-civilite div [type="radio"]:checked + label:after,
.input-civilite div [type="radio"]:not(:checked) + label:after {
    content: '';
    width: 10px;
    height: 10px;
    background: #000;
    position: absolute;
    top: 3px;
    left: 3px;
    border-radius: 100%;
}

.last [type="radio"]:not(:checked) + label:after,
.input-civilite div [type="radio"]:not(:checked) + label:after  {
    opacity: 0;
}

.last [type="radio"]:checked + label:after,
.input-civilite div [type="radio"]:checked + label:after {
    opacity: 1;
}

#coordonnees label span {
    font-size: 0.667em;
}

/*-- validation --*/
div.valid::after {
    content: "\2713";
    color: #24af24;
    position: absolute;
}

input.valid {
    border: solid 1px #24af24;
}

input.error {
    border: solid 1px #ed1c24;
}

.validation-error {
    color: #ed1c24;
}

/*-- infos perso + recu --*/
.champ-civilite {
    margin-top:10px;
}

.recu-fiscal {
    margin-top:20px;
}

/*-- adresse --*/
.voie {
    padding: 8px;
    border: solid 2px #edeeee;
    margin-bottom:10px;
}

.voie .label-input-voie { margin-bottom: 10px; }
.voie .label-input-ldbp { margin-bottom: 0; }

#coordonnees .label-input-chez span {
    display:block;
    margin-bottom: 5px;
}

#suggestions-villes {
    display: none;
}

/*---------- = newsletter ----------*/
.newsletter {
    position: relative;
    background: #edeeee;
    padding: 20px 100px 20px 95px;
}

.newsletter::after,
.newsletter label::after {
    position: absolute;
    font-family: icomoon;
    speak: none;
    line-height: 1;
 }

.newsletter::after {
    content: '\e907';
    right: 20px;
    top: 20px;
    font-size: 5em;
}

.newsletter label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 1.143em;
}

.newsletter label::before {
    content:'';
    position: absolute;
    top: 30px;
    left: 30px;
    display: block;
    height: 47px;
    width: 47px;
    background: #fff;
}

.newsletter .checkbox:checked + label::after {
    content: '\e909';
    left: 35px;
    top: 15px;
    color: #900400;
    font-size: 3.7em;
}

.unsubscribe {
    font-size: 0.857em;
}

/*---------- = Paiement ----------*/
input.cheque {
    width: auto;
    padding: 4px 0 0 12px;
    margin-top: 20px;
    font-size: 1.286em;
    color: #5c6066;

    background: url('../../don_img/charte/form_don2014/arrow.png') no-repeat left center #fff;
    box-shadow: none;
}

/*---------- = Contact (popin) ----------*/
.contact {
    max-width: calc(100% - 40px);
    background-color: #fff;
    padding:10px 20px 50px 20px;
    position: relative;
}
.contact form {
    overflow: hidden;
}

.contact textarea {
    display: block;
    width: 100%;
}

.contact input[type=submit] {
    width: calc(100% - 7px);
    margin-bottom: 7px;
}

.contact .close-box {
    position: absolute;
    right:10px;
    bottom:10px;
}

/*---------- = Après formulaire (vers ogone, merci, annulation) ----------*/
.apres-formulaire form {
    display:inline-block;
    margin-left:-4px;
}

.apres-formulaire form input.image {
    width:100px;
}

.apres-formulaire.mensuel form input.image {
    width:auto;
    margin:0;
}

.apres-formulaire form.modifier input.modifier,
.apres-formulaire.merci .modifier,
.retourAccueil,
.police-print {
    width: auto;
    padding-left:12px;
    margin-top:35px;
    border:none;
    box-shadow: none;
    background:url('../../don_img/charte/form_don2014/arrow-prev.png') no-repeat center left;
    color: #5c6066;
}

.police-print {
    background-image:url('../../don_img/charte/form_don2014/arrow.png')
}

.coordonnees-postales,
.coordonnees-electroniques{
    display:inline-block;
    width:49%;
    vertical-align:top;
}

/* --------------------------------------------
 * Version mobile
 ------------------------------------------- */
@media screen and (max-width: 767px) {
    #give {
        margin-left: -10px;
        margin-right: -10px;
    }

    #give ul {
        height: 74px;
    }

    #give label {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 58px;
    }

    /* mes coordonnées */
    .fieldset.gauche,
    fieldset.droite {
        width:100%;
    }

    fieldset.droite {
        padding-left:0;
    }

    .recu-fiscal {
        bottom:20px;
    }
}

@media screen and (max-width: 560px) {
    .newsletter { padding-right: 20px;}

    .newsletter::after { display: none; }

    .newsletter label::before {
        left: 20px;
    }

    .newsletter .checkbox:checked + label::after {
        left: 25px;
    }
}