@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@400;600;800&family=Tilt+Neon&display=swap');

@counter-style paw {
    system: cyclic;
    symbols: 🐶 🐱 🐰 🐹 🐭 🐤 🦝 🦊 🐷;
    suffix: " ";
}
  
* {
    border : 0;
    margin : 0;
}

body {
    background-image: url('./images/background.png');
    background-size: cover;
    font-family: 'Dosis', sans-serif;
    font-size : 1vh;
}

@media (orientation: portrait) {
    body {
        font-size : 1.2vw;
    }
}

/**** TOPBAR ****/

#top-bar{
    height : 11vh;
}

/**** MENU ****/ 

#menu {
    z-index: 11;
}

#menu-title {
    position: absolute;
    top : 0.2vh;
    left : 4vw;
    font-size : 5em;
    cursor: pointer;
    font-weight: 600;

    color : #785A9D;
}

#menu-bar {
    width: 2.5vw;
    height: 4vh;
    margin: 2vh 0 1vh 1vw;
    cursor: pointer;
}

.bar {
    height: 0.8vh;
    width: 100%;
    background-color: #785A9D;
    display: block;
    border-radius: 0.4vh;
    transition: 0.3s ease;
}

#bar1 {
    transform: translateY(-0.5vh);
}

#bar3 {
    transform: translateY(0.5vh);
}

.nav {
    transition: 0.3s ease;
    display: none;
}

.nav ul {
    padding: 0 1.1vw;
}

.nav li {
    list-style: none;
    padding: 0.6vw 0;
}

.nav li a {
    color: white;
    font-size: 2.5em;
    text-decoration: none;
}

.nav li a:hover {
    font-weight: bold;
}

.menu-bg, #menu {
    top: 0;
    left: 0;
    position: absolute;
}

.menu-bg {
    z-index: 10;
    width: 0;
    height: 0;
    margin: 1.5vw 0 1vw 1vw;
    background: radial-gradient(circle, #835AA1, #785A9D);
    border-radius: 50%;
    transition: 0.3s ease;
}

.change {
    display: block;
}

.change .bar {
    background-color: white;
}

.change #bar1 {
    transform: translateY(0.8vh) rotateZ(-45deg);
}

.change #bar2 {
    opacity: 0;
}

.change #bar3 {
    transform: translateY(-0.8vh) rotateZ(45deg);
}

.change-bg {
    width: 40vw;
    height: 75vh;
    transform: translate(-60%,-30%);
}


@media (orientation: portrait) {

    #menu-title {
        top : 0.5vh;
        left : 9vw;
        margin-left : 1vw;
        font-size : 4vh;
    }

    #menu-bar {
        width: 7vw;
        height: 4vh;
        margin: 1.5vh 0 1vh 1vh;
    }

    .bar {
        height: 0.8vh;
        border-radius: 0.4vh;
    }

    #bar1 {
        transform: translateY(-0.5vh);
    }
    
    #bar3 {
        transform: translateY(0.5vh);
    }

    .nav li {
        padding: 0.6vh 0;
    }

    .nav li a {
        font-size: 4em;
    }

    .menu-bg {
        margin: 1.5vh 0 1vh 1vh;
    }

    .change #bar1 {
        transform: translateY(0.8vh) rotateZ(-45deg);
    }
    
    .change #bar3 {
        transform: translateY(-0.8vh) rotateZ(45deg);
    }
    
    .change-bg {
        width: 120%;
        height: 70%;
    }
}

/**** TITLE ****/

#page-title {
    z-index : 9;
    font-weight: 800;
    position : absolute;
    top : 5vh;
    left : 10vw;
}

#page-title span {
    color : #FF8B1B;
    text-align: center;
    font-size: 8em;
}

#site-title {
    position : fixed;
    right : 0;
    top : 0;

    background-image : url('./images/logo.png');
    background-size: contain;
    background-position: top right;
    background-repeat: no-repeat;

    min-height : 40vh;
    max-height : 40vh;
    width : 40vw;
}

#site-title span {
    margin-right : 1vw;
    width : 90%;
    
    font-size : 9em;
    color: white;
}

@media (orientation: portrait) {

    #page-title {
        top : 5vh;
        left : 20vw;
    }

    #page-title span {
        background : transparent;
    }
}

/**** CONTENT ****/

#content {
    width : 100%;
    height : 89vh;

    overflow-y: auto;
}

#content-table {
    margin-top : 5vh;
    display : flex;
    height : 90%;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

#content-left {
    flex : 4;
    height : 100%;
    margin : 0 2vw;
    overflow-y: auto;

    font-size : 3em;

    background : rgba(255,255,255,0.8);

    border-radius : 1em;
}


#content-left h1 {
    margin : auto;
    text-align: center;
    background : #FFC835;
    max-width : 60%;
    border-radius : 2em;
}

#content-left h1 span {
    margin-left : 1vw;
    color : white;
}

#content-left ul, #content-left p, #content-left form {
    margin : 2vh 2vw;
}

#content-left p {
    font-style: italic;
}

#content-left ul li {
    margin-top : 1.5vh;
    list-style-type : paw;
    padding-left: 1vw;
    margin-left : 1vw;
}

#content-left ul li span {
    font-weight : 600;
}

#content-left ul ul li {
    list-style-type: disc;
}

#emailForm {
    display: grid; 
    grid-template-columns: 1fr 3fr; 
    grid-template-rows: 1fr 1fr 1fr 4fr 1fr; 
    grid-row-gap: 1vh;
    grid-template-areas: 
      "name nom"
      "mail email"
      "object objet"
      "message content"
      "submit submit"; 
}

#emailForm input, #emailForm textarea {
    font-size : 1em;
    width : 100%;
    height : 100%;
    background : transparent;
    padding : 0 2vw;
}

#emailForm textarea {
    height : 90%;
    width : 90%;
    font-size : 0.5em;
    padding : 0 2vw;
    margin : 2vh 0;
}

#emailForm .submit input {
    font-weight : 800;
    font-size: 1.5em;
    color : #fff;
    background-color: #FFC835;
    cursor : pointer;
}

#emailForm .submit input:hover {
    background-color: #FF8B1B;
    color : white;
    cursor : pointer;
}

.name { grid-area: name; background-color :rgba(120, 90, 157, 0.7); border-right : 2px solid black; }
.nom { grid-area: nom; background-color :rgba(120, 90, 157, 0.3); }
.mail { grid-area: mail; background-color : rgba(255, 139, 27, 0.7); border-right : 2px solid black; }
.email { grid-area: email; background-color : rgba(255, 139, 27, 0.3); }
.object { grid-area: object; background-color : rgba(255, 200, 53, 0.7); border-right : 2px solid black; }
.objet { grid-area: objet; background-color : rgba(255, 200, 53, 0.3); }
.message { grid-area: message; background-color : rgba(255, 255, 255, 1); border-right : 2px solid black;}
.content { grid-area: content; background-color : rgba(255, 255, 255, 0.6); }
.submit { grid-area: submit; border : 2px solid black; border-radius : 2em; overflow: hidden; }

#content-right {
    flex : 2;
    height : 85%;
    align-self: flex-end;

    font-size : 3em;

    margin : 0 2vw 0 0;

    font-size : 3em;

    overflow : hidden;

    display : flex;
    flex-direction: column;
    justify-content: space-between;
}


#content-right h1 {
    margin : auto;
    text-align: center;
    background : #785A9D;
    width : 80%;
    border-radius : 2em;
}

#content-right h1 span {
    margin-left : 1vw;
    color : white;
}

#map, #photos, #tarifs {
    height : 85%;
    border-radius : 1em;
    overflow: hidden;
}

#photos {
    height : 100%;
    width : 100%;
    margin-top : 2vh;

    display : grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap : 1vh;

    overflow-y: auto;
}

.photo {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    height : 100%;
    width : 100%;

    min-height : 19vh;

    cursor : pointer;
}

#tarifs {  
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "Garde Chiens"
      "Garde NAC"
      "Visite Base"
      "Promenade demi-heure"
      "Promenade heure"
      "Accompagnement devis";

      overflow-y: auto;
      background : rgba(255,255,255,0.8);
}

#tarifs * {
    padding : 0.4em 0;
    border : 1px solid black;
    text-align: center;
}
  
.garde { grid-area: Garde; border-radius: 1em 0 0 0; }
.chiens { grid-area: Chiens; border-radius : 0 1em 0 0; }
.nac { grid-area: NAC; }
.base { grid-area: Base; }
.visite { grid-area: Visite; }
.promenade { grid-area: Promenade; }
.accompagnement { grid-area: Accompagnement; border-radius: 0 0 0 1em; }
.demi-heure { grid-area: demi-heure; }
.heure { grid-area: heure; }
.devis { grid-area: devis; border-radius: 0 0 1em 0; }

#contact {
    height : 100%;
    width :100%;
    display : flex;
    flex-direction: column;
    align-items: center;
    justify-content: stretch;

    overflow-y: auto;
}

#contact a {
    width : 80%;
    background-color : white;

    background-size: auto 60%;
    background-repeat: no-repeat;
    background-position: 1vw center;

    text-align: center;

    padding : 2vh;
    margin-top : 2vh;

    border : 2px solid black;
    border-radius: 1em;

    text-decoration: none;
    color : black;

    font-weight: 600;
}

#contact a:hover {
    background-color : #FFC835;
}

#contactmail {
    background-image: url('./images/mail.png');
}

#contactphone {
    background-image: url('./images/phone.png');
}

#contactmaps {
    background-image: url('./images/pin.png');
}

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
}

#overlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ov {
    width : 90%;
    height : 90%;

    text-align: center;

    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.ov h1 {
    text-align: center;
    margin : 1vw;
    padding : 1vw;

    background-color : #785A9D;
    border-radius: 1em;

    font-size: 5em;
    color : white;
}

@media (orientation : portrait) {
    #content-table {
        flex-direction: column;
    }

    #content-left {
        flex : 3;
        width : 90%;
        margin : 2vh 0;
    }

    #content-right {
        align-self: center;
        width : 90%;
        margin : 0 0 2vh 0;
    }

    #photos {
        grid-gap : 1vw;
        grid-template-columns: repeat(3,1fr);
    }

    .photo {
        min-height : 10vh;
    }
}