/*
Theme Name: VL Chalonnes
Description: Thème sur mesure du salon Virginie Labes Coiffure & Beauté, à Chalonnes-sur-Loire.
Author: Virginie Labes Coiffure & Beauté
Version: 1.2.0
Requires at least: 5.8
Requires PHP: 7.2
Text Domain: vl-chalonnes
*/
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#F3EFE8}

img{max-width:100%}
a{color:#333A36}
a:hover{color:#36564A}
::selection{background:#83A597;color:#333A36}
a:focus-visible,button:focus-visible{outline:2px solid #36564A;outline-offset:3px}
footer a:hover,#contact a:hover,#barbier a:hover{opacity:.8}
footer a:focus-visible,#contact a:focus-visible,#barbier a:focus-visible{outline-color:#F3EFE8}
.vl-skip{position:absolute;left:-9999px;top:0;background:#333A36;color:#FFFFFF;padding:12px 20px;z-index:100}
.vl-skip:focus{left:0}
.vl-prose{font-size:17px;line-height:1.75;color:#333A36;overflow-wrap:anywhere}
.vl-prose h2,.vl-prose h3,.vl-prose h4{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;color:#333A36;line-height:1.1;margin:1.6em 0 .5em}
.vl-prose h2{font-size:38px}
.vl-prose h3{font-size:30px}
.vl-prose h4{font-size:24px}
.vl-prose p{margin:0 0 1.1em}
.vl-prose ul,.vl-prose ol{margin:0 0 1.1em;padding-left:1.3em}
.vl-prose img{height:auto}
.vl-prose table{width:100%;border-collapse:collapse}
.vl-prose td,.vl-prose th{padding:10px 0;border-top:1px solid #D5C6B5;text-align:left}
.nav-links{display:flex;gap:16px;flex-wrap:wrap}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.vl-car{display:flex;gap:clamp(12px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 max(clamp(20px,5vw,64px),calc((100vw - 1320px)/2 + clamp(20px,5vw,64px)));scroll-padding:0 max(clamp(20px,5vw,64px),calc((100vw - 1320px)/2 + clamp(20px,5vw,64px)));margin:0;list-style:none}
.vl-car::-webkit-scrollbar{display:none}
.vl-car li{flex:0 0 clamp(220px,24vw,330px);scroll-snap-align:start;margin:0}
.vl-car figure,.vl-gal figure{margin:0}
.vl-car img,.vl-gal img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:#D5C6B5;border-radius:4px}
.vl-car li:nth-child(odd) img{border-radius:999px 999px 4px 4px}
.vl-car figcaption,.vl-gal figcaption{margin-top:12px;font-size:14px;line-height:1.4;color:#333A36}
.vl-car-btn{width:52px;height:52px;border-radius:999px;border:1px solid #333A36;background:transparent;color:#333A36;font-size:20px;line-height:1;cursor:pointer}
.vl-car-btn:hover{background:#333A36;color:#F3EFE8}
.vl-car-btn[disabled]{opacity:.3;cursor:default;background:transparent;color:#333A36}
.vl-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:clamp(20px,3vw,40px) clamp(12px,2vw,28px);margin:0;padding:0;list-style:none}
.vl-gal button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;text-align:left;font:inherit;color:inherit}
.vl-gal button img{transition:opacity .2s}
.vl-gal button:hover img{opacity:.88}
.vl-box{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;overflow:hidden}
.vl-box::backdrop{background:rgba(51,58,54,.94)}
.vl-box-in{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:64px 72px 28px;box-sizing:border-box}
.vl-box img{max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;border-radius:4px;display:block}
.vl-box p{margin:0;color:#F3EFE8;font-size:15px;text-align:center}
.vl-box button{position:absolute;width:48px;height:48px;border-radius:999px;border:1px solid #F3EFE8;background:rgba(51,58,54,.6);color:#F3EFE8;font-size:20px;line-height:1;cursor:pointer}
.vl-box button:hover{background:#F3EFE8;color:#333A36}
.vl-box button:focus-visible{outline-color:#F3EFE8}
.vl-box .vl-x{top:14px;right:14px}
.vl-box .vl-p{left:12px;top:50%;transform:translateY(-50%)}
.vl-box .vl-n{right:12px;top:50%;transform:translateY(-50%)}
@media (max-width:600px){.vl-box-in{padding:70px 12px 84px}.vl-box .vl-p,.vl-box .vl-n{top:auto;bottom:18px;transform:none}.vl-box .vl-p{left:calc(50% - 58px)}.vl-box .vl-n{right:calc(50% - 58px)}.vl-car li{flex-basis:68vw}}
@media (prefers-reduced-motion:no-preference){.vl-car{scroll-behavior:smooth}}