/* =========================================================================
   NAVIGATION — Webcraft · 24/10/2026 (Raphaël : option B, à la place du menu à gauche)
   1. Une barre fine en haut : le logo, « Parlons de votre projet », le bouton Menu. Transparente en haut de page,
      elle se voile (flou sombre) dès qu'on fait défiler.
   2. Un menu plein écran : les 5 pôles en grand, numérotés ; au survol d'un pôle, son mercure s'allume à droite,
      dans sa couleur, comme les volets du hub de l'accueil. L'agence et les coordonnées en pied.
   ========================================================================= */

/* Plus de colonne de menu : la page prend toute la largeur */
.shell{display:block!important;grid-template-columns:none!important}
.shell > main,.plan{grid-column:auto!important;max-width:none!important;width:100%!important}
aside.rail,.rail,.voile,.bandeau{display:none!important}

/* ---------- 1. La barre fine ---------- */
.nb{position:fixed;inset:0 0 auto 0;z-index:900;display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 clamp(20px,3vw,48px);
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;transition:background .5s,backdrop-filter .5s,border-color .5s,transform .5s cubic-bezier(.22,1,.36,1);border-bottom:1px solid transparent}
.nb.est-defile{background:rgba(10,11,14,.62);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:rgba(220,229,242,.08)}
.nb.est-cachee{transform:translateY(-100%)}
.nb__marque{display:block;line-height:0}
.nb__marque img{width:150px!important;height:auto!important;object-fit:contain!important;filter:none!important;mix-blend-mode:screen}
.nb__droite{display:flex;align-items:center;gap:10px}
.nb__cta,.nb__menu{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border-radius:999px;font:600 14px/1 "Plus Jakarta Sans",system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:background .3s,color .3s,border-color .3s,transform .3s}
.nb__cta{color:#0A0B0E;background:linear-gradient(135deg,#F7FAFF 0%,#DCE5F2 55%,#AEBBCE 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.nb__cta:hover{transform:translateY(-1px)}
.nb__menu{border:1px solid rgba(220,229,242,.28);background:rgba(10,11,14,.35);color:#F7FAFF;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.nb__menu:hover{border-color:rgba(220,229,242,.6)}
.nb__burger{position:relative;width:18px;height:10px}
.nb__burger i{position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:currentColor;transition:transform .45s cubic-bezier(.22,1,.36,1),top .45s cubic-bezier(.22,1,.36,1)}
.nb__burger i:first-child{top:0}.nb__burger i:last-child{top:8.5px}
html.menu-plein .nb__burger i:first-child{top:4.25px;transform:rotate(45deg)}
html.menu-plein .nb__burger i:last-child{top:4.25px;transform:rotate(-45deg)}
html.menu-plein .nb{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent;transform:none}
html.menu-plein .nb__cta{opacity:0;pointer-events:none}

/* ---------- 2. Le menu plein écran ---------- */
.np{position:fixed;inset:0;z-index:850;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:#07080B;color:#F7FAFF;font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .8s cubic-bezier(.76,0,.24,1),visibility 0s linear .8s}
html.menu-plein .np{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .8s cubic-bezier(.76,0,.24,1),visibility 0s}
html.menu-plein,html.menu-plein body{overflow:hidden!important}
.np__contenu{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:space-between;min-height:0;overflow-y:auto;padding:clamp(100px,13vh,140px) clamp(24px,5vw,96px) clamp(28px,4vh,48px)}
.np__titre{margin:0 0 18px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(138,154,178,.9)}
.np__poles ul{list-style:none;margin:0;padding:0;border-top:1px solid rgba(220,229,242,.1)}
.np-pole{border-bottom:1px solid rgba(220,229,242,.1);opacity:0;transform:translateY(28px);transition:opacity .5s ease,transform .8s cubic-bezier(.22,1,.36,1)}
html.menu-plein .np-pole{opacity:1;transform:none}
html.menu-plein .np-pole:nth-child(1){transition-delay:.28s}html.menu-plein .np-pole:nth-child(2){transition-delay:.34s}html.menu-plein .np-pole:nth-child(3){transition-delay:.4s}
html.menu-plein .np-pole:nth-child(4){transition-delay:.46s}html.menu-plein .np-pole:nth-child(5){transition-delay:.52s}
.np-pole__nom{display:flex;align-items:baseline;gap:clamp(14px,1.6vw,28px);padding:clamp(10px,1.6vh,18px) 0 4px;color:inherit;text-decoration:none}
.np-pole__num{flex:none;width:28px;font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--c);opacity:.9}
.np-pole__titre{font-size:clamp(34px,4.4vw,76px);font-weight:600;letter-spacing:-.04em;line-height:1.02;color:rgba(247,250,255,.55);transition:color .4s,transform .6s cubic-bezier(.22,1,.36,1)}
.np-nouveau{align-self:center;padding:4px 10px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0A0B0E;background:var(--c)}
.np-pole__sous{display:flex;flex-wrap:wrap;gap:4px 22px;padding:0 0 clamp(10px,1.6vh,18px) calc(28px + clamp(14px,1.6vw,28px));max-height:0;overflow:hidden;opacity:0;transition:max-height .6s cubic-bezier(.22,1,.36,1),opacity .4s}
.np-pole__sous a{font-size:15px;color:rgba(220,229,242,.7);text-decoration:none;transition:color .25s}
.np-pole__sous a:hover,.np-pole__sous a[aria-current]{color:#FFFFFF}
.np-pole__sous a[aria-current]::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--c);vertical-align:middle}
.np-pole.est-actif .np-pole__titre,.np-pole:focus-within .np-pole__titre{color:#FFFFFF;transform:translateX(10px)}
.np-pole.est-actif .np-pole__sous,.np-pole:focus-within .np-pole__sous{max-height:120px;opacity:1}
.np-pole.est-ici .np-pole__titre{color:#FFFFFF}
.np__pied{display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,96px);margin-top:clamp(28px,5vh,56px);opacity:0;transition:opacity .6s .6s}
html.menu-plein .np__pied{opacity:1}
.np__pied a,.np__pied p:not(.np__titre){display:block;margin:0 0 8px;font-size:15px;line-height:1.5;color:rgba(220,229,242,.75);text-decoration:none}
.np__pied a:hover{color:#FFFFFF}

/* Le mercure du pôle survolé, à droite */
.np__matiere{grid-column:2;grid-row:1;position:relative;overflow:hidden;background:#07080B}
.np__matiere::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#07080B,transparent 30%),linear-gradient(0deg,rgba(7,8,11,.6),transparent 40%);pointer-events:none}
.np-matiere__image{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;opacity:0;transform:scale(1.12);filter:saturate(1.1);transition:opacity .9s ease,transform 6s cubic-bezier(.22,1,.36,1)}
.np-matiere__image.est-actif{opacity:1;transform:scale(1)}
html.menu-plein .np__matiere{animation:np-entre 1.2s cubic-bezier(.22,1,.36,1) both}
@keyframes np-entre{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}

@media (max-width:900px){
  .nb{height:64px}
  .nb__cta{display:none}
  .np{grid-template-columns:1fr}
  .np__matiere{position:absolute;inset:0;grid-column:1;opacity:.28}
  .np__contenu{position:relative;padding-top:96px}
  .np-pole__sous{max-height:none;opacity:1}
  .np-pole__titre{font-size:clamp(30px,8.4vw,44px);color:#F7FAFF}
}
@media (prefers-reduced-motion:reduce){
  .np,.np-pole,.np__pied,.np-matiere__image,.nb{transition:none!important}
  html.menu-plein .np__matiere{animation:none}
}
/* Le mercure prend la couleur du pôle survolé (les images sources sont argentées) : un voile « couleur » par-dessus */
.np__matiere::before{content:"";position:absolute;inset:0;z-index:1;background:var(--actif,#DCE5F2);mix-blend-mode:color;opacity:.85;transition:background .8s ease;pointer-events:none}
.np__matiere::after{z-index:2}

/* ---------- Largeur de page (24/10, Raphaël : « il y a un gap, tout est trop centré ») ----------
   Sans le menu à gauche, la largeur de contenu de 1280 px laissait un grand vide de chaque côté.
   Le contenu s'élargit (1600 px, 1800 px sur très grand écran) et la barre du haut s'aligne exactement
   sur le même bord que le contenu : le logo tombe au-dessus des titres. */
:root{--w-env-max:1600px}
@media (min-width:2200px){:root{--w-env-max:1800px}}
.enveloppe{max-width:var(--w-env-max)!important}
.nb{padding-inline:max(var(--w-gouttiere,clamp(24px,5vw,96px)),calc((100% - var(--w-env-max)) / 2 + var(--w-gouttiere,clamp(24px,5vw,96px))))}

/* ---------- Menu plein écran, version 2 (24/10, Raphaël : « trop gros », « on ne voit pas les sous-pages ») ----------
   Les 5 pôles en 5 colonnes, chacune avec TOUTES ses pages visibles d'emblée. Titres de taille raisonnable.
   Le mercure du pôle survolé passe en fond, sur toute la largeur, discret. Le focus clavier reste visible mais fin. */
.np{grid-template-columns:1fr}
.np__matiere{grid-column:1;grid-row:1;opacity:.34}
.np__matiere::after{background:linear-gradient(180deg,rgba(7,8,11,.55),rgba(7,8,11,.82) 60%,#07080B)}
html.menu-plein .np__matiere{animation:none}
.np__contenu{grid-column:1;grid-row:1;position:relative;z-index:3;justify-content:center;gap:clamp(40px,7vh,88px);
  padding:clamp(120px,16vh,170px) max(var(--w-gouttiere,clamp(24px,5vw,96px)),calc((100% - var(--w-env-max)) / 2 + var(--w-gouttiere,clamp(24px,5vw,96px)))) clamp(32px,5vh,56px)}
.np__poles ul{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,40px);border-top:0}
.np-pole{border-bottom:0;border-top:1px solid rgba(220,229,242,.14);padding-top:22px;transition:opacity .5s ease,transform .8s cubic-bezier(.22,1,.36,1),border-color .4s}
.np-pole.est-actif,.np-pole:focus-within{border-top-color:var(--c)}
.np-pole__nom{flex-direction:column;align-items:flex-start;gap:12px;padding:0 0 18px}
.np-pole__num{width:auto}
.np-pole__titre{font-size:clamp(22px,1.8vw,30px);letter-spacing:-.02em;line-height:1.15;color:#F7FAFF}
.np-pole.est-actif .np-pole__titre,.np-pole:focus-within .np-pole__titre{transform:none}
.np-nouveau{align-self:flex-start;margin-top:-4px}
.np-pole__nom{position:relative}
.np-pole__nom .np-nouveau{position:absolute;top:0;right:0}
.np-pole__sous{flex-direction:column;flex-wrap:nowrap;gap:2px;padding:0;max-height:none;opacity:1;overflow:visible}
.np-pole__sous a{padding:7px 0;font-size:15.5px;line-height:1.35;color:rgba(220,229,242,.66)}
.np-pole__sous a:hover{color:#FFFFFF;transform:translateX(4px)}
.np-pole__sous a{transition:color .25s,transform .3s}
.np__pied{margin-top:0;padding-top:28px;border-top:1px solid rgba(220,229,242,.1);gap:clamp(32px,6vw,120px)}
.np__agence{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px}
.np__agence .np__titre,.np__coord .np__titre{width:100%;margin-bottom:6px}
.np__coord{display:flex;flex-wrap:wrap;gap:4px 28px}
.np__agence a{font-size:17px!important;color:#F7FAFF!important}
.np a:focus-visible{outline:1px solid rgba(220,229,242,.6);outline-offset:4px;border-radius:4px}
@media (max-width:1100px){.np__poles ul{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}}
@media (max-width:700px){
  .np__poles ul{grid-template-columns:1fr 1fr;row-gap:24px}
  .np__contenu{padding-top:92px;justify-content:flex-start}
  .np-pole__titre{font-size:20px}
  .np-pole__sous a{font-size:14px;padding:5px 0}
}

/* ---------- Mise en page fluide (24/10, Raphaël : « ça ne s'adapte pas à ma résolution ») ----------
   Plus de largeur maximale figée : le contenu suit la largeur de l'écran, avec des marges proportionnelles
   (5 % de chaque côté, entre 20 et 120 px). Seuls les très grands écrans (au-delà de 2400 px) sont plafonnés. */
:root{--w-env-max:2400px;--w-gouttiere:clamp(20px,5vw,120px)}
.enveloppe{padding-inline:var(--w-gouttiere)!important}

/* =========================================================================
   MENU HYBRIDE (24/10, Raphaël : « vas-y » — recommandation Nielsen Norman Group : sur ordinateur, un menu visible)
   Ordinateur (≥ 901 px) : les rubriques sont dans la barre ; « Expertises » ouvre, sous la barre, le panneau des
   5 pôles en colonnes (le même que le menu plein écran, en compact, sans son pied). Le bouton Menu disparaît.
   Téléphone : rien ne change, le bouton Menu ouvre le menu plein écran.
   ========================================================================= */
.nb__liens{display:none}
@media (min-width:901px){
  .nb{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,3vw,56px)}
  .nb__liens{display:flex;align-items:center;gap:clamp(4px,.6vw,10px)}
  .nb__liens > a,.nb__expertises{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:0;border-radius:999px;background:none;
    font:500 15px/1 "Plus Jakarta Sans",system-ui,sans-serif;color:rgba(247,250,255,.78);text-decoration:none;cursor:pointer;transition:color .25s,background .25s}
  .nb__liens > a:hover,.nb__expertises:hover,.nb__expertises[aria-expanded="true"]{color:#FFFFFF;background:rgba(220,229,242,.08)}
  .nb__liens > a[aria-current]{color:#FFFFFF}
  .nb__liens > a[aria-current]::after{content:"";width:5px;height:5px;margin-left:6px;border-radius:50%;background:#DCE5F2}
  .nb__expertises span{font-size:11px;transition:transform .3s}
  .nb__expertises[aria-expanded="true"] span{transform:rotate(180deg)}
  .nb__menu{display:none!important}

  /* Le panneau des pôles, sous la barre */
  .np{inset:72px 0 auto 0;max-height:calc(100vh - 72px);border-bottom:1px solid rgba(220,229,242,.1);box-shadow:0 40px 80px -30px rgba(0,0,0,.85);
    background:rgba(7,8,11,.96);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);clip-path:inset(0 0 100% 0)}
  html.menu-plein .np{clip-path:inset(0 0 0 0)}
  html.menu-plein,html.menu-plein body{overflow:visible!important}
  html.menu-plein .nb{background:rgba(7,8,11,.96)}
  html.menu-plein .nb__cta{opacity:1;pointer-events:auto}
  .np__contenu{padding-top:clamp(28px,4vh,44px)!important;padding-bottom:clamp(28px,4vh,44px)!important;gap:0}
  .np__pied{display:none}
  .np__poles .np__titre{display:none}
  .np-pole{transition-duration:.35s,.5s,.4s}
  html.menu-plein .np-pole:nth-child(n){transition-delay:0s}
  .np__matiere{opacity:.22}
}

/* =========================================================================
   OPTION 5 — LA PILULE FLOTTANTE (24/10, Raphaël : « fais-moi voir la 5 »)
   En haut de page : la barre pleine largeur. Dès qu'on fait défiler, elle se resserre en une capsule flottante
   au centre de l'écran (logo, rubriques, bouton), en verre sombre. Le panneau Expertises s'ouvre sous la capsule,
   en carte arrondie. Ordinateur seulement ; le téléphone garde sa barre et son menu plein écran.
   Retour en arrière : sauvegardes/navigation-avant-pilule-2026-10-24.css|js
   ========================================================================= */
@media (min-width:901px){
  .nb{left:0;right:0;margin:0 auto;max-width:100vw;border-radius:0;
    transition:max-width .7s cubic-bezier(.22,1,.36,1),margin .7s cubic-bezier(.22,1,.36,1),height .6s cubic-bezier(.22,1,.36,1),border-radius .7s,padding .7s cubic-bezier(.22,1,.36,1),background .5s,border-color .5s,box-shadow .6s,transform .5s cubic-bezier(.22,1,.36,1)}
  .nb.est-pilule{max-width:min(1040px,calc(100vw - 48px));margin-top:14px;height:60px;padding-inline:22px 8px!important;border-radius:999px;
    background:rgba(12,14,19,.72)!important;-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
    border:1px solid rgba(220,229,242,.14)!important;box-shadow:0 20px 50px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06);transform:none!important}
  .nb.est-pilule .nb__marque img{width:124px!important;transition:width .6s}
  .nb .nb__marque img{transition:width .6s}
  .nb.est-pilule .nb__cta{height:44px;padding:0 18px}
  .nb.est-pilule .nb__liens > a,.nb.est-pilule .nb__expertises{height:38px;padding:0 12px;font-size:14.5px}
  /* Le panneau sous la capsule : une carte arrondie, à la largeur de la page */
  html.nav-pilule .np{inset:86px 0 auto 0;margin:0 auto;width:min(1240px,calc(100vw - 48px));border:1px solid rgba(220,229,242,.12);border-radius:24px;overflow:hidden}
  html.nav-pilule.menu-plein .nb{background:rgba(12,14,19,.92)!important}
}
@media (min-width:901px){html.nav-pilule .np-pole__titre{font-size:clamp(19px,1.4vw,24px)}}

/* =========================================================================
   MENU EN NOIR ET BLANC, LA COULEUR AU SURVOL (25/10, Raphaël)
   Au repos : tout est en noir et blanc — numéros, titres, pages, et une matière argentée qui ondule à peine.
   Au survol d'un pôle : son numéro, son titre, son liseré et ses pages prennent sa couleur, et derrière,
   le mercure de ce pôle (sa forme et sa couleur, comme sur sa page) se met à onduler. Une seule matière tourne à la fois.
   ========================================================================= */
.np__matiere::before{display:none}
.np__matiere{opacity:1!important}
.np-matiere__vivant{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1s ease}
.np-matiere__vivant.est-actif{opacity:.42}
.np-matiere__vivant[data-pole-canvas="repos"].est-actif{opacity:.26}
.np-pole{--teinte-pole:#F7FAFF}
.np-pole__num{color:rgba(220,229,242,.55)!important;transition:color .4s}
.np-pole__titre{color:rgba(247,250,255,.82)!important;transition:color .4s,transform .6s cubic-bezier(.22,1,.36,1)}
.np-nouveau{background:#DCE5F2!important;color:#0A0B0E!important;transition:background .4s}
.np-pole{border-top-color:rgba(220,229,242,.14)!important}
.np-pole.est-actif{border-top-color:var(--c)!important}
.np-pole.est-actif .np-pole__num{color:var(--c)!important}
.np-pole.est-actif .np-pole__titre{color:#FFFFFF!important;text-shadow:0 0 40px color-mix(in srgb,var(--c) 55%,transparent)}
.np-pole.est-actif .np-nouveau{background:var(--c)!important}
.np-pole.est-actif .np-pole__sous a{color:rgba(247,250,255,.82)}
.np-pole.est-actif .np-pole__sous a:hover{color:var(--c)}
.np-pole__sous a[aria-current]::before{background:#F7FAFF!important}
.np-pole.est-actif .np-pole__sous a[aria-current]::before{background:var(--c)!important}
@media (prefers-reduced-motion:reduce){.np-matiere__vivant{transition:none}}
/* Réglage (25/10) : la matière se voit davantage, et le titre du pôle survolé prend sa couleur. */
.np-matiere__vivant.est-actif{opacity:.78}
.np-matiere__vivant[data-pole-canvas="repos"].est-actif{opacity:.5}
.np__matiere::after{background:linear-gradient(90deg,rgba(7,8,11,.78) 0%,rgba(7,8,11,.45) 45%,rgba(7,8,11,.25) 100%),linear-gradient(0deg,rgba(7,8,11,.7),transparent 45%)!important}
.np-pole.est-actif .np-pole__titre{color:color-mix(in srgb,var(--c) 62%,#FFFFFF)!important}


/* =========================================================================
   MENU CHOISI (25/10, Raphaël) : le menu plein écran (option 3) devient le menu du site.
   html.menu-v3 est posé par navigation.js, sauf si le comparateur (outil interne) demande une autre version.
   ========================================================================= */
@media (min-width:901px){
  /* 3 · le menu plein écran derrière le bouton Menu */
  html.menu-v3 .nb{display:flex!important}
  html.menu-v3 .nb__liens{display:none!important}
  html.menu-v3 .nb__menu{display:inline-flex!important}
  html.menu-v3 .np{inset:0!important;max-height:none!important;width:auto!important;margin:0!important;border:0!important;border-radius:0!important;background:#07080B!important;box-shadow:none!important}
  html.menu-v3 .np__contenu{padding-top:clamp(120px,16vh,170px)!important;justify-content:center!important;gap:clamp(40px,7vh,88px)!important}
  html.menu-v3 .np__pied{display:flex!important}
  html.menu-v3 .np__poles .np__titre{display:block!important}
  html.menu-v3 .np__matiere{opacity:.34!important}
  html.menu-v3 .np-pole__titre{font-size:clamp(22px,1.8vw,30px)!important}
  html.menu-v3.menu-plein,html.menu-v3.menu-plein body{overflow:hidden!important}
}

/* ---------- VOILE DE NUIT : barre fixe et bandeau de confiance ----------
   Même mécanisme que le voile du hero (flux-hero-nappe.css) : un radial-gradient
   de nuit qui s'éteint, fondu par un masque — aucun panneau, aucun bord net. */
.nb::after{
  content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:96px;z-index:-1;
  pointer-events:none;
  background:radial-gradient(120% 100% at 50% -18%,rgba(10,11,14,.92) 0%,rgba(10,11,14,.62) 34%,rgba(10,11,14,.24) 58%,rgba(10,11,14,0) 78%);
  -webkit-mask-image:radial-gradient(140% 100% at 50% 0%,#000 0%,#000 58%,transparent 100%);
  mask-image:radial-gradient(140% 100% at 50% 0%,#000 0%,#000 58%,transparent 100%);
  transition:opacity .5s;
}
.nb.est-defile::after{opacity:0}
html.menu-plein .nb::after{opacity:0}
.confiance{position:relative;isolation:isolate}
.confiance::before{
  content:"";position:absolute;inset:-70px -8% auto -8%;height:190px;z-index:-1;
  pointer-events:none;
  background:radial-gradient(90% 100% at 50% 0%,rgba(10,11,14,.88) 0%,rgba(10,11,14,.5) 42%,rgba(10,11,14,.16) 66%,rgba(10,11,14,0) 84%);
  -webkit-mask-image:radial-gradient(110% 100% at 50% 0%,#000 0%,#000 62%,transparent 100%);
  mask-image:radial-gradient(110% 100% at 50% 0%,#000 0%,#000 62%,transparent 100%);
}
@media (prefers-reduced-motion:reduce){.nb::after{transition:none}}