/*
Theme Name: Studio Yetta
Template: hello-elementor
Version: 1.0
Author: Stéphane
Description: Thème enfant pour Hello, personnalisé pour Studio Yetta
*/

/* Importation du style du thème parent */
@import url("../hello-elementor/style.css");

html, body {
    overflow-x: hidden !important;
    margin: 0;
    padding: 0;
    max-width: 100%;
}

body,
html {
    padding: 0 !important;
    margin: 0 !important;
}

/* Contourne le WP admin bar qui pousse le contenu */
body.logged-in .page-hero {
    margin-top: -32px !important; /* admin bar desktop */
}

@media (max-width: 900px) {
    body.logged-in .page-hero {
        margin-top: -46px !important; /* admin bar mobile */
    }
}

/* =========================
   NAVIGATION
========================= */
.navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1% 0%;
    font-family: "Jokker Semibold", sans-serif;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 9999;
}

/* LOGO */
.navigation .logo img {
    height: 69px;
}

/* CENTRE */
.main-navigation {
    display: flex;
    gap: 48px;
    margin: 0 auto;
}

/* CONTACT RIGHT */
.navigation .contact {
    display: flex;
    align-items: center;
}

/* LINKS */
.navigation a {
    position: relative;
    text-decoration: none;
    padding-bottom: 10px;
    transition: color 0.3s ease;
    color: var(--menu-color, #000);
}

/* Petit cercle */
.navigation .main-navigation a::after,
.navigation .contact a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 8px;
    height: 8px;
    background: currentColor;
    border-radius: 50%;
    transform: translateX(-50%) scale(0);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.navigation a:hover::after {
    transform: translateX(-50%) scale(1);
    opacity: 1;
}

/* Logo = pas de cercle */
.navigation .logo a::after {
    display: none !important;
}

/* =========================
   COULEURS PAR PAGE
========================= */
/* Menu - Page Intro */
body.namespace-intro .navigation a {
    color: #F2EDFB;  /* Couleur pour la page Intro */
}

/* Menu - Page Qui */
body.namespace-qui .navigation a {
    color: #23A172;  /* Couleur pour la page Qui */
}

/* Menu - Page Quoi */
body.namespace-quoi .navigation a {
    color: #BE252B;  /* Couleur pour la page Quoi */
}

/* Menu - Page Work */
body.namespace-work .navigation a {
    color: #FF7900;  /* Couleur pour la page Work */
}

.page-intro__text p,
.page-qui__text p,
.page-quoi__text p,
.page-work__text p {
    text-wrap: balance;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {

    /* Logo un peu plus petit */
    .navigation .logo img {
        height: 50px;
    }

    /* Barre de navigation : on pousse tout vers la droite */
    .navigation {
        justify-content: flex-end; /* les éléments vont à droite */
		margin: 1% 3%;
    }

    /* Le logo reste collé à gauche grâce à l'auto-margin */
    .navigation .logo {
        margin-right: auto;
    }

    /* Menu principal : en ligne, sans marge auto */
    .main-navigation {
        display: flex;
		justify-content: flex-end;
        gap: 12px;          /* espace entre QUI / QUOI / WORK */
        margin-left: 0;     /* override le margin: 0 auto; du desktop */
        margin-right: 0;     /* override le margin: 0 auto; du desktop */
    }

    /* Masquer INTRO sur mobile */
    .main-navigation a[href="/intro"] {
        display: none !important;
    }

    /* Taille des liens */
    .navigation a,
    .navigation .contact a {
        font-size: 16px;
    }

    /* CONTACT : même espace que les autres, à droite de WORK */
    .navigation .contact {
        margin-left: 12px;  /* même gap que le menu */
    }
}
/* ============================
   FOOTER NORMAL
============================ */
.footer {
    width: 100%;
    padding: 2% 3% 2% 3%;
    display: flex;
    justify-content: center;
    background: var(--footer-bg, #8806CE);
    position: relative;
    z-index: 2;
}

.footer-content {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-left,
.footer-center,
.footer-right {
    display: flex;
    align-items: center;
    gap: 30px;
}

.footer-center a,
.footer-right a,
.footer-left p {
    font-family: "Jokker Medium", sans-serif;
    font-size: 25px;
    color: inherit;
    text-decoration: none;
}

/* ============================
   COULEURS PAR PAGE
============================ */
body.namespace-intro .footer,
body.namespace-intro .footer-content * {
    color: #F2EDFB;
    --footer-bg: #8806CE;
}

body.namespace-qui .footer,
body.namespace-qui .footer-content * {
    color: #FDE4A1;
    --footer-bg: #23A172;
}

body.namespace-quoi .footer,
body.namespace-quoi .footer-content * {
    color: #F7C5DB;
    --footer-bg: #BE252B;
}

body.namespace-work .footer,
body.namespace-work .footer-content * {
    color: #C0D4F8;
    --footer-bg: #FF7900;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {
    .footer-content {
        flex-direction: column;
        align-items: center;
    }

    .footer-content p, .footer-content a {
        font-size: 20px;  /* Ajuste la taille du texte pour les petits écrans */
        margin-bottom: 10px;  /* Espacement entre les éléments */
    }

    .footer-content a {
        margin-right: 0;
    }

    .footer-content .footer-left,
    .footer-content .footer-center,
    .footer-content .footer-right {
        text-align: center;  /* Aligner au centre sur mobile */
        flex: none;  /* Evite la distribution égale sur mobile */
    }
}