@import url('https://fonts.googleapis.com/css2?family=Simonetta:ital,wght@0,400;0,900;1,400;1,900&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=National+Park:wght@200..800&family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
/* Header --------------------------------------------------------- */
header {
    background-color: #87ceeb;
    padding: 2px;
}


.navbar {
    font-family: "Spectral", serif;
    font-style: italic;
}


.logo img {
    height: 100px;
    margin-left: 5px;
}


.navbar-nav {
    margin: 0;
    padding: 0;
}


.navbar-nav li {
    padding: 0 50px;
}

.navbar-nav li:not(:first-child) {
    border-left: 2px dashed #ffffff;
    height: 2.5em;
}

/* Liens header --------------------------------------------------------- */
a.nav-link {
    position: relative;
    text-decoration: none;
    color: #333;
    transition: color 0.2s ease;
    display: inline-block;
    padding-bottom: 10px;
    padding-top: 10px;
}

a.nav-link:hover {
    color: #fd7324;
}

a.nav-link::after {
    content: "";
    position: absolute;
    bottom: -0px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fd7324;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

a.nav-link:hover::after {
    transform: scaleX(1);
}

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

.navbar-toggler {
    border: none;
    outline: none;
    box-shadow: none;
}

.nav-item .nav-link.active {
    color: white;
}

/* contenu --------------------------------------------------------- */
p {
    color : #333;
    font-family: "Spectral", serif;
    font-style: italic;
    text-decoration: none;
    font-size: 1.25em;
}

p.intro {
    text-align: center;
}

p.grand {
    font-size: 2em;
}

.center {
    text-align: center;
}

.titre {
    font-family: "Spectral", serif;
    font-style: italic;
    color: #fd7324;
    font-size: 3em;
}

h1.titre {
    color: #333;
    text-align: center;
}

.titre.gros {
    font-size: 5em;
    line-height: 0.9;
    margin-bottom: 15px;
}

.titre.moyen {
    font-size: 4em;
    line-height: 0.9;
    margin-bottom: 15px;
}

.soustitre {
    font-family: "National Park", sans-serif;
    font-style: normal;
    font-weight: 200;
}

hr {
    border: none;
    border-top: 2px dashed #000;
    margin: 100px 0;
}

hr.debut {
    margin-top: 20px;
    margin-bottom: 100px;
}

.petit {
    height: 50%;
}

.affiche-main {
    object-fit: cover;
    height: 100%;
}

.affiche-half {
    height: 48%;
    object-fit: cover;
}

.video {
    margin: 0 auto;
    display: block;

}

.jellyfish {
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 15px;
}

/* accueil --------------------------------------------------------- */

img.acc {
    width: 250px;
}

.couleur {
    width: 175px;
    height: 175px;
    border-radius: 20px;

}

.couleur:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.orange {
    background-color: #fd9051;
}

.bleu {
    background-color: #87ceeb;
}

.vert {
    background-color: #56e39f;
}

.violet {
    background-color: #ab92bf;
}

img.couleur {
    max-width: 80%;
    max-height: 80%;
    padding: 10px;
}

.couleur p {
    text-decoration: none;
    text-align: center;

}

.bold {
    font-weight: 400;
}

.accimg {
text-decoration: none;
}


/* footer --------------------------------------------------------- */

footer {
    background-color: #87ceeb;
    padding: 20px;
}



footer a {
    color: white;
    font-family: "Spectral", serif;
    font-style: italic;
    text-decoration: none;
    transition: color 0.3s;
}

footer p.bot {
    text-align: center;
    font-size: 1em;
}

footer a:hover {
    color: #fd7324;
}

footer p {
    margin: 0;
    font-size: 2em;
}

.foot {
    border-right: 1px solid #000;
}

footer h2{
    font-family: "National Park", sans-serif;
    font-size: small ;
    color: #ffffff;
    margin-bottom: 0;
    margin-top: 5px;
}

#mbot {
    margin-bottom: 20px;
}

.social {
    margin-right: 10px;
    margin-top: 15px;
}


/* flickity --------------------------------------------------------- */

.flickity-prev-next-button {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    transition: background 0.3s ease;
}

.flickity-prev-next-button:hover {
    background: rgba(255, 255, 255, 0.9);
}

.flickity-prev-next-button .flickity-button-icon {
    fill: #333;
}

.main-carousel, .main-carouselb, .main-carouselc, .main-carouseld,  .main-carousele{
    width: 100%;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    position: relative;
}

.carousel-cell {
    height: 450px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    margin: 0 10px;
}

.petite-bete .carousel-cell {
    width: 100%;
}

.vacances .carousel-cell {
    width: 100%;
}

.animaux .carousel-cell {
    width: 100%;
}

.petite-bete .carousel-cell img {

}


.carousel-cell img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {
    .carousel-cell img {
        max-width: 100%;
        height: auto;
    }
}

#zoom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

#zoom-overlay img {
    max-width: 90%;
    max-height: 90%;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.zoomable {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.zoomable:hover {
    transform: scale(1.02);
}