/* Le Nid à Paris : blocs portés nativement depuis 21st.dev (sources dans site/references/21st-nid). */

/* ===== Portrait de la fondatrice (composition Émeraude) + Mask Reveal (balick) ===== */
.nid-portrait{background:var(--nid-paper);padding:110px max(24px,calc((100vw - 1260px)/2))}
.nid-portrait-grid{display:grid;grid-template-columns:280px 300px minmax(0,1fr);gap:clamp(30px,4.5vw,70px);align-items:center}
.nid-portrait-photo{margin:0;width:280px;height:350px;border-radius:999px 999px 16px 16px;overflow:hidden;background:#e6dccb}
.nid-portrait-photo .pam-picture,.nid-portrait-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.nid-portrait-name{border-bottom:1px solid #1e2b4533;padding-bottom:26px}
.nid-portrait-ornament{width:58px;height:96px;margin-bottom:18px;--nid-stroke:1.1px}
.nid-portrait-eyebrow{margin:0 0 10px;font-size:20px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--nid-ink)}
.nid-portrait-sign{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(44px,4vw,58px);font-weight:700;line-height:1;color:var(--nid-ink)}
.nid-portrait-role{margin:12px 0 0;font-size:14px;color:#5b5f6a}
.nid-portrait-copy h2{font-size:clamp(34px,3.75vw,54px);max-width:640px}
.nid-portrait-copy .pam-prose{max-width:560px;color:#3b404b}
[data-nid-mask]{clip-path:inset(0 100% 0 0);transition:clip-path .85s cubic-bezier(.76,0,.24,1)}
[data-nid-mask] img{transform:scale(1.15);transition:transform 1s cubic-bezier(.76,0,.24,1)}
[data-nid-mask].is-in{clip-path:inset(0 0 0 0)}
[data-nid-mask].is-in img{transform:none}

/* ===== Text Reveal (dillionverma) ===== */
.nid-reveal{position:relative;height:145vh;background:var(--nid-sand)}
.nid-reveal-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;max-width:1180px;margin:0 auto;padding:90px 24px}
.nid-reveal-ornament{width:64px;height:64px;margin-bottom:22px}
.nid-reveal-text{margin:0;font-size:clamp(28px,3.4vw,52px);font-weight:600;line-height:1.18;letter-spacing:-.025em;color:var(--nid-ink)}
.nid-word{position:relative;display:inline-block;margin-right:.18em}
.nid-word-ghost{opacity:.16}
.nid-word-ink{position:absolute;left:0;top:0;opacity:var(--o,0);transition:opacity .15s linear}
.nid-reveal .pam-actions{margin-top:34px}

/* ===== Hover Image List (educalvolpz) ===== */
.nid-hover-section{background:var(--nid-paper)}
.nid-hover-head{max-width:1260px;margin:0 auto 40px}
.nid-hover-list{position:relative;max-width:1260px;margin:0 auto}
.nid-hover-list ul{list-style:none;margin:0;padding:0;border-top:1px solid #1e2b4526}
.nid-hover-list li{border-bottom:1px solid #1e2b4526}
.nid-hover-list a{display:grid;grid-template-columns:60px minmax(0,1fr) minmax(0,1.1fr) 40px;align-items:center;gap:24px;padding:30px 0;color:var(--nid-ink);transition:padding .35s var(--nid-ease),color .3s}
.nid-hover-list a:hover,.nid-hover-list a:focus-visible{padding-left:14px}
.nid-hover-num{font-size:13px;letter-spacing:.14em;color:var(--nid-brass)}
.nid-hover-title{font-size:clamp(24px,2.5vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.nid-hover-meta{font-size:15px;line-height:1.5;color:#4b505c}
.nid-hover-icon{width:34px;height:34px;justify-self:end}
.nid-hover-thumb{display:none}
.nid-hover-preview{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:3}
.nid-hover-img{position:absolute;left:0;top:0;width:300px;height:220px;border-radius:14px;overflow:hidden;box-shadow:0 24px 50px #0b122040;opacity:0;transform:translate3d(var(--x,0),var(--y,0),0) rotate(var(--sk,0deg)) scale(.94);transition:opacity .25s,transform .08s linear}
.nid-hover-img.is-on{opacity:1;transform:translate3d(var(--x,0),var(--y,0),0) rotate(var(--sk,0deg)) scale(1)}
.nid-hover-img .pam-picture,.nid-hover-img img{width:100%;height:100%;object-fit:cover}
.nid-hover-section>.pam-actions{max-width:1260px;margin:36px auto 0}

/* ===== Features With Panel (scrollxui) ===== */
.nid-panel-section{background:var(--nid-sand)}
.nid-panel-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,5vw,80px);max-width:1260px;margin:0 auto;align-items:start}
.nid-panel-list h2{margin-bottom:34px}
.nid-panel-list ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.nid-panel-item{border-radius:16px;box-shadow:0 0 0 1px transparent;transition:box-shadow .25s,background .25s}
.nid-panel-item.is-active{box-shadow:0 0 0 1px var(--nid-ink);background:var(--nid-paper)}
.nid-panel-item button{display:flex;align-items:center;gap:16px;width:100%;padding:16px 18px;background:none;text-align:left;color:var(--nid-ink)}
.nid-panel-num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;background:#1e2b4514;transition:background .25s,color .25s;flex:none}
.nid-panel-item.is-active .nid-panel-num{background:var(--nid-ink);color:var(--nid-cream)}
.nid-panel-icon{width:30px;height:30px}
.nid-panel-title{font-size:19px;font-weight:600;letter-spacing:-.02em}
.nid-panel-body{display:none;padding:0 18px 20px 64px;animation:nid-in .45s var(--nid-ease) both}
.nid-panel-item.is-active .nid-panel-body{display:block}
.nid-panel-body h3{font-size:24px;margin:0 0 6px}
.nid-panel-body .pam-list{margin-top:8px;font-size:15px}
.nid-panel-mobile-media{display:none}
.nid-panel-media{position:sticky;top:120px;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:#d9cfbf}
.nid-panel-frame{position:absolute;inset:0;opacity:0;transform:translateY(12px) scale(.98);transition:opacity .45s var(--nid-ease),transform .45s var(--nid-ease)}
.nid-panel-frame.is-active{opacity:1;transform:none}
.nid-panel-frame .pam-picture,.nid-panel-frame img{width:100%;height:100%;object-fit:cover}
.nid-panel-list .pam-actions{margin-top:28px}

/* ===== Editorial service list (ibrandify) ===== */
.nid-editorial{background:var(--nid-paper)}
.nid-editorial-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;max-width:1100px;margin:0 auto 34px}
.nid-editorial-head>p{max-width:360px;font-size:15px;line-height:1.6;color:#4b505c;margin:0}
.nid-editorial-rows{max-width:1100px;margin:0 auto;border-bottom:1px solid #1e2b4526}
.nid-editorial-row{border-top:1px solid #1e2b4526}
.nid-editorial-row button{display:grid;grid-template-columns:48px 34px minmax(0,1fr) auto 26px;align-items:center;gap:18px;width:100%;padding:24px 0;background:none;text-align:left;color:var(--nid-ink)}
.nid-editorial-num{font-size:12px;letter-spacing:.12em;color:var(--nid-brass)}
.nid-editorial-icon{width:30px;height:30px}
.nid-editorial-name{font-size:clamp(20px,2vw,28px);font-weight:600;letter-spacing:-.03em;transition:transform .25s var(--nid-ease)}
.nid-editorial-row button:hover .nid-editorial-name,.nid-editorial-row button[aria-expanded=true] .nid-editorial-name{transform:translateX(8px)}
.nid-editorial-price{font-size:14px;color:#4b505c;text-align:right}
.nid-plus{position:relative;width:16px;height:16px}
.nid-plus::before,.nid-plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transition:transform .3s}
.nid-plus::after{transform:rotate(90deg)}
button[aria-expanded=true] .nid-plus::after{transform:rotate(0)}
.nid-editorial-detail{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .3s ease-out,opacity .3s}
.nid-editorial-detail>div{overflow:hidden}
.nid-editorial-detail p{margin:0;padding:0 0 22px 100px;max-width:760px;font-size:15px;line-height:1.6;color:#3b404b}
.nid-editorial-row.is-open .nid-editorial-detail{grid-template-rows:1fr;opacity:1}
.nid-editorial-note{max-width:1100px;margin:22px auto 0;font-size:14px;color:#4b505c}
.nid-editorial>.pam-actions{max-width:1100px;margin:28px auto 0}
.nid-editorial+.pam-gallery{background:var(--nid-paper)}

/* ===== Sticky scroll cards (minhxthanh) ===== */
.nid-cards-section{background:var(--nid-sand)}
.nid-cards{max-width:1180px;margin:0 auto}
.nid-card{position:sticky;top:calc(110px + var(--i) * 26px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:40px;align-items:center;min-height:380px;padding:clamp(28px,4vw,54px);border-radius:28px;margin-bottom:40px;box-shadow:0 -10px 40px #0b122014}
.nid-card-0{background:var(--nid-paper);color:var(--nid-ink)}
.nid-card-1{background:#e9dcc6;color:var(--nid-ink)}
.nid-card-2{background:var(--nid-ink);color:var(--nid-cream)}
.nid-card-2 h3,.nid-card-2 .pam-prose{color:var(--nid-cream)}
.nid-card-num{display:block;font-size:13px;letter-spacing:.16em;color:var(--nid-brass);margin-bottom:16px}
.nid-card h3{font-size:clamp(28px,2.8vw,40px);line-height:1.08;margin:0}
.nid-card .pam-prose{max-width:460px}
.nid-card-media{height:100%;min-height:260px;border-radius:18px;overflow:hidden;display:grid;place-items:center}
.nid-card-media .pam-picture,.nid-card-media img{width:100%;height:100%;object-fit:cover}
.nid-card-ornament{width:min(70%,220px);height:min(70%,220px);--nid-stroke:1px}
.nid-card-2 .nid-card-ornament{color:var(--nid-brass-soft)}

/* ===== Interactive Timeline (shadcnspace) ===== */
.nid-timeline{background:var(--nid-paper)}
.nid-timeline-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(24px,4vw,60px);max-width:1260px;margin:0 auto}
.nid-timeline-rail{display:flex;flex-direction:column;gap:10px;border-left:1px solid #1e2b4526;padding-left:18px}
.nid-timeline-rail button{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:999px;border:1px solid #1e2b4533;background:transparent;color:var(--nid-ink);font-size:15px;font-weight:600;text-align:left;transition:background .25s,color .25s}
.nid-timeline-rail button .nid-icon{width:24px;height:24px}
.nid-timeline-rail button[aria-selected=true]{background:var(--nid-ink);color:var(--nid-cream);border-color:var(--nid-ink)}
.nid-timeline-rail button[aria-selected=true] .nid-icon{color:var(--nid-brass-soft)}
.nid-timeline-panel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;animation:nid-in .5s var(--nid-ease) both}
.nid-timeline-panel[hidden]{display:none}
.nid-timeline-media{aspect-ratio:4/3;border-radius:22px;overflow:hidden}
.nid-timeline-media .pam-picture,.nid-timeline-media img{width:100%;height:100%;object-fit:cover}
.nid-timeline-copy h3{font-size:clamp(28px,2.6vw,38px);margin:0}
.nid-timeline>.pam-actions{max-width:1260px;margin:30px auto 0}

/* ===== Zoom Parallax (efferd) ===== */
.nid-zoom{position:relative;height:260vh;background:var(--nid-deep)}
.nid-zoom-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.nid-zoom-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform:scale(var(--s,1));will-change:transform}
.nid-zoom-frame{position:relative;width:25vw;height:25vh;overflow:hidden;border-radius:6px}
.nid-zoom-frame .pam-picture,.nid-zoom-frame img{width:100%;height:100%;object-fit:cover}
.nid-zoom-1 .nid-zoom-frame{top:-30vh;left:5vw;height:30vh;width:35vw}
.nid-zoom-2 .nid-zoom-frame{top:-10vh;left:-25vw;height:45vh;width:20vw}
.nid-zoom-3 .nid-zoom-frame{left:27.5vw;height:25vh;width:25vw}
.nid-zoom-4 .nid-zoom-frame{top:27.5vh;left:5vw;height:25vh;width:20vw}
.nid-zoom-5 .nid-zoom-frame{top:27.5vh;left:-22.5vw;height:25vh;width:30vw}
.nid-zoom-6 .nid-zoom-frame{top:22.5vh;left:25vw;height:15vh;width:15vw}
.nid-zoom-copy{position:absolute;left:0;right:0;bottom:8vh;text-align:center;color:var(--nid-cream);opacity:var(--c,0);padding:0 24px;z-index:2;text-shadow:0 2px 24px #0b122099}
.nid-zoom-copy h2{color:inherit;font-size:clamp(36px,4.5vw,64px)}
.nid-zoom-copy .pam-prose{max-width:640px;margin:16px auto 0}
.nid-zoom-copy .pam-eyebrow{color:var(--nid-cream)}

/* ===== Scroll Reveal Image (unlumen) ===== */
.nid-scrollimg{background:var(--nid-sand);padding:90px 0 100px}
.nid-scrollimg-head{max-width:900px;margin:0 auto 40px;text-align:center;padding:0 24px}
.nid-scrollimg-head .pam-actions{justify-content:center}
.nid-scrollimg-frame{position:relative;height:78vh;width:var(--w,40vw);margin:0 auto;border-radius:var(--r,0px);overflow:hidden}
.nid-scrollimg-inner{position:absolute;left:50%;top:0;width:95vw;height:100%;transform:translateX(-50%) scale(var(--sc,1.6))}
.nid-scrollimg-inner .pam-picture,.nid-scrollimg-inner img{width:100%;height:100%;object-fit:cover}

/* ===== Footer sur photo de Paris (composition Émeraude) ===== */
.nid-footer{background:var(--nid-ink);color:var(--nid-cream);padding:85px max(24px,calc((100vw - 1260px)/2)) 28px}
.nid-footer::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--nid-footer-bg,none) center/cover no-repeat}
.nid-footer::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#1e2b45e0 0,#121c2ff5 100%)}
.nid-footer a,.nid-footer p,.nid-footer nav{color:var(--nid-cream)}
.nid-footer .pam-footer-nav a{font-size:18px}
.nid-footer .pam-footer-brand>a:first-child{width:auto;display:inline-block}
.nid-footer .pam-footer-brand img{height:150px;width:auto}
.nid-footer .pam-footer-bottom{border-top-color:#f2e7d62b}
.nid-footer .nid-footer-giant span{-webkit-text-stroke:1px #f2e7d626;background:linear-gradient(180deg,#f2e7d61f 0,transparent 75%);-webkit-background-clip:text;background-clip:text}
.nid-footer .pam-signature-strip{background:transparent;border-top:1px solid #f2e7d61f;margin-top:24px}
.nid-footer .pam-signature{color:var(--nid-cream)}
.nid-marquee{background:var(--nid-paper);color:var(--nid-ink);border-top:1px solid #1e2b451f;border-bottom:1px solid #1e2b451f}

@media(max-width:1000px){
  .nid-portrait-grid{grid-template-columns:200px minmax(0,1fr)}
  .nid-portrait-photo{width:200px;height:250px}
  .nid-portrait-copy{grid-column:1/-1}
  .nid-panel-grid,.nid-timeline-grid,.nid-timeline-panel{grid-template-columns:1fr}
  .nid-panel-media{display:none}
  .nid-panel-item.is-active .nid-panel-mobile-media{display:block;aspect-ratio:4/3;border-radius:16px;overflow:hidden;margin-top:14px}
  .nid-panel-mobile-media .pam-picture,.nid-panel-mobile-media img{width:100%;height:100%;object-fit:cover}
  .nid-panel-body{padding-left:18px}
  .nid-timeline-rail{flex-direction:row;overflow-x:auto;border-left:0;padding:0 0 6px;scroll-snap-type:x mandatory}
  .nid-timeline-rail button{flex:none;scroll-snap-align:start}
  .nid-card{grid-template-columns:1fr;top:calc(90px + var(--i) * 18px);min-height:0}
  .nid-card-media{min-height:220px}
}
@media(max-width:700px){
  .nid-portrait{padding:70px 22px}
  .nid-portrait-grid{grid-template-columns:1fr;justify-items:start}
  .nid-hover-list a{grid-template-columns:40px minmax(0,1fr) 30px;gap:14px;padding:22px 0}
  .nid-hover-meta{grid-column:2/3;grid-row:2}
  .nid-hover-thumb{display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;margin:0 0 22px}
  .nid-hover-thumb .pam-picture,.nid-hover-thumb img{width:100%;height:100%;object-fit:cover}
  .nid-hover-preview{display:none}
  .nid-editorial-head{flex-direction:column;align-items:flex-start}
  .nid-editorial-row button{grid-template-columns:34px minmax(0,1fr) 22px;gap:12px}
  .nid-editorial-icon{display:none}.nid-editorial-price{grid-column:2;grid-row:2;text-align:left}
  .nid-editorial-detail p{padding-left:46px}
  .nid-reveal{height:130vh}.nid-zoom{height:220vh}
  .nid-zoom-frame{width:40vw;height:20vh}
  .nid-scrollimg-frame{height:60vh}
  .nid-footer .pam-footer-brand img{height:110px}
}
@media(prefers-reduced-motion:reduce){
  [data-nid-mask]{clip-path:none}[data-nid-mask] img{transform:none}
  .nid-reveal{height:auto}.nid-reveal-sticky{position:relative;height:auto}.nid-word-ink{opacity:1}
  .nid-zoom{height:auto}.nid-zoom-sticky{position:relative;height:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:8px}.nid-zoom-layer{position:relative;transform:none}.nid-zoom-frame{position:static;width:100%;height:auto;aspect-ratio:4/3}.nid-zoom-copy{position:relative;opacity:1;grid-column:1/-1}
  .nid-scrollimg-frame{width:92vw}.nid-scrollimg-inner{transform:translateX(-50%)}
  .nid-card{position:relative;top:auto}
}
/* Signature Klymax (composition ruinart-klymax.pages.dev) */
.nid-footer .nid-signature{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;font-size:13px;letter-spacing:.02em;color:var(--nid-cream)}
.nid-footer .nid-signature a{display:inline-flex;align-items:center;gap:8px;color:var(--nid-cream);text-decoration:none}
.nid-footer .nid-signature img{width:auto;height:22px;display:block}
.nid-footer .nid-signature strong{font-weight:700}
.nid-footer .nid-signature a:hover strong,.nid-footer .nid-signature a:focus-visible strong{text-decoration:underline;text-underline-offset:3px}
