/* bn-* topbar variables (extraits de index.html pour cohérence) */
:root {
  --navy-900: #1C2732;
  --navy-800: #2C3D4E;
  --navy-700: #44596B;
  --navy-600: #5B6E80;
  --blue-mid: #3769B1;
  --blue-light: #47A1DA;
  --cyan: #47A1DA;
  --turquoise: #6DC2B8;
  --turquoise-dark: #4FA99F;
  --sky: #5AC2D9;
  --aero: #49C1EE;
  --steel: #3F81C3;
  --marian: #284494;
  --delft: #262F65;
  --light-blue: #B7E0E8;
  --columbia: #B1D0E8;
  --vista: #86A0CF;
  --orange: #FBB03C;
  --coral: #FF6481;
  --mauve: #8A1CA5;
  --sunglow: #FFD166;
  --viridian: #558B6E;
  --ink: #2C3D4E;
  --ink-soft: #44596B;
  --mute: #44596b;
}
/* .bn-wrap utility (tailwind-like container) */
.bn-wrap { max-width: 1360px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2.5rem); }
/* Tailwind-like utilities used by the header markup */
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-6 { gap: 1.5rem; }
.gap-7 { gap: 1.75rem; }
.shrink-0 { flex-shrink: 0; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.hidden { display: none; }
@media (min-width: 640px)  { .sm\:inline-flex { display: inline-flex; } }
@media (min-width: 768px)  { .md\:inline-flex { display: inline-flex; } }
@media (min-width: 1024px) { .lg\:flex { display: flex; } }


.bn-h1 {
    font-family: 'Avenir Next', 'Lato', 'Lato', sans-serif;
    font-weight: 800;
    font-size: clamp(2.6rem, 6vw, 5.5rem);
    line-height: .95;
    letter-spacing: -0.032em;
  }

.bn-h2 {
    font-family: 'Avenir Next', 'Lato', 'Lato', sans-serif;
    font-weight: 800;
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -0.028em;
  }

.bn-h3 {
    font-family: 'Avenir Next', 'Lato', 'Lato', sans-serif;
    font-weight: 700;
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    line-height: 1.2;
    letter-spacing: -0.018em;
  }

.bn-kicker {
    font-family: 'Avenir Next', 'Lato', 'Lato', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
  }

.bn-kicker--cyan { color: var(--blue-mid); }

.bn-kicker--turq { color: var(--turquoise-dark); }

.bn-kicker--orange { color: var(--orange); }

.bn-kicker--mauve { color: var(--mauve); }

.bn-kicker--white { color: rgba(255,255,255,.8); }

.bn-lede {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    color: var(--ink-soft);
    line-height: 1.65;
  }

.bn-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0%;
    background: linear-gradient(90deg, var(--cyan), var(--turquoise));
    z-index: 100;
  }

.bn-header {
    position: sticky; top: 0; z-index: 80;
    background: rgba(245,247,250,.85);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid transparent;
    transition: all .25s ease;
  }

.bn-header.is-scrolled {
    border-bottom-color: rgba(26,43,69,.08);
    background: rgba(245,247,250,.95);
  }

.bn-logo { height: 48px; width: auto; }

@media (max-width: 640px)  { .bn-logo { height: 40px; } }

.bn-hero-line {
    display: block;
    opacity: 0;
    transform: translateY(28px) scale(.95);
    filter: blur(10px);
    background-size: 200% 100%;
  }

.bn-hero-line--shine {
    animation: bnLineIn 1.4s cubic-bezier(.2,.85,.2,1) forwards, bnShine 5s ease-in-out 4s infinite;
  }

.bn-hero-line--plain {
    animation: bnLineIn 1.4s cubic-bezier(.2,.85,.2,1) forwards;
  }

.bn-hero-line--1 { animation-delay: .1s, 5s; }

.bn-hero-line--2 { animation-delay: 2.2s, 7s; }

.bn-hero-line--3 { animation-delay: 4.8s; }

}
  .bn-hero-post {
    opacity: 0;
    transform: translateY(12px);
    animation: bnPostFade 1s ease-out 4s forwards;
  }

}

  /* HERO 3 PHASES — Œil (We see) → Graphe de connaissance (You know) → Impact (We create value) */
  /* Cycle total: 9s (3s par phase) - aligné avec texte (0.1s / 2.2s / 4.8s) */
  .bn-phase { opacity: 0; transform-origin: 680px 220px; }

.bn-phase-1 { animation: bnPhase1 9s ease-in-out infinite; }

.bn-phase-2 { animation: bnPhase2 9s ease-in-out infinite; }

.bn-phase-3 { animation: bnPhase3 9s ease-in-out infinite; }

}
  /* Phase 1 — Tourelle caméléon : 2 rotations combinées
     (a) les écailles du cône tournent sur l'axe (révèle que la tourelle pivote)
     (b) l'ouverture pupillaire orbite autour du centre (simule que le cône pointe dans toutes les directions à 360°) */
  .bn-turret-scales { animation: bnTurretSpin 8s linear infinite; }

}
  .bn-turret-opening { animation: bnTurretOrbit 6s linear infinite; }

}
  .bn-eye-ring--1 { animation: bnRing 3s ease-out infinite; transform-origin: 680px 220px; }

.bn-eye-ring--2 { animation: bnRing 3s ease-out 1s infinite; transform-origin: 680px 220px; }

.bn-eye-ring--3 { animation: bnRing 3s ease-out 2s infinite; transform-origin: 680px 220px; }

}
  .bn-eye-pupil-glow { animation: bnPupilGlow 2s ease-in-out infinite; transform-origin: 680px 220px; }

}
  /* Graphe de connaissance (phase 2) — nodes qui émergent + edges qui tracent */
  .bn-know-node { animation: bnKnowNode 3s ease-in-out infinite; transform-origin: center; }

}
  .bn-know-edge {
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    animation: bnKnowEdge 3s ease-in-out infinite;
  }

}
  .bn-know-core { animation: bnKnowCore 4s ease-in-out infinite; transform-origin: 680px 220px; }

}
  /* Impact (phase 3) — barres qui croissent + vague + étoile/valeur */
  .bn-impact-bar { transform-origin: bottom; animation: bnBarGrow 3s cubic-bezier(.3,.9,.2,1) infinite; }

}
  .bn-impact-wave {
    animation: bnWave 4s ease-out infinite;
    transform-origin: 680px 240px;
  }

}
  .bn-impact-curve {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: bnCurveDraw 3s ease-out infinite;
  }

}
  .bn-impact-star {
    transform-origin: center;
    animation: bnStarShine 3s ease-in-out infinite;
  }

}

  .bn-nav a {
    position: relative;
    font-family: 'Avenir Next', 'Lato', 'Lato', sans-serif;
    font-weight: 600;
    font-size: .9rem;
    color: var(--navy-900);
    text-decoration: none;
    padding: .55rem .85rem;
    border-radius: 999px;
    display: inline-flex; align-items: center; gap: .35rem;
    background: transparent;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: background .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease, color .2s ease;
  }

@media (max-width: 1279px) {
    .bn-nav a { white-space: normal; text-align: center; line-height: 1.15; }
  }

.bn-nav a::after { display: none; }

.bn-nav-item:hover > a,
  .bn-nav-item:focus-within > a {
    background: #fff;
    border-color: rgba(26,43,69,.08);
    box-shadow: 0 4px 14px -4px rgba(26,43,69,.14), 0 1px 3px rgba(26,43,69,.05);
    color: var(--cyan);
  }

.bn-nav-item { position: relative; }

.bn-chev {
    width: 11px; height: 11px; display: inline-block;
    opacity: .5; transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
    flex-shrink: 0;
  }

.bn-nav-item:hover > a .bn-chev,
  .bn-nav-item:focus-within > a .bn-chev { transform: rotate(180deg); opacity: 1; }

.bn-navicon {
    width: 16px; height: 16px; display: inline-block; flex-shrink: 0;
    opacity: .85;
    stroke: url(#sv-navicon-grad);
    color: #3769B1;
    transition: transform .34s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
  }

.bn-nav-item:hover > a .bn-navicon,
  .bn-nav-item:focus-within > a .bn-navicon { opacity: 1; }

.bn-nav-item:hover .bn-navicon--agence { transform: translateY(-1px) scale(1.08); }

.bn-nav-item:hover .bn-navicon--expertises { transform: rotate(-6deg) scale(1.1); }

.bn-nav-item:hover .bn-navicon--methodes { transform: rotate(12deg) scale(1.08); }

.bn-nav-item:hover .bn-navicon--projets { transform: scale(1.12); }

.bn-nav-item:hover .bn-navicon--contact { transform: translateY(-1px) scale(1.1); }

.bn-nav-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 8px);
    min-width: 220px;
    background: #fff;
    border: 1px solid rgba(28,39,50,.08);
    border-radius: 14px;
    padding: .5rem;
    box-shadow: 0 20px 50px rgba(28,39,50,.15);
    opacity: 0;
    visibility: hidden;
    transition: all .25s cubic-bezier(.2,.8,.2,1);
    z-index: 90;
  }

.bn-nav-item:hover .bn-nav-dropdown,
  .bn-nav-item:focus-within .bn-nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

.bn-nav-dropdown::before {
    content: "";
    position: absolute;
    top: -5px; left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px; height: 10px;
    background: #fff;
    border-top: 1px solid rgba(28,39,50,.08);
    border-left: 1px solid rgba(28,39,50,.08);
  }

.bn-nav-dropdown a {
    display: block;
    padding: .55rem .85rem;
    border-radius: 8px;
    color: var(--navy-800) !important;
    font-size: .88rem;
    font-weight: 500;
    white-space: nowrap;
  }

.bn-nav-dropdown a::after { display: none !important; }

.bn-nav-dropdown a:hover {
    background: linear-gradient(135deg, rgba(71,161,218,.08), rgba(109,194,184,.08));
    color: var(--cyan) !important;
  }

.bn-nav-dropdown--mega {
    min-width: 620px;
    padding: 1.25rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

.bn-mega-col { display: flex; flex-direction: column; gap: .25rem; }

.bn-mega-title {
    font-family: 'Avenir Next','Lato','Lato',sans-serif;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--cyan);
    padding: .25rem .85rem .5rem;
    border-bottom: 1px solid rgba(28,39,50,.08);
    margin-bottom: .35rem;
  }

.bn-bito {
    position: fixed;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    z-index: 75;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--navy-900);
    padding: 8px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(28,39,50,.25);
  }

.bn-bito a {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: all .2s ease;
    position: relative;
  }

.bn-bito a:hover {
    background: linear-gradient(135deg, var(--cyan), var(--turquoise));
    transform: translateX(-3px);
  }

.bn-bito a svg { width: 20px; height: 20px; }

.bn-bito a.bn-bito-img { padding: 4px; }

.bn-bito a.bn-bito-img img {
    width: 28px; height: 28px;
    object-fit: cover; object-position: center;
    border-radius: 6px;
    display: block;
    background: #fff;
  }

.bn-bito a .bn-bito-tip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--navy-900);
    color: #fff;
    padding: .35rem .7rem;
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all .2s ease;
  }

.bn-bito a:hover .bn-bito-tip { opacity: 1; transform: translateY(-50%) translateX(-3px); }

.bn-bito-sep { height: 1px; background: rgba(255,255,255,.1); margin: 2px 8px; }

.bn-last-study {
    position: fixed;
    bottom: 24px;
    right: 80px;
    z-index: 75;
    width: 230px;
    background: var(--navy-900);
    color: #fff;
    padding: 1rem 1.2rem;
    border-radius: 16px;
    text-decoration: none;
    box-shadow: 0 12px 36px rgba(28,39,50,.28);
    transition: all .25s ease;
  }

.bn-last-study:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(28,39,50,.35); }

.bn-last-study__close {
    position: absolute;
    top: 8px; right: 8px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--cyan);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    cursor: pointer;
    border: none;
  }

.bn-last-study__kicker {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cyan);
  }

.bn-last-study__title {
    font-family: 'Avenir Next','Lato','Lato',sans-serif;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.25;
    margin-top: .35rem;
  }

@media (max-width: 1024px) {
    .bn-bito, .bn-last-study { display: none; }
  }

.bn-bito.is-hidden, .bn-last-study.is-hidden { display: none; }

.bn-pitch-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

.bn-pitch-card {
    background: #fff;
    border: 1px solid rgba(28, 39, 50, 0.08);
    border-radius: 18px;
    padding: clamp(1.5rem, 2.2vw, 2.25rem);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    position: relative;
    overflow: hidden;
  }

.bn-pitch-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--cyan), var(--turquoise));
    opacity: 0;
    transition: opacity .3s ease;
  }

.bn-pitch-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px rgba(28, 39, 50, 0.12);
    border-color: rgba(71, 161, 218, 0.25);
  }

.bn-pitch-card:hover::before { opacity: 1; }

.bn-pitch-card__icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(71,161,218,.12), rgba(109,194,184,.12));
    color: var(--cyan);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
  }

.bn-pitch-card__icon svg { width: 26px; height: 26px; }

.bn-pitch-card__title {
    font-family: 'Lato','Avenir Next','Lato',sans-serif;
    font-weight: 900;
    font-size: 1.35rem;
    color: var(--navy-900);
    line-height: 1.2;
    margin-bottom: 14px;
    letter-spacing: -0.01em;
  }

.bn-pitch-card__body {
    color: var(--ink-soft, #4A5768);
    font-size: 1rem;
    line-height: 1.65;
    margin: 0;
  }

.bn-pitch-card__body strong {
    color: var(--navy-900);
    font-weight: 700;
  }

@media (max-width: 820px) {
    .bn-pitch-grid { grid-template-columns: 1fr; gap: 14px; }
    .bn-pitch-card__title { font-size: 1.2rem; }
  }

@media (max-width: 820px) {
    .bn-hero-textcol { max-width: 100% !important; }
    .bn-network { display: none !important; }
    .bn-tile.bn-tile--navy-dark.bn-t-6x2 {
      padding: 2rem 1.5rem !important;
      min-height: auto !important;
    }
    .bn-h1 { font-size: clamp(2.2rem, 10vw, 3.5rem) !important; }
    .bn-hero-line { display: inline; }
  }

.bn-kw {
    font-family: 'Avenir Next','Lato','Lato',sans-serif;
    font-weight: 400;
    color: rgba(255,255,255,.78);
    font-size: .95rem;
    letter-spacing: -0.01em;
    transition: color .2s ease;
    line-height: 1.4;
  }

.bn-kw:hover { color: #fff; }

.bn-kw--md { font-weight: 700; font-size: 1.2rem; color: #fff; }

.bn-kw--lg { font-weight: 800; font-size: 1.6rem; color: #fff; letter-spacing: -0.02em; }

.bn-kw--cyan {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--navy-900);
    background: linear-gradient(135deg, #47A1DA, #6DC2B8);
    padding: .55rem 1.2rem;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(71,161,218,.4);
  }

.bn-cat-num {
    font-family: 'Avenir Next','Lato','Lato',sans-serif;
    font-weight: 900;
    font-size: 1.3rem;
    color: var(--navy-900);
    opacity: .15;
    letter-spacing: -0.02em;
  }

.bn-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(26,43,69,.08);
    box-shadow: 0 2px 6px rgba(26,43,69,.04);
    font-family: 'Avenir Next', 'Lato', 'Lato', sans-serif;
    font-weight: 600; font-size: .82rem;
    text-decoration: none; color: var(--ink);
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
    min-height: 40px;
  }

.bn-pill img { height: 28px; width: auto; max-width: 120px; object-fit: contain; display: block; }

.bn-pill:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(110,193,228,.2); border-color: var(--cyan); }

.bn-langtoggle {
    display: inline-flex; align-items: center;
    background: rgba(26, 43, 69, .05);
    border: 1px solid rgba(26, 43, 69, .08);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
    margin-left: .5rem;
  }

.bn-langbtn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .7rem;
    border: 0; background: transparent;
    border-radius: 999px;
    font-family: 'Avenir Next', 'Lato', 'Lato', sans-serif;
    font-weight: 600; font-size: .78rem;
    color: var(--ink-soft); cursor: pointer;
    transition: all .2s ease;
    letter-spacing: .02em;
  }

.bn-langbtn:hover { color: var(--ink); }

.bn-langbtn.is-active {
    background: #fff;
    color: var(--cyan);
    box-shadow: 0 2px 6px rgba(26, 43, 69, .08);
  }

.bn-langbtn--solo {
    margin-left: .5rem;
    background: rgba(26, 43, 69, .05);
    border: 1px solid rgba(26, 43, 69, .1);
    color: var(--ink);
    padding: .4rem .85rem;
  }

.bn-langbtn--solo:hover {
    background: #fff;
    border-color: var(--cyan);
    color: var(--cyan);
    box-shadow: 0 2px 8px rgba(26, 43, 69, .1);
  }

.bn-flag {
    width: 20px; height: 14px; border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(26, 43, 69, .12);
    flex-shrink: 0; display: block;
    overflow: hidden;
  }

.bn-newsletter-bg {
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 85% 25%, rgba(110, 193, 228, .25) 0%, transparent 45%),
      radial-gradient(circle at 15% 85%, rgba(79, 204, 184, .18) 0%, transparent 50%);
    pointer-events: none;
  }

.bn-mc-form {
    display: flex; gap: .55rem; flex-wrap: wrap;
    margin-top: .5rem;
  }

.bn-mc-input {
    flex: 1; min-width: 220px;
    padding: .9rem 1.1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font-family: 'Avenir Next', 'Lato', 'Lato', sans-serif;
    font-size: .95rem;
    transition: all .2s ease;
  }

.bn-mc-input::placeholder { color: rgba(255, 255, 255, .45); }

.bn-mc-input:focus {
    outline: none;
    border-color: var(--cyan);
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 0 0 3px rgba(110, 193, 228, .2);
  }

.bn-mc-btn {
    padding: .9rem 1.5rem;
    border-radius: 12px;
    border: 0;
    background: linear-gradient(120deg, var(--cyan), var(--turquoise));
    color: #fff;
    font-family: 'Avenir Next', 'Lato', 'Lato', sans-serif;
    font-weight: 700; font-size: .9rem;
    letter-spacing: .03em;
    cursor: pointer;
    transition: all .2s ease;
    text-transform: uppercase;
  }

.bn-mc-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(110, 193, 228, .3);
  }

.bn-mc-legal {
    margin-top: .9rem;
    font-size: .75rem;
    color: rgba(255, 255, 255, .55);
    line-height: 1.5;
  }

.bn-mc-legal a {
    color: rgba(255, 255, 255, .85);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

.bn-join-row {
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.5rem;
    padding: 1.75rem 2rem !important;
  }

.bn-join-row__left { flex: 1; min-width: 0; }

.bn-join-row__right { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; }

@media (max-width: 640px) {
    .bn-join-row { flex-direction: column !important; align-items: flex-start !important; gap: 1rem; }
    .bn-join-row__right { align-items: flex-start; margin-left: 0; }
  }

.bn-dot {
    width: 6px; height: 6px; border-radius: 999px;
    background: var(--turquoise);
    box-shadow: 0 0 8px var(--turquoise);
    animation: bnPulse 2s infinite;
  }

}

  /* Buttons */
  .bn-btn {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .85rem 1.4rem;
    border-radius: 999px;
    font-family: 'Avenir Next', 'Lato', 'Lato', sans-serif;
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .3s cubic-bezier(.2,.8,.2,1);
    cursor: pointer;
    border: 1px solid transparent;
  }

.bn-btn--primary {
    background: linear-gradient(120deg, var(--blue-mid), var(--navy-800));
    color: #fff;
    box-shadow: 0 8px 20px rgba(74,127,168,.3);
  }

.bn-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(74,127,168,.4); }

.bn-btn--ghost { background: #fff; color: var(--navy-900); border-color: rgba(26,43,69,.15); }

.bn-btn--ghost:hover { background: var(--navy-900); color: #fff; border-color: var(--navy-900); transform: translateY(-2px); }

.bn-btn--white { background: #fff; color: var(--navy-900); box-shadow: 0 6px 18px rgba(0,0,0,.15); }

.bn-btn--white:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.2); }

.bn-btn--sm { padding: .55rem 1rem; font-size: .75rem; }

.bn-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
  }

@media (max-width: 1024px) { .bn-grid { grid-template-columns: repeat(4, 1fr); } .bn-grid--projets { grid-template-columns: repeat(2, 1fr) !important; } }

@media (max-width: 640px)  { .bn-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .bn-grid--projets { grid-template-columns: repeat(1, 1fr) !important; } }

.bn-tile {
    background: var(--tile-bg);
    border-radius: var(--radius);
    padding: 1.75rem;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(26,43,69,.05);
    box-shadow: 0 1px 2px rgba(26,43,69,.03), 0 8px 24px rgba(26,43,69,.04);
    transition: all .35s cubic-bezier(.2,.8,.2,1);
    min-height: 200px;
    display: flex;
    flex-direction: column;
  }

.bn-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 10px rgba(26,43,69,.06), 0 20px 40px rgba(26,43,69,.1);
  }

a.bn-tile { text-decoration: none; color: inherit; }

.bn-t-3x2 { grid-column: span 3; grid-row: span 2; }

.bn-t-4x2 { grid-column: span 4; grid-row: span 2; }

.bn-t-2x2 { grid-column: span 2; grid-row: span 2; }

.bn-t-2x1 { grid-column: span 2; grid-row: span 1; }

.bn-t-3x1 { grid-column: span 3; grid-row: span 1; }

.bn-t-4x1 { grid-column: span 4; grid-row: span 1; }

.bn-t-6x1 { grid-column: span 6; grid-row: span 1; }

.bn-t-6x2 { grid-column: span 6; grid-row: span 2; }

.bn-t-1x1 { grid-column: span 1; grid-row: span 1; }

.bn-t-1x2 { grid-column: span 1; grid-row: span 2; }

@media (max-width: 1024px) {
    .bn-t-3x2, .bn-t-3x1 { grid-column: span 4; }
    .bn-t-4x2, .bn-t-4x1 { grid-column: span 4; }
    .bn-t-2x2, .bn-t-2x1 { grid-column: span 2; }
    .bn-t-6x1, .bn-t-6x2 { grid-column: span 4; }
  }

@media (max-width: 640px) {
    .bn-t-3x2, .bn-t-3x1, .bn-t-4x2, .bn-t-4x1, .bn-t-6x1, .bn-t-6x2 { grid-column: span 2; grid-row: auto; }
    .bn-t-2x2, .bn-t-2x1 { grid-column: span 2; grid-row: auto; }
  }

.bn-tile--cyan:hover { box-shadow: 0 4px 10px rgba(110,193,228,.18), 0 20px 40px rgba(110,193,228,.22); }

.bn-tile--turq:hover { box-shadow: 0 4px 10px rgba(79,204,184,.18), 0 20px 40px rgba(79,204,184,.22); }

.bn-tile--orange:hover { box-shadow: 0 4px 10px rgba(242,166,90,.18), 0 20px 40px rgba(242,166,90,.22); }

.bn-tile--coral:hover { box-shadow: 0 4px 10px rgba(241,154,156,.2), 0 20px 40px rgba(241,154,156,.22); }

.bn-tile--mauve:hover { box-shadow: 0 4px 10px rgba(155,122,200,.2), 0 20px 40px rgba(155,122,200,.22); }

.bn-tile--blue:hover { box-shadow: 0 4px 10px rgba(74,127,168,.2), 0 20px 40px rgba(74,127,168,.22); }

.bn-tile--navy:hover { box-shadow: 0 4px 10px rgba(26,43,69,.22), 0 20px 40px rgba(26,43,69,.22); }

.bn-tile--grad-veille {
    /* COMPRENDRE */
    background: linear-gradient(135deg, #47A1DA 0%, #3769B1 55%, #324E9D 100%);
    color: #fff;
    border: none;
  }

.bn-tile--grad-ap {
    /* AGIR (dégradé pastel → vista) */
    background: linear-gradient(135deg, #B7E0E8 0%, #B1D0E8 45%, #86A0CF 100%);
    color: #fff;
    border: none;
  }

.bn-tile--grad-com {
    /* ANTICIPER */
    background: linear-gradient(135deg, #6DC2B8 0%, #5AC2D9 50%, #49C1EE 100%);
    color: #fff;
    border: none;
  }

.bn-tile--grad-crise {
    /* INFORMATION */
    background: linear-gradient(135deg, #3F81C3 0%, #284494 55%, #262F65 100%);
    color: #fff;
    border: none;
  }

.bn-tile--grad-veille::after,
  .bn-tile--grad-ap::after,
  .bn-tile--grad-com::after,
  .bn-tile--grad-crise::after {
    content: ""; position: absolute; top: -50%; right: -30%;
    width: 80%; height: 180%;
    background: radial-gradient(circle, rgba(255,255,255,.25), transparent 60%);
    pointer-events: none;
  }

.bn-tile--navy-dark {
    background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 55%, var(--navy-700) 100%);
    color: #fff;
    border: none;
  }

.bn-tile--navy-dark::after {
    content: ""; position: absolute; top: -30%; right: -20%;
    width: 60%; height: 150%;
    background: radial-gradient(circle, rgba(110,193,228,.22), transparent 60%);
    pointer-events: none;
  }

.bn-blob-orange {
    position: absolute; width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle, rgba(242,166,90,.5), transparent 70%);
    filter: blur(40px); pointer-events: none;
  }

.bn-blob-cyan {
    position: absolute; width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(110,193,228,.5), transparent 70%);
    filter: blur(50px); pointer-events: none;
  }

.bn-tile__arrow {
    position: absolute; bottom: 1.25rem; right: 1.25rem;
    width: 40px; height: 40px; border-radius: 999px;
    background: rgba(26,43,69,.05); color: var(--navy-900);
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .3s ease;
  }

.bn-tile:hover .bn-tile__arrow {
    background: var(--navy-900); color: #fff;
    transform: translate(3px, -3px);
  }

.bn-tile--grad-veille .bn-tile__arrow,
  .bn-tile--grad-ap .bn-tile__arrow,
  .bn-tile--grad-com .bn-tile__arrow,
  .bn-tile--grad-crise .bn-tile__arrow,
  .bn-tile--navy-dark .bn-tile__arrow {
    background: rgba(255,255,255,.15); color: #fff;
    backdrop-filter: blur(8px);
  }

.bn-tile--grad-veille:hover .bn-tile__arrow,
  .bn-tile--grad-ap:hover .bn-tile__arrow,
  .bn-tile--grad-com:hover .bn-tile__arrow,
  .bn-tile--grad-crise:hover .bn-tile__arrow,
  .bn-tile--navy-dark:hover .bn-tile__arrow {
    background: #fff;
    color: var(--navy-900);
  }

.bn-num {
    font-family: 'Avenir Next', 'Lato', 'Lato', sans-serif;
    font-weight: 800;
    font-size: 4.5rem;
    line-height: .85;
    letter-spacing: -0.04em;
    color: rgba(255,255,255,.3);
  }

.bn-metric {
    font-family: 'Avenir Next', 'Lato', 'Lato', sans-serif;
    font-weight: 800;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: .95;
    letter-spacing: -0.035em;
  }

.bn-metric--grad {
    background: linear-gradient(120deg, var(--cyan), var(--turquoise));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }

.bn-metric-label {
    font-size: .85rem;
    color: var(--ink-soft);
    margin-top: .35rem;
    font-weight: 500;
  }

.bn-dash-row {
    display: flex; align-items: center; gap: .65rem;
    padding: .55rem .7rem; border-radius: 10px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
    transition: all .25s ease;
    font-size: .85rem;
  }

.bn-dash-row:hover { background: rgba(255,255,255,.09); }

.bn-dash-chip {
    width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0;
  }

.bn-dash-chip--veille { background: linear-gradient(135deg, #47A1DA, #324E9D); }

.bn-dash-chip--ap { background: linear-gradient(135deg, #B1D0E8, #86A0CF); color: var(--navy-900) !important; }

.bn-dash-chip--com { background: linear-gradient(135deg, #6DC2B8, #49C1EE); }

.bn-dash-chip--crise { background: linear-gradient(135deg, #3F81C3, #262F65); }

.bn-tile--grad-ap, .bn-tile--grad-ap * { color: var(--navy-900) !important; }

.bn-tile--grad-ap .bn-kicker--white { color: var(--navy-700) !important; }

.bn-spark {
    flex: 1; height: 14px;
  }

.bn-spark path {
    stroke-dasharray: 120; stroke-dashoffset: 120;
    animation: bnDrawLine 2.4s ease-out forwards;
  }

}

  /* Network mini animation in hero — SVG pleine largeur avec ancrage droit (xMaxYMid) pour rester à droite */
  .bn-network {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .55;
  }

.bn-network .bn-node { transform-origin: center; transform-box: fill-box; }

.bn-network .bn-node--pulse { animation: bnNodePulse 3.2s ease-in-out infinite; }

}
  .bn-edge {
    stroke-dasharray: 6 8;
    animation: bnEdgeFlow 5s linear infinite;
  }

}

  /* Clients marquee */
  .bn-clients-track {
    display: flex; gap: 3rem; align-items: center;
    animation: bnMarquee 50s linear infinite;
  }

}
  .bn-client-logo {
    flex-shrink: 0;
    height: 38px; width: auto; max-width: 130px;
    object-fit: contain;
    filter: grayscale(1) contrast(.85);
    opacity: .6;
    transition: all .3s ease;
  }

.bn-client-logo:hover { filter: grayscale(0); opacity: 1; transform: scale(1.06); }

.bn-clients-mask {
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    overflow: hidden;
    width: 100%;
  }

.bn-tag {
    display: inline-block;
    font-family: 'Avenir Next', 'Lato', 'Lato', sans-serif;
    font-size: .68rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    padding: .3rem .7rem; border-radius: 999px;
  }

.bn-tag--cyan { background: rgba(110,193,228,.15); color: var(--blue-mid); }

.bn-tag--turq { background: rgba(79,204,184,.15); color: var(--turquoise-dark); }

.bn-tag--orange { background: rgba(242,166,90,.18); color: #C67E30; }

.bn-tag--mauve { background: rgba(155,122,200,.18); color: #6B4FA0; }

.bn-tag--white { background: rgba(255,255,255,.15); color: #fff; backdrop-filter: blur(8px); }

.bn-news-date {
    font-family: 'Avenir Next', 'Lato', 'Lato', sans-serif;
    font-size: .72rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--mute);
  }

.bn-reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }

.bn-reveal.is-in { opacity: 1; transform: translateY(0); }

.bn-section { padding: clamp(2rem, 5vw, 4.5rem) 0; }

.bn-wrap { max-width: 1280px; margin: 0 auto; padding: 0 1.25rem; }

.bn-footer {
    background: var(--navy-900);
    color: #fff;
    padding: 4.5rem 0 2rem;
    margin-top: 3rem;
    position: relative;
    overflow: hidden;
  }

.bn-footer::before {
    content: ""; position: absolute; top: -30%; right: -15%;
    width: 55%; height: 120%;
    background: radial-gradient(circle, rgba(110,193,228,.14), transparent 70%);
    filter: blur(70px); pointer-events: none;
  }

.bn-footer h4 {
    font-family: 'Avenir Next', 'Lato', 'Lato', sans-serif;
    font-size: .78rem; font-weight: 800;
    letter-spacing: .2em; text-transform: uppercase;
    color: rgba(255,255,255,.5);
    margin-bottom: 1.1rem;
  }

.bn-footer a {
    color: rgba(255,255,255,.7);
    text-decoration: none;
    font-size: .92rem;
    transition: color .2s ease;
  }

.bn-footer a:hover { color: var(--cyan); }

.bn-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .65rem; }

.bn-footer__logo { height: 70px; width: auto; margin-bottom: 1.25rem; }

.bn-live {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: 'Avenir Next', 'Lato', 'Lato', sans-serif;
    font-size: .7rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
  }

.bn-input {
    width: 100%;
    padding: .75rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.3);
    background: rgba(255,255,255,.1);
    color: #fff;
    font-family: 'Lato', sans-serif; font-size: .9rem;
    backdrop-filter: blur(8px);
  }

.bn-input::placeholder { color: rgba(255,255,255,.6); }

.bn-input:focus { outline: none; border-color: var(--cyan); background: rgba(255,255,255,.18); }