/* ==========================================================================
   NovaFisko — en-tête flottant « liquid glass » (même esprit que novadesko.com,
   couleurs NovaFisko sky → violet). Desktop : barre centrée, liens au centre,
   langue / thème / CTA à droite. Mobile : burger → tiroir glass à droite.
   Le CTA « Se connecter » devient « Accéder » quand le cookie nf_logged=1
   (posé par app.novafisko.com à la connexion) est présent.
   ========================================================================== */
:root{
  --nfh-h:60px;
  --nfh-spring:cubic-bezier(.34,1.56,.64,1);
  --nfh-ease:cubic-bezier(.16,1,.3,1);
}
main{padding-top:calc(var(--nfh-h) + 24px)}
/* Le tiroir translaté hors écran ne doit jamais élargir la page (mobile) ; ancres sous la barre flottante. */
html{overflow-x:clip}
[id]{scroll-margin-top:calc(var(--nfh-h) + 32px)}

/* Barre */
.nf-header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:center;padding:12px 16px;pointer-events:none}
.nf-nav{pointer-events:auto;position:relative;width:100%;max-width:1120px;display:flex;align-items:center;gap:10px;
  height:var(--nfh-h);padding:0 10px 0 16px;border-radius:20px;
  background:color-mix(in srgb,var(--surface) 58%,transparent);
  border:1px solid color-mix(in srgb,var(--border) 70%,transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.55);backdrop-filter:blur(18px) saturate(1.55);
  box-shadow:0 10px 30px -14px rgba(15,23,42,.28),inset 0 1px 0 rgba(255,255,255,.55);
  transition:background-color .45s var(--nfh-ease),box-shadow .45s var(--nfh-ease),transform .45s var(--nfh-ease),border-color .45s;
  animation:nfh-drop .7s var(--nfh-spring) both}
[data-theme="dark"] .nf-nav{background:color-mix(in srgb,var(--surface) 55%,transparent);box-shadow:0 14px 36px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08)}
.nf-nav.is-scrolled{background:color-mix(in srgb,var(--surface) 86%,transparent);box-shadow:0 12px 32px -14px rgba(15,23,42,.35),0 1px 3px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(24px) saturate(1.7);backdrop-filter:blur(24px) saturate(1.7)}
[data-theme="dark"] .nf-nav.is-scrolled{background:color-mix(in srgb,var(--surface) 88%,transparent)}
.nf-nav.is-hidden{transform:translateY(calc(-100% - 16px))}
@keyframes nfh-drop{0%{opacity:0;transform:translateY(-22px) scale(.98)}100%{opacity:1;transform:none}}

/* Logo : petit salut au survol */
.nf-logo{display:flex;align-items:center;flex:none;transition:transform .5s var(--nfh-spring)}
.nf-logo:hover{transform:rotate(-3deg) scale(1.05)}
.nf-logo img{height:28px;display:block}

/* Liens centrés (desktop) */
.nf-links{display:none;flex:1;justify-content:center;align-items:center;gap:2px;min-width:0;overflow:hidden}
.nf-links a{position:relative;color:var(--text-2);font-size:14px;font-weight:500;padding:8px 12px;border-radius:12px;text-decoration:none!important;
  transition:color .2s,transform .35s var(--nfh-spring),background-color .2s}
.nf-links a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--grad);
  transform:scaleX(0);transform-origin:50% 50%;transition:transform .35s var(--nfh-spring)}
.nf-links a:hover,.nf-links a:focus-visible{color:var(--text);transform:translateY(-1px)}
.nf-links a:hover::after,.nf-links a:focus-visible::after,.nf-links a.is-active::after{transform:scaleX(1)}

/* Droite : langue, thème, CTA */
.nf-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.nf-lang{display:none;gap:2px;border:1px solid color-mix(in srgb,var(--border) 80%,transparent);border-radius:999px;padding:2px;background:color-mix(in srgb,var(--surface) 40%,transparent)}
.nf-lang a{font-size:11.5px;font-weight:700;padding:4px 8px;border-radius:999px;color:var(--text-3);text-decoration:none!important;transition:background-color .2s,color .2s,transform .3s var(--nfh-spring)}
.nf-lang a:hover{color:var(--text);transform:translateY(-1px)}
.nf-lang a.active{background:var(--surface-3);color:var(--text)}
.nf-theme{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--border) 80%,transparent);
  border-radius:999px;background:color-mix(in srgb,var(--surface) 40%,transparent);color:var(--text-2);cursor:pointer;transition:transform .5s var(--nfh-spring),background-color .2s}
.nf-theme:hover{background:var(--surface-2);transform:rotate(-20deg) scale(1.08)}
.nf-theme.is-spinning i{animation:nfh-spin .6s var(--nfh-spring)}
@keyframes nfh-spin{from{transform:rotate(0) scale(.6)}to{transform:rotate(360deg) scale(1)}}

.nf-cta{position:relative;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;overflow:hidden;
  background:var(--grad);background-size:140% 140%;color:#fff!important;font-size:13.5px;font-weight:600;text-decoration:none!important;white-space:nowrap;
  box-shadow:0 6px 18px -8px rgba(124,58,237,.6);transition:transform .45s var(--nfh-spring),box-shadow .3s,background-position .6s}
.nf-cta:hover{transform:translateY(-2px) scale(1.045);box-shadow:0 12px 26px -10px rgba(124,58,237,.75);background-position:90% 10%}
.nf-cta:active{transform:translateY(0) scale(.97)}
.nf-cta i{font-size:14px;transition:transform .45s var(--nfh-spring)}
.nf-cta:hover i{transform:translate(1px,-2px) rotate(-10deg)}
.nf-cta .nf-shine{position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .7s var(--nfh-ease)}
.nf-cta:hover .nf-shine{left:120%}
.nf-cta .nf-dot{display:none;width:7px;height:7px;border-radius:999px;background:#34D399;box-shadow:0 0 0 0 rgba(52,211,153,.7);animation:nfh-pulse 1.8s infinite}
.nf-cta.is-access .nf-dot{display:inline-block}
.nf-cta.is-swap{animation:nfh-flip .55s var(--nfh-spring)}
@keyframes nfh-flip{0%{transform:rotateX(90deg) scale(.9);opacity:0}100%{transform:none;opacity:1}}
@keyframes nfh-pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.7)}70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.nf-cta-text-desktop{display:none}

/* Drapeaux + sélecteur de langue */
.nf-flag{width:20px;height:14px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(15,23,42,.12);flex:none}
.nf-lang a{display:inline-flex;align-items:center;gap:6px}
.nf-langdd{position:relative;display:none}
.nf-langbtn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 10px 0 8px;border:1px solid color-mix(in srgb,var(--border) 80%,transparent);border-radius:999px;
  background:color-mix(in srgb,var(--surface) 40%,transparent);color:var(--text);font:600 12.5px/1 var(--font);cursor:pointer;transition:background-color .2s,transform .4s var(--nfh-spring)}
.nf-langbtn:hover{background:var(--surface-2);transform:translateY(-1px)}
.nf-langbtn i{font-size:10px;color:var(--text-3);transition:transform .4s var(--nfh-spring)}
.nf-langdd.is-open .nf-langbtn i{transform:rotate(180deg)}
.nf-langpanel{position:absolute;right:0;top:calc(100% + 10px);min-width:190px;padding:6px;border-radius:16px;z-index:130;
  background:color-mix(in srgb,var(--surface) 90%,transparent);border:1px solid color-mix(in srgb,var(--border) 80%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:0 18px 40px -16px rgba(15,23,42,.4),inset 0 1px 0 rgba(255,255,255,.5);
  opacity:0;visibility:hidden;transform:translateY(8px) scale(.96);transform-origin:top right;transition:opacity .25s,transform .4s var(--nfh-spring),visibility 0s .4s}
.nf-langdd.is-open .nf-langpanel{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .4s var(--nfh-spring),visibility 0s}
.nf-langpanel a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:11px;color:var(--text);font-size:13.5px;font-weight:500;text-decoration:none!important;transition:background-color .2s,transform .35s var(--nfh-spring)}
.nf-langpanel a:hover{background:var(--surface-2);transform:translateX(3px)}
.nf-langpanel a .fa-check{margin-left:auto;font-size:11px;color:var(--violet-600);opacity:0;transform:scale(.4);transition:opacity .25s,transform .4s var(--nfh-spring)}
.nf-langpanel a.is-active .fa-check{opacity:1;transform:none}
.nf-langdd.is-open .nf-langpanel a{animation:nfh-pop .45s var(--nfh-spring) both;animation-delay:calc(var(--i,0) * 40ms)}

/* Burger */
.nf-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;padding:0 10px;border:0;background:transparent;cursor:pointer;border-radius:12px;transition:background-color .2s,transform .4s var(--nfh-spring)}
.nf-burger:hover{background:var(--surface-2);transform:scale(1.06)}
.nf-burger span{display:block;height:2px;border-radius:2px;background:var(--text);transition:transform .45s var(--nfh-spring),opacity .25s,width .3s}
.nf-burger span:nth-child(2){width:70%}
.nf-burger:hover span:nth-child(2){width:100%}
.nf-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nf-burger.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nf-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Tiroir mobile */
.nf-overlay{position:fixed;inset:0;z-index:110;background:rgba(15,23,42,.35);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.nf-overlay.is-open{opacity:1;visibility:visible}
.nf-drawer{visibility:hidden;position:fixed;top:12px;right:12px;bottom:12px;z-index:120;width:min(86vw,340px);display:flex;flex-direction:column;border-radius:22px;
  background:color-mix(in srgb,var(--surface) 86%,transparent);border:1px solid color-mix(in srgb,var(--border) 80%,transparent);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:0 24px 60px -20px rgba(15,23,42,.5),inset 0 1px 0 rgba(255,255,255,.5);
  transform:translateX(calc(100% + 24px)) rotate(2deg);opacity:0;transition:transform .55s var(--nfh-spring),opacity .3s,visibility 0s .55s;overflow:hidden}
.nf-drawer.is-open{visibility:visible;transform:none;opacity:1;transition:transform .55s var(--nfh-spring),opacity .3s,visibility 0s}
.nf-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px 18px;border-bottom:1px solid var(--border)}
.nf-drawer-head img{height:26px}
.nf-close{width:36px;height:36px;border:0;border-radius:999px;background:var(--surface-2);color:var(--text-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .45s var(--nfh-spring),background-color .2s}
.nf-close:hover{transform:rotate(90deg) scale(1.08);background:var(--surface-3)}
.nf-drawer-links{display:flex;flex-direction:column;gap:4px;padding:14px;overflow-y:auto}
.nf-drawer-links a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:14px;color:var(--text);font-size:15px;font-weight:500;text-decoration:none!important;
  transition:background-color .2s,transform .35s var(--nfh-spring)}
.nf-drawer-links a i{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:var(--surface-2);color:var(--violet-600);font-size:14px;transition:transform .45s var(--nfh-spring),background-color .2s}
.nf-drawer-links a:hover{background:var(--surface-2);transform:translateX(4px)}
.nf-drawer-links a:hover i{transform:rotate(-8deg) scale(1.1);background:var(--violet-100)}
[data-theme="dark"] .nf-drawer-links a:hover i{background:#1d1435}
.nf-drawer.is-open .nf-drawer-links a{animation:nfh-pop .55s var(--nfh-spring) both;animation-delay:calc(var(--i,0) * 55ms + 80ms)}
@keyframes nfh-pop{0%{opacity:0;transform:translateX(28px) scale(.96)}100%{opacity:1;transform:none}}
.nf-drawer-foot{margin-top:auto;padding:14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:12px}
.nf-drawer-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nf-drawer-foot .nf-lang{display:flex}
.nf-drawer-foot .nf-cta{justify-content:center;height:44px;font-size:14.5px}

/* Points de rupture */
@media(min-width:1024px){
  .nf-links{display:flex}
  .nf-langdd{display:block}
  .nf-burger{display:none}
  .nf-cta-text-desktop{display:inline}
  .nf-cta-text-mobile{display:none}
}
@media(min-width:1024px) and (max-width:1199.98px){
  .nf-links a{padding:8px 9px;font-size:13.5px}
  .nf-lang a{padding:4px 6px}
}
@media(max-width:1023.98px){
  .nf-nav{padding-left:12px}
  .nf-right .nf-cta{height:34px;padding:0 13px;font-size:13px}
}
@media(max-width:480px){
  .nf-header{padding:8px 10px}
  .nf-nav{height:54px;border-radius:16px}
  :root{--nfh-h:54px}
  .nf-logo img{height:24px}
  .nf-right .nf-cta span{display:none}
  .nf-right .nf-cta{width:34px;padding:0;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .nf-nav,.nf-drawer,.nf-drawer.is-open .nf-drawer-links a,.nf-cta.is-swap,.nf-theme.is-spinning i{animation:none!important}
  .nf-nav,.nf-cta,.nf-logo,.nf-links a,.nf-drawer,.nf-burger span,.nf-close,.nf-theme{transition-duration:.01ms!important}
}