/* front-page.css
   Styles specifiques a la home, extraits du template pour faciliter la maintenance. */

/* Body / #page transparents pour laisser voir le hero */
body.home #page,
body.home #page .site {
    background: transparent !important;
}

html:has(body.home:not(.front-page--scroll)) {
    overflow: hidden;
    height: 100%;
}

body.home:not(.front-page--scroll) {
    overflow: hidden;
    height: 100svh;
}

body.home #page {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

body.home:not(.front-page--scroll) #page {
    height: 100svh;
    overflow: hidden;
}

body.home .site-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
}

body.home .front-page-main {
    flex: 1 1 auto;
    min-height: 0;
}

body.home .site-main-hero {
    height: 100svh;
    min-height: 100svh;
}

body.home .front-page-content {
    min-height: 0;
    padding-top: 0;
}

body.home .front-page-content .container {
    padding-top: 0;
    padding-bottom: 0;
}

body.home.front-page--scroll .front-page-content {
    padding-top: 100svh;
}

body.home.front-page--scroll .front-page-content .container {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

body.home.front-page--scroll .site-footer {
    position: relative;
    z-index: 25;
    flex-shrink: 0;
}

/* Echelle responsive centralisee pour garder des reglages lisibles */
body.home {
    /* Cibles typo : mobile~36, tablette~64, desktop~86 */
    --fp-title-size: 36px;
    --fp-sub-size: clamp(12px, 1.8vmin, 18px);
    --fp-big-top: var(--header-pad-y, 30px);
    /* Mobile/tablette : garder le grand titre a droite du burger */
    --fp-big-left: clamp(84px, 12vw, 120px);
    --fp-big-width: clamp(210px, 30vw, 385px);
    --fp-visiter-top: 44vh;
    --fp-bottom: 1.5rem;
}

.rotate-180 {
    transform: rotate(180deg);
}

/* Liens nav sans underline */
.front-page-nav a {
    text-decoration: none;
}

body.home .front-page-nav .fp-title {
    color: var(--color-accent, #4cea01);
    transition: color 0.3s ease, opacity 0.3s ease;
}

/* Survol d’un bloc : les 4 grands titres prennent l’accent de la section survolée (JS + --fp-shared-title-hover) */
body.home .front-page-nav.fp-titles-hover-active .fp-title {
    color: var(--fp-shared-title-hover, var(--color-accent, #4cea01));
}

body.home .front-page-nav .front-nav-subitems a {
    color: #fff;
}

/* Subitems : masques par defaut, visibles au survol du groupe parent */
.front-nav-subitems {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.front-nav-group:hover .front-nav-subitems,
.front-nav-group:focus-within .front-nav-subitems {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Transition de fond hero */
.fp-hero-img {
    transition: opacity 0.3s ease;
}

/* Masquer le h1 classique du header sur la home */
body.home .site-title {
    visibility: hidden;
}

body.home .front-page-big-title {
    padding-top: calc(var(--fp-big-top) + var(--header-admin-offset, 0px));
    padding-left: var(--fp-big-left);
}

body.home .fp-title {
    font-size: var(--fp-title-size) !important;
}

body.home .front-page-big-title-text {
    width: var(--fp-big-width);
    color: var(--color-page-secondary, var(--color-secondary));
}

body.home .front-page-nav .front-nav-subitems a {
    font-size: var(--fp-sub-size) !important;
}

body.home .front-nav-slot-visiter {
    top: var(--fp-visiter-top);
}

@media (max-width: 1023px) {
    body.home {
        --fp-visiter-top: 38vh;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    body.home {
        --fp-title-size: 64px;
        --fp-big-left: clamp(110px, 14vw, 180px);
    }
}

@media (min-width: 1024px) {
    body.home {
        --fp-title-size: 86px;
        --fp-big-top: 5vh;
        --fp-big-left: 24vw;
        --fp-visiter-top: 40vh;
    }
}

@media (min-width: 1280px) {
    body.home {
        --fp-big-left: 30vw;
        --fp-visiter-top: 24vh;
    }
}

body.home .front-nav-slot-bottom {
    bottom: max(var(--fp-bottom), env(safe-area-inset-bottom, 0px));
}

@media (max-height: 871px) {
    body.home {
        --fp-title-size: clamp(34px, 8.2vmin, 76px);
        --fp-sub-size: clamp(11px, 1.4vmin, 14px);
        --fp-big-top: 60px;
        --fp-big-left: 24vw;
        --fp-big-width: clamp(200px, 26vw, 320px);
        --fp-visiter-top: 30vh;
    }
}

@media (max-width: 1023px) and (max-height: 871px) {
    body.home {
        --fp-title-size: clamp(30px, 6.4vmin, 60px);
        --fp-big-left: 22vw;
        --fp-big-width: clamp(170px, 28vw, 280px);
        --fp-visiter-top: 36vh;
    }
}

@media (min-width: 1024px) and (max-width: 1173px) and (max-height: 871px) {
    body.home {
        --fp-big-left: 28vw;
        --fp-visiter-top: 34vh;
    }
}