body {
    margin: 0 /*auto*/;
    font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
    /*max-width: 800px;*/
}

*{
    margin: 0 ;
    padding: 0;
}
/*inner*/

.inner {
    margin: 0 auto ;
    max-width: 1600px;
    width: 86%;
}

h1 {text-transform: uppercase;
    color: #462B31;
    font-size: 2.5rem;
}

h3 {
    font-weight: 500;
    color: #462B31;
}

p {
    font-weight: 100;
}


/* Animation keyframes */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes grow {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}


@keyframes transparency {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes blur-radial {
    0%, 100% {
        filter: blur(0);
        transform: translate(0);
    }
    50% {
        filter: blur(5px);
        transform: translate(5px, 5px);
    }
}


/* Style for the logo */
.logo {
    width: 45vw;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
}

/* Hover effect with animation */
a:hover .logo {
    animation: rotate 1s linear infinite, grow 0.6s ease-in-out infinite, blur 0.6s ease-in-out infinite;
}


/* Hover effect with animation */
a:hover .logo {
    animation: rotate 1s linear infinite, grow 0.6s ease-in-out infinite;
}

/* #region RESET HEADER*/

header {
    position: fixed;
    z-index: 999;
    width: 100%;
    top: 0;
}


.banner {
    background: url(../images/fond_web.webp);
    height: 112vh;
    background-size: cover;
}

.ligne::first-line {
    background: white;
    display: block;
}

.bienvenue h1 {
    font-size: 3vw;
}

.bienvenue {
    display: flex;
   padding-top: 20em;
}

.ours img{
    height: 80vh;
    width: 100%;
    object-fit: contain;
    display: block;
    object-position: center center;
}


/* Header NAV */

nav a.active {
    color: #463990;
}

nav ul {
    padding: 0;
    margin: 0;
    display: flex;
}

nav {
    background-color:white;
    padding: 5px;
    margin-top: 3em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 0;
    width: 100%;
    box-sizing: border-box;
}

span {
    text-transform: uppercase;
    font-weight: 600;
}

.fr {
    color: #462B31;
}

.en {
    color: #463990;
}


nav ul li {
    display: block;
    /*margin-top:6vw;*/
}

nav ul li a {
    text-decoration: none;
    margin-right: 3vw;
    color: black;
    font-size: 1.2vw;
}

nav a:hover {
    color: #463990
}

/* #enregion RESET HEADER */

/*button {
    border:none;
    text-decoration:underline;
    color: #462B31;
    background-color: white;
}*/

button {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color:#462B31;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
    display:inline-block;
}

button:hover {
    background-color:#463990;
}

button a {
    text-decoration: none;
    color: white;
}

/* #region MAIN */

.plus {
    display: flex;
    margin: auto;
    object-position: center;
}

.pls {
    margin-top: 12em;
}

.plus:hover {
    opacity: 50%;
}

.actu {
    display: flex;
    gap: 6rem;
}

.actu h2 {
    margin-top: 2.3em;
}

.actu h3 {
    margin-top: 1em;
}

.actu button {
    margin-top: 1.5em;
}

.actu p {
    margin-top: 1em;
}

.infh1 {
    margin-top: 2em;
}

.infos {
    margin-top: 3em;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6rem;
}

/*.trace {
    position: relative;
    z-index: 99;
    bottom: 100em;
    width: 120%;
    display: block;
}*/

.reserver {
    margin-top: 6em;
    text-align: center;
}


.animh1 {
    margin-top: 6em;
}

.reserver {
    font-size: 3em;
    text-align: center;
    position: relative;
    animation: slide 2s ease-in-out infinite alternate, blur-motion 2s linear infinite;
}

.reserver a {
    text-decoration: none;
    color:#463990;
}


@keyframes slide {
    0% {
        transform: translateX(-100px);
    }
    100% {
        transform: translateX(100px);
    }
}

@keyframes blur-motion {
    0%, 100% {
        transform: translateX(0);
        filter: blur(0);
    }
    50% {
        transform: translateX(6px);
        filter: blur(2px);
    }
}

@keyframes wave {
    0%, 100% {
        transform: skewX(0deg);
    }
    50% {
        transform: skewX(10deg);
    }
}



.reserver:hover {
opacity: 85%;
}

.animal {
display: flex;
gap: 7rem;
margin-top: 3em;
}

.animal h3 {
    margin-top: 1em;
}

.animal p {
    margin-top: 1em;
}

.animal button {
    margin-top: 1em;
}

.block {
    border: #462B31 solid;
}

.chien {
    height: 30vh;
    width: 100%;
    display: block;
    object-fit: cover;
    border-left: #463990 solid 4em;
    padding-left: 1em;
}

.carcajou {
    height: 30vh;
    width: 100%;
    object-fit: cover;
    display: block;
    border-left: #462B31 solid 4em;
    padding-left: 1em;
}
/* #endriegion MAIN */

/* #region FOOTER */

/* FOOTER ---------*/

footer {
    color: white;
    padding: 4rem 0;
    margin-top: 15em;
    background-color: #462B31;
}

footer .inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5rem;
}

.logofooter img {
    width: 30vw;
}

.social img {
width: 5.5vw;
}

.social {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: end;
    gap: 0.5em;
}

.contact a {
    color: white;
    text-decoration: none;
}

.contact {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: end;
}


.contact span {
    color: #463990;
}
/*#endregion FOOTER */

/* page info */

.infos1 {
    margin-top: 3em;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6rem;
}

.infos1 h3 {
    color:black;
}

.infh2 {
    margin-top: 4em;
    color:#462B31;
}

.infos1 a {
    text-decoration: none;
}

.infh22 {
    margin-top: 4.5em;
    color:#462B31;
}

.bouth1 {
    margin-top: 3em;
}

.boutique {
    margin-top: 3em;
    display: flex;
    justify-content: space-between;
    gap: 10rem;
}

.boutique img {
    height: 30vh;
    width: 50%;
    object-fit: cover;
}

/* page présentation */

.bienvenue1 {
    display: flex;
    padding-top: 20em;
    gap: 3em;
}

.bienvenue1 p{
    margin-top: 3.7em;
    background-color: white;
    display:block;
    padding: 5px;
}

.bl {
    margin-top: 3em;
}

.Histoire, .Concept {
    display: flex;
    justify-content: space-between;
    gap: 5em;
    margin-top: 2em;
}

.conh1 {
    margin-top: 6em;
}

.Missions {
    margin-top: 3em;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6rem;
}

.missh1 {
    margin-top: 3em;
}

.lynx {
    display: block;
    position: relative;
    left: 8vw;
    height: 40vh;
}

/* page actu */

.actu1 {
    display: flex;
    justify-content: space-between;
    gap: 7rem;
    margin-top: 3em;
}

.actu12 {
    display: flex;
    gap: 6rem;
    margin-top: 7em;
}

.actu1 h2 {
    margin-top: 2.3em;
}

.actu1 h3 {
    margin-top: 1em;
}

.actu1 p {
    margin-top: 1em;
}

.actu12 h2 {
    margin-top: 2.3em;
}

.actu12 h3 {
    margin-top: 1em;
}

.actu12 p {
    margin-top: 1em;
}

/* nos animaux */

.banner2 {
    background: url(../images/fond_web2.webp);
    height: 112vh;
    background-size: cover;
}

.canih1 {
    margin-top: 5em;
}

.animal1 {
    display: flex;
    gap: 7rem;
    margin-top: 5em;
    }

.chien1 {
        margin-top: 11em;
    }

.animal1 h3 {
        margin-top: 1em;
    }
    
.animal1 p {
        margin-top: 1em;
    }

.chien1 {
        height: 30vh;
        width: 100%;
        display: block;
        object-fit: cover;
        border-left: #463990 solid 4em;
        padding-left: 1em;
    }

/* activités */

.resto {
    margin-top: 3em;
    display: flex;
    justify-content: space-between;
    gap: 10rem;
}

.resto img {
    height: 40vh;
    width: 50%;
    object-fit: cover;

}

.visites {
    display: flex;
    justify-content: space-between;
    gap: 5em;
    margin-top: 3em;
}

.visites p {
    margin-top: 3em;
}

.visites2 {
    display: flex;
    justify-content: space-between;
    gap: 10em;
    margin-top: 3em;
}

.visites2 p {
    margin-top: 3em;
}

main {
    margin-top: 12em;
}

.bact {
    margin-top: 3em;
}

.mangeboire {
    margin-top: 3em;
}

/* rréservation */

.containeR {
    text-align: center;
    padding: 1rem;
    /*background: rgba(70, 43, 49, 0.9);*/
    margin: 1rem auto;
    /*border-radius: 10px;*/
}

.form-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
}

label {
    object-fit: cover;
    border-left:#462B31 solid 0.5em;
    display:inline;
    background: white;
    width: 100px;
    font-weight: bold;
}

input {
    padding: 0.5rem;
    width: calc(100% - 110px);
    border: none;
    border-radius: 5px;
}

input, select {
    padding: 0.5rem;
    width: calc(90% - 110px);
    border: solid ;
    border-radius: 5px;
}

select {
    background-color: #fff;
    color: #000;
}

select option {
    background-color: #fff;
    color: #000;
}

.reserbutt {    
    text-align:left;
}

.parentreserv{
display: flex;
justify-content: flex-end;
}