/*
Theme Name: Laureen Astier
Theme URI: https://wordpress.org/themes/laureenastier/
Author: Laureen Astier
Author URI: https://wordpress.org/
Description: Laureen Astier.
Requires at least: 5.9
Tested up to: 6.8
Requires PHP: 5.6
Version: 2.0
Text Domain: laureenastier
Laureen Astier Theme, (C) 2025 WordPress.org
*/

/* HEADER */
:root {
    font-size: clamp(14px, .835vw, 80px);
}
html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    overflow-x: hidden;
}
body {
    width: 100vw;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
    scrollbar-color: var(--wp--preset--color--orange) var(--wp--preset--color--blanc);
    scrollbar-width: thin;
}
header p a:where(:not(.wp-element-button)) {
    text-decoration: none;
    display: inline-block;
    position: relative;
    padding: 0 .5rem;
    transition: .5s ease;
}
header p a:before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    background-color: var(--wp--preset--color--orange);
    width: 0; height: 100%;
    transition: .5s ease;
    z-index: -1;
}
header p a:hover:where(:not(.wp-element-button)) {
    color: var(--wp--preset--color--blanc);
}
header p a:hover:before {
    width: 100%;
}
@media screen and (max-width: 1270px) and (min-width: 851px) {
    .has-x-large-font-size {
        font-size: 5rem !important;
    }
    .deco-fleur {
        opacity: .15;
        pointer-events: none;
    }
    .deco-fleur:first-child {
        margin-right: -100% !important;
        z-index: -1;
    }
    .deco-fleur:last-child {
        margin-left: -100% !important;
        z-index: -1;
    }
}
@media screen and (max-width: 850px) {
    header .wp-block-columns {
        padding: 1rem 2rem !important;
    }
    .has-x-large-font-size {
        font-size: 2.5rem !important;
        line-height: normal;
    }
    .deco-fleur {
        opacity: .15;
        position: absolute;
        pointer-events: none;
    }
    .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        max-width: 90vw;
    }
}
@media screen and (min-width: 851px) {
    .show-mob {
        display: none !important;
    }
}
@media screen and (min-width: 1025px) {
    .menu_mobile {
        display: none !important;
    }
    header .wp-block-column:nth-child(2) {
        min-width: 36rem;
    }
}
@media screen and (max-width: 1024px) {
    .deco-fleur + div {
        max-width: 90vw;
        margin-left: auto;
        margin-right: auto;
    }
    .hide-mob {
        display: none !important;
    }
    .menu_mobile {
        margin: 0;
        color: var(--wp--preset--color--orange);
        position: fixed;
        top: 0;
        right: 0;
        z-index: 10;
    }
    .menu_mobile label {
        background: var(--wp--preset--color--blanc);
        padding: .75rem 1rem;
        border-radius: 0 0 0 1rem;
        display: block;
        transition: .3s ease;
        transform: translate(1.75rem, 0);
    }
    .admin-bar .menu_mobile label {
        padding: 3rem 1rem .75rem;
    }
    .menu_mobile p { display: none; }
    .menu_mobile input {
        display: none;
    }
    .menu_mobile svg {
        width: .75rem;
        height: .75rem;
        margin-left: .5rem;
        transition: .3s ease;
    }
    .menu_mobile input ~ ul {
        position: fixed;
        opacity: 0;
        pointer-events: none;
        transition: all 1s cubic-bezier(0.03, 1.02, 0.79, 1);
        background: var(--wp--preset--color--orange);
        padding: 0;
        list-style: none;
        top: 0; left: 0; bottom: 0; right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 1rem;
        margin: 0;
    }
    .menu_mobile input:checked ~ ul {
        opacity: 1;
        pointer-events: all;
    }
    .menu_mobile input:checked ~ label {
        z-index: 1;
        position: relative;
        transform: rotate(-5deg) translate(0.5rem, -0.5rem);
    }
    .menu_mobile ul a {
        color: var(--wp--preset--color--blanc);
        text-decoration: none;
    }
    .menu_mobile li:nth-child(4n+1) {
        font-family: var(--wp--preset--font-family--jacquarda-bastarda-9);
        font-size: 2.5rem;
    }
    .menu_mobile li:nth-child(4n+2) {
        font-family: var(--wp--preset--font-family--jacques-francois-shadow);
        font-size: 2rem;
    }
    .menu_mobile li:nth-child(4n+3) {
        font-family: var(--wp--preset--font-family--jacquard-12);
        font-size: 2.5rem;
    }
    .menu_mobile li:nth-child(4n+4) {
        font-family: var(--wp--preset--font-family--jaro);
        font-size: 2rem;
    }
    header .wp-block-columns { flex-direction: row-reverse; }
    header .wp-block-column:nth-child(2) { flex: 0 0 auto !important; width: auto; }
    header .wp-block-column:last-child { width: 0; flex-grow: 0 !important; }
}
@media screen and (max-width: 1024px) and (min-width: 782px) {
    header .wp-block-column:first-child .wp-block-group { justify-content: flex-end; }
}



/* SLIDER */
.wp-block-gallery.slider figure.wp-block-image img {
    border-radius: 1.5rem;
    box-shadow: 0 4px 2rem rgba(0,0,0,.15);
    filter: saturate(1.25);
}
.wp-block-gallery.has-nested-images figure.wp-block-image img {
    filter: saturate(1.15);
}
.slick-track {
    padding: 2rem 0;
}
.slider .wp-block-image {
    padding: 0 .5rem;
    aspect-ratio: 1/1;
}
@media screen and (min-width: 1025px) {
    .wp-block-gallery.slider figure.wp-block-image img {
        border-radius: 2.5rem;
    }
    .slick-track {
        margin: 0 0 0 -13vw !important;
    }
    .slider .wp-block-image {
        padding: 0 1rem;
    }
}


/* IDENTITE */
figure.identite {
    align-items: initial !important;
}
.identite figure {
    position: relative;
}
.identite figure img {
    border: 0.625rem solid var(--wp--preset--color--blanc) !important;
    aspect-ratio: 1 / 1;
    height: auto !important;
    flex: initial !important;
}
.identite figure:nth-child(1) img {
    transform: rotate(3deg);
}
.identite figure:nth-child(2) img {
    transform: rotate(-15deg);
}
.identite figure:nth-child(3) img {
    transform: rotate(15deg);
}
.identite figure:nth-child(1) img {
    border-radius: 1rem !important;
}
.identite figure:nth-child(2) img {
    mask: url("/wp-content/themes/laureenastier/assets/images/triangle.svg") !important;
    mask-size: 100% 100% !important;
}
.identite figure:nth-child(2):after {
    content: '';
    background-image: url("/wp-content/themes/laureenastier/assets/images/triangle-stroke.svg") !important;
    background-size: 100% 100% !important;
    position: absolute;
    top: -0.625rem;
    left: -0.625rem;
    right: -0.625rem;
    bottom: -0.625rem;
    transform: rotate(-15deg);
}
.identite figure:nth-child(3) img {
    border-radius: 100% !important;
}
@media screen and (min-width: 1025px) {
    .identite figure:nth-child(2) img {
        margin: 10rem 0 0 -2rem !important;
    }
    .identite figure:nth-child(3) img {
        margin: -2rem 0 0 -3rem !important;
    }
    .identite figure:nth-child(2):after {
        top: 9.375rem;
        left: -2.625rem;
        right: 1.375rem;
    }
}
@media screen and (max-width: 1024px) {
    figure.identite.wp-block-gallery figure.wp-block-image,
    figure.print.wp-block-gallery figure.wp-block-image,
    figure.web.wp-block-gallery figure.wp-block-image,
    figure.illu.wp-block-gallery figure.wp-block-image {
        flex-grow: 0;
    }
    figure.identite.wp-block-gallery,
    figure.print.wp-block-gallery,
    figure.web.wp-block-gallery,
    figure.illu.wp-block-gallery {
        justify-content: center;
    }
    header .wp-block-image img {
        width: 1.5rem;
        height: auto;
    }
    .wp-block-site-logo img {
        width: 8rem;
    }
}


/* print */
.print figure {
    position: relative;
}
.print figure img {
    border: 0.625rem solid var(--wp--preset--color--blanc) !important;
    border-radius: 1rem;
    aspect-ratio: 1 / 1;
    height: auto !important;
    flex: initial !important;
}
.print figure:nth-child(1) img {
    transform: rotate(3deg);
}
.print figure:nth-child(2) img {
    transform: rotate(-15deg);
}
.print figure:nth-child(3) img {
    transform: rotate(15deg);
}
@media screen and (min-width: 1025px) {
    figure.print {
        align-items: initial !important;
        padding-top: 4rem;
        flex-wrap: nowrap;
    }
    figure.print:after {
        content: '';
        background-image: url("/wp-content/themes/laureenastier/assets/images/corde.svg") !important;
        background-size: 100% 100% !important;
        position: absolute;
        left: 0; right: 0;
        height: 12vw;
        margin-top: -11vw;
        z-index: -1;
    }
    .print figure:nth-child(2) {
        margin: 1rem 0 0 2rem !important;
    }
    .print figure:nth-child(3) {
        margin: -3rem 0 0 2rem !important;
    }
    .print figure:after {
        content: '';
        background: var(--wp--preset--color--orange);
        position: absolute;
        width: 1.5rem; height: 5rem;
    }
    .print figure:nth-child(1):after {
        top: -2rem; left: 50%;
        transform: rotate(8deg);
    }
    .print figure:nth-child(2):after {
        top: -3rem; left: 50%;
        transform: rotate(7deg);
    }
    .print figure:nth-child(3):after {
        top: -1rem; left: 50%;
        transform: rotate(8deg);
    }
}



/* WEB */
figure.web {
    align-items: initial !important;
}
.web figure {
    position: relative;
}
.web figure img {
    border: 0.625rem solid var(--wp--preset--color--blanc) !important;
    aspect-ratio: 1 / 1;
    height: auto !important;
    flex: initial !important;
}
.web figure:after {
    content: '';
    background-image: url("/wp-content/themes/laureenastier/assets/images/desktop.jpg") !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
}
.web figure:nth-child(1) {
    margin: 4rem 0 0 !important;
    justify-content: initial !important;
}
.web figure:nth-child(2) {
    margin: 0 -2rem 0 -1rem !important;
    justify-content: initial !important;
}
.web figure:nth-child(3) {
    margin: 1rem 0 0 !important;
    justify-content: initial !important;
}
.web figure:nth-child(1) img,
.web figure:nth-child(1):after {
    transform: rotate(8deg);
}
.web figure:nth-child(2) img,
.web figure:nth-child(2):after {
    transform: rotate(-10deg);
}
.web figure:nth-child(3) img,
.web figure:nth-child(3):after {
    transform: rotate(15deg);
}
@media screen and (min-width: 1025px) {
    .web figure:nth-child(1) {
        margin: 7rem 0 0 !important;
    }
    .web figure:nth-child(2) {
        margin: 0 -3rem 0 -2rem !important;
    }
    .web figure:nth-child(3) {
        margin: 6rem 0 0 !important;
    }
}



/* ILLU */
figure.illu {
    align-items: initial !important;
}
.illu figure {
    position: relative;
    justify-content: initial !important;
}
.illu figure img {
    border: 0.625rem solid var(--wp--preset--color--blanc) !important;
    aspect-ratio: 1 / 1;
    height: auto !important;
    flex: initial !important;
}
.illu figure:nth-child(1) img {
    transform: rotate(8deg);
}
.illu figure:nth-child(2) {
    margin: 4rem 0 0 !important;
}
.illu figure:nth-child(2):after {
    right: -3rem;
    transform: rotate(166deg);
}
.illu figure:nth-child(2) img,
.illu figure:nth-child(2):after {
    transform: rotate(-10deg);
}
.illu figure:nth-child(3) img {
    transform: rotate(15deg) translateX(3rem);
}
.illu figure:nth-child(3):after {
    right: -6rem;
}
@media screen and (min-width: 1025px) {
    .illu figure:nth-child(1) img {
        transform: rotate(8deg) translateX(-3rem);
    }
    .illu figure:after {
        content: '';
        width: 0; height: 0; 
        border-top: 3rem solid transparent;
        border-bottom: 3rem solid transparent;
        border-left: 4rem solid var(--wp--preset--color--noir);
        position: absolute;
        right: 0; top: 40%;
        z-index: -1;
        transform: rotate(16deg);
    }
}


/* FOOTER */
@media screen and (max-width: 850px) {
    footer .wp-block-column:nth-child(2) {
        order: -1;
    }
    footer .wp-block-group {
        justify-content: center;
    }
}

/**/
.filtres-portfolio .wp-block-gallery.has-nested-images figure.wp-block-image {
    flex-grow: 0;
}
.filtres-portfolio .wp-block-button.selected .wp-block-button__link,
.filtres-portfolio .wp-block-buttons .wp-block-button .wp-block-button__link:hover {
    transform: translateY(0);
    background-color: var(--wp--preset--color--orange);
    color: var(--wp--preset--color--blanc);
}
.filtres-portfolio .wp-block-button .wp-block-button__link,
.filtres-portfolio .wp-block-buttons:hover .wp-block-button__link {
    transform: translateY(.75rem);
    background-color: var(--wp--preset--color--blanc);
    color: var(--wp--preset--color--orange);
}
.filtres-portfolio .wp-block-button .wp-block-button__link,
.filtres-portfolio .wp-block-buttons:hover .wp-block-button__link {
    border-radius: 1rem 1rem 0 0;
    transition: .3s ease;
}
.filtres-portfolio .wp-block-buttons {
    overflow: hidden;
    position: relative;
    z-index: 1;
}
@media screen and (max-width: 1024px) {
    .filtres-portfolio .wp-block-gallery,
    .filtres-portfolio .wp-block-buttons {
        max-width: 100vw;
    }
    .filtres-portfolio .wp-block-buttons {
        gap: .25rem;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-color: transparent transparent;
    }
    .filtres-portfolio .wp-block-button a {
        white-space: nowrap;
        font-size: 1rem;
        padding: .5rem 1rem .25rem;
    }
    .filtres-portfolio .wp-block-button .wp-block-button__link,
    .filtres-portfolio .wp-block-buttons:hover .wp-block-button__link {
        transform: translateY(.5rem);
    }
}
.filtres-portfolio .wp-block-gallery {
    margin-top: 0;
    box-sizing: border-box;
    padding: 2rem;
    background-color: var(--wp--preset--color--blanc);
    box-shadow: 0 -1rem 2rem rgba(55,22,0,.15);
    position: relative;
}
.filtres-portfolio .wp-block-gallery .wp-block-image img {
    border-radius: 1.5rem;
    aspect-ratio: 1/1;
}
.filtres-portfolio .wp-block-gallery:after,
.filtres-portfolio .wp-block-gallery:before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background-color: var(--wp--preset--color--blanc);
    z-index: -1;
    box-shadow: 0 0 2rem rgba(55,22,0,.05);
}
.filtres-portfolio .wp-block-gallery:after {
    transform: rotate(-5deg);
}
.filtres-portfolio .wp-block-gallery:before {
    transform: rotate(8deg);
}


kbd {
    font-family: 'Work Sans';
    text-decoration: underline;
}