@media (max-width: 1300px) {

    #galerie {
        columns: 2;
    }
}

@media (max-width: 1000px) {

    .centre {
        width: 100%;
        padding: 0 15px !important;
    }

    #barre {
        padding-left: 15px;
    }

    #article h1 {
        font-size: 4em;
    }

    #article h1::after {
        transform: scale(.8);
    }

    #article {
        display: block;
    }

    #texte,
    #presta {
        padding: 40px 15px;
    }

    #mention a {
        display: block;
        text-align: left;
    }
}

@media (min-width: 1001px) {

    #principal {
        display: flex !important;
    }

    #burger {
        display: none;
    }
}

@media (max-width: 1000px) {

    #burger {
        cursor: pointer;
        padding: 0 15px;
        height: 80px;
        background: none;
        border: 0;
        -webkit-appearance: none;
    }

    #burger span {
        display: block;
        background: var(--jaune);
        height: 4px;
        width: 40px;
        margin: 8px 0;
        transition: transform .3s, width .3s;
    }

    #burger span:first-child {
        transform-origin: 4px 5px;
        margin-top: 0;
    }

    #burger span:last-child {
        transform-origin: 4px 0;
        margin-bottom: 0;
    }

    .croix span:first-child {
        transform: rotate(45deg) scaleX(1.0);

    }

    .croix span:nth-child(2) {
        transform: scaleX(0);
    }

    .croix span:last-child {
        transform: rotate(-45deg) scaleX(1.0);

    }

    #principal {
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        right: 0;
        background: var(--jaunec);
        box-shadow: 0 5px 5px rgba(0,0,0,.1);
    }

    #principal li a,
    #principal li button {
        color: var(--cyan5) !important;
    }

    .sorti button::after {
        display: none;
    }

    #principal ul {
        position: static;
        box-shadow: inset 0 5px 5px rgba(0,0,0,.1);
    }

    .fixe #principal {
        top: 40px;
    }
}

@media (max-width: 900px) {

    #principal ul {
        grid-template-columns: repeat(2, 1fr);
    }

    .real {
        width: 50%;
        height: 50%;
    }

    .pave {
        padding: 10px 20px 25px;
    }

    .icone {
        width: 100%;
    }

    .pave .titre {
        font-size: 1.4em;
    }

    .reali {
        font-size: 2.5em;
    }

    .reali h3 {
        font-size: .35em;
    }

    #tarif-web {
        border-right: 5px solid;
    }
}

@media (max-width: 760px) {

    #formulaire .col {
        width: 100%;
        margin: 10px 0;
    }
}

@media (max-width: 600px) {

    .chapeau {
        font-size: 1.2em;
    }

    #texte {
        text-align: left;
    }

    #appel {
        font-size: .9em;
        padding: 10px 0;
    }

    #appel:hover {
        font-size: 1em;
    }

    #galerie {
        columns: 1;
    }

    #galerie img {
        margin-bottom: 0px;
    }
}

@media (max-width: 480px) {

    #principal ul {
        grid-template-columns: repeat(1, 1fr);
    }

    .fixe {
        position: absolute !important;
    }

    #appel:before {
        content: '';
    }
}

@media (max-width: 430px) {

    #contact h2,
    #visite h2 {
        font-size: 1.8em;
    }

    #article h2 {
        font-size: 1.5em;
    }

    #article {
        text-align: left;
    }

    .box {
        padding: 15px;
    }

    #email {
        font-size: 2em;
    }

    #article h1 {
        font-size: 3em;
    }

    #article h1::after {
        transform: scale(.6);
    }
}

@media (max-height: 720px) {

    .fixe {
        position: absolute !important;
    }
}

@media only print {

}