/* Rotter'Dev — navigation hybride (Apple x Nike x Rotter'Dev), 2026-11-06 */
:root { --nh-h: 60px; --nh-ruban: 34px; }

/* Ruban utilitaire (idée Nike) : fin, se replie dès qu'on défile */
.nh-ruban { position: fixed; top: 0; left: 0; right: 0; z-index: 61; height: var(--nh-ruban); background: linear-gradient(90deg, #12050F, #1C0718 50%, #12050F); border-bottom: 1px solid rgba(255,179,230,.08); font-family: var(--f-titre); font-size: .72rem; letter-spacing: .08em; color: var(--gris); transition: transform .5s var(--c-douce), opacity .4s; }
.nh-ruban .conteneur { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nh-ruban .dispo { display: inline-flex; align-items: center; gap: 10px; }
.nh-ruban .point { width: 6px; height: 6px; border-radius: 50%; background: #FF2EBE; box-shadow: 0 0 0 0 rgba(255,46,190,.6); animation: nh-pulse 2.4s infinite; }
.nh-ruban .liens { display: flex; gap: 22px; }
.nh-ruban a { color: var(--gris); transition: color .3s; } .nh-ruban a:hover { color: var(--blanc); }
.nh-ruban .or { color: #FFB3E6; }
@keyframes nh-pulse { 70% { box-shadow: 0 0 0 7px rgba(255,46,190,0); } 100% { box-shadow: 0 0 0 0 rgba(255,46,190,0); } }

/* Barre principale (idée Apple) : fine, noire translucide, floutée */
.nh { position: fixed; top: var(--nh-ruban); left: 0; right: 0; z-index: 60; height: var(--nh-h); background: rgba(11,11,13,.55); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); transition: transform .55s var(--c-douce), top .55s var(--c-douce), background .4s; }
.nh::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,168,106,.0) 10%, rgba(201,168,106,.55) 50%, rgba(255,46,190,.35) 75%, transparent); opacity: 0; transition: opacity .5s; }
.nh .conteneur { height: 100%; display: flex; align-items: center; gap: 28px; }
.nh .marque { font-size: .82rem; } .nh .marque img { width: 26px; }
.nh-liens { position: relative; display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.nh-lien { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border: 0; background: none; font-family: var(--f-titre); font-size: .82rem; letter-spacing: .02em; color: var(--gris); cursor: pointer; transition: color .3s; }
.nh-lien:hover, .nh-lien[aria-expanded="true"], .nh-lien[aria-current="page"] { color: var(--blanc); }
.nh-lien .chevron { width: 9px; height: 9px; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .4s var(--c-douce); opacity: .6; }
.nh-lien[aria-expanded="true"] .chevron { transform: rotate(180deg); }
/* Pilule qui glisse sous le lien survolé (notre touche) */
.nh-pilule { position: absolute; z-index: 0; top: 50%; height: 36px; translate: 0 -50%; border-radius: 999px; background: rgba(255,179,230,.08); border: 1px solid rgba(255,179,230,.14); opacity: 0; transition: left .45s var(--c-douce), width .45s var(--c-douce), opacity .3s; pointer-events: none; }
.nh-pilule::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, #FFB3E6, #FF2EBE, transparent); }
.nh-actions { display: flex; align-items: center; gap: 18px; }
.nh-actions .lien-discret { font-family: var(--f-titre); font-size: .8rem; color: var(--gris); }
.nh-actions .lien-discret:hover { color: var(--blanc); }
.nh .btn-petit { --h: 38px; padding: 0 18px; font-size: .8rem; }

/* États au défilement (idée Nike) */
body.nh-defile .nh-ruban { transform: translateY(-100%); opacity: 0; }
body.nh-defile .nh { top: 0; background: rgba(11,11,13,.72); }
body.nh-defile .nh::after { opacity: 1; }
body.nh-cache .nh { transform: translateY(-100%); }

/* Panneau déroulant (idée Apple) : pleine largeur, gros liens + colonnes */
.nh-panneau { position: fixed; left: 0; right: 0; top: calc(var(--nh-ruban) + var(--nh-h)); z-index: 59; background: linear-gradient(180deg, rgba(11,11,13,.9), rgba(28,7,24,.92)); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); border-bottom: 1px solid var(--trait); clip-path: inset(0 0 100% 0); transition: clip-path .6s var(--c-douce), top .55s var(--c-douce); }
body.nh-defile .nh-panneau { top: var(--nh-h); }
body.nh-ouvert .nh-panneau { clip-path: inset(0 0 0 0); }
.nh-contenu { display: none; padding: 44px 0 52px; }
.nh-contenu.actif { display: block; }
.nh-grille { display: grid; grid-template-columns: 1.6fr .9fr .9fr 1.25fr; gap: 48px; align-items: start; }
.nh-titre { font-family: var(--f-titre); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gris-2); margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.nh-titre::before { content: ""; width: 20px; height: 1px; background: var(--or); }
.nh-gros a { display: block; font-family: var(--f-titre); font-size: 1.75rem; font-weight: 300; line-height: 1.25; padding: 4px 0; color: var(--blanc); transition: color .3s, transform .4s var(--c-douce); }
.nh-gros a:hover { color: #FFB3E6; transform: translateX(6px); }
.nh-gros a small { font-size: .9rem; color: #FF2EBE; margin-left: 8px; }
.nh-petit a { display: block; font-size: .88rem; color: var(--gris); padding: 5px 0; transition: color .3s; }
.nh-petit a:hover { color: var(--blanc); }
.nh-carte { position: relative; display: block; border-radius: 18px; overflow: hidden; border: 1px solid var(--trait); background: var(--noir-2); aspect-ratio: 16/10; }
.nh-carte img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: transform .8s var(--c-douce); }
.nh-carte:hover img { transform: scale(1.04); }
.nh-carte .legende { position: absolute; left: 16px; bottom: 14px; right: 16px; font-family: var(--f-titre); font-size: .9rem; display: flex; justify-content: space-between; align-items: center; }
.nh-carte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(11,11,13,.9)); }
.nh-carte .legende { z-index: 1; } .nh-carte em { margin-bottom: 4px; }
.nh-carte em { font-style: normal; font-size: .7rem; letter-spacing: .2em; color: #E9D3A6; text-transform: uppercase; display: block; }
/* Cascade d'apparition */
.nh-cascade > * { opacity: 0; transform: translateY(-8px); transition: opacity .45s, transform .55s var(--c-douce); }
body.nh-ouvert .nh-contenu.actif .nh-cascade > * { opacity: 1; transform: none; }
/* La page derrière se floute (idée Apple) */
.nh-voile { position: fixed; inset: 0; z-index: 58; background: rgba(5,5,7,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
body.nh-ouvert .nh-voile { opacity: 1; visibility: visible; }

/* Le héros passe sous la barre (ruban + barre = 94 px) */
.page-audace .a-hero { margin-top: 0; padding-top: calc(var(--nh-ruban) + var(--nh-h)); }

/* Téléphone : barre + menu plein écran à gros liens */
.nh-burger { display: none; width: 40px; height: 40px; border: 0; background: none; position: relative; cursor: pointer; margin-left: auto; }
.nh-burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--blanc); transition: transform .45s var(--c-douce), top .45s var(--c-douce); }
.nh-burger span:nth-child(1) { top: 16px; } .nh-burger span:nth-child(2) { top: 23px; }
body.nh-mobile .nh-burger span:nth-child(1) { top: 19.5px; transform: rotate(45deg); }
body.nh-mobile .nh-burger span:nth-child(2) { top: 19.5px; transform: rotate(-45deg); }
.nh-tel { position: fixed; inset: 0; z-index: 57; background: rgba(11,11,13,.96); backdrop-filter: blur(24px); padding: calc(var(--nh-h) + 32px) 24px 32px; display: flex; flex-direction: column; gap: 4px; opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
body.nh-mobile .nh-tel { opacity: 1; visibility: visible; }
.nh-tel a.gros { font-family: var(--f-titre); font-size: 2rem; font-weight: 300; padding: 10px 0; display: flex; justify-content: space-between; border-bottom: 1px solid var(--trait); opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s var(--c-douce); }
body.nh-mobile .nh-tel a.gros { opacity: 1; transform: none; }
.nh-tel .bas { margin-top: auto; display: grid; gap: 12px; }
@media (max-width: 900px) {
  :root { --nh-ruban: 0px; }
  .nh-ruban, .nh-liens, .nh-actions { display: none; }
  .nh-burger { display: block; }
  .nh { top: 0; }
}
@media (prefers-reduced-motion: reduce) { .nh, .nh-ruban, .nh-panneau, .nh-cascade > * { transition: none !important; } }

/* Bouton de la barre : même matière que les boutons de l'accueil V1.1 */
.nh .nh-cta { height: 38px; padding: 0 18px; font-size: .8rem; gap: 10px; }
.nh-carte { border-color: rgba(255,179,230,.14); }

/* RotterBot V2 : petite précision sous un lien du menu (2026-11-08) */
.nh-petit a .nh-detail { display: block; margin-top: 2px; font-size: .75rem; color: rgba(245,245,247,.45); }