@media (min-width: 800px) {
    #apropoz{
        margin-left: 20px;
    }
}

/*A Propos*/
/*A Propos*/
/*A Propos*/
#apropos, #inscription, #merch, #credits {
    min-height: calc(100vh - 10 * var(--line-height)); 
    padding-top: calc(5*var(--line-height));
    padding-left: 20px;
}

#inscription, #merch, #credits{
    padding-bottom: calc(1.7*var(--line-height));
}

@media (min-width: 1600px) {
    #apropos, #inscription, #credits {
        width: calc(100%/3 - 27px);
    }
    #merch{
        width: calc(100% - 20px);
    }
}

@media (min-width: 1100px) and (max-width: 1600px) {
    #apropos, #inscription, #credits  {
        width: 40%;
    }
}

@media (min-width: 900px) and (max-width: 1100px) {
    #apropos, #inscription, #credits {
        width: 60%;
    }
}

@media (min-width: 700px) and (max-width: 900px) {
    #apropos, #inscription, #credits {
        width: 70%;
    }
}

@media (max-width: 700px) {
    #apropos, #inscription, #credits {
        width: calc(100% - 40px);
    }
}

h1, h2, h3{
    font-size: var(--corps);
    font-weight: normal;
    margin-bottom: 0px;
    margin-top: 0px;
}

h1 a, h2 a, span{
    color: var(--txt-black);
    text-decoration: none; 
    cursor: pointer;
}

a.gris {
    margin-top: 1px;
    display: block;
    color: var(--gris-middle);
}

span.ligne{
    display: block;
    border-bottom: .3px solid var(--txt-black);
    margin-top: calc(1.5*var(--line-height));
    margin-bottom: calc(1.5*var(--line-height));
}

#apropos img {
    width: 100%;
    margin-bottom: calc(2*var(--line-height));
    margin-top: calc(1*var(--line-height));
    margin-left: 0;
    vertical-align: middle;
    /*border-radius: 10px;*/
}

/*.arrondi{
    border-radius: 8px;
}*/

#apropoz h1 a img:last-child{
    margin-bottom: 0 !important;
}

/*.placeholder{
    padding-top: calc(35.7% - var(--line-height));
    padding-bottom: calc(35.7% - var(--line-height));
    text-align: center;
    margin-bottom: calc(2*var(--line-height));
    margin-top: calc(1*var(--line-height));
    background-size: cover;
    background-repeat: no-repeat;
    color: transparent;
}

.placeholder a{
    width: 100%;
    color: transparent;
}*/


/*inscription*/
/*inscription*/
/*inscription*/
#inscription, #merch, #credits{
    display: none;
}

form{
    width: 100%;
}

.blocform p, #checkbox_p{
    display: none;
    color: var(--couleur);
    margin: 0px;
}

input[type=text], input[type=email], input[type=url], textarea{
    border: none;
    padding: 0px; 
    display: block;
    width: 100%;
    font-size: var(--corps);
    color: var(--gris-middle);
}

input[type=text], input[type=email], input[type=url]{

}

input{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: inherit;
}

.blocform label{
    font-size: var(--corps);
    display: block;
    cursor: text;
}

::-webkit-input-placeholder {
    color: var(--gris-middle);
    opacity: 1;
}
::-moz-placeholder {
    color: var(--gris-middle);
    opacity: 1;
}
:-ms-input-placeholder {
    color: var(--gris-middle);
    opacity: 1;
    vertical-align: top;
}
:-moz-placeholder {
    color: var(--gris-middle);
    opacity: 1;
}

/* Set default style for invalid elements. */
:not(output):-moz-ui-invalid {
  box-shadow: none;
}

:not(output):-moz-ui-invalid:-moz-focusring {
  box-shadow: none;
}

input:focus {
    outline: none !important;
}

/*Cacher spin bouton numbers*/
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*Cacher spin bouton numbers*/
input[type=number] {
    -moz-appearance:textfield;
}

/*Checkbox*/
.checkbox-wrapper{
    display: inline-block;
    font-size: var(--corps);
    margin-right: var(--line-height);
    cursor: pointer;
    color: var(--gris-middle);
}

input[type=checkbox] {
    position: absolute;
    display: inline-block;
    opacity: 0;
    height: 0px;
    width: 0px;
    -webkit-appearance: none;
}

input[type=checkbox]:checked + label {
    color: var(--txt-black);
}

.checkbox-label{
    display: block;
    cursor: pointer;
    /*text-transform: uppercase;*/
}

#checkbox_p{
    display: none;
}

/*Remarque*/
#remarques textarea{
    resize: none;
    font-family: inherit;
    outline:0px !important;
    -webkit-appearance:none;
    box-shadow: none !important;
    font-size: var(--corps);
    height: calc(3*var(--line-height));
    overflow-y: scroll;
}

/*Submit*/
.submit-form{
    /*font-size: inherit;*/
    display: block;
    cursor: pointer;
}

/*Succès*/
#inscrit{
    display: none;
    color: var(--couleur);
}

.copied{
    padding-top: 15px;
    display: block;
}



/*merch*/
/*merch*/
/*merch*/
#blocsmerchandise{
    display: block;
    font-size: 0;
}

#blocsmerchandise a{
    color: var(--gris-middle);
}

.eachmerch{
    display: inline-block;
    vertical-align: top;
    width: calc(100%/3 - 20px);
    margin-top: 20px;
    margin-right: 20px;
    margin-left: 0px;
    font-size: var(--corps);
}

@media (min-width: 700px) and (max-width: 1400px) {
    .eachmerch{
        width: calc(100%/2 - 20px);
    }
}

@media (max-width: 700px) {
    .eachmerch{
        width: calc(100% - 20px);
    }
}

.imgmerch {
    width: 100%;
    margin: 0; 
    vertical-align: middle;
    margin-bottom: 3px;
}