.cat-nord { padding:clamp(22px,4vw,64px); background:#d4d8d7; color:white; }
.cat-nord__scene { position:relative; isolation:isolate; min-height:660px; height:calc(90svh - 100px); max-height:950px; overflow:hidden; border-radius:20px; background:#5a6970 url('../images/catalogue/chaussettes/chaussettes-01-1448.webp') center 48%/cover no-repeat; box-shadow:0 25px 65px #14293230; }
.cat-nord__scene::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#122b3930,transparent 35%,#09233588); }
.cat-nord__glass { position:absolute; inset:0 50% 0 0; z-index:-1; background:#d7dfe039; backdrop-filter:blur(22px) saturate(.65); -webkit-backdrop-filter:blur(22px) saturate(.65); border-right:1px solid #ffffff35; }
.cat-nord__label { position:absolute; left:4%; top:5%; font-size:12px; line-height:1.5; letter-spacing:.1em; text-transform:uppercase; }
.cat-nord__crumbs { position:absolute; top:5%; right:4%; color:white; font-size:13px; }
.cat-nord__crumbs a { color:white; }
.cat-nord__heading { position:absolute; top:31%; left:7%; right:5%; }
.cat-nord__heading>p { margin-bottom:18px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
.cat-nord__heading h1 { margin:0; font-size:clamp(64px,9.5vw,156px); line-height:.95; font-weight:800; letter-spacing:-.055em; color:white; text-transform:uppercase; }
.cat-nord__heading h1 span { display:block; margin-top:12px; }
.cat-nord__copy { position:absolute; bottom:8%; left:7%; max-width:43%; }
.cat-nord__copy p { font-size:clamp(14px,1.1vw,18px); line-height:1.65; color:#ffffffed; }
.cat-nord__copy a { display:inline-flex; gap:26px; align-items:center; margin-top:18px; padding-bottom:8px; color:white; font-size:12px; text-transform:uppercase; letter-spacing:.1em; border-bottom:1px solid #ffffff80; text-decoration:none; }
.cat-nord__copy a span { font-size:22px; transition:transform .3s; }
.cat-nord__copy a:hover span { transform:translate(4px,4px); }
.cat-nord__index { position:absolute; bottom:8%; right:4%; font-size:10px; letter-spacing:.15em; writing-mode:vertical-rl; }
#collections { scroll-margin-top:110px; }
@media(max-width:700px) { .cat-nord { padding:16px; } .cat-nord__scene { height:740px; min-height:0; max-height:85svh; border-radius:12px; background-position:62% center; } .cat-nord__glass { right:30%; } .cat-nord__heading { top:30%; left:6%; } .cat-nord__heading h1 { font-size:clamp(36px,10vw,70px); } .cat-nord__copy { left:6%; right:8%; max-width:none; bottom:7%; } .cat-nord__copy p { max-width:310px; } .cat-nord__index { display:none; } .cat-nord__crumbs { top:15%; left:6%; right:auto; } .cat-nord__label { left:6%; } }

/* Texte dans le flux : aucune collision entre titre, description et lien. */
.cat-nord__scene { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; box-sizing:border-box; padding:110px 6% 70px; height:auto; min-height:700px; max-height:none; }
.cat-nord__heading { position:relative; inset:auto; width:100%; margin:0; }
.cat-nord__heading>p { margin:0 0 24px; }
.cat-nord__heading h1 { font-size:clamp(46px,7.1vw,112px); line-height:1.02; max-width:100%; overflow-wrap:normal; }
.cat-nord__heading h1 span { margin-top:0; white-space:nowrap; }
.cat-nord__copy { position:relative; inset:auto; margin-top:34px; max-width:48%; }
.cat-nord__copy p { margin:0; font-size:clamp(14px,1.15vw,18px); line-height:1.65; }
.cat-nord__copy a { margin-top:28px; }
.cat-nord__glass { background:#112b3959; }
@media(min-width:1600px) { .cat-nord__scene { min-height:760px; } }
@media(max-width:700px) {
 .cat-nord__scene { padding:150px 6% 48px; min-height:620px; height:auto; max-height:none; }
 .cat-nord__heading h1 { font-size:clamp(28px,9vw,62px); }
 .cat-nord__heading>p { font-size:10px; letter-spacing:.12em; line-height:1.6; margin-bottom:20px; }
 .cat-nord__copy { max-width:100%; margin-top:28px; }
 .cat-nord__copy p { max-width:310px; }
 .cat-nord__crumbs { top:90px; }
 .cat-nord__glass { right:0; background:#112b3959; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
}

/* Les collections sont directement accessibles dans l’arrivée. */
.cat-nord__choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; width:min(740px,100%); margin-top:32px; padding:0 10px; box-sizing:border-box; }
.cat-nord__choices .cat-choice { height:260px; }
.cat-nord__choices .cat-choice>div { inset:22px; }
.cat-nord__choices .cat-choice h3 { font-size:clamp(23px,2.3vw,34px); }
.cat-nord__choices .cat-choice p { font-size:13px; }
.cat-nord__choices .cat-choice span { font-size:10px; }
.cat-nord__choices .cat-choice b { width:36px; height:36px; font-size:21px; }
.cat-nord__scene { padding-top:100px; padding-bottom:50px; }
.cat-nord__copy { margin-top:24px; }
.cat-nord__heading h1 { font-size:clamp(44px,6vw,94px); }
.cat-nord__index { bottom:50px; }
@media(max-width:700px) {
 .cat-nord__scene { padding-top:140px; padding-bottom:32px; }
 .cat-nord__choices { gap:14px; padding:0; margin-top:26px; }
 .cat-nord__choices .cat-choice { height:230px; transform:none; }
 .cat-nord__choices .cat-choice>div { inset:14px; transform:none; }
 .cat-nord__choices .cat-choice h3 { font-size:clamp(17px,4vw,25px); }
 .cat-nord__choices .cat-choice p { font-size:12px; line-height:1.4; }
 .cat-nord__choices .cat-choice span { font-size:9px; letter-spacing:.03em; }
 .cat-nord__heading h1 { font-size:clamp(28px,9vw,62px); }
}
@media(max-width:380px) { .cat-nord__choices { grid-template-columns:1fr; } .cat-nord__choices .cat-choice { height:220px; } }

/* Catalogue : présentation uniforme des réalisations. */
.cat-ess { background:#fafaf8; }
.cat-ess__grid { display:block; max-width:1440px; margin:auto; }
.cat-ess__media { display:none; }
.cat-ess__side { padding:0 clamp(20px,4vw,64px) 80px; }
.cat-ess__bar { margin:0; padding:22px 0; background:rgba(250,250,248,.96); border-bottom:1px solid #dce2e5; }
.cat-ess__label { display:block; font-size:11px; letter-spacing:.18em; }
.cat-ess__tabs { border-radius:8px; padding:4px; background:#edf0f1; box-shadow:none; }
.cat-ess__tab { border-radius:5px; min-height:44px; padding:10px 24px; }
.cat-ess__indicator { border-radius:5px; box-shadow:none; }
.cat-ess__head { max-width:700px; margin:0; padding:48px 0 38px; }
.cat-ess__title { font-size:clamp(32px,4vw,56px); font-weight:700; }
.cat-ess__text { max-width:580px; }
.cat-ess__stream { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 24px; }
.cat-ess__stream .cat-ess__item { grid-column:auto; margin:0; min-width:0; }
.cat-ess__btn { aspect-ratio:4/5; background:#e9ebeb; border-radius:8px; box-shadow:none; }
.cat-ess__btn picture { height:100%; }
.cat-ess__btn img { height:100%; width:100%; object-fit:contain; }
.cat-ess__item.is-current .cat-ess__btn { box-shadow:none; }
.cat-ess__cap { margin-top:12px; padding-bottom:12px; border-bottom:1px solid #e1e5e7; font-size:11px; letter-spacing:.08em; }
.cat-ess__zoom { opacity:1; transform:none; background:white; color:#0b6ea6; box-shadow:0 2px 10px #102a3514; }
@media(hover:hover) { .cat-ess__btn:hover { box-shadow:0 12px 28px #12334414; } .cat-ess__btn:hover img { transform:scale(1.025); } }
@media(max-width:979px) { .cat-ess__stream { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 18px; } .cat-ess__bar { margin:0; padding:14px 0; } }
@media(max-width:540px) { .cat-ess__stream { grid-template-columns:1fr; } .cat-ess__head { padding:30px 0; } .cat-ess__label { display:none; } .cat-ess__tab { padding:10px 14px; } }

/* ==========================================================================
   Arrivée catalogue — mise en scène (entrée ~1,5 s, profondeur, lumière, sortie)
   Les états finaux sont les états naturels : sans JS ni animation, tout est visible.
   ========================================================================== */
.cat-nord__scene { background-image: none; padding-bottom: 108px; }
.cat-nord__photo { position: absolute; inset: -18px; z-index: -2; background: #5a6970 url('../images/catalogue/chaussettes/chaussettes-01-1448.webp') center 48% / cover no-repeat;
  translate: calc(var(--px, 0) * -9px) calc(var(--py, 0) * -6px);
  transform: translate3d(0, calc(var(--sp, 0) * 34px), 0) scale(calc(1 + var(--sp, 0) * .06)); transform-origin: 62% 40%; will-change: transform; }
.cat-nord__glass { left: -12px; translate: calc(var(--px, 0) * 3px) calc(var(--py, 0) * 2px); }
.cat-nord__glow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(420px circle at var(--lx, 50%) var(--ly, 50%), rgba(255,255,255,.22), rgba(170,215,240,.08) 40%, transparent 70%); }
.cat-nord.is-lit .cat-nord__glow { opacity: 1; }
.cat-nord__sheen { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; z-index: 0; pointer-events: none; overflow: hidden; translate: calc(var(--px, 0) * 3px) 0; }
.cat-nord__sheen::before { content: ""; position: absolute; left: -1px; right: -1px; top: 0; height: 38%; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.95) 50%, transparent); box-shadow: 0 0 18px 3px rgba(190,230,255,.55); transform: translateY(-110%); }
.cat-nord__heading h1 { display: block; }
.cat-nord__heading h1 .cat-nord__line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.cat-nord__heading h1 .cat-nord__line > span { display: block; margin: 0; white-space: nowrap; }
.cat-nord__cue { position: absolute; left: 6%; bottom: 38px; display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.cat-nord__cue i { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; font-style: normal; transition: background .3s, border-color .3s; }
.cat-nord__cue i svg { display: block; }
.cat-nord__cue:hover i, .cat-nord__cue:focus-visible i { background: rgba(255,255,255,.16); border-color: #fff; }
.cat-nord__cue:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 4px; }
.cat-nord__index { bottom: 38px; }

@media (prefers-reduced-motion: no-preference) {
  .cat-nord__photo { animation: nord-photo 1.5s cubic-bezier(.16,1,.3,1) backwards; }
  .cat-nord__glass { animation: nord-veil .95s .04s cubic-bezier(.65,0,.35,1) backwards; }
  .cat-nord__label, .cat-nord__crumbs { animation: nord-fade .7s .42s ease-out backwards; }
  .cat-nord__heading > p { animation: nord-rise .7s .38s cubic-bezier(.22,1,.36,1) backwards; }
  .cat-nord__line > span { animation: nord-mask .75s cubic-bezier(.22,1,.36,1) backwards; }
  .cat-nord__line:nth-child(1) > span { animation-delay: .5s; }
  .cat-nord__line:nth-child(2) > span { animation-delay: .66s; }
  .cat-nord__copy { animation: nord-rise .7s .86s cubic-bezier(.22,1,.36,1) backwards; }
  .cat-nord__cue, .cat-nord__index { animation: nord-fade .6s 1.05s ease-out backwards; }
  .cat-nord__cue i svg { animation: nord-arrow 1.6s 1.7s ease-in-out 4; }
  .cat-nord__cue:hover i svg { animation: nord-arrow .9s ease-in-out infinite; }
  .cat-nord__sheen::before { animation: nord-sheen 1s 1.35s cubic-bezier(.45,0,.2,1) 1; }
  @keyframes nord-photo { from { scale: 1.12; } to { scale: 1; } }
  @keyframes nord-veil { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes nord-mask { from { transform: translateY(108%); } to { transform: none; } }
  @keyframes nord-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes nord-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes nord-sheen { 0% { opacity: 0; transform: translateY(-110%); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(280%); } }
  @keyframes nord-arrow { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } }
}
@media (prefers-reduced-motion: reduce) {
  .cat-nord__photo, .cat-nord__glass, .cat-nord__sheen { translate: none; transform: none; }
}
@media (max-width: 700px) {
  .cat-nord__photo { background-position: 62% center; transform: none; }
  .cat-nord__glass { left: 0; }
  .cat-nord__sheen, .cat-nord__glow { display: none; }
  .cat-nord__scene { padding-bottom: 96px; }
  .cat-nord__cue { bottom: 30px; }
}

/* Arrivée éditoriale : cadrage entier et hiérarchie plus fine. */
.cat-nord { padding:clamp(16px,2.5vw,40px); background:#f3f3ef; }
.cat-nord__scene { min-height:650px; padding:150px 6% 145px; border-radius:16px; background:#dfe3e1; box-shadow:0 18px 45px #132a3110; }
.cat-nord__scene::before { display:none; }
.cat-nord__photo { inset:0 0 0 44%; background-color:#e0e3e1; background-size:contain; background-position:center; background-repeat:no-repeat; transform-origin:center; }
.cat-nord__glass { inset:0 56% 0 0; left:0; background:linear-gradient(145deg,#153c3b,#142e32); backdrop-filter:none; -webkit-backdrop-filter:none; border:0; translate:none; }
.cat-nord__heading { width:41%; }
.cat-nord__heading>p { font-size:10px; letter-spacing:.18em; color:#a7d2cc; margin-bottom:28px; }
.cat-nord__heading h1 { font-size:clamp(40px,4.8vw,76px); font-weight:600; text-transform:none; letter-spacing:-.045em; line-height:1.08; }
.cat-nord__heading h1 .cat-nord__line { overflow:visible; }
.cat-nord__copy { max-width:35%; margin-top:28px; }
.cat-nord__copy p { font-size:15px; line-height:1.8; color:#d8e3e1; }
.cat-nord__label { left:6%; top:42px; font-size:10px; color:#c1d5d1; letter-spacing:.15em; }
.cat-nord__crumbs { color:#30484b; top:42px; }
.cat-nord__crumbs a { color:#30484b; }
.cat-nord__cue { bottom:45px; font-size:10px; letter-spacing:.13em; gap:20px; }
.cat-nord__index { color:#30484b; bottom:45px; right:26px; font-size:9px; }
.cat-nord__sheen { left:44%; }
.cat-nord__glow { opacity:.2; }
@media(min-width:1600px) { .cat-nord__scene { min-height:720px; } }
@media(max-width:850px) {
 .cat-nord__scene { padding:140px 6% 110px; }
 .cat-nord__heading h1 { font-size:clamp(32px,4.8vw,48px); }
 .cat-nord__copy p { font-size:13px; }
}
@media(max-width:700px) {
 .cat-nord__scene { padding:110px 7% 420px; min-height:0; }
 .cat-nord__glass { inset:0 0 360px 0; }
 .cat-nord__photo { inset:auto 0 0; height:360px; background-size:contain; background-position:center; }
 .cat-nord__heading { width:100%; }
 .cat-nord__heading h1 { font-size:clamp(38px,9vw,62px); }
 .cat-nord__copy { max-width:100%; }
 .cat-nord__copy p { font-size:14px; }
 .cat-nord__label { top:26px; left:7%; }
 .cat-nord__crumbs { top:26px; left:auto; right:7%; color:#c1d5d1; font-size:10px; }
 .cat-nord__crumbs a { color:#c1d5d1; }
 .cat-nord__cue { bottom:375px; left:7%; }
 .cat-nord__index { display:none; }
}