@import url('variables.css');
@import url('fonts.css');
@import url('form.css');

* {-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family:'Stolzl';font-weight:500;text-transform:uppercase;line-height:1.2;
    & span {
        display:block;font-weight:500;letter-spacing:2px;line-height:1;font-size:23%;
    }
    & i {
        display:none;
    }
    & strong {
        color:var(--secondary-color);text-shadow:
    -2px -2px 0 var(--tertiary-color),
     2px -2px 0 var(--tertiary-color),
    -2px  2px 0 var(--tertiary-color),
     2px  2px 0 var(--tertiary-color),
     0px  2px 0 var(--tertiary-color),
     2px  0px 0 var(--tertiary-color),
     0px -2px 0 var(--tertiary-color),
    -2px  0px 0 var(--tertiary-color);
    }
}
h1 {font-size:1.8rem;}
h2 {font-size:1.6rem;}
h3 {font-size:1.4rem;}
h4 {font-size:1.2rem;}
h5 {font-size:1rem;}
h6 {font-size:.8rem;}
p, li {line-height:1.2;font-size:.9rem;}

a {
    color:var(--primary-color);
    &:hover {
        color:var(--primary-color);
    }
    &.button {
        display:inline-block;text-align:center;text-transform:none;font-size:.9rem;font-weight:500;line-height:2;padding:0 3rem;background:none;color:var(--link-txt-color);text-decoration:none;position:relative;z-index:1;
        &::after {
            content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;transform:skewX(15deg);background:var(--link-color);z-index:-1;transition:var(--transition);border-top-right-radius:calc(var(--border-radius)/6);border-bottom-left-radius:calc(var(--border-radius)/6);
        }
        &:hover {
            background:none;color:var(--link-txt-hover-color);
            &::after {
                background:var(--link-hover-color);
            }
        }
    }
}

p {
    & strong {
        font-weight:normal;color:var(--primary-color);
    }
}

.grid-container {
    max-width:100%;
}

body {
    font-family:'Stolzl';background-color:var(--secondary-color);color:var(--tertiary-color);overflow-x:hidden;
    & header {
        background-color:var(--secondary-color);color:var(--tertiary-color);
        --link-hover-color:var(--tertiary-color);
        & nav {
            margin-bottom:2rem;
            & .logo {
                &::after {
                    content:'Expert en électricité générale';font-size:.625rem;display:block;color:var(--tertiary-color);margin-top:0;letter-spacing:2px;text-transform:uppercase;text-wrap-mode:nowrap;
                }
            }
            & > .cell.text-right {
                padding-right:0;
            }
            & ul.menu {
                position:fixed;width:100%;height:100%;display:flex;flex-direction:column;top:-100%;left:0;text-align:center;background:var(--secondary-color);z-index:999999;align-items:center;justify-content:center;opacity:0;margin:0;
                & a {
                    position:relative;width:24rem;color:var(--secondary-color);font-weight:bold;margin:.5rem 0;transition:var(--transition);
                    &::after {
                        content: '';display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;transform: skewX(15deg);background: var(--link-color);z-index: -1;transition: var(--transition);border-top-right-radius: calc(var(--border-radius) / 6);border-bottom-left-radius: calc(var(--border-radius) / 6);
                    }
                    &:hover, &[aria-current="page"], &:focus {
                        color:var(--link-txt-hover-color);width:26rem;
                        &::after {
                            background:var(--link-hover-color);
                        }
                    }
                }
            }
            & [for="menu-toggle"] {
                position:fixed;z-index:1000000;top:3rem;right:1.1rem;width:2rem;height:2rem;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;
                & span {
                    display:block;width:2rem;height:.25rem;background:var(--primary-color);margin:.1rem 0;transition:var(--transition);transform:skewX(15deg);transform-origin: 50% 50%;
                }
                &:has(+ input:checked) {
                    & span:nth-child(1) {
                        transform:rotate(45deg) translate(.25rem, .25rem) skewX(15deg);
                    }
                    & span:nth-child(2) {
                        opacity:0;
                    }
                    & span:nth-child(3) {
                        transform:rotate(-45deg) translate(.4rem, -.4rem) skewX(15deg);
                    }
                }
                & + input {
                    display:none;
                    &:checked ~ ul.menu {
                        top:0;opacity:1;transition:opacity .25s ease-in-out;
                    }
                }
            }
            & a {
                &.contact-button {
                    text-transform:uppercase;margin-right:0;overflow:hidden;
                    &:after {
                        border-top-right-radius:0;left:.5rem;
                    }
                }
                &[href^="tel:"] {
                    line-height: 1;height: 1rem;display: inline-block;vertical-align: super;font-weight: bold;color: var(--tertiary-color);
                }
            }
        }
        & .header-content {
            position:relative;min-height:60vh;align-items:center;overflow:hidden;
            & .img-header-homepage {
                position:relative;width:100%;height:auto;display:flex;justify-content:center;align-items:center;aspect-ratio:926/762;margin-inline:auto -8rem;
                & img {
                    position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;
                    &.img-0 {
                        z-index:0;mix-blend-mode:overlay;
                    }
                    &.img-1 {
                        z-index:1;
                    }
                    &.img-2 {
                        z-index:2;mix-blend-mode:overlay;opacity:.46;
                    }
                    &.img-3 {
                        z-index:3;
                    }
                    &.img-4 {
                        z-index:4;
                    }
                }
            }
            & .cell:has(picture) {
                padding-inline:0;
            }
            & picture {
                position:relative;width:100%;height:100%;display:block;z-index:1;
                & img {
                    width:100%;height:100%;object-fit:contain;
                }
                &.mask {
                    & img {
                        object-fit:cover;
                        aspect-ratio:911/600;
                        -webkit-mask-size:contain;
                        mask-size:contain;
                        -webkit-mask-image:url('../img/maskLeft.svg');
                        mask-image:url('../img/maskLeft.svg');
                    }
                    &::after {
                        content:'';display:block;position:absolute;top:1rem;left:0;width:100%;height:100%;background:url('../img/maskLeft-color.svg');z-index:-1;border-left:1rem solid var(--primary-color);box-sizing:content-box;
                    }
                }
            }
            & .header-text {
                & h1 {
                    font-size:2.8rem;
                    & ~ p {
                        max-width:35rem;
                        &:last-of-type {
                            margin-bottom:0;
                            & a.button {
                                margin-bottom:0;
                            }
                        }
                    }
                }
            }
            &::after {
                content:'';display:block;position:absolute;top:25%;right:0;width:1rem;height:50%;background:var(--primary-color);transform:skewY(-15deg);border-top-left-radius:calc(var(--border-radius)/6);
            }
        }
    }

    & main {
        & section {
            margin:2rem 0;
            &.reverse {
                & .grid-x {
                    flex-direction:row-reverse;
                }
            }
            &#services {
                margin:0;
                & .cell {
                    aspect-ratio:4/3;padding:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left;position:relative;overflow:hidden;
                    &::after {
                        content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:var(--secondary-color);opacity:.52;z-index:-1;
                    }
                    & img {
                        width:100%;height:100%;object-fit:cover;object-position:center;position:absolute;top:0;left:0;z-index:-2;transition:all .5s ease-in-out;
                    }
                    & a {
                        position:relative;z-index:1;padding-left:1rem;text-transform:uppercase;font-weight:bold;color:var(--tertiary-color);font-size:1.4rem;max-width:80%;line-height:1.1;
                        &::after {
                            content:'';display:block;position:relative;width:5rem;height:1rem;background:var(--primary-color);transform:skewX(-30deg);margin-left:-.5rem;margin-top:.5rem;
                        }
                    }
                    &:hover {
                        & img {
                            transform:scale(1.2);
                        }
                    }
                }
            }
            &#realisations {
                & h2 {
                    padding-left:20%;font-weight:bold;text-transform:uppercase;transform:translateY(50%);position:relative;z-index:2;margin:0;
                }
                & .swiper {
                    position:relative;padding:0;max-width:100%;
                    &::after {
                        content: '';
                        background: url('../img/swipe.svg') no-repeat center center;
                        background-size: contain;
                        width: 50px;
                        height: 50px;
                        display: block;
                        position: absolute;
                        top: 50%;
                        z-index: 1;
                        left: 0;
                        margin-bottom: 10px;
                        opacity: 0;
                        animation: swiperAnim 4s infinite;
                    }
                    & .swiper-wrapper {
                        padding-top:4rem;
                        &::before {
                            content:attr(data-titre);display:block;position:absolute;top:12rem;left:-17rem;max-width:15rem;text-align:right;font-size:1.6rem;font-weight:bold;line-height:1.2;
                        }
                        &::after {
                            content:'';display:block;position:absolute;top:0rem;left:-12.5rem;width:274px;height:185px;background:url('../img/quotes.png') no-repeat center center;background-size:contain;z-index:2;
                        }
                    }
                    & .swiper-slide {
                        & img {
                            margin-bottom:1rem;width:100%;height:auto;object-fit:cover;object-position:center;aspect-ratio:788/540;
                        }
                        & p {
                            font-size:.8rem;line-height:1.2;color:var(--primary-color);
                            & strong {
                                text-transform:uppercase;color:var(--primary-color);font-weight:bold;
                            }
                        }
                    }
                    & .swiper-pagination {
                        position:relative;margin-top:6rem;
                    }
                    & + .cell {
                        margin-top:-6rem;position:relative;z-index:2;
                        & p {
                            text-align:center;width:100%;
                        }
                    }
                }
                & .button {
                    margin-inline:auto;
                }
            }
            & .cell {
                & picture {
                    position:relative;width:100%;height:100%;display:block;
                    & img {
                        width:100%;height:100%;object-fit:contain;
                    }
                    &.mask {
                        & img {
                            object-fit:cover;
                            aspect-ratio:911/600;
                            -webkit-mask-size:contain;
                            mask-size:contain;
                            -webkit-mask-image:url('../img/maskLeft.svg');
                            mask-image:url('../img/maskLeft.svg');
                        }
                        &::after {
                            content:'';display:block;position:absolute;top:1rem;left:0;width:100%;height:100%;background:url('../img/maskLeft-color.svg');z-index:-1;border-left:1rem solid var(--primary-color);box-sizing:content-box;
                        }
                    }
                }
                &:has(picture) ~ .cell {
                    padding-inline:4rem;

                }
                &:has(.mask) {
                    padding-inline:0;
                }
                &:not(:has(picture)) {
                    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
                }
                & img.logo {
                    max-width:14rem;margin-bottom:0;
                }
            }
        }
    }
    &.home {
        background-color:var(--tertiary-color);color:var(--secondary-color);
        & header {
            & nav {
                margin-bottom:0;
            }
            & .header-content {
                & .header-text {
                    margin-left:-10rem;position:relative;z-index:2;
                    & h1 {
                        font-size:4rem;
                        & ~ p {
                            margin-left:4rem;max-width:35rem;
                        }
                    }
                }
            }
        }
        & footer {
            &::before {
                content:'';display:block;position:absolute;top:-15rem;left:0;width:100%;height:15rem;background:var(--secondary-color);z-index:-1;
            }
        }
    }
    &.page-template-page-projets {
        & main {
            & section {
                &#realisations {
                    max-width:90%;margin-inline:auto;
                    & h2 {
                        padding-left:0;transform:translateY(0);text-align:center;font-size:1.2rem;margin:.5rem 0;
                    }
                    & p {
                        text-align:center;color:var(--primary-color);width:100%;
                    }
                    & img {
                        aspect-ratio:4/3;object-fit:cover;object-position:center;width:100%;height:auto;
                    }
                }
            }
        }
    }
    & footer {
        position:relative;background:var(--secondary-color);color:var(--tertiary-color);
        & .partenaires {
            text-align:center;
            & h2 {
                font-size:2rem;font-weight:bold;text-transform:uppercase;margin-bottom:1rem;letter-spacing:1px;
            }
            & p {
                color:var(--primary-color);max-width:26rem;margin-inline:auto;margin-bottom:2rem;font-weight:bold;
            }
            & .swiper {
                max-width:80%;margin-inline:auto;
                &:has(.swiper-pagination-lock) {
                    & .swiper-wrapper {
                        justify-content:center;
                    }
                }
                & .swiper-wrapper {
                    margin-bottom:2rem;
                }
                &.swiper-partenaires {
                    & .swiper-slide {
                        box-sizing:border-box;
                        & img {
                            aspect-ratio:1;object-fit:contain;object-position:center;border-radius:50%;
                        }
                    }
                }
            }
        }
        & .qualifications {
            max-width:80%;margin-inline:auto!important;margin-top:2rem;margin-bottom:2rem;
            & h2 {
                font-size:2rem;font-weight:bold;text-transform:uppercase;margin-bottom:1rem;letter-spacing:1px;text-align:center;
            }
            & p.sous-titre {
                text-align:center;margin-bottom:2rem;color:var(--primary-color);font-weight:bold;
            }
            & .large-6 {
                text-align:justify;
                & .texte-qualifelec {
                    text-align:left;display:flex;flex-direction:row-reverse;align-items:center;justify-content:flex-end;font-weight:normal;margin-bottom:1rem;color:var(--primary-color);
                    & p {
                        margin:0;font-size:2.2rem;font-weight:bold;text-transform:uppercase;line-height:1;
                        &::first-line {
                            color:var(--tertiary-color);font-size:80%;
                        }
                    }
                    &::after {
                        content:'';display:block;background:url('../img/qualifelec-logo.png') no-repeat center center;background-size:contain;width:4rem;aspect-ratio:133/156;margin-right:1rem;
                    }
                }
                & a[download] {
                    text-align:left;width:100%;position:relative;padding-left:1rem;padding-right:3rem;
                    &::before {
                        content:'+';display:inline-block;font-size:2rem;font-weight:bold;line-height:1;position:absolute;right:1rem;top:50%;transform:translateY(-50%);
                    }
                }
            }
        }
        & .coordonnees {
            text-align:center;font-weight:bold;
            & h2 {
                font-size:2rem;font-weight:bold;text-transform:uppercase;margin-bottom:1rem;letter-spacing:1px;
            }
            & p {
                max-width:26rem;margin-inline:auto;margin-bottom:2rem;
            }
            & .mentions {
                & p {
                    font-weight:normal;font-size:.8rem;text-transform:uppercase;
                    & a {
                        color:var(--tertiary-color);
                    }
                }
            }
        }
    }
}

@keyframes swiperAnim {
    25% {
        left: 0;
        opacity: 0;
    }

    40% {
        left: calc(50%);
        opacity: 1;
    }

    50% {
        left: calc(50% - 25px);
    }

    60% {
        left: calc(50% + 25px);
    }

    70% {
        left: calc(50% - 25px);
        opacity: 1;
    }

    85% {
        left: calc(100% - 50px);
        opacity: 0;
    }
}

/* Responsive */
@media screen and (max-width:1920px) {
    body {
        & header {
            & .header-content {
                & .img-header-homepage {
                    margin-inline:auto -9vw;
                }
            }
        }
    }
}
@media screen and (max-width:1480px) {
    body {
        & header {
            & .header-content {
                & .img-header-homepage {
                    margin-inline:auto -7vw;
                }
            }
        }
    }
}
@media screen and (max-width:1280px) {
    body {
        & header {
            & .header-content {
                & .img-header-homepage {
                    margin-inline:auto -5vw;
                }
            }
        }
    }
}
@media screen and (max-width:1250px) {
    body {
        &.home {
            & header {
                & .header-content {
                    & .img-header-homepage {
                        margin-inline:auto -5vw;margin-top: -3rem;
                    }
                    & .header-text {
                        & h1 {
                            & ~ p {
                                max-width:none;
                            }
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width:1180px) {
    body {
        &.home {
            & header {
                & .header-content {
                    & .img-header-homepage {
                        margin-top: -5rem;
                    }
                }
            }
        }
    }
}
@media screen and (max-width:1060px) {
    body {
        &.home {
            & header {
                & .header-content {
                    & .img-header-homepage {
                        margin-inline:auto -4vw;margin-top: -6rem;
                    }
                }
            }
        }
    }
}
@media screen and (max-width:1024px) {
    body {
        &.home {
            & header {
                & .header-content {
                    & .header-text {
                        & h1 {
                            font-size:3rem;margin-left:1rem;
                        }
                    }
                }
            }
        }
        & main {
            & section {
                &#services {
                    & .cell {
                        & a {
                            font-size:1rem;
                        }
                    }
                }
                & .cell {
                    &:has(picture) ~ .cell {
                        padding-inline: 4rem 0;
                    }
                }
                &#realisations {
                    & .swiper {
                        & .swiper-wrapper {
                            &::before {
                                left:-13rem;max-width:12rem;font-size:1.2rem;
                            }
                        }
                    }
                }
            }
        }
        & footer {
            & .qualifications {
                max-width:90%;
                & .large-6 {
                    & .texte-qualifelec {
                        & p {
                            font-size:1.2rem;
                            &::after {
                                width:3rem;
                            }
                        }
                    }
                }
            }
        }
    }
}
@media screen and (max-width:820px) {
    body {
        &.home {
            & header {
                & .header-content {
                    & .img-header-homepage {
                        margin-inline:auto 0;margin-top:-9rem;
                    }
                }
            }
        }
    }
}
@media screen and (max-width:640px) {
    body {
        & header {
            & nav {
                & .logo {
                    & img {
                        max-width:14.75rem;
                    }
                }
                & a {
                    &.contact-button, &[href^="tel:"] {
                        display:none;
                    }
                }
                & [for="menu-toggle"] {
                    top:1rem;
                }
                & ul.menu {
                    & a {
                        width:20rem;
                        &:hover, &[aria-current="page"], &:focus {
                            width:22rem;
                        }
                    }
                }
            }
        }
        &.home {
            & header {
                & .header-content {
                    & .img-header-homepage {
                        margin-top:0;
                    }
                    & .header-text {
                        margin-left:0;margin-bottom:2rem;
                    }
                }
            }
        }
        &:not(.home) {
            & header {
                & .header-content {
                    & .header-text {
                        margin-top:2rem;
                    }
                }
            }
        }
        & main {
            & section {
                &#realisations {
                    & .swiper {
                        & .swiper-wrapper {
                            &::before, &::after {
                                zoom:.5;
                            }
                        }
                    }
                }
                & .cell {
                    & picture {
                        &.mask {
                            &::after {
                                border:0;
                            }
                        }
                    }
                    &:has(picture) ~ .cell {
                        padding-inline:1rem;margin-top:2rem;
                    }
                }
            }
        }
    }
}

.wpa-test-msg {
    display:none;
}

.img-4 {
    opacity:0;transform:translateX(-50%);animation:appearsInFromRight 1s ease-in-out forwards;animation-delay:.5s;
}
.img-2 {
    opacity:0;transform:translateX(-50%);animation:appearsInFromRight 1s ease-in-out forwards;animation-delay:.25s;
}
.img-3 {
    opacity:0;transform:translateY(-50%);animation:appearFromBottom 1s ease-in-out forwards; animation-delay:.75s;
}
.img-1 {
    opacity:0;transform:translateY(50%);animation:appearFromTop 1s ease-in-out forwards; animation-delay:.75s;
}
.img-0 {
    opacity:0;animation:appearFadeIn 1s 1s ease-in-out forwards;
}
@keyframes appearsInFromRight {
    from {
        opacity:0;transform:translateX(-50%);
    }
    to {
        opacity:1;transform:translateX(0);
    }
}
@keyframes appearFromBottom {
    from {
        opacity:0;transform:translateY(-50%);
    }
    to {
        opacity:1;transform:translateY(0);
    }
}
@keyframes appearFromTop {
    from {
        opacity:0;transform:translateY(50%);
    }
    to {
        opacity:1;transform:translateY(0);
    }
}
@keyframes appearFadeIn {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}



/* ANIMATIONS */
section {
    opacity:0;transform:translateX(-50%);
    &.in-view {
        animation:slideInFromLeft 1s ease-in-out forwards;opacity:0;transform:translateX(-50%);
    }
    &:nth-child(odd) {
        transform:translateX(50%);
        &.in-view {
            animation:slideInFromRight 1s ease-in-out forwards;transform:translateX(50%);
        }
    }
    &#services {
        opacity:1;transform:none;
        & .cell {
            opacity:0;transform:translateY(50%);
        }
        &.in-view {
            animation:none;opacity:1;transform:none;
            & .cell {
                animation:slideInFromBottom 1s ease-in-out forwards;
            }
        }
    }
}
@keyframes animPlayWait {
    0% {
        font-size: 6rem;
        top: calc(50% - 48px);
        left: calc(50% - 48px)
    }

    10% {
        font-size: 10rem;
        top: calc(50% - 80px);
        left: calc(50% - 80px)
    }

    15% {
        font-size: 4rem;
        top: calc(50% - 32px);
        left: calc(50% - 32px)
    }

    20% {
        font-size: 10rem;
        top: calc(50% - 80px);
        left: calc(50% - 80px)
    }

    25% {
        font-size: 6rem;
        top: calc(50% - 48px);
        left: calc(50% - 48px)
    }
}

@keyframes SVGTranslateMaskX {
    0% {transform:translate(-250px, -41px);}
    100% {transform:translate(17px, -41px);}
}
@keyframes SVGTranslateImageX {
    0% {transform:translate(250px, 41px);}
    100% {transform:translate(-17px, 41px);}
}
@keyframes textOpacity {
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes slideInFromBottom {
    0% {opacity:0;transform:translateY(25%);}
    100% {opacity:1;transform:translateY(0);}
}
@keyframes slideInFromLeft {
    0% {opacity:0;transform:translateX(-25%);}
    100% {opacity:1;transform:translateX(0);}
}
@keyframes slideInFromRight {
    0% {opacity:0;transform:translateX(50%);}
    100% {opacity:1;transform:translateX(0);}
}
@keyframes rotate {
    0% {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}