@import url('https://fonts.googleapis.com/css2?family=Cinzel:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,700;1,400;1,700&family=Monoton:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    --bs-font-size-base: 1rem;
}

@media (min-width: 767.98px) {
    :root {
        --bs-font-size-base: 1.2rem;
    }
}

:root {
--nam-red: #8B1E2D;
--nam-red-rgb: rgb(139, 30, 45);
--nam-blue: #223344;
--nam-blue-rgb: rgb(34, 51, 68);
--nam-orange: #FFA509;
--nam-orange-rgb: rgb(255, 165, 9);
--nam-turquoise: #0084a6;
--nam-turquoise-rgb: rgb(0, 132, 166);
--nam-yellow: #D4A017;
--nam-yellow-rgb: rgb(212, 160, 23);
--nam-green: #2F5D50;
--nam-green-rgb: rgb(47, 93, 80);
--nam-white: #F2EFE9;
--nam-white-rgb: rgb(242, 239, 233);
--nam-white80: #F2EFE9CC;
--nam-black: #111111;
--nam-black-rgb: rgb(17, 17, 17);
--nam-dark: #212529;
--nam-dark-rgb: rgb(33, 37, 41);
--nam-light: var(--nam-white);
--nam-tibet-red: #8B1E2D;;
--nam-tibet-blue: #223355;;
--nam-tibet-yellow: #f5c518;;
--nam-tibet-green: #2F5D50;;
--nam-tibet-white: #F2EFE9;;
--nam-primary: var(--nam-tibet-blue);
--nam-secondary: var(--nam-red);
--nam-info: var(--nam-yellow);
--nam-success: var(--nam-green);
--nam-warning: var(--nam-yellow);
--nam-danger: var(--nam-red);

--bs-dark : var(--nam-dark);
--bs-dark-rgb : var(--nam-dark-rgb);
--bs-light : var(--nam-light);
--bs-light-rgb : var(--nam-light-rgb);
--bs-primary : var(--nam-primary);
--bs-primary-rgb : var(--nam-primary-rgb);
--bs-secondary : var(--nam-secondary);
--bs-secondary-rgb : var(--nam-secondary-rgb);
--bs-info : var(--nam-info);
--bs-info-rgb : var(--nam-info-rgb);
--bs-success : var(--nam-success);
--bs-success-rgb : var(--nam-success-rgb);
--bs-warning : var(--nam-warning);
--bs-warning-rgb : var(--nam-warning-rgb);
--bs-danger : var(--nam-danger);
--bs-danger-rgb : var(--nam-danger-rgb);


--navbar-bg-top: tranparent;
--font-text: "Poppins";
--font-title: "Cinzel";
--font-navbar: "Poppins";
--font-brandname: "Cinzel";
--font-code: "monospace";


--bs-body-font-size: var(--bs-font-size-base);
--bs-body-font-family: var(--font-text);


/* heading */
--nam-heading-color: var(--nam-tibet-blue);
--bs-heading-color: var(--nam-heading-color);
--nam-heading-hero-color: var(--nam-white);


/* links */
--nam-links-color: var(--nam-primary);
--nam-links-text-decoration: underline;
--nam-links-font-weight: bold;


/* logo */
--nam-logo-img: img/logo/ffct-logo.webp;
--nam-logo-width: 80px;
--nam-logo-height: 80px;
--nam-logo-top: -5px;


/* breadcrumb */
--nam-breadcrumb-divider: /;


/* hamburger */
--nam-hamburger-animated: 1;


/* menu */
--nam-menu-color: var(--nam-white);
--nam-menu-hover: underline;


/* navbar */
--nam-navbar-expand: never;
--nam-navbar-type: auto;
--nam-navbar-brand-color: var(--nam-white);
--bs-navbar-brand-color: var(--nam-navbar-brand-color);
--nam-navbar-brand-font-size: 2.5rem;;
--nam-navbar-brand-font-weight: bold;;
--nam-navbar-bg: var(--nam-tibet-blue);
--bs-navbar-bg: var(--nam-navbar-bg);
--nam-navbar-color: var(--nam-white80);
--bs-navbar-color: var(--nam-navbar-color);
--nam-navbar-font-size: 1.4rem;;
--nam-navbar-font-weight: bold;;
--nam-navbar-hover-color: var(--nam-white80);
--bs-navbar-hover-color: var(--nam-navbar-hover-color);
--nam-navbar-hover-text-decoration: underline;
--nam-navbar-active-color: var(--nam-white);
--bs-navbar-active-color: var(--nam-navbar-active-color);
--nam-navbar-active-text-decoration: none;
--nam-navbar-top-bg: var(--nam-transparent);
--nam-navbar-top-color: var(--nam-transparent);


/* footer */
--nam-footer-bg: var(--nam-tibet-blue);
--nam-footer-color: var(--nam-white80);
--nam-footer-link-color: var(--nam-white);
--nam-footer-header-color: var(--nam-tibet-yellow);



}




/* THEME  */

body {
    color: var(--nam-body-color) !important;
    font-family: var(--bs-body-font-family) !important;
}



h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--nam-heading-color);
    font-family: var(--font-title) !important;
}

h1 span.small {
    font-size: .5em;

    opacity: 1;
    display: block;
    color: var(--nam-tibet-yellow);
}

h1 span.original {
    display: block;
    line-height: .7;
    color: var(--nam-white);
}


h1.ncontour,
span.contour,
h2.contour,
h3.contour {

    color: #FFFFFF00 !important;
    text-transform: uppercase;
    -webkit-text-stroke-width: .1px;
    stroke-width: .1px;
    -webkit-text-stroke-color: var(--nam-heading-color);
    stroke: var(--nam-heading-color);
    text-shadow: 3px 5px 16px #00000080;
}

.poppins {
    font-family: 'Poppins' !important;
}

.film-mini .image-cover__content p.h2 {
    font-family: 'Cinzel' !important;
    font-size: 2.4em;
}

.film-mini .image-cover__content p.h3 {
    font-family: 'Cinzel' !important;
    font-size: 1.8em;
    color: var(--nam-tibet-yellow) !important;

}

.film-mini .image-cover__content p.h4 {

    font-size: 1.1em;
    color: var(--nam-white80) !important;

}

/* hero */

body.has_hero .hero h1,
body.has_hero .hero h2 {

    --nam-heading-color: var(--nam-heading-hero-color);
    text-shadow: 0 0 6px #00000088;
}

body.has_hero .hero h2 {

    opacity: 1;
}




.zoom-in img {
    position: absolute;
    inset: 0;

    transform: scale(1);

    animation: zoomIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;

}

.zoom-in>.ncontent>* {

    opacity: 0;
    transform: translateY(30px) scale(.8);


    animation: contentReveal 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;


}


.zoom-out img {
    position: absolute;
    inset: 0;

    transform: scale(1.3);

    animation: zoomOut 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;

}



.film-mini {

    z-index: 0;
    overflow: hidden;
}

.film-mini:hover {

    z-index: 5;
}

.film-mini img {
    transform: scale(1);
    filter: brightness(0.7);
    transition: transform 2s ease, filter .5s ease;
}

.film-mini:hover img {
    transform: scale(1.2);
    filter: brightness(1.2);


}



.zoom-out .ncontent>* {

    opacity: 0;
    transform: translateY(30px) scale(.8);


    animation: contentReveal 1s ease-out forwards;

    animation-delay: 0.2s;
}

.zoom-out>.ncontent>h1,
.zoom-in>.ncontent>h1 {
    animation-delay: 0.2s;
}

.zoom-out>.ncontent>h2,
.zoom-in>.ncontent>h2 {
    animation-delay: 0.4s;
}

.zoom-out>.ncontent>p,
.zoom-in>.ncontent>p {
    animation-delay: 0.6s;
}

@keyframes contentReveal {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);

    }
}

@keyframes zoomIn {


    to {
        transform: scale(1.3);
        filter: blur(0px);
    }
}

@keyframes zoomOut {

    to {
        transform: scale(1);
        filter: blur(0px);
    }
}


.form-floating label {
    margin-left: 1rem;
}

input.form-control,
textarea.form-control {
    border: 3px solid #2348;

}

input.form-control:focus,
textarea.form-control:focus {

    outline: none !important;
    border: 4px solid #2348;
    box-shadow: 0 0 5px #22334488;
}

form label {

    color: #223344;
}


input.form-control:required+label:after,
textarea.form-control:required+label:after {
    content: " *";
    color: orangered;

}


button[type="submit"] {
    text-align: center;
    width: 50%
}

.sponsor-logos img {
    max-height: 200px;
    object-fit: contain;
    transform: scale(1);
    transition: transform .5s ease;
}

.sponsor-logos img:hover {

    transform: scale(1.2);
}

/* links */
main a {
    color: var(--nam-links-color) !important;
    font-weight: var(--nam-links-font-weight);
    text-decoration: var(--nam-links-text-decoration);
}

h1 span.char {
    display: inline-block;
    color: inherit;
}

p span.char {
    display: inline-block;
    color: inherit;
}

/* navbar */
.navbar * {
    background-color: transparent !important;
}


body.navbar-auto nav.navbar {
    background-color: var(--nam-navbar-bg) !important;


}


/* navbar-brand */
nav.navbar a.navbar-brand {
    font-family: var(--font-brandname) !important;
    color: var(--nam-navbar-brand-color) !important;
    font-size: var(--nam-navbar-brand-font-size, var(--nam-navbar-font-size, 1.6rem));
    font-weight: var(--nam-navbar-brand-font-weight, var(--nam-navbar-font-weight, bold));
}


nav.navbar a.navbar-brand strong,
nav.navbar a.navbar-brand:hover strong {
    color: var(--nam-navbar-brand-color);
}

/* nav-link */
body.navbar-auto nav.navbar a.nav-link {
    font-family: var(--font-navbar) !important;
    color: var(--nam-navbar-color) !important;
    font-size: var(--nam-navbar-font-size, 1.6rem);
    font-weight: var(--nam-navbar-font-weight, bold);
}

body.navbar-auto nav.navbar a.nav-link:hover {
    color: var(--nam-navbar-hover-color) !important;
    text-decoration: underline;

}

body.navbar-auto nav.navbar .nav-link.active {
    color: var(--nam-navbar-active-color) !important;
    text-decoration: var(--nam-navbar-active-text-decoration, overline);


}


body.navbar-auto nav.navbar.top-navbar {
    background-color: var(--nam-navbar-bg-top) !important;
}

/* footer */
footer * {
    background-color: var(--nam-footer-bg) !important;
    color: var(--nam-footer-color) !important;
}

footer a {
    color: var(--nam-footer-link-color) !important;
    text-decoration: none;
}

footer h2 {
    color: var(--nam-footer-header-color) !important;
    text-decoration: none;
}

footer .row .col:first-of-type {
    text-align: left;
}

footer .row .col:last-of-type {
    text-align: right;
}


.navbar {
    position: relative;
    top: -10px;
    padding: 0 !important;
}

.navbar.hidden-navbar .navbar-brand img.logo {
    display: none;
}

.navbar-brand strong {


    text-shadow:
        0 0 2px var(--nam-primary);

}


.navbar-brand img.logo {


    top: var(--nam-logo-top, 0px);

    width: var(--nam-logo-width);
    height: var(--nam-logo-height);
    z-index: -1;
}


.poster {
    float: right;
    max-width: 400px;
}


.director {

    float: right;
    width: 200px;
    margin: 32px;

    border-radius: 50% !important;
}




.herosmenu .image-cover img {
    transition: transform 0.5s ease, filter 0.5s ease;
}

.herosmenu .image-cover:hover img {
    transform: scale(1.05);
    filter: brightness(1.20);
}


.sticky {
    position: sticky;
    top: 20px;
}


p.imedia {
    position: sticky;
    top: 20px;
}


.film-mini {
    position: relative;

}



.film-mini .image-cover__content p {

    color: var(--nam-white) ! important;
    font-weight: bold;

}

div.collection,
div.collection div.col {

    baaackground-color: #000 ! important;

    margin: 0;
    padding: 0;

}


a.navbar-brand {
    padding: 0;
    margin: 0;
}



.navbar.navbar-expand-never.top-navbar,
.navbar.navbar-expand-never.top-navbar a.navbar-brand {

    padding: 0;
    margin: 0;
}



header .collapse p,
header .collapse h2,
header .collapse h3 {

    color: #FFFFFF88;



}

header .collapse a {
    text-decoration: none;
    color: var(--nam-white);
    font-weight: bold;
    opacity: 1;
}

header .collapse {
    margin: 0;
    padding-top: 80px;
    min-height: 100vh;
    position: static;
    top: 0;
    left: 0;
    background-color: var(--nam-dark);
}

[data-bs-theme="dark"] {

    --bs-body-color: var(--nam-white);
    --nam-navbar-color: var(--nam-white);
    --bs-body-bg: var(--nam-dark);
    --nam-heading-color: var(--nam-white);

}

.btn-primary {
    background-color: var(--nam-primary) !important;
    border-color: var(--nam-primary) !important;
}

.btn-primary:hover {
    background-color: var(--nam-primary) !important;
    border-color: var(--nam-primary) !important;
}

/* Hero */
#region-hero,
.hero-content,
#heroCarousel,
#heroCarousel .carousel-inner,
#heroCarousel .carousel-item {

    height: 100vh;
}


#navbarCollapse {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    z-index: 1000 !important;
    background-color: var(--nam-primary) !important;
}

#navbarCollapse h2 {
    color: var(--nam-tibet-yellow) !important;
}

#navbarCollapse a {

    display: inline-block;
    border-bottom: 4px solid #ffffff88;
    padding-bottom: -4px;
    margin-bottom: 4px;
}

#heroCarousel {


    padding: 0 !important;

}

#heroCarousel .carousel-item {
    position: relative;
    overflow: hidden;
}

/* Images */
#heroCarousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transform: scale(1);
    backface-visibility: hidden;
    transform-origin: center center;
    will-change: transform;

}

/* Animation uniquement sur le slide actif */
#heroCarousel .carousel-item.active img {
    animation: kenburns 3.5s ease-in forwards;
}

/* Overlay sombre */
#heroCarousel .carousel-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .3);
    z-index: 1;
}

#heroCarousel {
    position: relative;
}

#heroCarousel.fromblack .hero-content {
    position: absolute;
    inset: 0;
    z-index: 100;
}





#heroCarousel.fromblack .carousel-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--nam-prim);

    z-index: 100;
    pointer-events: none;

    animation: heroFirstFadeIn 1500ms ease forwards;
    animation-delay: 500ms;

}

#heroCarousel.fromblack.delay1 .carousel-inner::before {
    animation-delay: 500ms;
}

#heroCarousel.fromblack.delay2 .carousel-inner::before {
    animation-delay: 1s;
}

#heroCarousel.fromblack.delay3 .carousel-inner::before {
    animation-delay: 1500ms;
}

#heroCarousel.fromblack.delay4 .carousel-inner::before {
    animation-delay: 2s;
}

@keyframes heroFirstFadeIn {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fade-in3s {
    opacity: 0;
    animation: fadeIn 1s ease-in-out 3s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Contenu du hero */
.hero-content {
    position: absolute ! important;
    inset: 0;
    z-index: 2;

    width: 100%;
    height: 100vh;
    display: flex;

    padding: 1rem;
}

.hero-content img {
    display: block;
    position: relative ! important;
    margin: auto;
}

.hero .ncontent {
    width: 100vw;
}


.hero .ncontent .h1,
.hero .ncontent h1 {
    font-size: clamp(2.5rem, 7vw, 7rem);
    font-weight: 800;
}


.hero .ncontent h2 {
    font-size: clamp(3rem, 3vw, 4rem);
    font-weight: 800;
    color: var(--nam-tibet-yellow);
    font-family: Cinzel;
}

.hero-content p {
    font-size: clamp(1rem, 2vw, 1.5rem);
}

/* Effet Ken Burns */
@keyframes kenburns {
    from {

        transform: scale(1);
    }

    to {

        transform: scale(1.15);
    }
}

.carousel-item {
    transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1) !important;


}

.carousel-fade .carousel-item {
    opacity: 0;

}

.carousel-fade .carousel-item.active {
    opacity: 1;

}


.hero .ncontent p.screening {

    font-size: clamp(1.5rem, 2vw, 2.5rem);

    text-align: left;
    font-family: poppins;

    font-weight: 700;

    color: var(--nam-white80);

    ;
}

.ccccarousel-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 0;
}

#region-hero {
    z-index: 100 !important;
    position: relative;
}