/*!
Theme Name: Varidel (2026)
Description: Style pour le site de l’entreprise Nature+Jardins de Nicolas Varidel
Version: 1.2.8
Text Domain: varidel

Varidel is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

/* Document  */
@font-face{font-family:Varidel;src:url(polices/Varidel-Regular.woff2) format("woff2"),url(polices/Varidel-Regular.woff) format("woff");font-weight:400;font-style:normal}
@font-face{font-family:Rebond;src:url(polices/ESRebondGrotesque-Regular.woff2) format("woff2"),url(polices/ESRebondGrotesque-Regular.woff) format("woff");font-weight:400;font-style:normal}
@font-face{font-family:Rebond;src:url(polices/ESRebondGrotesque-Italic.woff2) format("woff2"),url(polices/ESRebondGrotesque-Italic.woff) format("woff");font-weight:400;font-style:italic}
@font-face{font-family:Rebond;src:url(polices/ESRebondGrotesque-Bold.woff2) format("woff2"),url(polices/ESRebondGrotesque-Bold.woff) format("woff");font-weight:700;font-style:normal}
@font-face{font-family:Rebond;src:url(polices/ESRebondGrotesque-BoldItalic.woff2) format("woff2"),url(polices/ESRebondGrotesque-BoldItalic.woff) format("woff");font-weight:700;font-style:italic}

main{display:block}
hr{box-sizing:content-box;height:0;overflow:visible}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-.25em}
sup{top:-.5em}
img{border-style:none}
progress{vertical-align:baseline}
textarea{overflow:auto}
[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}

details{display:block}
summary{display:list-item}
template{display:none}
[hidden]{display:none}

*,::after,::before{box-sizing:inherit}

html{box-sizing:border-box;line-height:1.2rem;-webkit-text-size-adjust:100%;font-size:1vw;--main-color:#87e873; --textcolor:#111;}
body{margin:0;background:var(--main-color);color:var(--textcolor);--swiper-navigation-size:2rem}
body,button,input,optgroup,select,textarea{color:var(--textcolor);font-family:Rebond,"Helvetica Neue",sans-serif}

#page {position:relative; display: block; padding-bottom:2rem;}
#fond{width:100%;height:58vw; transition:all 1s}
#fond.pagetop{opacity:1; transform:translateY(0%)}
#fond.pagedown{opacity:0.1;transform:translateY(-100%)}
#fond img{object-fit:cover;width:inherit;height:inherit}

#primary.pagetop {padding:2rem 0;}
#primary.pagedown {padding:0;}

h1,h2,h3,h4,h5,h6,p{clear:both;margin:0;padding:0}
h1{font-family:Varidel;font-weight:400;text-rendering:geometricPrecision}
h2,h3,h4{font-weight:400; margin-bottom:1rem;}
h2{font-size:1.75rem;line-height:2rem; font-weight:700;}
h3{font-size:1.75rem;line-height:2rem}
figcaption,p, #partenariats li{font-size:1.25rem;line-height:1.5rem}
figcaption{padding-top:.2rem}
ul {list-style-type: none; padding:0;}

header{position:relative;margin:0;padding:0; overflow: hidden;}
header.pagetop {max-height:auto;}
header.pagedown {max-height:50vh;}

.site-branding{position:inherit; z-index:20;}
#titre,#titre-effect{position:absolute;line-height:1;overflow:hidden; transition: transform 0.3s ease-in-out;}
#titre span,#titre-effect span{transition:font-size 0.2s ease-out}
#titre-effect.pagetop,#titre.pagetop{display:grid;position:fixed;top:1%;left:1%;text-align:center;font-size:13vw;width:98vw;height:58vw;max-height:100vh;grid-template-columns:1fr;grid-template-rows:repeat(4,1fr);letter-spacing:0vw}
#titre{color:var(--main-color)}
#titre.pagedown span, #titre-effect.pagedown span{color:var(--main-color);font-size:2.5vw;margin:0 1.5vw 0 0;letter-spacing:.25vw; text-align: left;}
#titre span:nth-child(3)::after, #titre-effect span:nth-child(3):after{content:'+';}
#titre.pagedown span:nth-child(3), #titre-effect.pagedown span:nth-child(3){margin-right:0;}
#titre.pagedown, #titre-effect.pagedown{position:fixed;display:flex;width:100vw;background:#fff;top:0;left:0;padding:2vh 2vw;}
#titre span{margin:0;padding:0}

.goingup {transform: translateY(0); }
.goingdown {transform: translateY(-10rem);}

#site-navigation {transition:transform 0.1s ease-in-out;}
#site-navigation svg { height:100%;}
#site-navigation svg .hidden {display:none;}
#site-navigation svg .visible {display:block;}
#site-navigation .icon {fill:var(--main-color);}
#site-navigation .close {fill:white;}
#site-navigation button svg .icon, #site-navigation button svg .close {transition:fill 0.5s;}
#site-navigation button:hover .icon {fill:var(--textcolor);}
#site-navigation button:hover .close {fill:var(--textcolor);}
#site-navigation button:hover, #site-navigation button:active {cursor:pointer;}
#site-navigation{display:flex;justify-content:right;width:20vw;padding:2vh 0;position:fixed;top:0;right:0;height:auto;z-index:200; }
#site-navigation button {height:2rem; margin-right:2vw; padding:0; transform:translateY(.2rem); background:none; border:none; }
#site-navigation.contactopened #menu {display: none;}
#site-navigation.menuopened #contact {display: none;}
#site-navigation.contactopened button, #site-navigation.menuopened button {height:4rem; }

cite,dfn,em,i{font-style:italic}
#main{position:relative;z-index:1}
figure{margin:1em 0;padding:0}
table{margin:0 0 1.5em;width:100%}

#intro{padding:0 2vw; margin-bottom:5rem;}
#intro h2 {margin-bottom: 4rem;}
#introduction .wp-block-column:first-of-type {padding:.5rem 2rem 0 0;}
#introduction p {margin:.5rem 0 1rem ; font-size:1.75rem; line-height:2.25rem;}
#content{margin:0;padding:0}

.section{position:relative;width:100%;margin:4rem 0;display:grid;grid-template-columns:1fr 3fr;grid-template-rows:7vh 1fr;grid-template-areas:"intro nav" "intro slider"; transition:all 0.3s ease-in-out;}
.section.out {padding:50vh 0;}
.section.in {padding:2vh 0;}
.serviceintro{grid-area: "intro";padding:0 3vw 0 2vw}
.specialites .sliderimage figure {height:95%;max-height:80vh}
.a-propos .sliderimage figure {height:100%; max-height:50vw}
.sliderimage figure img {height:inherit;width:100%;object-fit:cover}
.a-propos .sliderimage figure img {height:calc(100% - 6rem);}
.section figcaption {position: absolute; bottom:0; background:var(--main-color); padding-top:.4rem;}
.serviceintro h2 {height:auto;min-height:5vh;padding-top:1vh;margin-bottom:1rem;}
.serviceintro h3 {padding-top:.75rem;}
.subtitle{grid-column:1;grid-row:1}
.specialites, .a-propos {width:100%;height:inherit; grid-area:slider;position:relative;padding:0;margin:1rem 0;}
.swiper-nav{grid-area:nav;display:flex;justify-content:space-between;height:5vh;padding-top:0.5rem;}
.swiper-button-next{position:relative;width:40%}
.swiper-button-prev{position:relative;width:40%}
.swiper-button-next,.swiper-button-prev{color:var(--textcolor)}
.swiper-button-prev{justify-content:left}
.swiper-button-next{justify-content:right;padding-right:2vw}
.swiper-button-prev:hover,.swiper-button-next:hover,.swiper-button-prev:active,.swiper-button-next:active{color:white;}

#partenariats-wrap {margin:0 0 5rem 0; padding:0 2vw; }
#partenariats .wp-block-columns {margin-bottom:2rem;}
#partenariats .wp-block-columns .wp-block-column:first-child {padding:0 2rem 0 0;}
#partenariats ul {margin:0; display:grid; grid-template-columns: repeat(3, 1fr); column-gap: 2rem;}
#partenariats li {padding:0 0 1rem 0;}

#page-contact{position:fixed;z-index:20;top:0;width:100%;height:100vh;background:var(--main-color); color:var(--textcolor); font-size:2rem; padding:10vh 2vw;}
#page-contact.hidden {display:none;}
#page-contact.visible {display:block;}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}
button,input{overflow:visible}
button,select{text-transform:none}
[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}
fieldset{padding:4rem 0; border:none;}
legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
.form-field {margin:1rem 0;}
#page-contact button,input[type=button],#page-contact input[type=reset],#page-contact input[type=submit]{border:0.2rem solid var(--textcolor);border-radius:3em;background:var(--main-color);color:var(--textcolor);line-height:1;padding:1rem; width:100%; margin:1rem 0; transition:all 0.2s;}
#page-contact button:hover,#page-contact input[type=button]:hover,#page-contact input[type=reset]:hover,#page-contact input[type=submit]:hover{cursor:pointer; color:var(--main-color); background: var(--textcolor);}
input, textarea{background:none; border:0.2rem solid var(--textcolor); width:100%;}

#colophon {transition:all 0.5s;}
.as-footer h3, .as-footer h4, .as-footer h5, .as-footer p, .as-footer ul {font-size:1rem; line-height:1.5rem; margin:0; padding:0; font-weight: 400; }
.as-menu h3, .as-menu h4, .as-menu h5, .as-menu p, .as-menu ul, #page-contact p {font-size:2rem; line-height:3rem; margin:0; padding:0; font-weight: 400;}
#colophon h3:hover, #colophon li:hover, #colophon h4:hover {cursor:pointer; color:black; transition:all 0.2s;}
.site-info ul {list-style-type: none; padding:0;}
.as-footer .site-info {display:flex; justify-content: space-between;}
.as-menu .site-info {display:grid; grid-template-columns: 1fr 1fr; grid-template-rows:1fr 1fr; row-gap:5rem;}
.as-menu {position:fixed; top:0; z-index:25; width:100%; height:100vh; color:white; background:var(--main-color);padding:2rem 2vw;}
.as-footer {position:relative; background:white; color:var(--main-color);padding:2rem 2vw;}
.as-footer .footerblock {display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 2vw; width:auto; }
.as-menu {overflow-y:scroll;}
.as-menu .footerblock {display: block; }
.as-menu .footerblock:last-child {grid-column:1 / span 2; display:grid; grid-template-columns: 1fr 1fr;}


a{background-color:transparent; text-decoration: none;}
a{color:white;}
a:visited{color:var(--textcolor); opacity:0.8;}
a:active,a:focus,a:hover{color:white;}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
#content a {color:var(--textcolor);}
#content a:after {content:'\00A0\2197';}
#content a:hover, #content a:active, #content a:focus {color:white;}
#credits a, #credits a:visited {color:white; opacity:0.9;}

#credits {position:absolute; width:100%; padding:.2rem 2vw .4rem 2vw; height:auto; margin:0; bottom:0; color:white; background:var(--main-color);}
#credits .wp-block-columns {margin-bottom:0 !important;}
#credits p {font-size:0.75rem; padding:0; margin:0; letter-spacing: 1px;}

.sticky{display:block}
.page,.post{margin:0 0 1.5em}
.updated:not(.published){display:none}
.entry-content,.entry-summary,.page-content{margin:1.5em 0 0}
.page-links{clear:both;margin:0 0 1.5em}
.comment-content a{word-wrap:break-word}
.bypostauthor{display:block}
.widget{margin:0 0 1.5em}
.widget select{max-width:100%}
.comment-content .wp-smiley,.entry-content .wp-smiley,.page-content .wp-smiley{border:none;margin-bottom:0;margin-top:0;padding:0}
.wp-caption{margin-bottom:1.5em;max-width:100%}
.wp-caption img[class*=wp-image-]{display:block;margin-left:auto;margin-right:auto}
.wp-caption .wp-caption-text{margin:.8075em 0}
.wp-caption-text{text-align:center}

.gallery-caption{display:block}
.infinite-scroll .posts-navigation,.infinite-scroll.neverending .site-footer{display:none}
.infinity-end.neverending .site-footer{display:block}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#21759b;display:block;font-size:.875rem;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
#primary[tabindex="-1"]:focus{outline:0}
.alignleft{float:left;margin-right:1.5em;margin-bottom:1.5em}
.alignright{float:right;margin-left:1.5em;margin-bottom:1.5em}
.aligncenter{clear:both;display:block;margin-left:auto;margin-right:auto;margin-bottom:1.5em}

@media all and (orientation:portrait) and (max-width: 1024px) {
    html{font-size:1.25vw;}

    #masthead.pagetop {width:100%; height:100vh; overflow-x:hidden;}
    #fond{width:90vh;height:100vw;transform-origin: top left; }
    #fond.pagetop { transform:rotateZ(90deg) translateY(-100%) translateX(0vw); }
    #fond.pagedown {transform:rotateZ(90deg) translateY(-100%) translateX(-150vw); }

    #titre,#titre-effect{line-height:1.1}
    #titre.pagedown span, #titre-effect.pagedown span{font-size:5vw;letter-spacing:.25vw}
    #titre.pagedown, #titre-effect.pagedown{position:fixed;display:flex;flex-wrap:wrap;width:100%;background:#fff;top:0;left:0;padding:1.75vh 3vw 2vh 3vw;}
    #titre.pagedown span:nth-child(3)::after, #titre-effect.pagedown span:nth-child(3):after{padding:0 0.5rem 0 1rem;}
    #titre-effect.pagedown{opacity:0;}
    #titre span{margin:0;padding:0}
    #titre-effect.pagetop, #titre.pagetop {top:10vh; height:80vh;}
    
    .goingdown {transform: translateY(-20rem);}
    

    #site-navigation{flex-wrap: wrap;width:10vw;height:auto;z-index:200;  }
    #site-navigation svg { height:100%;}
    #site-navigation button {height:4vw; margin:0 3vw 1.75rem 0; padding:0; transform:translateY(0.2rem); }


    .section{max-height:auto;margin:5rem 0;grid-template-columns:1fr;grid-template-rows:auto auto 1fr;grid-template-areas:".""nav""images";}
    .section.out {padding:50vh 0;}
    .section.in {padding:2vh 0;}
    .serviceintro{grid-row:1 / span 1;grid-column:1;padding:0 3vw 0 2vw; margin-bottom:0; display:grid; grid-template-columns:1fr 3fr;}
    .sliderimage{margin-right:2vw}
    .specialites .sliderimage figure{height:95%;max-height:80vw}
    .a-propos .sliderimage figure{height:95%; max-height:66.66vw}
    .serviceintro h2{padding-top:0; padding-right:2vw;}
    .subtitle{grid-column:1;grid-row:1}
    .specialites, .a-propos{width:100%;grid-area:images;grid-row:3;grid-column:1;padding:0;margin:2rem 0;}
    .swiper-nav{margin-top:2rem;}
    .swiper-button-prev{padding-left:2vw;}
    .section figcaption {padding-left:2vw;}

    #partenariats-wrap h2 {margin:3rem 0;}
    #partenariats .wp-block-columns {margin-bottom:4rem;}
    #partenariats ul {grid-template-columns: repeat(2, 1fr);}
    #partenariats li {padding:0 0 1.5rem 0;}
    
    .as-footer .site-info {display:grid; grid-template-columns: repeat(2, 1fr); grid-template-rows:1fr 1fr; row-gap:3rem;}
    .as-footer .footerblock {display: grid; grid-template-columns: inherit;}
    .as-footer .footerblock:last-child {grid-column:1 / span 3; display:grid; grid-template-columns: 1fr 1fr;}
    .as-footer h3, .as-footer h4, .as-footer h5, .as-footer p, .as-footer ul {font-size:1.5rem; line-height:1.75rem;  }

}

@media all and (orientation:portrait) and (max-width:600px) {
    html{font-size:2vw;}
    #titre,#titre-effect{line-height:1.4}
    #titre.pagedown, #titre-effect.pagedown{padding:1.75vh 4vw 1.75vh 4vw;}
    #titre.pagedown span:nth-child(3)::after, #titre-effect.pagedown span:nth-child(3):after{padding:0 0.25rem 0 0.5rem;}



    figcaption,p, #partenariats li{font-size:1.25rem;line-height:1.75rem}


    #site-navigation{width:6rem;height:auto; }
    #site-navigation svg { height:100%;}
    #site-navigation button {height:1.7rem; margin:0 4vw 2rem 0; transform:translateY(0.3rem); }

    #intro{display:grid;grid-template-columns:1fr;grid-template-rows:1fr}
    #intro p {line-height: 2.5rem;}
    h2 {font-weight: bold;}

    .section{grid-template-columns:1fr;grid-template-rows:repeat (4, auto);grid-template-areas:"." "." "nav" "images";}
    .serviceintro{padding:1rem 2vw 0 2vw; margin-bottom:2rem; display:block;}
    .specialites .sliderimage figure{height:95%;max-height:110vw}
    .a-propos .sliderimage figure{height:95%; max-height:70vw}

    .subtitle{grid-column:1;grid-row:1}
    .specialites, .a-propos{grid-row:4;}
    .swiper-nav{margin-top:1rem;}

    .as-footer .site-info {display:grid; grid-template-columns: repeat(2, 1fr); grid-template-rows:1fr 1fr; row-gap:2rem;}
    .as-footer .footerblock {display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr;}
    .footerblock p:first-of-type, .footerblock h3:first-of-type {margin-bottom:1rem;}
    .as-footer .footerblock:last-child {grid-column:1 / span 2; display:grid; grid-template-columns: 1fr 1fr;}
    .as-menu {padding-top:5vh;}
    .as-menu .site-info {display:grid; grid-template-columns: 1fr; grid-template-rows:auto; row-gap:0;}
    .as-menu .footerblock {display:block; grid-column: 1; margin:2rem;}
    .as-menu .footerblock div {margin-bottom:3rem;}
    .as-menu .footerblock:last-child {display:block;}
    .as-menu h3 {font-size:3rem; line-height:3.5rem;}
    .as-menu h4, .as-menu h5, .as-menu p, .as-menu ul, #page-contact p {font-size:3rem; line-height:3.5rem;}
    .as-menu li, .as-menu .footerblock p {padding:2rem 0 0 2rem;}
    .as-menu #adresse {margin:0; margin:0 2rem 2rem 0;}
    .as-menu #header-specialites {margin-top:2rem;}


    #page-contact{font-size:3rem; padding:10vh 2vw;}
    fieldset{padding:5rem 0; border:none;}
    .form-field {margin:2rem 0;}

    #credits a {display:block;}
    #credits p {line-height:1rem; padding:1rem;}
    #credits .has-text-align-center, #credits .has-text-align-right {text-align:left !important;}
}