/* YALOU — site vitrine. Reproduit design-reference/site-vitrine/Yalou Site.dc.html. */
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:#FBF7F0;color:#2B1408;font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*{box-sizing:border-box}
img{display:block;max-width:100%}
a{color:#2B1408;text-decoration:none}
a:hover{color:#8A4F27}
:focus-visible{outline:2px solid #B8703F;outline-offset:3px;border-radius:6px}
::selection{background:#EAD3BC}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
[hidden]{display:none!important}

.rel{position:relative}
.center{text-align:center}
.wrap{max-width:1280px;margin:0 auto}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(56px,7vw,110px);align-items:center}
.serif,.h2,.h3{font-family:'Bodoni Moda',serif}

.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:#2B1408;color:#FBF7F0;padding:10px 16px;border-radius:10px}
.skip:focus{left:12px;color:#FBF7F0}

/* Sections */
.sec{padding:clamp(80px,10vw,150px) clamp(20px,4vw,48px);overflow:hidden}
.sec--sand{background:#F3EADD;padding-top:clamp(80px,10vw,140px);padding-bottom:clamp(80px,10vw,140px)}
.sec--ivory{background:#FBF7F0}
.sec--linen{background:#EEE4D7}
.sec--shell{background:#F6EEE3}
.sec--dark{position:relative;background:#1E0E06;color:#FBF7F0}

.eyebrow{margin:0 0 20px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#8A5A36}
.eyebrow--gold{display:flex;align-items:center;gap:10px;color:#E9B872}
.h2{margin:0;font-weight:400;font-size:clamp(38px,5vw,70px);line-height:1.02;letter-spacing:-.015em}
.h2--xl{font-size:clamp(38px,5.4vw,76px)}
.h2 em{color:#9A5A2E}
.sec--dark .h2 em{color:#E9B872}
.h3{margin:0 0 10px;font-weight:400;font-size:26px;line-height:1.15}
.body{margin:0;font-size:15px;line-height:1.65;color:#5A4535;text-wrap:pretty}
.lead{margin:28px 0 0;font-size:17px;line-height:1.65;color:#5A4535;text-wrap:pretty}
.sec--dark .lead{color:#D9C8B6}

/* Navigation */
.top{position:sticky;top:0;z-index:50;background:rgba(251,247,240,0.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid rgba(43,20,8,0.07)}
.top__bar{max-width:1280px;margin:0 auto;padding:14px clamp(20px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:24px}
.top__logo{display:flex;align-items:center}
.top__logo img{height:30px;width:auto}
.top__links{display:none;align-items:center;gap:clamp(18px,2.4vw,34px);font-size:14px;font-weight:500}
.top__links a{color:#5A4535}
.top__links a:hover{color:#2B1408}
.top__actions{display:flex;align-items:center;gap:10px}
.top__cta{display:inline-flex;align-items:center;gap:8px;background:#2B1408;color:#FBF7F0;padding:11px 18px;border-radius:999px;font-size:14px;font-weight:600;transition:transform .25s ease, background .25s ease}
.top__cta:hover{background:#4A2614;color:#FBF7F0;transform:translateY(-1px)}
.top__burger{width:44px;height:44px;border-radius:999px;border:1px solid #E4D7C4;background:transparent;display:grid;place-items:center;cursor:pointer;color:#2B1408}
/* Panneau latéral du menu mobile (dialog modal, glisse depuis la droite) */
.drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(86vw,380px);height:100dvh;max-width:none;max-height:none;padding:0;border:0;background:#FBF7F0;color:#2B1408;box-shadow:-30px 0 60px -30px rgba(43,20,8,.35);transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.7,.2,1);overscroll-behavior:contain}
.drawer.is-open{transform:none}
.drawer::backdrop{background:rgba(30,14,6,.45);opacity:0;transition:opacity .45s ease}
.drawer.is-open::backdrop{opacity:1}
.drawer__inner{height:100%;display:flex;flex-direction:column;overflow-y:auto}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid #EDE3D4}
.drawer__head img{height:30px;width:auto}
.drawer__close{width:44px;height:44px;border-radius:999px;border:1px solid #E4D7C4;background:transparent;display:grid;place-items:center;cursor:pointer;color:#2B1408}
.drawer__links{display:flex;flex-direction:column;padding:8px 20px;gap:2px}
.drawer__links a{padding:14px 4px;font-family:'Bodoni Moda',serif;font-size:24px;border-bottom:1px solid #EDE3D4}
.drawer__links a:last-child{border-bottom:0}
.drawer__cta{margin:auto 20px 28px;display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:999px;background:#2B1408;color:#FBF7F0;font-size:15px;font-weight:600}
.drawer__cta:hover{background:#4A2614;color:#FBF7F0}
html.is-locked{overflow:hidden}

/* Boutons des stores */
.stores{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px}
.store{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:10px 22px 10px 18px;border-radius:16px}
.store__txt{display:flex;flex-direction:column;line-height:1.1}
.store__small{font-size:11px}
.store__big{font-size:17px;font-weight:600}
.store--soon{border:1px solid #D9C9B3;color:#2B1408}
.store--soon .store__small{color:#6E5644}
.store--live{background:#2B1408;color:#FBF7F0;transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease}
.store--live .store__small{opacity:.75}
.store--live:hover{color:#FBF7F0;transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(43,20,8,.5)}
.stores--dark .store--soon{border-color:rgba(251,247,240,.3);color:#FBF7F0}
.stores--dark .store--soon .store__small{color:#CDB9A4}
.stores--dark .store--live{background:#FBF7F0;color:#1E0E06}
.stores--dark .store--live .store__small{opacity:.7}
.stores--dark .store--live:hover{color:#1E0E06;box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}

/* 1 · Hero */
.hero{position:relative;overflow:hidden;background:#FBF7F0;padding:clamp(40px,7vw,96px) clamp(20px,4vw,48px) clamp(64px,8vw,120px)}
.hero__glow{position:absolute;right:-12vw;top:-18vw;width:58vw;height:58vw;max-width:900px;max-height:900px;border-radius:50%;background:radial-gradient(closest-side,#F3E6D3,rgba(243,230,211,0))}
.hero__grid{position:relative;max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(48px,6vw,96px);align-items:center}
.hero__text{max-width:600px}
.hero__kicker{margin:0 0 28px;display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#8A5A36}
.hero__kicker span{width:28px;height:1px;background:#B8703F}
.hero__title{margin:0;font-family:'Bodoni Moda',serif;font-weight:400;font-size:clamp(46px,6.6vw,96px);line-height:.98;letter-spacing:-.02em;color:#2B1408;font-variation-settings:'opsz' 96}
.hero__title em{font-style:italic;color:#9A5A2E}
.hero__lead{margin:32px 0 0;max-width:470px;font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:#5A4535;text-wrap:pretty}
.hero__meta{margin:36px 0 0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:#6E5644;letter-spacing:.02em}
.hero__meta .dot{color:#C9B39A}
.hero__visual{position:relative;width:100%;max-width:540px;justify-self:center}
.hero__arch{position:relative;aspect-ratio:607/900;border-radius:50% 50% 28px 28px / 26% 26% 28px 28px;overflow:hidden;background:#EFE3D2;box-shadow:0 40px 80px -40px rgba(43,20,8,.35)}
.hero__arch img{width:100%;height:100%;object-fit:cover}
.hero__ticker{position:absolute;left:clamp(-28px,-3vw,-12px);bottom:12%;display:flex;align-items:center;gap:12px;background:#FFFDF9;border-radius:999px;padding:10px 20px 10px 10px;box-shadow:0 18px 40px -18px rgba(43,20,8,.35)}
.hero__star{width:36px;height:36px;border-radius:50%;background:#2B1408;display:grid;place-items:center}
.hero__ticker-text{display:flex;flex-direction:column;line-height:1.15}
.hero__ticker-label{font-size:11px;color:#6E5644;letter-spacing:.04em}
.hero__ticker-occ{font-family:'Bodoni Moda',serif;font-size:19px;font-style:italic;color:#2B1408;min-width:120px}

/* 2 · Occasions */
.occ__head{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px 64px;align-items:end}
.occ__intro{margin:0;max-width:440px;font-size:17px;line-height:1.65;color:#5A4535;text-wrap:pretty}
.occ__list{margin-top:clamp(48px,6vw,80px);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px clamp(14px,2vw,30px);border-top:1px solid #DFCFB9;border-bottom:1px solid #DFCFB9;padding:clamp(22px,3vw,36px) 0}
.occ__item{background:none;border:0;padding:4px 0;cursor:pointer;font-family:'Bodoni Moda',serif;font-size:clamp(26px,3.4vw,50px);line-height:1.1;letter-spacing:-.01em;color:#9A8370;font-style:normal;transition:color .35s ease}
.occ__item[aria-selected="true"]{color:#2B1408;font-style:italic}
.occ__hint{margin:18px 0 0;display:flex;gap:14px;align-items:baseline;font-size:15px;color:#5A4535;min-height:24px}
.occ__hint-label{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#8A5A36}
.occ__grid{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(20px,3vw,40px);align-items:center}
.occ__col{display:flex;flex-direction:column;gap:clamp(20px,3vw,32px)}
.occ__photo{border-radius:24px;overflow:hidden;background:#EADFCF}
.occ__photo img{width:100%;height:100%;object-fit:cover}
.occ__photo--heels{aspect-ratio:270/232}
.occ__photo--bag{aspect-ratio:287/252}
.occ__center{display:flex;justify-content:center}
.occ__phone{width:100%;max-width:340px}
.occ__phone img{width:100%;height:auto;border-radius:16% / 8%;filter:drop-shadow(0 40px 40px rgba(43,20,8,.18))}
.occ__note{margin:14px 0 0;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#6E5644}
.occ__note span{width:6px;height:6px;border-radius:50%;background:#B8703F}

/* 3 · Styliste IA */
.sty{padding-top:clamp(80px,10vw,150px)}
.sty__glow{position:absolute;left:-10%;top:10%;width:60vw;height:60vw;max-width:820px;max-height:820px;border-radius:50%;background:radial-gradient(closest-side,rgba(184,112,63,.22),rgba(184,112,63,0))}
.sty__visual{display:flex;justify-content:center}
.sty__arch{position:relative;width:100%;max-width:470px;aspect-ratio:470/640;border-radius:50% 50% 28px 28px / 34% 34% 28px 28px;background:#EFE3D2;display:flex;align-items:flex-end;justify-content:center;padding:0 9%}
.sty__phone{width:84%;margin-bottom:-14%}
.sty__phone img{width:100%;height:auto;filter:drop-shadow(0 40px 50px rgba(0,0,0,.45))}
.sty__text{max-width:560px}
.sty__eq{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pill{padding:10px 16px;border:1px solid rgba(251,247,240,.22);border-radius:999px;font-size:14px}
.pill--gold{border:0;font-weight:600;background:#E9A83A;color:#1E0E06}
.op{color:#9C8571}
.sty__quote{margin:48px 0 0;padding:28px 0 0;border-top:1px solid rgba(251,247,240,.14)}
.sty__quote blockquote{margin:0;font-family:'Bodoni Moda',serif;font-style:italic;font-size:clamp(20px,1.9vw,26px);line-height:1.4;color:#F3E8DA}
.sty__quote figcaption{margin-top:14px;font-size:13px;color:#B9A48F}

/* 4 · Dressing */
.dr__text{max-width:540px}
.steps{list-style:none;margin:44px 0 0;padding:0;display:flex;flex-direction:column}
.steps li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:22px 0;border-top:1px solid #E4D7C4}
.steps li:last-child{border-bottom:1px solid #E4D7C4}
.steps__n{font-family:'Bodoni Moda',serif;font-size:28px;line-height:1;color:#B8703F}
.steps strong{display:block;font-size:17px;font-weight:600;margin-bottom:4px}
.steps strong + span{font-size:15px;line-height:1.6;color:#5A4535}
.dr__visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:300px}
.dr__disc{position:absolute;width:min(92%,540px);aspect-ratio:1;border-radius:50%;background:#F1E4D1}
.dr__ring{position:absolute;width:min(70%,400px);aspect-ratio:1;border-radius:50%;border:1px solid #DFCDB4;transform:translate(26%,-28%)}
.dr__phone{position:relative;width:100%;max-width:380px}
.dr__phone img{width:100%;height:auto;filter:drop-shadow(0 40px 40px rgba(43,20,8,.2))}

/* 5 · Composer & visualiser */
.lk__head{max-width:1100px;margin:0 auto;text-align:center}
.lk__title{margin:0 auto;max-width:860px}
.lk__lead{margin:28px auto 0;max-width:560px}
.lk__stage{position:relative;max-width:1100px;margin:clamp(48px,6vw,80px) auto 0;height:clamp(380px,48vw,560px)}
.lk__card{position:absolute;left:50%;top:0;height:100%;aspect-ratio:270/350;padding:0;border:0;background:none;cursor:pointer;transition:transform .8s cubic-bezier(.2,.75,.2,1), opacity .6s ease}
.lk__card img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 24px 30px rgba(43,20,8,.16))}
.lk__card.is-0{transform:translateX(-50%) scale(1);z-index:3;opacity:1}
.lk__card.is-1{transform:translateX(-16%) scale(.84);z-index:2;opacity:.92}
.lk__card.is-2{transform:translateX(-84%) scale(.84);z-index:1;opacity:.92}
.lk__foot{max-width:1100px;margin:36px auto 0;display:flex;flex-direction:column;align-items:center;gap:18px}
.lk__name{margin:0;font-family:'Bodoni Moda',serif;font-style:italic;font-size:22px;color:#2B1408}
.lk__pieces{margin:0;font-size:14px;color:#5A4535;letter-spacing:.02em}
.lk__ctrl{display:flex;gap:10px;margin-top:6px}
.lk__prev{width:48px;height:48px;border-radius:50%;border:1px solid #CDB89E;background:transparent;color:#2B1408;cursor:pointer;display:grid;place-items:center;transition:background .25s ease}
.lk__prev:hover{background:#E3D5C2}
.lk__next{height:48px;padding:0 22px;border-radius:999px;border:0;background:#2B1408;color:#FBF7F0;cursor:pointer;display:flex;align-items:center;gap:10px;font-family:'Manrope',sans-serif;font-size:14px;font-weight:600;transition:transform .25s ease}
.lk__next:hover{transform:translateY(-1px)}

/* 6 · Ma semaine */
.se__title{margin:0 auto;max-width:900px}
.se__grid{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(32px,4vw,64px);align-items:center}
.se__col{display:flex;flex-direction:column;gap:clamp(36px,5vw,72px)}
.se__call--left{text-align:left;padding-right:min(4vw,8px)}
.se__call--right{padding-left:min(4vw,8px)}
.se__label{margin:0 0 8px;display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#8A5A36}
.se__label span{width:40px;height:1px;background:#C9A984}
.se__call--left .se__label{justify-content:flex-end;flex-direction:row-reverse}
.se__text{margin:0;font-family:'Bodoni Moda',serif;font-size:clamp(21px,1.8vw,26px);line-height:1.3}
.se__center{display:flex;justify-content:center}
.se__phone{width:100%;max-width:380px}
.se__phone img{width:100%;height:auto;filter:drop-shadow(0 40px 40px rgba(43,20,8,.18))}

/* 7 · Communauté */
.co__visual{position:relative;padding-bottom:56px}
.co__photo{border-radius:32px;overflow:hidden;aspect-ratio:1122/1402;max-height:760px;background:#E8DAC6}
.co__photo img{width:100%;height:100%;object-fit:cover}
.co__card{position:absolute;right:clamp(-8px,-2vw,-28px);bottom:0;width:min(84%,330px);background:#FFFDF9;border-radius:24px;padding:20px;box-shadow:0 30px 60px -28px rgba(43,20,8,.4)}
.co__card-title{margin:0 0 14px;font-weight:700;font-size:20px;letter-spacing:-.01em}
.co__tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.co__tab{height:40px;border-radius:999px;border:0;cursor:pointer;font-family:'Manrope',sans-serif;font-size:14px;font-weight:600;background:#F3EADD;color:#2B1408;transition:background .3s ease,color .3s ease}
.co__tab.is-on{background:#2B1408;color:#FBF7F0}
.co__chips{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.co__chip{padding:7px 12px;border-radius:999px;background:#F3EADD;color:#2B1408;font-size:13px;font-weight:500}
.co__chip.is-on{background:#2B1408;color:#FBF7F0;font-weight:600}
.co__text{max-width:540px}
.co__rows{margin-top:40px;display:flex;flex-direction:column}
.co__row{display:grid;grid-template-columns:96px 1fr;gap:16px;padding:20px 0;border-top:1px solid #E1D2BE;opacity:.55;transition:opacity .4s ease}
.co__row.is-on{opacity:1}
.co__row-name{font-family:'Bodoni Moda',serif;font-size:24px;line-height:1.2}
.co__row-text{font-size:15px;line-height:1.6;color:#5A4535}

/* 8 · Télécharger */
.dl{padding-top:clamp(80px,10vw,140px);padding-bottom:clamp(80px,10vw,140px)}
.dl__glow{position:absolute;right:-8%;bottom:-30%;width:70vw;height:70vw;max-width:980px;max-height:980px;border-radius:50%;background:radial-gradient(closest-side,rgba(184,112,63,.2),rgba(184,112,63,0))}
.dl__text{max-width:580px}
.dl__logo{width:clamp(180px,22vw,260px);height:auto}
.dl__title{margin:48px 0 0;font-size:clamp(40px,5.6vw,80px);line-height:1;letter-spacing:-.02em}
.dl__lead{max-width:440px}
.dl__visual{display:flex;justify-content:center;align-self:end;margin-bottom:calc(-1 * clamp(80px,10vw,140px))}
.dl__arch{width:100%;max-width:540px;aspect-ratio:3/4.4;border-radius:999px 999px 0 0;overflow:hidden;background:#3A2214}
.dl__arch img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}

/* 9 · Pied de page */
.foot{background:#FBF7F0;padding:clamp(64px,8vw,100px) clamp(20px,4vw,48px) 36px;color:#2B1408}
.foot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:40px}
.foot__logo{width:180px;height:auto}
.foot__title{margin:0 0 16px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#8A5A36}
.foot__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;font-size:15px}
.foot__list [aria-current="page"]{color:#8A4F27}
.foot__mail{font-size:15px;border-bottom:1px solid #D9C9B3;padding-bottom:2px}
.foot__socials{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.foot__socials a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid #E1D2BE;font-size:14px}
.foot__socials a:hover{background:#F3EADD}
.foot__bottom{margin-top:64px;padding-top:24px;border-top:1px solid #E4D7C4;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:#6E5644}

/* Pages légales (générées par build_legal.py) */
.legal{background:#FBF7F0;padding:clamp(48px,7vw,96px) clamp(20px,4vw,48px) clamp(64px,8vw,110px);border-bottom:1px solid #E4D7C4}
.legal__wrap{max-width:760px;margin:0 auto}
.legal__title{margin:0;font-family:'Bodoni Moda',serif;font-weight:400;font-size:clamp(40px,5.4vw,68px);line-height:1.02;letter-spacing:-.015em}
.legal__version{margin:20px 0 0;font-size:13px;color:#6E5644;letter-spacing:.02em}
.legal__body{margin-top:clamp(36px,5vw,56px);font-size:16px;line-height:1.7;color:#5A4535}
.legal__body h2{margin:44px 0 14px;padding-top:28px;border-top:1px solid #E4D7C4;font-family:'Bodoni Moda',serif;font-weight:400;font-size:clamp(24px,2.4vw,30px);line-height:1.2;color:#2B1408}
.legal__body h2:first-child{margin-top:0}
.legal__body p{margin:0 0 14px;text-wrap:pretty}
.legal__body ul{margin:0 0 14px;padding-left:22px}
.legal__body ul ul{margin:8px 0 6px}
.legal__body li{margin:0 0 8px}
.legal__body li::marker{color:#B8703F}
.legal__body li > p{margin:8px 0 0}
.legal__body strong{font-weight:600;color:#2B1408}
.legal__body a{color:#8A4F27;border-bottom:1px solid #D9C9B3}
.legal__body code{font-size:.9em;background:#F3EADD;padding:1px 6px;border-radius:6px}
.legal__todo{background:#F6E3C3;color:#6B3E1C;padding:1px 4px;border-radius:4px}
.legal__back{margin:56px 0 0;font-size:15px}
.legal__back a{border-bottom:1px solid #D9C9B3;padding-bottom:2px}

/* Bascule à 900 px, comme la maquette (wide / narrow) */
.wide-only{display:none}
@media (min-width:900px){
  .top__links{display:flex}
  .top__burger,.drawer{display:none!important}
  .wide-only{display:block}
  .se__call--left{text-align:right}
  .se__call--left .se__label{flex-direction:row}
}
/* Décalage des looks latéraux : 34 % sous 640 px, 62 % au-delà (calc(-50% ± décalage)) */
@media (min-width:640px){
  .lk__card.is-1{transform:translateX(12%) scale(.84)}
  .lk__card.is-2{transform:translateX(-112%) scale(.84)}
}