/*
Theme Name: Christopher Matt 2k26
Author: Christopher Matt
Description: Portfolio de Christopher Matt — Illustrateur et créateur d'univers
Version: 1.0
Text Domain: christopher-matt
*/

/* ==================================================
   FONT
================================================== */

@font-face{
    font-family:'Tovari Sans';
    src:url('fonts/TovariSans.otf') format('truetype');
    font-weight:normal;
    font-style:normal;
}

@font-face{
    font-family:'Nunito Sans';
    src:url('fonts/NunitoSans-Regular.ttf') format('truetype');
    font-weight:400;
    font-style:normal;
}

@font-face{
    font-family:'Nunito Sans';
    src:url('fonts/NunitoSans-Italic.ttf') format('truetype');
    font-weight:400;
    font-style:italic;
}


/* ==================================================
   GENERAL
================================================== */

*{
    box-sizing:border-box;
}

html,
body{
    min-height:100%;
    width:100%;
    max-width:100%;
    overflow-x:clip;
}

body{
    min-height:100vh;
    margin:0;

    display:flex;
    flex-direction:column;

    background:#fffdef;
    color:#1e1553;

    font-family:'Nunito Sans', sans-serif;
    font-weight:400;
}

p a{
    color:#772faf;
    font-weight:700;
    text-decoration:none;
    transition:color .2s ease;
}

p a:hover{
    color:#36e983;
}


/* ==================================================
   BOUTONS — GLOBAL
================================================== */

p.button{
    display:inline-block;
    margin-top:15px;
}

p.button strong{
    display:block;
}

p.button a{
    display:block;
    padding:12px 20px;

    border-radius:8px;

    background:#772faf;
    color:#fffdef;

    font-family:'Tovari Sans', sans-serif;
    font-size:18px;
    line-height:1;
    font-weight:normal;
    text-decoration:none;

    box-shadow:4px 4px 0 #36e983;
    transform:rotate(-1deg);

    transition:
        transform .2s cubic-bezier(.22,1,.36,1),
        box-shadow .2s ease,
        background .2s ease,
        color .2s ease;
}

p.button a:hover{
    background:#23166e;
    color:#fffdef !important;

    box-shadow:2px 2px 0 #36e983;

    transform:
        translate(2px,2px)
        rotate(1deg);
}

p.button a:focus-visible{
    outline:3px solid #36e983;
    outline-offset:4px;
}

a{
    color:#1e1553;
    text-decoration:none;
}

a,
a span{
    transition:color .2s ease;
}

a:hover,
a:hover span{
    color:#36e983 !important;
}

main{
    flex:1;
    padding:40px 20px 80px;
}


/* ==================================================
   SOCIALS — COMMUN HEADER + FOOTER
================================================== */

.socials{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.socials a{
    width:50px;
    height:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#772faf;
    border-radius:50%;

    transform:scale(1);

    transition:
        transform .2s ease,
        background .2s ease;
}

.socials a:hover{
    transform:scale(1.12);
    background:#36e983;
}

.socials img{
    width:30px;
    height:30px;
}


/* ==================================================
   HEADER — MOBILE
================================================== */

header{
    position:sticky;
    top:0;
    z-index:1000;

    overflow-x:clip;

    min-height:90px;
    padding:5px 15px 40px;

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

    background:url("img/header-bg.png") repeat-x 0 bottom;

    animation:move-bg 15s linear infinite;

    transition:padding-bottom .25s ease;
}

header:has(.menu-toggle.active){
    padding-bottom:0;
}

@keyframes move-bg{

    from{
        background-position:0 bottom;
    }

    to{
        background-position:378px bottom;
    }

}


/* ==================================================
   BLOC ACCUEIL
================================================== */

.header-left{
    display:block;
}

.home-link{
    display:block;
}


/* ==================================================
   LOGO — MOBILE
================================================== */

.logo{
    position:absolute;

    left:15px;
    top:10px;

    display:flex;
    flex-direction:column;
    align-items:flex-end;

    margin:0;

    transform:none;
    transition:transform .1s ease;
}

.logo img{
    display:block;

    width:220px;
    max-width:58vw;
    height:auto;

    transform:rotate(-2deg);
}

.logo span{
    margin-top:-15px;

    color:#fffb95;

    font-family:'Tovari Sans', sans-serif;
    font-size:17px;
    line-height:1;

    white-space:nowrap;
}

.home-link:hover .logo{
    transform:rotate(-2deg);
}


/* ==================================================
   KAKURII
================================================== */

.kakurii{
    display:block;

    position:absolute;

    width: 200px;
    height: 200px;
    top: 80px;
    right: -30px;

    object-fit:contain;

    z-index:2;

    opacity:0;

    transform:
        translateX(150px)
        rotate(10deg);

    transition:none;

    pointer-events:none;
}

header:has(.menu-toggle.active) .kakurii{
    opacity:1;

    transform:
        translateX(0)
        rotate(-7deg);

    transition:
        transform .5s cubic-bezier(.22,1,.36,1),
        opacity .25s ease;

    pointer-events:auto;
}


/* ==================================================
   BURGER
================================================== */

.menu-toggle{
    display:block;

    position:absolute;
    top:10px;
    right:15px;

    width:30px;
    height:40px;
    padding:0;

    background:none;
    border:0;

    color:#fffb95;

    font-size:30px;
    line-height:40px;

    cursor:pointer;
}


/* ==================================================
   LANGUAGE SWITCHER — MOBILE / TABLETTE
================================================== */

.header-language-switcher{
    flex:0 0 auto;

    align-items:center;
    justify-content:center;

    margin:0;

    color:#772faf;

    font-family:'Tovari Sans', sans-serif;
    font-size:24px;
    font-weight:400;
    line-height:1;

    text-decoration:none;

    transition:
        color .2s ease,
        transform .2s ease;
}

.header-language-switcher:hover{
    color:#ff4381;
    transform:rotate(5deg);
}

.header-language-switcher-mobile{
    display:flex;

    position:absolute;
    top:10px;
    right:62px;

    height:40px;

    margin:0;
}

.header-language-switcher-desktop{
    display:none;
}


/* ==================================================
   MENU DÉROULANT — MOBILE
================================================== */

.header-right{
    display:none;

    width:100%;
    padding-top:60px;
}

.menu{
    display:flex;
    flex-direction:column;

    margin:0;
    padding:0;

    font-family:'Tovari Sans', sans-serif;
    font-size:24px;

    list-style:none;
}

.menu li{
    margin:0;
    padding:0;
    list-style:none;
}

.menu a{
    display:flex;
    align-items:center;

    gap:15px;

    padding:5px 0;

    color:#fffb95;
    font-weight:normal;
}

.menu a::before{
    content:"";

    display:block;

    width:45px;
    height:45px;

    background-position:center;
    background-size:contain;
    background-repeat:no-repeat;

    transition:transform .2s ease;
}


/* Illustration */

.menu > li:nth-child(1) > a::before{
    background-image:url("img/menu-1.png");
}


/* Projets */

.menu > li:nth-child(2) > a::before{
    background-image:url("img/menu-2.png");
}


/* Boutique */

.menu > li:nth-child(3) > a::before{
    background-image:url("img/menu-3.png");
}


/* Contact */

.menu > li:nth-child(4) > a::before{
    background-image:url("img/menu-4.png");
}

.menu a:hover::before{
    transform:rotate(10deg);
}


/* ==================================================
   ITEM ACTIF DU MENU
================================================== */

.menu .current-menu-item > a,
.menu .current-menu-ancestor > a{
    position:relative;
    color:#36e983;
}

.menu .current-menu-item > a::before,
.menu .current-menu-ancestor > a::before{
    transform:rotate(10deg) scale(1.08);
}

.menu .current-menu-item > a::after,
.menu .current-menu-ancestor > a::after{
    content:"";

    position:absolute;

    left:60px;
    bottom:2px;

    width:35px;
    height:5px;

    background:#36e983;

    border-radius:10px;

    transform:rotate(-2deg);
}


/* ==================================================
   RÉSEAUX HEADER — MOBILE
================================================== */

.header-socials{
    width:100%;

    padding:10px 0;
    margin-bottom:-20px;

    opacity:0;
    transform:scale(0);

    transition:
        transform .2s ease,
        opacity .15s ease;
}

header:has(.menu-toggle.active) .header-socials{
    opacity:1;
    transform:scale(1);

    transition:
        transform .3s cubic-bezier(.22,1.4,.36,1),
        opacity .15s ease;

    transition-delay:.25s;
}


/* ==================================================
   FOOTER — MOBILE
================================================== */

.site-footer{
    position:relative;
    z-index:2;

    margin-top:auto;

    padding:120px 20px 10px;

    background-image:url("img/footer-bg.png");
    background-repeat:repeat-x;
    background-position:0 top;

    color:#fffdef;
    text-align:center;

    animation:move-footer-bg 60s linear infinite;
}

@keyframes move-footer-bg{

    from{
        background-position:0 top;
    }

    to{
        background-position:-1934px top;
    }

}


/* ==================================================
   CONTENU FOOTER
================================================== */

.footer-content{
    display:flex;
    flex-direction:column;
    align-items:center;

    gap:40px;
}

.footer-infos{
    display:flex;
    flex-direction:column;
    align-items:center;

    gap:20px;
}


/* Logo footer */

.footer-logo{
    display:flex;
    flex-direction:column;
    align-items:flex-end;

    transition:transform .1s ease;
}

.footer-logo:hover{
    transform:rotate(-2deg);
}

.footer-logo img{
    width:300px;
    height:auto;
}

.footer-logo span{
    margin-top:-19px;
    margin-right:20px;

    color:#fffb95;

    font-family:'Tovari Sans', sans-serif;
    font-size:20px;

    white-space:nowrap;
}


/* Contact footer */

.footer-contact{
    margin:0;

    font-family:'Tovari Sans', sans-serif;
    font-size:20px;
}

.footer-contact a{
    color:#ff4381;
}


/* Réseaux footer */

.footer-socials{
    display:flex;
    gap:10px;
}


/* ==================================================
   KAKURII FOOTER
================================================== */

.footer-kakurii-link{
    display:flex;
    flex-direction:column;
    align-items:center;

    gap:5px;

    margin:0;

    color:#fffb95;

    font-family:'Tovari Sans', sans-serif;
    font-size:20px;
}

.footer-kakurii{
    display:block;

    width:250px;
    height:250px;

    object-fit:contain;

    transform:rotate(-3deg);

    transition:
        transform .5s cubic-bezier(.22,1.4,.36,1);
}

.footer-kakurii-link:hover .footer-kakurii{
    transform:rotate(3deg);
}

.footer-kakurii-link span{
    display:inline-block;

    transition:transform .2s ease;
}

.footer-kakurii-link:hover span{
    transform:rotate(-1deg) scale(1.05);
}


/* ==================================================
   DÉCORATION AU-DESSUS DU FOOTER
================================================== */

.footer-decoration{
    position:relative;
    z-index:2;

    width:100%;
    height:60px;

    margin-bottom:-90px;

    transform:translateY(-40px);

    background-image:url("img/footer-decoration.png");
    background-repeat:repeat-x;
    background-position:0 top;
    background-size:663.33px auto;

    pointer-events:none;

    animation:footerDecorationMove 90s linear infinite;
}

@keyframes footerDecorationMove{

    from{
        background-position:0 top;
    }

    to{
        background-position:663.33px top;
    }

}


/* ==================================================
   INTERMÉDIAIRE
================================================== */

@media(min-width:440px){

    header{
        padding-top:20px;
        min-height: 100px;
    }

    .logo{
        top:10px;
    }

    .footer-decoration{
        transform:none;
    }

}


/* ==================================================
   TABLETTE
================================================== */

@media(min-width:600px){

    .logo{
        left:50%;
        top:8px;
        align-items:flex-end;
        transform:translateX(-50%);
    }

    .logo img{
        width:300px;
        max-width:70vw;
    }

    .logo span{
        margin-top:-20px;
        font-size:20px;
        transform:translateX(-20px);
    }

    .home-link:hover .logo{
        transform:translateX(-50%) rotate(-2deg);
    }
}


/* ==================================================
   DESKTOP
================================================== */

@media(min-width:1100px){

    main{
        padding-top:40px;
        padding-bottom:100px;
    }


    /* ==================================================
       HEADER — DESKTOP
    ================================================== */

    header{
        position:relative;
        top:auto;

        height:95px;
        min-height:0;

        padding:50px 40px 70px;

        flex-wrap:nowrap;
    }


    /* ==================================================
       BLOCS HEADER
    ================================================== */

    .header-left,
    .header-right{
        display:flex !important;
        align-items:center;
    }

    .header-right{
        width:auto;

        /*
         * Plus compact qu'avant :
         * menu ↔ réseaux ↔ langue.
         */
        gap:25px;

        padding-top:0;
    }


    /* ==================================================
       LIEN ACCUEIL
    ================================================== */

    .home-link{
        display:flex;
        align-items:center;
    }


    /* ==================================================
       KAKURII — DESKTOP
    ================================================== */

    .kakurii{
        display:block;

        position:static;

        width:120px;
        height:120px;

        opacity:1;
        visibility:visible;

        object-fit:contain;

        pointer-events:auto;

        transform:
            translateY(18px)
            rotate(-7deg);

        transition:
            transform .35s cubic-bezier(.22,1.4,.36,1);
    }

    .home-link:hover .kakurii{
        transform:
            translateY(18px)
            rotate(-3deg);
    }


    /* ==================================================
       LOGO — DESKTOP
    ================================================== */

    .logo{
        position:static;

        display:flex;
        flex-direction:column;
        align-items:flex-end;

        margin:0;

        transform:none;
    }

    .logo img{
        display:block;

        width:300px;
        max-width:none;
        height:auto;
    }

    .logo span{
        margin-top:-20px;

        font-size:20px;

        transform:translateX(-20px);
    }

    .home-link:hover .logo{
        transform:rotate(-1deg);
    }


    /* ==================================================
       MENU — DESKTOP
    ================================================== */

    .menu-toggle{
        display:none;
    }

    .menu{
        flex-direction:row;

        gap:25px;

        padding:0;
    }

    .menu a{
        flex-direction:column;

        gap:5px;

        padding:0;
    }

    .menu .current-menu-item > a::after,
    .menu .current-menu-ancestor > a::after{
        left:50%;
        bottom:-9px;

        width:35px;

        transform:
            translateX(-50%)
            rotate(-2deg);
    }


    /* ==================================================
       RÉSEAUX — DESKTOP
    ================================================== */

    .header-socials{
        width:auto;

        padding:0;
        margin:0;

        opacity:1;
        transform:none;

        transition:none;
    }


    /* ==================================================
       LANGUE — DESKTOP
       Même axe / hauteur que les ronds RS 50 × 50
    ================================================== */

    .header-language-switcher-mobile{
        display:none;
    }

    .header-language-switcher-desktop{
        display:flex;

        height:50px;

        margin:0;

        font-size:32px;
    }


    /* ==================================================
       FOOTER — DESKTOP
    ================================================== */

    .site-footer{
        padding:120px 40px 10px;
        overflow:visible;
    }

    .footer-content{
        width:800px;
        max-width:100%;

        margin:0 auto;

        display:flex;
        flex-direction:row;

        justify-content:space-between;
        align-items:center;

        gap:100px;
    }

    .footer-decoration{
        margin-bottom:-70px;
    }


    /* ==================================================
       BLOC GAUCHE FOOTER
    ================================================== */

    .footer-infos{
        width:350px;

        display:flex;
        flex-direction:column;

        align-items:center;
        justify-content:center;

        gap:20px;
    }


    /* ==================================================
       BLOC DROIT FOOTER
    ================================================== */

    .footer-kakurii-link{
        width:350px;

        display:flex;
        flex-direction:column;

        align-items:center;
        justify-content:center;

        margin:0;
    }

    .footer-kakurii{
        width:300px;
        height:300px;

        margin-top:-140px;
        margin-bottom:0;

        object-fit:contain;

        transform:rotate(-3deg);

        transition:
            transform .5s cubic-bezier(.22,1.4,.36,1);
    }

    .footer-kakurii-link:hover .footer-kakurii{
        transform:
            scale(1.05)
            rotate(3deg);
    }

}
/* Mentions légales tout en bas du footer */
.site-footer .cm-footer-legal{
    width:100%;
    margin:42px auto 0;
    text-align:center;
    font-family:'Nunito Sans',sans-serif;
    font-size:12px;
}
.site-footer .cm-footer-legal a{color:#fffdef;text-decoration:none;opacity:.75;transition:color .2s ease,opacity .2s ease}
.site-footer .cm-footer-legal a:hover{color:#36e983!important;opacity:1}


/* Supprimer le flash bleu au toucher sur tout le site */
*,
*::before,
*::after {
    -webkit-tap-highlight-color: transparent;
}