<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* 
 Theme Name:  Fleurs d'orangers et chats errants - Oscars Short
 Theme URI: https://www.koukaki.local
 Author: Studio Koukaki
 Author URI: https://www.koukaki.local
 Template: foce
 Description: ThÃ¨me enfant Ã&nbsp; l'occasion de la nomination aux Oscars Shorts
 Version: 0.1
 */


 body {
    max-width: 1440px; /* Ajuste selon tes besoins */
    margin: 0 auto; /* Centre la page */
}
 .secteur {
    opacity: 0; /* Invisible au dÃ©part */
    transform: translateY(20px); /* LÃ©gÃ¨re translation vers le bas */
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.site-header {
    position: static; 
    width: 100%;
    max-width: 1440px; /* MÃªme valeur que le max-width du body */
    height: 80px; 
    z-index: 1000;
}

.banner {
    position: relative;
    width: 100%;
    height: 100vh;
    max-width: 1440px; /* MÃªme valeur que le max-width du body */
    overflow: hidden;
    background-size: cover;
    background-position: center;
    perspective: 1px; /* Ajout de la perspective pour le parallaxe */
    transform-style: preserve-3d; /* Important pour le parallaxe 3D */
}

.banner &gt; div { /* Style pour le contenu de la banniÃ¨re */
    position: relative;
    z-index: 2; /* Le contenu est au-dessus de la vidÃ©o */
}

.banner video {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    max-width: 1440px; /* MÃªme valeur que le max-width du body */
    object-fit: cover;
    transform: translate(-50%, -50%) translateZ(-0.4px) scale(1.4); /* Parallaxe sur la vidÃ©o */
    z-index: 1;
}

.banner img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%; /* Pour Ã©viter le dÃ©passement de l'image */
    z-index: 2; /* Le logo est au-dessus de la vidÃ©o */
    transition: transform 0.3s ease; /* Pour une animation fluide du logo */
}

/* Effet de parallaxe sur le logo */
.banner.scrolled img {
    transform: translate(-50%, -50%) translateY(-50%); /* Le logo monte avec le scroll */
}

/* Ecrans plus petits */
@media (max-width: 699px) { /* Correction : utilisation de max-width */
    .banner video {
        display: none; /* Masquer la vidÃ©o sur les petits Ã©crans */
    }
    #oscars h3 {
        font-size: 1rem;
    }
    #studio h2 {
        font-size: 2rem;
    }
}
/* Media query pour les Ã©crans plus grands */
@media (max-width: 500px) { 
    .main-navigation .site-title {
        font-size: 12px;
        
    }
}



/* Image de remplacement pour la vidÃ©o */
.banner video {
    background-image: url("&lt;?php echo get_stylesheet_directory_uri() . '/assets/images/banner.png'; ?&gt;");
    background-size: cover;
    background-position: center;
}

.secteur {
    opacity: 0;
    transform: translateY(30px); /* DÃ©cale lÃ©gÃ¨rement vers le bas */
    transition: opacity 3.5s ease-out, transform 3.5s ease-out;
}

/* DÃ©clenche l'effet lorsqu'on fait dÃ©filer la page */
.secteur.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animation fleurs qui tournent*/
.story h2::after { 
    content: ""; /* Suppression de l'url() du content, on utilise background-image pour une rotation centrÃ©e*/
    position: absolute;
    left: -6.1em;
    top: 6em;
    display: inline-block;
    width: 200px; /* Ajuste selon la taille dÃ©sirÃ©e */
    height: 200px; /* Hauteur Ã©gale Ã&nbsp; la largeur */
    background-image: url("http://koukaki.local/wp-content/themes/foce-child/assets/images/Sunflower.png");
    background-size: cover; /* Assure un bon rendu */
    background-position: center;
    background-repeat: no-repeat;
    animation: spin 10s linear infinite; /* Rotation de base */
}
.story h2::before {
	content: url("./assets/images/sunflower_leaves.png");
	position: absolute;
	left: -6.4em;
	top: 1.8em;
	z-index: -1;
}

.story__article::after {
    content: ""; /* Suppression de l'url() du content, on utilise background-image pour une rotation centrÃ©e*/
    position: absolute;
    right: 74em;
	top: 2em;
    display: inline-block;
    max-width: 1440px;
    width: calc(10vw + 50px); /* Taille dynamique en fonction de lâ€™Ã©cran */
    height: calc(10vw + 50px); /* Hauteur identique Ã&nbsp; la largeur */
    background-image: url("http://koukaki.local/wp-content/themes/foce-child/assets/images/Hibiscus.png");
    background-size: cover; /* Assure un bon rendu */
    background-position: center;
    background-repeat: no-repeat;
    animation: spin 10s linear infinite;
}

#studio h2::before {
    content: ""; /* Suppression de l'url() du content, on utilise background-image pour une rotation centrÃ©e*/
    position: absolute;
    left: 0em;
    top: 0em;
    display: inline-block;
    width: calc(10vw + 50px); /* Taille dynamique en fonction de lâ€™Ã©cran */
    height: calc(10vw + 50px); /* Hauteur identique Ã&nbsp; la largeur */
    background-image: url("http://koukaki.local/wp-content/themes/foce-child/assets/images/random_flower.png");
    background-size: cover; /* Assure un bon rendu */
    background-position: center;
    background-repeat: no-repeat;
    animation: spin 10s linear infinite;
}

#studio h2::after { 
    content: ""; /* Suppression de l'url() du content, on utilise background-image pour une rotation centrÃ©e*/
    position: absolute;
    right: -1em !important;
    top: 0.2em;
    display: inline-block;
    width: calc(10vw + 40px); /* Taille dynamique en fonction de lâ€™Ã©cran */
    height: calc(10vw + 40px); /* Hauteur identique Ã&nbsp; la largeur */
    background-image: url("http://koukaki.local/wp-content/themes/foce-child/assets/images/flower.png");
    background-size: cover; /* Assure un bon rendu */
    background-position: center;
    background-repeat: no-repeat;
    animation: spin 10s linear infinite;
}

/* EmpÃªche les images d'apparaÃ®tre dans le thÃ¨me parent */
.site-footer::before {
    content: none; 
    display: none; 
}
.site-footer::after {
    content: none; 
    display: none; 
}

#oscars h3::before {
    content: ""; /* Suppression de l'url() du content, on utilise background-image pour une rotation centrÃ©e*/
    position: absolute;
	left: calc(3vw);
	top: -5em;
    display: inline-block;
    width: calc(10vw + 50px); /* Taille dynamique en fonction de lâ€™Ã©cran */
    height: calc(10vw + 50px); /* Hauteur identique Ã&nbsp; la largeur */
    background-image: url("http://koukaki.local/wp-content/themes/foce-child/assets/images/Sunflower.png");
    background-size: cover; /* Assure un bon rendu */
    background-position: center;
    background-repeat: no-repeat;
    animation: spin 10s linear infinite;
}

#oscars h3::after {
    content: ""; /* Suppression de l'url() du content, on utilise background-image pour une rotation centrÃ©e*/
    position: absolute;
	right: calc(-32vw); /* Ajuste dynamiquement en fonction de la largeur de l'Ã©cran */
	bottom: 6em;
    display: inline-block;
    width: calc(10vw + 50px); /* Taille dynamique en fonction de lâ€™Ã©cran */
    height: calc(10vw + 50px); /* Hauteur identique Ã&nbsp; la largeur */
    background-image: url("http://koukaki.local/wp-content/themes/foce-child/assets/images/orchid.png");
    background-size: cover; /* Assure un bon rendu */
    background-position: center;
    background-repeat: no-repeat;
    animation: spin 10s linear infinite;
}
.site-footer ul::after {
    content: ""; /* Suppression de l'url() du content, on utilise background-image pour une rotation centrÃ©e*/
    position: absolute;
	left: calc(50% - 323px);
	bottom: -28.5em;
    z-index: -1;
    display: inline-block;
    width: 626px; /* Ajuste selon la taille dÃ©sirÃ©e */
    height: 626px; /* Hauteur Ã©gale Ã&nbsp; la largeur */
    background-image: url("http://koukaki.local/wp-content/themes/foce-child/assets/images/hibiscus_footer.png");
    background-size: cover; /* Assure un bon rendu */
    background-position: center;
    background-repeat: no-repeat;
    animation: spin 10s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Initialement, les titres h2 sont invisibles et lÃ©gÃ¨rement dÃ©calÃ©s */
h2,
h3 {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 5.2s ease-out, transform 5.2s ease-out;
}

/* Classe ajoutÃ©e par le script JS lorsquâ€™un titre est visible */
h2.visible,
h3.visible  {
    opacity: 1;
    transform: translateY(0);
    max-width: 1440px;
}
/* Carrousel des chats */
/* Conteneur principal */
#characters {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 80px auto;
    padding: 100px 20px; /* Ajuste l'espacement si nÃ©cessaire */
}

#characters h3 {
    position: absolute;
    top: 0;
    left: 20;
    font-size: clamp(1rem, 4vw, 3.5rem);
    color: white;
    background-image: url("./assets/images/orange_characters_bg.png");
    background-size: cover;
    background-position: center;
    padding: 1em;
    text-align: left;
}

.swiper-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 80px; /* Ajuste la distance entre le titre et le carrousel */
    width: 100%;
    max-width: 1220px;
}

/* Slides du carrousel */
.swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 400px; /* Taille des slides */
    margin-right: 30px;
    max-width: 1220px;
}

.swiper-slide figure {
    margin: 0;
    width: 100%;
    max-width: 400px;
    position: relative;
}

.swiper-slide img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Figcaption */
.swiper-slide figcaption {
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    padding: 10px;
    border-radius: 5px;
}

/* Pagination */
.swiper-pagination {
    bottom: 10px;
}

/* Navigation */
.swiper-button-prev,
.swiper-button-next {
    color: white;
    transition: opacity 0.3s;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    opacity: 0.7;
}

/* Mise en page de la section Oscars */
#oscars {
    display: flex;
    align-items: center; 
    gap: 1px;
}
  
#oscars h3 {
    background-image: url("./assets/images/orange_characters_bg.png");
    background-size: cover;
    background-position: center;
    margin-top: 100px;
    font-size: clamp(1rem, 3vw, 3.5rem); /* Taille adaptative du texte */
    color: white; /* Assure une bonne visibilitÃ© */
    text-align: center;
    padding: 1em; /* Pour amÃ©liorer la lisibilitÃ© */
}
  
#oscars .text {
    flex: 2.5;
}

#oscars img {
    width: 10px; 
    height: auto;
    flex: 1.5; 
    margin-top: 100px;
}

/* Le lieu */
#place {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 50px 20px;
    background-image: url("./assets/images/Studio_Koukaki-image_place.png") !important;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

#textes-lieu {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    justify-content: center;
    text-align: left;
    max-width: clamp(250px, 50vw, 600px); 
    position: relative;
    top: 95px; 
    left: 70px; 
    z-index: 1;
}

#place h3 {
    font-size: clamp(1rem, 3vw, 3.5rem);
    color: white;
    background-image: url("./assets/images/orange_place_bg.png");
    background-size: cover;
    background-position: center;
    padding: 1em;
    text-align: left;
}

#place p {
    margin-top: 20px; /* Espacement sous le titre */
    font-size: 1.2rem;
    color: #000000;
}

/* Styles des nuages */

.cloud {
    position: absolute;
    transition: transform 0.1s linear;
    filter: blur(5px); /* Flou permanent de 5px */
}

/* gros nuage en haut Ã&nbsp; droite */
#cloud1 {
    width: 200px; /* Ajuste la taille selon le besoin */
    top: 16%;
    right: 6%;
}

/* Petit nuage au milieu */
#cloud2 {
    width: 100px; /* Ajuste la taille selon le besoin */
    top: 30%;
    right: 26%;
}

/* EntÃªte titre + menu hamburger avec menu en fade */
/* Style du bouton hamburger */
.menu-toggle {
        display: block; 
}

.main-navigation ul {
        display: flex;
        margin: 0;
        padding-left: 0;
}

.menu-container {
    display: flex;
    align-items: center; /* Centre verticalement */
    justify-content: flex-end; /* Aligne Ã&nbsp; droite */
    width: 100%;
    position: relative;
    
}

.main-navigation {
    width: 100% !important; /* Prend toute la largeur */
    height: 80px;
}

.menu-toggle {
    position: absolute;
    top: 10px;
    right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

.menu-toggle .line {
    display: block;
    width: 30px;
    height: 3px;
    margin: 6px auto;
    background-color: #000000;
    transition: transform 0.3s ease-in-out;
}

.fullscreen-menu {
    position: fixed;
    top: 10px;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #FFF5E9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    z-index: 1000;
}

.fullscreen-menu li {
    list-style: none;
    margin: 10px 0;
}

.fullscreen-menu a {
    color: #000000;
    font-size: 64px;
    text-decoration: none;
    transition: color 0.3s;
}

.fullscreen-menu a:hover {
    color: #000000;
    text-shadow: 0 0 12px #f39c12; /* Flou orange */
}

/* Menu actif */
.fullscreen-menu.active {
    opacity: 1;
    visibility: visible;
}

/* Animation du bouton hamburger en croix */
.menu-toggle.active .line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.menu-toggle.active .line:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active .line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

.site-title {
     text-align: center;
}

.Histoire::before {
    content: ""; /* Suppression de l'url() du content, on utilise background-image pour une rotation centrÃ©e*/
    position: absolute;
	left: -36em;
	top: -6em;
    display: inline-block;
    width: 126px; /* Ajuste selon la taille dÃ©sirÃ©e */
    height: 126px; /* Hauteur Ã©gale Ã&nbsp; la largeur */
    background-image: url("http://koukaki.local/wp-content/themes/foce-child/assets/images/orchid.png");
    background-size: cover; /* Assure un bon rendu */
    background-position: center;
    background-repeat: no-repeat;
    animation: spin 4s linear infinite;
}

.Histoire::after { 
    content: ""; /* Suppression de l'url() du content, on utilise background-image pour une rotation centrÃ©e*/
    position: absolute;
    right: -30em;
    top: -6em;
    display: inline-block;
    width: 216px; /* Ajuste selon la taille dÃ©sirÃ©e */
    height: 216px; /* Hauteur Ã©gale Ã&nbsp; la largeur */
    background-image: url("http://koukaki.local/wp-content/themes/foce-child/assets/images/Sunflower.png");
    background-size: cover; /* Assure un bon rendu */
    background-position: center;
    background-repeat: no-repeat;
    animation: spin 4s linear infinite;
}

.Lieu::before { 
    content: ""; /* Suppression de l'url() du content, on utilise background-image pour une rotation centrÃ©e*/
    position: absolute;
    left: -20em;
    top: 0em;
    display: inline-block;
    width: 70px; /* Ajuste selon la taille dÃ©sirÃ©e */
    height: 70px; /* Hauteur Ã©gale Ã&nbsp; la largeur */
    background-image: url("http://koukaki.local/wp-content/themes/foce-child/assets/images/flower.png");
    background-size: cover; /* Assure un bon rendu */
    background-position: center;
    background-repeat: no-repeat;
    animation: spin 4s linear infinite;
}
.Personnages::before {
    content: ""; /* Suppression de l'url() du content, on utilise background-image pour une rotation centrÃ©e*/
    position: absolute;
    right: -28em;
    top: 3em;
    display: inline-block;
    width: 63px; /* Ajuste selon la taille dÃ©sirÃ©e */
    height: 63px; /* Hauteur Ã©gale Ã&nbsp; la largeur */
    background-image: url("http://koukaki.local/wp-content/themes/foce-child/assets/images/random_flower.png");
    background-size: cover; /* Assure un bon rendu */
    background-position: center;
    background-repeat: no-repeat;
    animation: spin 4s linear infinite;
}
.fullscreen-menu h3 {
    padding: 1px;
}

.Lieu::after { 
    content: ""; /* Suppression de l'url() du content, on utilise background-image pour une rotation centrÃ©e*/
    position: absolute;
    left: 30em;
    top: 0em;
    display: inline-block;
    width: 154px; /* Ajuste selon la taille dÃ©sirÃ©e */
    height: 147px; /* Hauteur Ã©gale Ã&nbsp; la largeur */
    background-image: url("http://koukaki.local/wp-content/themes/foce-child/assets/images/cat1.png");
    background-size: cover; /* Assure un bon rendu */
    background-position: center;
    background-repeat: no-repeat;
    animation: float 3s ease-in-out infinite;
}
/* Effet de flottement sur les chats */
@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}
.Personnages::after { 
    content: ""; /* Suppression de l'url() du content, on utilise background-image pour une rotation centrÃ©e*/
    position: absolute;
    left: -10em;
    top: -10em;
    display: inline-block;
    width: 109px; /* Ajuste selon la taille dÃ©sirÃ©e */
    height: 98px; /* Hauteur Ã©gale Ã&nbsp; la largeur */
    background-image: url("http://koukaki.local/wp-content/themes/foce-child/assets/images/cat2.png");
    background-size: cover; /* Assure un bon rendu */
    background-position: center;
    background-repeat: no-repeat;
    animation: float 4s ease-in-out infinite;
    transform: rotate(90deg);
}
.Studio::after { 
    content: ""; /* Suppression de l'url() du content, on utilise background-image pour une rotation centrÃ©e*/
    position: absolute;
    left: -20em;
    top: 0em;
    display: inline-block;
    width: 105px; /* Ajuste selon la taille dÃ©sirÃ©e */
    height: 95px; /* Hauteur Ã©gale Ã&nbsp; la largeur */
    background-image: url("http://koukaki.local/wp-content/themes/foce-child/assets/images/cat3.png");
    background-size: cover; /* Assure un bon rendu */
    background-position: center;
    background-repeat: no-repeat;
    animation: float 2s ease-in-out infinite;
}
.Studio::before {
    content: ""; /* Suppression de l'url() du content, on utilise background-image pour une rotation centrÃ©e*/
    position: absolute;
    right: -43em;
    top: 0em;
    display: inline-block;
    width: 626px; /* Ajuste selon la taille dÃ©sirÃ©e */
    height: 626px; /* Hauteur Ã©gale Ã&nbsp; la largeur */
    background-image: url("http://koukaki.local/wp-content/themes/foce-child/assets/images/hibiscus_footer.png");
    background-size: cover; /* Assure un bon rendu */
    background-position: center;
    background-repeat: no-repeat;
    animation: spin 10s linear infinite;
}
</pre></body></html>