/* Accueil façon Netflix (js/home-netflix.js). Réutilise les jetons de app.css ; aucune illustration vectorielle, photos réelles ou dégradés. */

/* l'accueil sort de la colonne de 760 px */
@media(min-width:1000px){ main:has(.nfx-home){max-width:1280px;padding-left:28px;padding-right:28px} }
@media(min-width:700px) and (max-width:999px){ main:has(.nfx-home){max-width:980px} }
.nfx-home{--nfx-card-h:176px}

/* ---------- bandeau vedette ---------- */
.nfx-bb{position:relative;margin:0 -16px;background:var(--bg2);isolation:isolate;overflow:hidden}
.nfx-stage{position:relative;height:clamp(420px,66vh,520px)}
.nfx-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s var(--ease-out),visibility 0s linear .9s}
.nfx-slide.on{opacity:1;visibility:visible;transition:opacity .9s var(--ease-out),visibility 0s}
.nfx-media{position:absolute;inset:0;z-index:-2;background:linear-gradient(135deg,var(--card2),var(--bg2))}
.nfx-media .nfx-ph{width:100%;height:100%}
.nfx-slide.on .nfx-media img{animation:nfx-kb 12s ease-out both}
@keyframes nfx-kb{from{transform:scale(1)}to{transform:scale(1.07)}}
.nfx-bbveil{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,var(--bg) 0%,color-mix(in srgb,var(--bg) 70%,transparent) 28%,rgba(0,0,0,.05) 62%,rgba(0,0,0,.28) 100%)}
.nfx-bbtxt{position:absolute;left:0;right:0;bottom:0;padding:0 18px 54px;max-width:640px;color:var(--tx)}
.nfx-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 8px;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tx2)}
.nfx-must{display:inline-block;background:var(--acc);color:var(--accTx);border-radius:999px;padding:2px 10px;letter-spacing:.07em}
.nfx-bbtitle{font-family:var(--fd);font-size:clamp(2rem,6vw,3.4rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 10px;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.nfx-bbshort{font-size:1.02rem;color:var(--tx);margin:0 0 16px;max-width:52ch;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nfx-bbbtns{display:flex;flex-wrap:wrap;gap:10px}
.nfx-bbbtns .btn{min-height:48px;padding:0 24px}
.nfx-bbbtns .btn.ghost{background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-color:var(--line)}
.nfx-credit{position:absolute;right:12px;top:10px;margin:0;font-size:.66rem;color:rgba(255,255,255,.72);text-shadow:0 1px 4px rgba(0,0,0,.7);max-width:46%;text-align:right}
html[data-theme="light"] .nfx-credit{color:rgba(30,24,14,.7);text-shadow:none}
.nfx-ctrl{position:absolute;left:18px;right:18px;bottom:16px;display:flex;align-items:center;gap:12px;z-index:3;pointer-events:none}
.nfx-ctrl>*{pointer-events:auto}
.nfx-dots{display:flex;gap:2px}
.nfx-dot{position:relative;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center}
.nfx-dot::before{content:"";width:22px;height:4px;border-radius:3px;background:var(--tx3);opacity:.7;transition:background var(--dur-base),width var(--dur-base),opacity var(--dur-base)}
.nfx-dot:hover::before{opacity:1}
.nfx-dot.on::before{background:var(--acc);width:32px;opacity:1}
.nfx-pause{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;gap:3px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 60%,transparent);color:var(--tx)}
.nfx-pause i{width:3px;height:11px;background:currentColor;border-radius:1px}
.nfx-pause.is-paused i:first-child{width:0;height:0;border-radius:0;background:none;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
.nfx-pause.is-paused i:last-child{display:none}
@media(min-width:760px){
  .nfx-bb{margin:0;border-radius:var(--r);border:1px solid var(--line2)}
  .nfx-stage{height:clamp(400px,52vh,500px)}
  .nfx-media{left:30%}
  .nfx-bbveil{background:linear-gradient(to right,var(--bg2) 0%,var(--bg2) 30%,color-mix(in srgb,var(--bg2) 55%,transparent) 48%,rgba(0,0,0,0) 72%),linear-gradient(to top,color-mix(in srgb,var(--bg2) 85%,transparent) 0%,transparent 34%)}
  .nfx-bbtxt{top:0;display:flex;flex-direction:column;justify-content:center;padding:0 0 40px 44px;max-width:min(46%,560px)}
  .nfx-ctrl{left:44px;bottom:22px}
  .nfx-credit{top:auto;bottom:8px;right:14px}
  .nfx-bbtitle{font-size:clamp(2.2rem,3.6vw,3.6rem)}
}

/* ---------- intro + recherche ---------- */
.nfx-intro{padding:20px 2px 4px;max-width:720px}
.nfx-intro .eyebrow{margin:0 0 4px}
.nfx-intro h1{font-size:1.9rem;margin-bottom:6px}
.nfx-intro .lede{margin:0 0 4px;color:var(--tx2)}
.nfx-intro .search{margin:12px 0 4px;max-width:640px}
.nfx-results{margin-top:6px}

/* ---------- rangées ---------- */
.nfx-rows{display:block}
.nfx-row{margin:22px 0 0}
.nfx-rh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 2px;margin-bottom:-6px}
.nfx-title{font-family:var(--fd);font-size:1.3rem;letter-spacing:-.01em;line-height:1.2}
.nfx-all{display:inline-flex;align-items:center;gap:2px;min-height:44px;color:var(--accLink);font-weight:700;font-size:.88rem;white-space:nowrap;opacity:.85;transition:opacity var(--dur-base)}
.nfx-all:hover{opacity:1}
.nfx-all .ico{transition:transform var(--dur-base)}
.nfx-all:hover .ico{transform:translateX(3px)}
.nfx-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:2px 0 0;padding:2px 2px 6px}
.nfx-chips::-webkit-scrollbar{display:none}
.nfx-chip{flex:none;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:.84rem;font-weight:600;color:var(--tx2);white-space:nowrap;position:relative;transition:background var(--dur-base),color var(--dur-base)}
.nfx-chip::after{content:"";position:absolute;inset:-4px -2px}
.nfx-chip:hover{color:var(--tx)}
.nfx-chip.on{background:var(--acc);border-color:transparent;color:var(--accTx);font-weight:800}

.nfx-rail{position:relative;margin:0 -16px}
@media(min-width:1000px){.nfx-rail{margin:0 -28px}}
.nfx-track{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scroll-padding:0 16px;scrollbar-width:none;padding:14px 16px 18px;min-height:calc(var(--nfx-card-h) + 32px);overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.nfx-track::-webkit-scrollbar{display:none}
@media(min-width:1000px){.nfx-track{padding-left:28px;padding-right:28px;scroll-padding:0 28px}}

/* flèches */
.nfx-arrow{position:absolute;top:14px;bottom:18px;width:52px;z-index:5;display:none;align-items:center;justify-content:center;color:#fff;border:0;opacity:0;transition:opacity var(--dur-base)}
.nfx-prev{left:0;background:linear-gradient(to right,color-mix(in srgb,var(--bg) 92%,transparent),transparent)}
.nfx-next{right:0;background:linear-gradient(to left,color-mix(in srgb,var(--bg) 92%,transparent),transparent)}
.nfx-prev .ico{transform:rotate(180deg)}
.nfx-arrow .ico{width:30px;height:30px;padding:3px;border-radius:50%;background:rgba(20,16,12,.7);color:#fff;stroke-width:2.4;box-shadow:0 2px 10px rgba(0,0,0,.4)}
@media(hover:hover) and (pointer:fine){
  .nfx-arrow{display:flex}
  .nfx-arrow{opacity:.85}
  .nfx-rail:hover .nfx-arrow,.nfx-rail:focus-within .nfx-arrow{opacity:1}
  .nfx-rail[data-start="1"] .nfx-prev,.nfx-rail[data-end="1"] .nfx-next{opacity:0!important;pointer-events:none}
}
.nfx-arrow:focus-visible{opacity:1;outline-offset:-3px}

/* cartes */
.nfx-card{position:relative;flex:0 0 auto;display:block;overflow:hidden;border-radius:var(--r2);background:var(--card2);border:1px solid var(--line2);scroll-snap-align:start;color:#fff;transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out),border-color .2s}
.nfx-land{width:min(74vw,282px);aspect-ratio:3/2}
.nfx-track-wide .nfx-land{width:min(82vw,340px);aspect-ratio:16/10}
.nfx-poster{width:min(40vw,168px);aspect-ratio:2/3}
.nfx-tile{width:min(46vw,210px);aspect-ratio:16/10}
.nfx-ph{position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 24%,var(--card2)),var(--card2) 70%)}
.nfx-ph img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%);display:block;max-width:none}
.nfx-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.28) 48%,transparent 78%);pointer-events:none}
.nfx-ct{position:absolute;left:0;right:0;bottom:0;padding:10px 12px 11px;display:flex;flex-direction:column;gap:2px;min-width:0}
.nfx-ct strong{font-family:var(--fd);font-size:1.02rem;line-height:1.2;text-shadow:0 1px 8px rgba(0,0,0,.6);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nfx-ct small{font-size:.74rem;font-weight:600;color:rgba(255,255,255,.82);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nfx-poster .nfx-ct strong{font-size:1rem}
.nfx-tile .nfx-ct{flex-direction:row;align-items:center;gap:8px;padding:10px 12px}
.nfx-tile .nfx-ct strong{font-size:.98rem;-webkit-line-clamp:1}
.nfx-ci{display:inline-flex;flex:none;width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@media(hover:hover) and (pointer:fine){
  .nfx-land{width:272px}
  .nfx-track-wide .nfx-land{width:332px}
  .nfx-poster{width:176px}
  .nfx-tile{width:214px}
  .nfx-card:hover,.nfx-card:focus-visible{transform:scale(1.07);z-index:4;box-shadow:0 18px 38px rgba(0,0,0,.55);border-color:var(--acc)}
  .nfx-top:hover{z-index:4}
}
.nfx-card:active{transform:scale(.98)}
.nfx-card:focus-visible{outline-offset:2px}

/* Top 10 : grands chiffres */
.nfx-track-top{gap:2px}
.nfx-top{position:relative;flex:0 0 auto;display:flex;align-items:flex-end;scroll-snap-align:start}
.nfx-rank{font-family:var(--ff);font-weight:800;font-size:9.5rem;line-height:.78;letter-spacing:-.06em;color:var(--bg);-webkit-text-stroke:3px color-mix(in srgb,var(--tx3) 85%,transparent);margin-right:-.1em;padding:0 .06em 0 .04em;align-self:flex-end;position:relative;z-index:0;user-select:none;margin-bottom:-3px}
.nfx-top .nfx-card{z-index:1}
@media(max-width:699px){.nfx-rank{font-size:7.4rem}}

/* ---------- widgets ---------- */
.nfx-widgets{display:grid;grid-template-columns:1fr;gap:14px;margin:28px 0 6px;align-items:start}
.nfx-w{min-width:0}
.nfx-w>*{margin-top:0!important}
.nfx-w .card{margin:0}
.nfx-w:has(.off-wrap:empty){display:none}
.nfx-w-quick{grid-column:1/-1}
.nfx-w .tiles{margin:0}
@media(min-width:760px){.nfx-widgets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.nfx-widgets{grid-template-columns:repeat(3,minmax(0,1fr))}}

.nfx-home .louvre-card{margin-top:28px}

@media (prefers-reduced-motion:reduce){
  .nfx-slide,.nfx-slide.on{transition:none}
  .nfx-slide.on .nfx-media img{animation:none}
  .nfx-card:hover,.nfx-card:focus-visible{transform:none}
}
@media print{.nfx-bb,.nfx-arrow{display:none!important}}