/* ====== SHOP LUMIÈRE SUR LA HOME (03/10/2026) — surcharge écrite à la main, chargée APRÈS nosk8-shop-lumiere.css (généré).
   David : « les produits d'une même catégorie sur une même ligne, dans la section avec le mannequin 3D » et, pour la
   collection en dessous, « pas trop grand, avec du scroller horizontal ». Et les titres : la home a déjà son H1,
   le shop y descend d'un cran (h2 kick, h3 titres, h4 rayons) ; on redonne aux h3/h4 le dessin des h2/h3 d'origine. */

/* --- Titres : même dessin que sur la maquette, un cran plus bas --- */
.n8s--home h4 { margin: 0; color: inherit; font-weight: 400; }
/* la home impose Inter + interligne 1.6 à tout <span> (nosk8-homepage.css) : la 2e ligne des titres hérite du Bebas */
.n8s--home h2 span, .n8s--home h3 span, .n8s--home h4 span { font-family: inherit; line-height: inherit; }
.n8s--home .lhead h2.kick { margin-top: 0; font-size: 10px; }
.n8s--home .lhead h3 { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 38px; line-height: .9; margin-top: 6px; }
.n8s--home .lhead h3 span { color: rgba(255,255,255,.5); }
.n8s--home .tenue h3 { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 44px; line-height: .9; margin-top: 6px; text-shadow: 0 4px 24px rgba(0,0,0,.5); }
.n8s--home .tenue h3 span { opacity: .6; }
.n8s--home .rail-t h4 { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 20px; line-height: 1; }
.n8s--home .rail-t h4 small { font: 600 10px Inter, system-ui, sans-serif; opacity: .7; margin-left: 6px; }
.n8s--home .coll h3 { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 54px; line-height: .9; margin-top: 8px; color: #fff; }
.n8s--home .coll h3 span { color: rgba(255,255,255,.5); }
.n8s--home[data-effet="jour"] .rail-t h4 small { color: #555; opacity: 1; }

/* --- « Compose ta tenue » : un rayon = UNE ligne qui défile, jamais repliée --- */
.n8s--home .strip {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scroll-padding-left: 14px;
}
.n8s--home .rt { flex: none; }

/* lookbook : 39 points repliés sur 3 lignes passaient SOUS le texte d'aide ; une seule ligne, les points se partagent la largeur */
.n8s--home .dots { flex-wrap: nowrap; gap: 3px; overflow: hidden; }
.n8s--home .dots i { flex: 1 1 0; width: auto; min-width: 3px; max-width: 14px; }
.n8s--home .dots i.on { flex: 3 1 0; max-width: 22px; }
@media (hover: hover) {
    /* sur ordinateur, pas de doigt pour deviner qu'une ligne défile : barre fine, teinte navy */
    .n8s--home .strip { scrollbar-width: thin; scrollbar-color: rgba(26,39,68,.35) transparent; padding-bottom: 8px; }
    .n8s--home .strip::-webkit-scrollbar { height: 4px; }
    .n8s--home .strip::-webkit-scrollbar-thumb { background: rgba(26,39,68,.35); border-radius: 2px; }
}

/* --- « Toute la collection » : compact, scroller horizontal au lieu de la grille 2/3/4 colonnes --- */
.n8s--home .grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 14px 16px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-left: 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.n8s--home .grid::-webkit-scrollbar { display: none; }
.n8s--home .grid .it { flex: 0 0 150px; scroll-snap-align: start; }
.n8s--home .grid .gvide { flex: 0 0 100%; }
.n8s--home .it .ph { height: 170px; }
.n8s--home .it .ph img { height: 140px; }
.n8s--home .it .nm { min-height: 0; font-size: 11px; }

/* bouton vers la boutique classique, sous le rail */
.n8s--home .n8s-foot { display: flex; justify-content: center; padding: 6px 16px 18px; }
.n8s--home .n8s-foot__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 10px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font: 400 17px/1 'Bebas Neue', Impact, sans-serif;
    letter-spacing: 2px;
    text-decoration: none;
    transition: background .2s, border-color .2s;
}
.n8s--home .n8s-foot__btn:hover { background: rgba(255,255,255,.24); border-color: #fff; }
.n8s--home .n8s-foot__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.n8s--home[data-effet="jour"] .n8s-foot__btn { background: #1a2744; border-color: #1a2744; color: #fff; }
.n8s--home[data-effet="jour"] .n8s-foot__btn:hover { background: #2a3a5c; }

@media (min-width: 700px) and (max-width: 899px) {
    .n8s--home .lhead h3 { font-size: 44px; }
    .n8s--home .tenue h3 { font-size: 64px; }
    .n8s--home .grid { gap: 14px; padding: 16px 32px 10px; scroll-padding-left: 32px; }
    .n8s--home .grid .it { flex-basis: 176px; }
    .n8s--home .it .ph { height: 196px; }
    .n8s--home .it .ph img { height: 160px; }
    .n8s--home .n8s-foot { padding: 8px 32px 22px; }
}
@media (min-width: 900px) {
    .n8s--home .lhead h3 { font-size: 48px; }
    .n8s--home .tenue h3 { font-size: 72px; }
    .n8s--home .coll h3 { font-size: 72px; }
    /* le CSS généré replie les rails en 4 colonnes à partir de 900 px : ici ils restent une ligne.
       Un rail qui ne se replie pas a une largeur « minimale » de 20 cartes : sans min-width:0, la colonne
       de droite de la grille s'étirait jusqu'à écraser la colonne de gauche (titre sur 4 lignes, prix cassé). */
    .n8s--home .tenue .part, .n8s--home .tenue .verre, .n8s--home .tenue .strip { min-width: 0; }
    .n8s--home .strip { flex-wrap: nowrap; overflow-x: auto; scroll-padding-left: 0; }
    .n8s--home .rt { width: 124px; }
    .n8s--home .grid { gap: 16px; padding: 18px 48px 12px; scroll-padding-left: 48px; }
    .n8s--home .grid .it { flex-basis: 200px; }
    .n8s--home .it .ph { height: 220px; }
    .n8s--home .it .ph img { height: 180px; }
    .n8s--home .n8s-foot { padding: 10px 48px 26px; }
}

/* ====== Barres de recherche (David 03/10 : « en haut des trois sections, un petit espace, autocomplétion
   avec la petite icône de l'aperçu du produit à gauche ») — verre liquide, même dessin que les boutons ====== */
.n8s--home .n8s-sb {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    margin: 0;
    padding: 0 8px 0 14px;
    border-radius: 10px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    /* le backdrop-filter fait du formulaire un contexte d'empilement : la liste ne peut passer au-dessus
       du titre et des images du look (transform) que si c'est le FORMULAIRE qui monte, pas la liste seule */
    z-index: 30;
    transition: background .2s, border-color .2s;
}
/* le bandeau de titre du lookbook (z 5) passait sous les puces de rayon (z 5, plus loin dans le DOM) */
.n8s--home .lhead { z-index: 9; }
.n8s--home .n8s-sb:focus-within { background: rgba(255,255,255,.18); border-color: #fff; }
.n8s--home .n8s-sb__loupe { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; opacity: .8; }
.n8s--home .n8s-sb__in {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    background: none;
    color: #fff;
    font: 500 14px/1 Inter, system-ui, sans-serif;
    -webkit-appearance: none;
    appearance: none;
}
.n8s--home .n8s-sb__in::placeholder { color: rgba(255,255,255,.6); opacity: 1; }
.n8s--home .n8s-sb__in::-webkit-search-cancel-button, .n8s--home .n8s-sb__in::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.n8s--home .n8s-sb__x { display: grid; place-items: center; width: 28px; height: 28px; flex: none; margin: 0; padding: 0; border: 0; border-radius: 6px; background: none; color: #fff; cursor: pointer; opacity: .7; }
.n8s--home .n8s-sb__x:hover { opacity: 1; background: rgba(255,255,255,.14); }
.n8s--home .n8s-sb__x[hidden] { display: none; }
.n8s--home .n8s-sb__x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.n8s--home .n8s-sb__liste {
    position: absolute;
    left: -1px;
    right: -1px;
    top: calc(100% + 8px);
    z-index: 40;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: rgba(17,17,17,.94);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    max-height: min(380px, 55vh);
    overflow-y: auto;
    text-align: left;
}
.n8s--home .n8s-sb__liste[hidden] { display: none; }
.n8s--home .n8s-sb__liste li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.n8s--home .n8s-sb__liste li.on { background: rgba(255,255,255,.14); }
.n8s--home .n8s-sb__liste img { width: 40px; height: 40px; flex: none; object-fit: contain; border-radius: 6px; background: rgba(255,255,255,.92); }
.n8s--home .n8s-sb__txt { min-width: 0; }
.n8s--home .n8s-sb__nom { display: block; font: 600 13px/1.25 Inter, system-ui, sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n8s--home .n8s-sb__nom mark { background: none; color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.7); text-underline-offset: 2px; }
.n8s--home .n8s-sb__meta { display: block; margin-top: 3px; font: 400 11px/1.2 'Space Mono', monospace; color: rgba(255,255,255,.6); }
.n8s--home .n8s-sb__rien { display: block; padding: 10px 8px; font: 400 13px/1.4 Inter, system-ui, sans-serif; color: rgba(255,255,255,.75); cursor: default; }
.n8s--home .n8s-sb__rien a { color: #fff; font-family: inherit; line-height: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* la pièce trouvée clignote une fois dans sa section (carte, rail ou grande image) */
.n8s--home .n8s-sb__hit { animation: n8sHit .9s ease-out; }
@keyframes n8sHit { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.9); } 100% { box-shadow: 0 0 0 16px rgba(255,255,255,0); } }
/* version claire (data-effet="jour") */
.n8s--home[data-effet="jour"] .n8s-sb { background: rgba(255,255,255,.72); border-color: rgba(26,39,68,.35); color: #111; }
.n8s--home[data-effet="jour"] .n8s-sb:focus-within { background: #fff; border-color: #1a2744; }
.n8s--home[data-effet="jour"] .n8s-sb__in, .n8s--home[data-effet="jour"] .n8s-sb__x { color: #111; }
.n8s--home[data-effet="jour"] .n8s-sb__in::placeholder { color: #555; }
.n8s--home[data-effet="jour"] .n8s-sb__liste { background: rgba(255,255,255,.96); border-color: rgba(26,39,68,.25); }
.n8s--home[data-effet="jour"] .n8s-sb__liste li.on { background: rgba(26,39,68,.1); }
.n8s--home[data-effet="jour"] .n8s-sb__nom { color: #111; }
.n8s--home[data-effet="jour"] .n8s-sb__meta, .n8s--home[data-effet="jour"] .n8s-sb__rien { color: #555; }

/* --- où se pose chaque barre, et ce qu'elle décale --- */
/* lookbook : sous le titre ; tout ce qui est calé en absolu en dessous descend d'autant (44 px + 10 px) */
.n8s--home .lhead .n8s-sb { margin-top: 10px; }
.n8s--home .lchips { top: 126px; }
.n8s--home .cnt { top: 184px; }
.n8s--home .big { top: 220px; }
.n8s--home .arrows { top: 350px; }
.n8s--home .lb { height: 814px; }
/* tenue et collection : MÊME dessin que le lookbook (David 03/10 : « pourquoi t'as pas fait pareil pour les
   deux autres sections ») — la barre fait partie du bloc de titre : sous le titre en mobile, à droite de
   la ligne de titre en ordinateur. Le texte qui suit reprend son souffle. */
.n8s--home .tenue .gauche .n8s-sb, .n8s--home .coll .n8s-sb { margin-top: 10px; }
.n8s--home .tenue .gauche .n8s-sb + p, .n8s--home .coll .n8s-sb + .n8-seo { margin-top: 14px; }
/* la bande « Livré en 3 à 7 jours » collait au bord bas de la section : sa marge sortait du fond photo (fusion des marges) */
.n8s--home .monde { padding-bottom: 20px; }

@media (min-width: 700px) and (max-width: 899px) {
    .n8s--home .lchips { top: 138px; }
    .n8s--home .cnt { top: 200px; }
    .n8s--home .big { top: 250px; }
    .n8s--home .arrows { top: 440px; }
    .n8s--home .lb { height: 974px; }
    .n8s--home .monde { padding-bottom: 24px; }
}
@media (min-width: 900px) {
    /* lookbook : la barre prend la droite de la ligne de titre, rien ne bouge en dessous */
    .n8s--home .lhead .n8s-sb { position: absolute; top: 0; right: 0; width: 340px; margin: 0; }
    .n8s--home .lchips, .n8s--home .cnt { top: 96px; }
    .n8s--home .cnt { top: 118px; }
    .n8s--home .big { top: auto; }
    .n8s--home .arrows { top: 50%; }
    .n8s--home .lb { height: min(900px, calc(100vh - var(--n8s-top))); }
    /* tenue : la barre prend la droite de la ligne de titre. Elle vit dans .gauche, donc .part doit être
       statique pour qu'elle se cale sur la section ; le voile :before passe sous tout (isolation + z -1),
       ce que faisait `position:relative` sur chaque enfant. Le panneau de droite démarre sous la barre. */
    .n8s--home .tenue { isolation: isolate; align-items: start; }
    .n8s--home .tenue::before { z-index: -1; }
    .n8s--home .tenue > .part { position: static; }
    .n8s--home .tenue .gauche .n8s-sb { position: absolute; top: 56px; right: 64px; width: 340px; margin: 0; }
    .n8s--home .tenue .gauche .n8s-sb + p { margin-top: 6px; }
    .n8s--home .tenue .verre { margin-top: 64px; }
    /* collection : idem, à droite de la ligne de titre */
    .n8s--home .coll { position: relative; }
    .n8s--home .coll .n8s-sb { position: absolute; top: 40px; right: 48px; width: 340px; margin: 0; }
    .n8s--home .coll .n8s-sb + .n8-seo { margin-top: 10px; }
    /* « le mannequin = un tiers, la droite = deux tiers, avec de l'espace des deux côtés » (David 03/10) */
    .n8s--home .tenue { grid-template-columns: 1fr 2fr; column-gap: 40px; padding: 56px 64px; }
    .n8s--home .look { height: 340px; }
    .n8s--home .look .l-hoodie { width: 300px; height: 300px; top: 30px; }
    .n8s--home .look .l-tee { width: 180px; height: 180px; top: 120px; transform: translateX(-50%) translateX(100px) rotate(6deg); }
    .n8s--home .look .l-cap { width: 150px; height: 150px; transform: translateX(-50%) translateX(-120px) rotate(-10deg); }
    .n8s--home .monde { padding-bottom: 32px; }
}
@media (min-width: 1200px) {
    .n8s--home .tenue { padding: 64px 80px; }
    .n8s--home .tenue .gauche .n8s-sb { top: 64px; right: 80px; }
    .n8s--home .look { height: 380px; }
    .n8s--home .look .l-hoodie { width: 340px; height: 340px; top: 40px; }
    .n8s--home .look .l-tee { width: 210px; height: 210px; top: 150px; transform: translateX(-50%) translateX(120px) rotate(6deg); }
    .n8s--home .look .l-cap { width: 170px; height: 170px; transform: translateX(-50%) translateX(-140px) rotate(-10deg); }
}

/* La fiche produit (.n8-sheet) est montée sur body, HORS de .n8s : la règle `.n8s .gl` ne
   l'atteignait pas et l'image s'ouvrait sans glitch (David 03/10 : « que le glitch ait bien lieu
   dans la section qui s'ouvre »). Les keyframes `glitch` sont globales dans nosk8-shop-lumiere.css. */
.n8-sheet .gl { animation: glitch .55s steps(1); }

/* Feuilles (fiche produit, filtres) : la croix « Fermer » était peinte SOUS l'image de la fiche
   (.n8-img est positionnée et vient après dans le DOM, la croix n'avait pas de z-index, et son gris
   #f1f1f1 se confondait avec le fond #f3f1ec de l'image). David 03/10 : « la croix pour fermer est
   cachée par l'image ». La croix passe au-dessus, en blanc bordé, et le corps de la fiche démarre
   sous elle pour que rien ne se superpose (le cœur de l'image reste à sa place). */
.n8-sheet .n8-x { z-index: 5; background: #fff; border: 1px solid #e3e3e3; box-shadow: 0 2px 8px rgba(17,17,17,.12); }
.n8-sheet .n8-x:hover { background: #1a2744; color: #fff; border-color: #1a2744; }
.n8-sheet.n8-fiche .n8-corps { padding-top: 40px; }
.n8-sheet.n8-filtre .n8-corps { padding-top: 40px; }