/*
Theme Name: melodie charrier website
Theme URI: 
Author: jojo
Author URI: https://joanajost.fr
Description: portfolio melodie charrier
Version: 1.2 - 03.05.25
License: 
License URI: 
Text Domain: melodie-charrier-website
Tags: 
*/

:root {
    /* couleurs */
    --white: #ffffff;
    --dark-white: hsl(0, 0%, 95%);
    --transparent-white: rgba(255, 255, 255, 0.9);
    --light-black: #111111;
    --transparent-black: rgba(0, 0, 0, 0.2);
    --black: #000000;
    /* typos */
    --sans-serif: 'Inter';
    --serif: 'Faustina';

    --serif-bold: '600';
    /* tailles */
    --body-txt: 10pt;
    --body-txt-mobile: 11pt;
    --ad-small-txt: 10pt;
    --small-txt: 9pt;
    --small-margin: 10px;
    --small-margin-mobile: 8px;
    --big-margin: 25px;
    --big-space: 70px;

    --caption-height: 0px;
    /* tailles mobiles */

    /* opacité */
    --img-hover-opacity: 0.9;
    --img-opacity: opacity ease-in-out 0.3s;
    /* ombre */
    --shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);

    /* curseurs */
    --cross: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0px' y='0px' width='20px' height='20px'  viewBox='0 0 17 17' id='crsr_croix'%3E%3Cpolygon points='16.6396 8.0605 8.9395 8.0605 8.9395 .3604 8.0605 .3604 8.0605 8.0605 .3604 8.0605 .3604 8.9395 8.0605 8.9395 8.0605 16.6396 8.9395 16.6396 8.9395 8.9395 16.6396 8.9395 16.6396 8.0605'/%3E%3C/svg%3E") 10 10, default;
    --link: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0px' y='0px' width='13px' height='13px' viewBox='0 0 10 10' id='crsr_lien'%3E%3Cpath d='M9.7947,8.3094h-.8204V3.9342c.0041-.2362.0135-.4796.028-.7302s.0311-.5055.0497-.7644.0404-.5127.0653-.7613.0476-.4827.0684-.7023l.0373.1864c-.1202.1616-.2476.3242-.3822.4879s-.2724.3242-.4133.4816-.2838.3087-.4288.4537L.7895,9.7947l-.5842-.5842L7.4145,2.0014c.145-.145.2973-.2869.4568-.4257s.3211-.2755.4848-.4102.3263-.2621.4879-.3822l.1864.0373c-.29.0249-.6059.0528-.9478.0839s-.6847.057-1.0286.0777-.6712.0331-.9819.0373l-4.3814.0062V.2053h8.1041v8.1041Z'/%3E%3C/svg%3E") 13 0, default;
    --flchg: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0px' y='0px' width='18px' height='15.5px' viewBox='0 0 14 12' id='crsr_flchg'%3E%3Cpath d='M6.1562,11.7305L.4258,6,6.1562.2695l.5801.5801-3.1025,3.0938c-.2168.2168-.4556.4395-.7163.668s-.5215.4526-.7822.6724-.5054.4233-.7339.6108l.1055-.1582c.1992-.0293.4043-.0542.6152-.0747s.4219-.0381.6328-.0527.4189-.022.624-.022h10.1953v.8262H3.3789c-.2051,0-.4131-.0059-.624-.0176s-.4219-.0278-.6328-.0483-.416-.0454-.6152-.0747l-.1055-.1582c.1699.1406.3516.29.5449.4482s.3882.3223.5845.4922.3882.3384.5757.5054.3662.3325.5361.4966l3.0938,3.0938-.5801.5801Z'/%3E%3C/svg%3E") 0 8, default;
    --flchd: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' x='0px' y='0px' width='18px' height='15.5px' viewBox='0 0 14 12' id='crsr_flchd'%3E%3Cpath d='M7.8438,11.7305l-.5801-.5801,3.0938-3.0938c.1699-.1641.3486-.3296.5361-.4966s.3794-.3354.5757-.5054.3911-.334.5845-.4922.375-.3076.5449-.4482l-.1055.1582c-.1992.0293-.4043.0542-.6152.0747s-.4219.0366-.6328.0483-.4189.0176-.624.0176H.4258v-.8262h10.1953c.2051,0,.4131.0073.624.022s.4219.0322.6328.0527.416.0454.6152.0747l.1055.1582c-.2227-.1875-.4658-.3911-.7295-.6108s-.5244-.4438-.7822-.6724-.498-.4512-.7207-.668L7.2637.8496l.5801-.5801,5.7305,5.7305-5.7305,5.7305Z'/%3E%3C/svg%3E") 18 8, default;
}



/* Réinitialisation de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-optical-sizing: auto;
}



body {
    background-color: var(--white);
    color: var(--light-black);
    font-family: 'Inter';
    font-size: var(--body-txt);
    cursor: var(--cross);
    scroll-behavior: smooth;

}

::-moz-selection {
    background-color: var(--transparent-black);
    /* color: rgb(220, 220, 220); */
}

::selection {
    background-color: var(--transparent-black);
    /* color: rgb(220, 220, 220); */
}

a {
    color: inherit;
    text-decoration: none;
    transition: font-weight ease-in-out 0.3s;
    cursor: var(--link);
}

a:hover {
    font-weight: bold;
    transition: font-weight ease-in-out 0.3s;
}

h1,
h2 {
    font-family: var(--serif);
    font-size: var(--ad-small-txt);
    font-weight: 600;
    margin-bottom: 0.4em;
}

p {
    font-weight: 250;
    font-size: var(--body-txt);

    line-height: 130%;
    letter-spacing: -0.02em;
    text-indent: 1em;
}

div p:nth-of-type(1) {
    text-indent: 0;
}

.bottombigmargin {
    margin-bottom: var(--big-space);
}

/* HEADER */

header {
    display: block;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
}

.site-header {
    width: 100vw;
    display: flex;
    padding: var(--small-margin) var(--big-margin);
    justify-content: space-between;
    font-size: var(--small-txt);

    z-index: 120;
    position: absolute;

}

#header-logo a {
    text-transform: uppercase;
    font-weight: 500;
}

#header-logo a:hover {
    font-weight: 500;
}

.menu-overlay {
    /*  -------- */
    /* display: none; */
    pointer-events: none;
    opacity: 0;

    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100vw;
    height: 100dvh;
    background-color: var(--transparent-white);

    z-index: 50;

    transition: opacity ease-in-out 0.5s;
}

.menu-overlay.active {
    opacity: 1;
    transition: opacity ease-in-out 0.5s;
}

#menu-navigation {
    display: flex;
    justify-content: flex-start;
    font-weight: 300;
    line-height: 130%;
}

#menu-navigation a:hover {
    font-weight: 500;
}

#menu-navigation>.menu-item {
    position: absolute;
    right: var(--big-margin);
}

.liengras {
    font-weight: 500;
    transition: font-weight ease-in-out 0.3s;
}

#menu-navigation>li {
    list-style: none;
    width: auto;
    box-sizing: border-box;
}

#menu-navigation>li:first-child {
    width: 240px;
    margin-bottom: 0.3em;
}

#menu-navigation>li:last-child {
    min-width: 65px;
    text-align: right;
}

/* Mettre en majuscules seulement le texte des éléments de premier niveau */
#menu-navigation>.menu-item>a {
    text-transform: uppercase;
}

/* Ne pas appliquer la transformation aux sous-menus */
#menu-navigation .sub-menu>.menu-item>a {
    text-transform: none;
    font-size: var(--ad-small-txt);
    font-family: var(--serif);
    font-weight: normal;
}


#menu-navigation .sub-menu>.menu-item>a:hover {
    font-weight: 600;
}

#menu-navigation .sub-menu {
    /* -------- */
    display: none;
    position: relative;
    list-style: none;
    margin-top: 0.4em;
}

/* Effet de slide down uniquement pour le premier niveau de sous-menu */
#menu-navigation>.menu-item:hover>.sub-menu {
    display: block;
    animation: slideDown 0.3s ease-out forwards;
}

/* Ne pas appliquer d'effet aux sous-menus imbriqués (les enfants) */
#menu-navigation .sub-menu .sub-menu {
    display: block;
    animation: none;
    margin-left: var(--small-margin);
    margin-top: 0;
}

/* marge inversée sur les catégories */
/* .sub-menu .menu-item-type-taxonomy a {
    margin-left: var(--small-margin);
}

.sub-menu .menu-item-type-taxonomy .sub-menu a {
    margin-left: 0;
} */


li.menu-item {
    margin-bottom: 0.3em;
}

.menu-item-type-taxonomy a {
    pointer-events: none;
}

.menu-item-type-post_type a {
    pointer-events: all;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* MENU MOBILE */

.menu-mobile01 {
    display: none;
}

#header-menu-mobile {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background: var(--transparent-white);
    z-index: 100;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    padding: var(--big-space) 0;
}

#header-menu-mobile.active {
    visibility: visible;
    opacity: 1;
}

.main-navigation-mobile {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow-y: scroll;
}

#menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    cursor: var(--link);
    position: absolute;
    right: var(--small-margin);
    z-index: 110;
    HEIGHT: 30PX;
    transform: translateY(-6px);
}

#menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: black;
    margin: 3px 0;
    transition: all 0.3s;
}

#menu-toggle.active span:nth-child(1) {
    width: 18px;
    height: 1px;
    margin: 5px 0;
    transform: translateY(6px) rotate(45deg);
}

#menu-toggle.active span:nth-child(2) {
    width: 18px;
    height: 1px;
    margin: 5px 0;
    transform: translateY(-5px) rotate(-45deg);
}

.menu-mobile {
    text-align: center;
    /* margin: calc(var(--big-space) + var(--big-space)) var(--big-margin) var(--big-margin) var(--big-margin); */
    list-style: none;
}

.menu-mobile ul {
    list-style: none;
}

#menu-navigation-1 {
    line-height: 120%;
}

#menu-navigation-1 .sub-menu {
    margin-top: var(--small-margin);
    margin-bottom: var(--big-space);
}

#menu-navigation-1 .sub-menu .sub-menu {
    /* font-style: italic; */
    margin-top: 0;
    margin-bottom: 0;
}

#menu-navigation-1>.menu-item>a {
    text-transform: uppercase;
    margin-bottom: var(--small-margin);
    transition: none;
}

#menu-navigation-1 .sub-menu>.menu-item>a {
    text-transform: none;
    font-family: var(--serif);
    font-weight: normal;
    transition: none;
}

#menu-navigation-1 .sub-menu>.menu-item>a:hover {
    font-weight: 600;
    transition: none;
}

p.indication {
    display: none;
}

/* page d'erreur */
.main-error {
    width: 100%;
    display: flex;
    align-content: center;
    align-items: center;
    overflow: hidden;
    margin-top: var(--big-space);
}

.error {
    min-width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 1em;
}

.error p {
    text-indent: 0;
}

.error a {
    color: inherit;
    text-decoration: underline;
}

.error a:hover {
    text-decoration: none;
    font-weight: inherit;
}

/* MOBILE */

@media screen and (max-width: 650px) {

    h1,
    h2 {
        font-size: var(--body-txt-mobile);
    }

    p {
        font-size: var(--body-txt-mobile);
    }

    #header-menu {
        display: none;
    }

    .site-header {
        padding: var(--small-margin);
        font-size: 12pt;
    }

    #header-logo {
        z-index: 150;
    }

    .menu-mobile01 {
        display: block;
    }

    li.menu-item {
        margin-bottom: 0.3em;
    }

    .menu-item-type-post_type a {
        font-style: normal !important;
    }

    .sub-menu .menu-item-type-taxonomy a {
        font-style: italic;
    }

    .responsive-tooltip-img {
        max-width: 280px;
    }

}