/* =====================================================================
   LES 6 BOUTONS DE L'ACCUEIL — version simple : pas de photo, pas d'animation 3D
   Chaque bouton garde sa couleur (--c, --c-rgb, --ic). Au survol (ou au focus clavier) : il se soulève un peu,
   son contour et sa lueur s'allument, la flèche se remplit et avance → on sait toujours où l'on est.
   ===================================================================== */
.nb{position:relative;display:flex;align-items:center;gap:16px;width:100%;height:85px;padding:0 14px 0 14px;border-radius:24px;
  text-decoration:none;color:#f4f4f8;-webkit-tap-highlight-color:transparent;isolation:isolate;
  background:linear-gradient(110deg,rgba(var(--c-rgb),.3),rgba(var(--c-rgb),.09) 55%,rgba(var(--c-rgb),.2)),#05060c;
  box-shadow:inset 0 0 0 1px rgba(var(--c-rgb),.55),0 0 22px rgba(var(--c-rgb),.2);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,background-color .28s ease}
/* reflet qui suit le bord haut */
.nb::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(120% 140% at 0% 0%,rgba(var(--c-rgb),.22),transparent 55%);opacity:.7;transition:opacity .28s ease}
.nb__icon{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:16px;color:var(--ic);
  background:rgba(var(--c-rgb),.16);box-shadow:inset 0 0 0 1px rgba(var(--c-rgb),.45);transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease}
.nb__icon svg{width:28px;height:28px;filter:drop-shadow(0 0 6px rgba(var(--c-rgb),.55))}
.nb__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.nb__title{font:600 20px/1.1 Outfit,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb__sub{font:500 13px/1.2 Outfit,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;color:rgba(244,244,248,.66);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nb__arrow{flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;color:#fff;
  background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(var(--c-rgb),.45);
  transition:background-color .28s ease,color .28s ease,transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease}
.nb__arrow svg{width:22px;height:22px;transition:transform .28s cubic-bezier(.2,.8,.2,1)}

/* ----- survol / focus : on sait où l'on est ----- */
.nb:hover,.nb:focus-visible{transform:translateY(-3px);
  box-shadow:inset 0 0 0 1.5px rgba(var(--c-rgb),.9),0 10px 28px rgba(var(--c-rgb),.28),0 0 34px rgba(var(--c-rgb),.3)}
.nb:hover::before,.nb:focus-visible::before{opacity:1}
.nb:hover .nb__icon,.nb:focus-visible .nb__icon{transform:scale(1.06);box-shadow:inset 0 0 0 1.5px rgba(var(--c-rgb),.8)}
.nb:hover .nb__arrow,.nb:focus-visible .nb__arrow{background:var(--c);color:#05060c;box-shadow:0 0 18px rgba(var(--c-rgb),.6)}
.nb:hover .nb__arrow svg,.nb:focus-visible .nb__arrow svg{transform:translateX(3px)}
.nb:active{transform:translateY(-1px) scale(.985);transition-duration:.1s}
.nb:focus-visible{outline:2px solid var(--c);outline-offset:4px}

/* ----- mode jour ----- */
:root[data-theme="light"] .nb{color:#141a2e;background:linear-gradient(110deg,rgba(var(--c-rgb),.18),rgba(var(--c-rgb),.05) 55%,rgba(var(--c-rgb),.12)),#fff;
  box-shadow:inset 0 0 0 1px rgba(var(--c-rgb),.4),0 6px 18px rgba(20,26,46,.06)}
:root[data-theme="light"] .nb__icon{background:rgba(var(--c-rgb),.12);color:var(--c)}
:root[data-theme="light"] .nb__icon svg{filter:none}
:root[data-theme="light"] .nb__sub{color:rgba(20,26,46,.6)}
:root[data-theme="light"] .nb__arrow{color:#141a2e;background:#fff}
:root[data-theme="light"] .nb:hover,:root[data-theme="light"] .nb:focus-visible{box-shadow:inset 0 0 0 1.5px rgba(var(--c-rgb),.85),0 12px 26px rgba(var(--c-rgb),.22)}
:root[data-theme="light"] .nb:hover .nb__arrow,:root[data-theme="light"] .nb:focus-visible .nb__arrow{color:#fff;background:var(--c)}
/* bande dessinée : blanc la nuit, encre foncée le jour */
:root[data-theme="light"] .nb--bd{--c:#1b1f2e!important;--c-rgb:27,31,46!important;--ic:#1b1f2e!important}
.nb--bd:hover .nb__arrow,.nb--bd:focus-visible .nb__arrow{color:#05060c}

/* ----- téléphone ----- */
@media (max-width:760px){
  .nb{height:70px;gap:12px;padding:0 10px;border-radius:20px}
  .nb__icon{width:48px;height:48px;border-radius:14px}
  .nb__icon svg{width:24px;height:24px}
  .nb__title{font-size:17px}
  .nb__sub{font-size:12px}
  .nb__arrow{width:42px;height:42px}
  .nb__arrow svg{width:19px;height:19px}
  .nb:hover,.nb:focus-visible{transform:none}
}
@media (prefers-reduced-motion:reduce){ .nb,.nb *,.nb::before{transition:none!important} .nb:hover,.nb:focus-visible{transform:none} }