/* Regenere par _refonte/refonte.py depuis homepage-variations/v2/06-menu-et-etude.html (05/09/2026). NE PAS EDITER A LA MAIN. */
/* 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: #2C6E8F;     /* retire : bleu profond du nuancier */
  --coral: #B4455C;      /* retire : rouge framboise */
  --mauve: #2C6E8F;      /* retire */
  --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(71,161,218,.15); color: var(--blue-mid); }

.bn-tag--mauve { background: rgba(71,161,218,.15); color: var(--blue-mid); }

.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); }
/* extrait de la page deployee du 05/09 : boutons, menu mobile, pastilles, pied de page (les pages internes n'avaient pas ces regles) */
  .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-footer-pill {
    display: inline-flex; align-items: center; gap: .55rem;
    padding: .5rem .95rem .5rem .55rem;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    color: rgba(255,255,255,.92);
    text-decoration: none;
    font-family: 'Avenir Next', 'Lato', sans-serif;
    font-weight: 600; font-size: .88rem;
    letter-spacing: .01em;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
  }
  .bn-footer-pill img {
    height: 24px; width: 24px;
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    padding: 3px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
  }
  .bn-footer-pill:hover {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.28);
    transform: translateY(-1px);
  }
  .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-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; }
  .sv-brand-link {
    display: flex !important;
    align-items: center;
    gap: 9px;
  }
  .sv-brand-link img { width: 22px; height: 22px; object-fit: contain; }
  .bn-mobile-nav { display: none; position: relative; }
  .bn-mobile-nav summary {
    cursor: pointer;
    list-style: none;
    border: 1px solid rgba(28,39,50,.16);
    border-radius: 999px;
    padding: 8px 14px;
    color: #1C2732;
    font-size: .82rem;
    font-weight: 800;
  }
  .bn-mobile-nav summary::-webkit-details-marker { display: none; }
  .bn-mobile-nav__panel {
    position: absolute;
    z-index: 120;
    top: calc(100% + 10px);
    right: 0;
    display: grid;
    width: min(82vw, 300px);
    padding: 12px;
    border: 1px solid rgba(28,39,50,.12);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 54px rgba(28,39,50,.18);
  }
  .bn-mobile-nav__panel a {
    padding: 11px 12px;
    border-radius: 9px;
    color: #1C2732;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
  }
  .bn-mobile-nav__panel a:hover { background: #F1F6F9; }
  @media (max-width: 1023px) {
    .bn-mobile-nav { display: block; }
  }


/* utilitaires poses par le markup de l'en-tete (les pages internes n'ont pas Tailwind) */
.flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-6 { gap: 1.5rem; } .gap-3 { gap: .75rem; } .gap-2 { gap: .5rem; } .py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.shrink-0 { flex-shrink: 0; } .hidden { display: none; } .relative { position: relative; } .z-10 { z-index: 10; }
@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; } }
/* utilitaires du pied de page de l'accueil */
.grid { display: grid; } .gap-10 { gap: 2.5rem; } .gap-4 { gap: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-14 { margin-top: 3.5rem; }
.pt-6 { padding-top: 1.5rem; } .border-t { border-top-width: 1px; border-top-style: solid; } .text-sm { font-size: .875rem; line-height: 1.25rem; } .flex-wrap { flex-wrap: wrap; }
@media (min-width: 1024px) { .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .lg\:col-span-4 { grid-column: span 4 / span 4; } .lg\:col-span-2 { grid-column: span 2 / span 2; } }
.bn-footer h4 { font-family: 'Avenir Next','Lato',sans-serif; }
/* 16/09, Nicolas : « Le bouton "Le Club" mériterait d'être un peu plus brandé SV avec dégradé bleu, l'icône SV » (meme regle que la 05) */
.bn-btn--club { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; background: linear-gradient(135deg, #16324A 0%, #3F86B8 100%); color: #fff !important; border: 0; box-shadow: 0 8px 18px -10px rgba(22,50,74,.7); transition: filter .18s, transform .18s; }
.bn-btn--club:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.bn-btn__ico { width: 20px; height: 20px; flex: none; display: block; }

/* ===== theme 06 ===== */

/* ============ PROPOSITION 5 : retouches sur la feuille d'origine ============ */
.bn-tile { border: 1px solid rgba(26,43,69,.08); }

/* Menu typographique, sans pictos (motif valide sur la maquette ReputatioLab) */
.bn-header { background: rgba(255,255,255,.92); backdrop-filter: saturate(1.6) blur(14px); }
.bn-nav--typo { gap: 0; }
.bn-nav--typo .bn-nav-item > a { padding: 10px 15px 12px; border-radius: 0; border: 0; font-size: 14px; font-weight: 700; letter-spacing: -.014em; color: #44596B; background: transparent; }
.bn-nav--typo .bn-nav-item > a::after { content: ""; display: block; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 2px; border-radius: 999px; background: linear-gradient(90deg, #47A1DA, #4FCCB8); transform: scaleX(0); transform-origin: center; transition: transform .28s cubic-bezier(.2,.7,.3,1); }
.bn-nav--typo .bn-nav-item:hover > a, .bn-nav--typo .bn-nav-item:focus-within > a { background: transparent; box-shadow: none; color: #1C2732; }
.bn-nav--typo .bn-nav-item:hover > a::after, .bn-nav--typo .bn-nav-item:focus-within > a::after { transform: scaleX(1); }
.bn-nav-dropdown { border-radius: 14px; padding: .6rem; box-shadow: 0 24px 60px rgba(28,39,50,.14), 0 0 0 1px rgba(28,39,50,.04); }
.bn-nav-dropdown::before { display: none; }
.bn-nav-dropdown a { font-weight: 600; }
.sv-brand-link img { width: 20px; height: 20px; object-fit: contain; }
.bn-maison { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 10px; font-weight: 700; font-size: 12.5px; color: #44596B; text-decoration: none; white-space: nowrap; transition: background .18s, color .18s; }
.bn-maison:hover { background: #E3E9EF; color: #1C2732; }
.bn-pill__sym { height: 22px; width: 22px; display: block; }

/* Heros : Nuit Profonde, sur la page blanche */
.bn-tile--hero { background: linear-gradient(135deg, #0D1920 0%, #13242C 45%, #1E323D 100%); border: 1px solid #3A5261; }
.bn-tile--hero::after { background: radial-gradient(circle, rgba(105,177,240,.18), transparent 60%); }
.bn-tile--hero .bn-kicker--white { color: #A7BBD2; }
.bn-tile--hero .bn-btn--white { background: #EAF1FB; color: #13242C; }
.bn-btn--nuit { background: rgba(255,255,255,.06); color: #EAF1FB; border-color: #3A5261; }
.bn-btn--nuit:hover { background: rgba(255,255,255,.12); border-color: #69B1F0; transform: translateY(-2px); }
.bn-story { opacity: 1 !important; }
.bn-story .bn-signals { transform-origin: 680px 220px; animation: bnConverge 3s ease-in-out infinite; }
.bn-story .bn-signals circle { animation: bnNodePulse 3.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes bnConverge { 0% { transform: scale(1.25); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(.62); opacity: .15; } }
.bn-hero-steps { display: flex; gap: 1.6rem; margin-top: 2.2rem; flex-wrap: wrap; }
.bn-hero-step { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8DA9BF; opacity: .6; }
.bn-hero-step i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.bn-hero-step--1 { animation: bnStep1 9s ease-in-out infinite; }
.bn-hero-step--2 { animation: bnStep2 9s ease-in-out infinite; }
.bn-hero-step--3 { animation: bnStep3 9s ease-in-out infinite; }
@keyframes bnStep1 { 0%, 30% { opacity: 1; color: #69B1F0; } 37%, 100% { opacity: .6; color: #8DA9BF; } }
@keyframes bnStep2 { 0%, 30% { opacity: .6; color: #8DA9BF; } 36%, 58% { opacity: 1; color: #4FCCB8; } 66%, 100% { opacity: .6; color: #8DA9BF; } }
@keyframes bnStep3 { 0%, 58% { opacity: .6; color: #8DA9BF; } 66%, 100% { opacity: 1; color: #EAF1FB; } }
@media (max-width: 820px) { .bn-story { display: none !important; } }
html.nomotion .bn-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }


/* Les logos clients gardent leurs couleurs */
.bn-client-logo { filter: none; opacity: 1; }

/* Agence : la methode, la singularite, la citation */
.bn-methode { grid-column: span 6; background: #fff; border: 1px solid rgba(26,43,69,.08); border-radius: var(--radius); padding: 1.75rem; box-shadow: 0 1px 2px rgba(26,43,69,.03), 0 8px 24px rgba(26,43,69,.04); }
.bn-methode__head { max-width: 760px; margin-bottom: 1.25rem; }
.bn-methode__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1024px) { .bn-methode { grid-column: span 4; } .bn-methode__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bn-methode { grid-column: span 2; } .bn-methode__grid { grid-template-columns: 1fr; } }
.bn-step { display: flex; flex-direction: column; gap: .2rem; padding: 1.1rem 1.15rem 1.2rem; border-radius: 14px; color: #fff; text-decoration: none; position: relative; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.bn-step::after { content: ""; position: absolute; top: -50%; right: -30%; width: 80%; height: 180%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 60%); pointer-events: none; }
.bn-step--1 { background: linear-gradient(135deg, #47A1DA 0%, #3769B1 55%, #324E9D 100%); }
.bn-step--2 { background: linear-gradient(135deg, #6DC2B8 0%, #5AC2D9 50%, #49C1EE 100%); }
.bn-step--3 { background: linear-gradient(135deg, #3F81C3 0%, #284494 55%, #262F65 100%); }
.bn-step--4 { background: linear-gradient(135deg, #1C2732 0%, #2C3D4E 55%, #44596B 100%); }
.bn-step:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(26,43,69,.18); }
.bn-step__num { font-family: 'Avenir Next','Lato',sans-serif; font-weight: 800; font-size: .72rem; letter-spacing: .18em; color: rgba(255,255,255,.75); position: relative; z-index: 1; }
.bn-step__title { font-family: 'Avenir Next','Lato',sans-serif; font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; line-height: 1.1; margin-top: .15rem; position: relative; z-index: 1; }
.bn-step__sub { font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.85); margin-bottom: .35rem; position: relative; z-index: 1; }
.bn-step p { margin: 0; font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,.9); position: relative; z-index: 1; }
.bn-quote { justify-content: space-between; }
.bn-quote__text { margin: 0; font-family: 'Avenir Next','Lato',sans-serif; font-weight: 700; font-size: 1.05rem; line-height: 1.4; letter-spacing: -.01em; color: #fff; }
.bn-quote__who { font-size: .82rem; font-weight: 700; color: #fff; margin-top: 1rem; }
.bn-quote__who span { display: block; font-weight: 600; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-top: .15rem; }
.bn-metiers { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
.bn-metiers span { font-size: .74rem; font-weight: 700; letter-spacing: .04em; padding: .32rem .7rem; border-radius: 999px; background: linear-gradient(135deg, rgba(71,161,218,.12), rgba(109,194,184,.12)); color: var(--blue-mid); }


#top.bn-section { padding-top: clamp(1.25rem, 2.5vw, 2rem); padding-bottom: clamp(1rem, 2vw, 1.5rem); }
.bn-hero-kicker { margin-bottom: 1rem !important; }
.bn-hero-steps { margin-top: 1.6rem !important; }
.bn-marianne { flex: 0 0 auto; width: auto; height: 46px; padding: 6px 8px; background: #fff; border-radius: 8px; margin-right: .5rem; box-sizing: content-box; }
@media (max-width: 640px) { .bn-marianne { height: 36px; } }
.bn-contact-solo { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.5rem 3rem; align-items: end; }
.bn-contact-solo > .mt-6 { margin-top: 0; }
@media (max-width: 768px) { .bn-contact-solo { grid-template-columns: 1fr; } .bn-contact-solo > .mt-6 { margin-top: 1.5rem; } }
/* ============ PROPOSITION 6 : menu pleine largeur, dynamique ============ */
.bn-header { overflow: visible; }
.bn-nav--mega .bn-nav-item { position: static; }
.bn-nav--mega .bn-nav-item > a { transition: color .2s ease; }
.bn-nav--mega .bn-nav-item.is-open > a { color: #1C2732; }
.bn-nav--mega .bn-nav-item:hover .bn-nav-dropdown, .bn-nav--mega .bn-nav-item:focus-within .bn-nav-dropdown { opacity: 0; visibility: hidden; transform: translateY(8px); }
.bn-nav--mega .bn-panel { left: 0; right: 0; top: 100%; min-width: 0; transform: translateY(8px); border-radius: 0 0 22px 22px; border: 0; border-top: 1px solid rgba(28,39,50,.06); padding: 0; background: #fff; box-shadow: 0 30px 60px -20px rgba(28,39,50,.25); transition: opacity .28s cubic-bezier(.2,.8,.2,1), transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s linear .3s; }
.bn-nav--mega .bn-nav-item.is-open .bn-panel { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; transition: opacity .28s cubic-bezier(.2,.8,.2,1), transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.bn-panel__in { display: flex; gap: 2rem; padding: 1.5rem 1.25rem 1.75rem; align-items: stretch; }
.bn-panel__cols { display: grid; grid-template-columns: 1fr; gap: 1.5rem; flex: 1; min-width: 0; }
.bn-panel__cols--2 { grid-template-columns: 1fr 1fr; }
.bn-panel__cols--3 { grid-template-columns: 1fr 1fr 1fr; }
.bn-nav--mega .bn-mega-col { gap: .15rem; }
.bn-nav--mega .bn-mega-title { color: var(--blue-mid); padding: .25rem .85rem .55rem; margin-bottom: .35rem; }
/* 10e tour (07/09/2026) : une entree = [carre de 44 px][titre], en ligne. Dans L'agence, Nos
   expertises et Contact, les entrees se rangent en GRILLE de deux colonnes (.bn-mega-col--tuiles)
   qui remplit la largeur laissee par la carte de 300 px ; les lignes s'etirent a la hauteur de la
   carte (align-content: stretch), donc plus de vide sous la liste ni a sa droite. Dans les trois
   listes de Nos projets, le carre fait 36 px. Le carre porte le degrade de la famille et un picto
   trace (trait blanc, trait encre sur le degrade clair des affaires publiques), ou le logo de
   l'objet a 28 px (24 px dans Nos projets) sur fond Alice, servi tel quel. Pour le SIS a 24 px la
   zone de protection est d'un quart de largeur, 6 px : le carre de 36 px la donne exactement. */
.bn-mi { display: flex !important; flex-direction: row; align-items: center !important; text-align: left; gap: .8rem; padding: .5rem .85rem .5rem .5rem !important; border-radius: 12px !important; text-decoration: none; white-space: normal !important; opacity: 0; transform: translateY(6px); transition: background .2s ease, opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1); }
.bn-mi__ico { flex: none; width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #3769B1, #47A1DA, #4FCCB8); }
.bn-mi__ico svg { width: 22px; height: 22px; display: block; }
.bn-mi__ico--veille { background: linear-gradient(135deg, #47A1DA, #3769B1); }
.bn-mi__ico--ap { background: linear-gradient(135deg, #B7E0E8, #86A0CF); color: #1C2732; }
.bn-mi__ico--com { background: linear-gradient(135deg, #6DC2B8, #49C1EE); }
.bn-mi__ico--crise { background: linear-gradient(135deg, #3F81C3, #262F65); }
.bn-mi__ico--logo { background: #E3E9EF; }
.bn-mi__ico--mdc { background: #F0F2F7; }
.bn-mi__ico--marianne { background: #fff; border: 1px solid #E3E9EF; }
.bn-nav--mega .bn-mega-col--tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem; align-content: stretch; }
.bn-nav--mega .bn-mega-col--tuiles .bn-mega-title { grid-column: 1 / -1; }
.bn-panel__cols--3 .bn-mi__ico { width: 36px; height: 36px; border-radius: 11px; }
.bn-panel__cols--3 .bn-mi__ico svg { width: 19px; height: 19px; }
.bn-nav-item.is-open .bn-mi { opacity: 1; transform: translateY(0); }
.bn-nav-item.is-open .bn-mi:nth-child(2) { transition-delay: .04s } .bn-nav-item.is-open .bn-mi:nth-child(3) { transition-delay: .08s } .bn-nav-item.is-open .bn-mi:nth-child(4) { transition-delay: .12s } .bn-nav-item.is-open .bn-mi:nth-child(5) { transition-delay: .16s } .bn-nav-item.is-open .bn-mi:nth-child(6) { transition-delay: .20s }
.bn-mi__t { display: inline-flex; align-items: center; gap: .5rem; font-family: 'Avenir Next','Lato',sans-serif; font-weight: 700; font-size: .95rem; color: #1C2732; letter-spacing: -.01em; }
.bn-mi:hover .bn-mi__t { color: var(--blue-mid); }
.bn-mi__d { font-size: .8rem; line-height: 1.4; color: #5A6E82; font-weight: 400; }
.bn-mi__logo { width: 28px; height: 28px; object-fit: contain; display: block; }
.bn-panel__cols--3 .bn-mi__logo { width: 24px; height: 24px; }
.bn-mi__via { opacity: .55; font-weight: 500; font-size: .78rem; }
/* la regle d'origine `.bn-nav-dropdown a` (display:block, nowrap, couleur !important) est plus specifique : on la bat nommement */
.bn-nav-dropdown a.bn-panel__card { display: flex !important; white-space: normal !important; color: #fff !important; padding: 1.25rem 1.35rem !important; border-radius: 18px !important; }
.bn-panel__card { flex: 0 0 300px; display: flex; flex-direction: column; justify-content: flex-end; gap: .45rem; padding: 1.25rem 1.35rem; border-radius: 18px; text-decoration: none; color: #fff !important; position: relative; overflow: hidden; min-height: 200px; opacity: 0; transform: translateY(8px); transition: opacity .4s ease .1s, transform .4s cubic-bezier(.2,.8,.2,1) .1s; }
.bn-nav-item.is-open .bn-panel__card { opacity: 1; transform: translateY(0); }
.bn-panel__card--nuit, .bn-nav a.bn-panel__card--nuit { background: linear-gradient(135deg, #0D1920 0%, #13242C 45%, #1E323D 100%) !important; }
.bn-nav a.bn-panel__card--img { background: #13242C !important; }
.bn-panel__card--nuit::after { content: ""; position: absolute; top: -30%; right: -20%; width: 60%; height: 150%; background: radial-gradient(circle, rgba(105,177,240,.22), transparent 60%); pointer-events: none; }
.bn-panel__card--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bn-panel__card--img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,25,32,.05) 0%, rgba(13,25,32,.85) 70%); }
.bn-panel__card-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .45rem; }
.bn-panel__card > .bn-kicker, .bn-panel__card-title, .bn-panel__card-more { position: relative; z-index: 1; }
.bn-panel__card-title { font-family: 'Avenir Next','Lato',sans-serif; font-weight: 800; font-size: 1.15rem; line-height: 1.2; letter-spacing: -.02em; color: #fff; }
.bn-panel__card-more { font-size: .8rem; font-weight: 700; color: #69B1F0; }
.bn-panel__card:hover .bn-panel__card-more { color: #fff; }
body.bn-menu-open .bn-header { border-bottom-color: transparent; }

/* Hero : le sur-titre prend de l'air au-dessus du titre (plus de chevauchement pendant l'animation) */
.bn-hero-kicker { margin-bottom: 1.5rem; }
@media (min-width: 821px) { .bn-tile--hero { justify-content: flex-start !important; gap: 1.5rem; } .bn-tile--hero .bn-hero-textcol { margin-top: auto; } }

/* En-tete mobile : les classes utilitaires md:/sm: n'ont aucune regle, .bn-maison et .bn-btn battent .hidden.
   Mesure (sonde probe-mobile a 390 px) : l'en-tete des pages internes debordait de 155 px. */
@media (max-width: 767px) { .bn-header a.bn-maison.hidden { display: none !important; } }
@media (max-width: 639px) { .bn-header a.bn-btn.hidden { display: none !important; } }

/* ============ 9e tour : le survol du menu, en pilule a contour degrade ============
   « Sur les surlignages dans le menu, ca ne fonctionne pas du tout. Ce n'est pas un beau truc
   circulaire bien degrade. » Il avait raison, et la cause est mesurable : la regle du 8e tour
   posait bien un bord, mais `.bn-nav--typo .bn-nav-item > a` (deux classes, plus specifique que
   `.bn-nav a`) porte `border-radius: 0`. Le bord etait donc un RECTANGLE, et comme la bordure
   n'existait qu'au survol, l'entree grandissait de 3 px au passage de la souris.
   Ici : contour en degrade obtenu par DEUX fonds superposes - un aplat sur la boite de padding,
   le degrade sur la boite de bordure, la bordure etant transparente. La bordure est posee AUSSI
   hors survol, et le padding est diminue d'autant : 9 + 9 + 2 + 2 = 22 px de haut, exactement la
   hauteur d'avant (10 + 12 sans bordure) ; 13 + 13 + 2 + 2 = 30 px de large, exactement 15 + 15.
   Zero saut de mise en page, mesure au pixel.
   Les deux fonds sont deja la au repos, en alpha 0 : c'est ce qui permet la transition douce
   (Chromium interpole deux degrades de meme structure, il ne sait pas passer de `none` a un
   degrade). Le souligne d'avant est retire : la pilule le remplace, garder les deux ferait deux
   signes pour un seul survol. */
.bn-nav--typo .bn-nav-item > a, .bn-nav--mega .bn-nav-item > a {
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  padding: 9px 13px !important;
  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)) padding-box,
              linear-gradient(135deg, rgba(55,105,177,0), rgba(71,161,218,0), rgba(79,204,184,0)) border-box !important;
  transition: background-image .3s cubic-bezier(.2,.8,.2,1), color .2s ease !important;
}
.bn-nav--typo .bn-nav-item > a::after, .bn-nav--mega .bn-nav-item > a::after { display: none !important; }
.bn-nav--typo .bn-nav-item:hover > a, .bn-nav--typo .bn-nav-item:focus-within > a,
.bn-nav--mega .bn-nav-item:hover > a, .bn-nav--mega .bn-nav-item.is-open > a {
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(135deg, #3769B1, #47A1DA, #4FCCB8) border-box !important;
  box-shadow: none !important;
  color: #1C2732 !important;
}
/* Meme pilule pour les entrees du mega-menu. `.bn-mi` porte deja padding et border-radius en
   !important : on les rejoue, en retirant du padding l'epaisseur de la bordure pour que la
   hauteur ne bouge pas d'un pixel. 10e tour : le padding gauche est plus serre (.5rem) parce que
   le carre du picto y est pose ; dans Nos projets l'entree est plus basse (.3rem) pour un carre
   de 36 px. */
.bn-mi {
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  padding: calc(.5rem - 2px) calc(.85rem - 2px) calc(.5rem - 2px) calc(.5rem - 2px) !important;
  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)) padding-box,
              linear-gradient(135deg, rgba(55,105,177,0), rgba(71,161,218,0), rgba(79,204,184,0)) border-box !important;
}
.bn-mi:hover, .bn-mi:focus-visible {
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(135deg, #3769B1, #47A1DA, #4FCCB8) border-box !important;
  box-shadow: none !important;
}
.bn-panel__cols--3 .bn-mi { gap: .65rem; padding: calc(.3rem - 2px) calc(.85rem - 2px) calc(.3rem - 2px) calc(.4rem - 2px) !important; }

/* ============ 9e tour : les deux logos maison dans la barre du haut ============
   « Tu n'as toujours pas le logo de Follaw et le logo de ReputatioLab dans la top bar, bien
   identifies pour pouvoir cliquer dessus, et non pas dans le menu. »
   Mesure du 06/09 sur les fichiers officiels (getBBox dans le navigateur, sonde _h9-bbox) :
   - assets/follaw-logo-official.svg : l'encre mesure 641,2 x 201,5 dans un cadre de
     850,4 x 566,9, soit 35,5 % de la hauteur. A `height:26px` le logotype ne ferait que
     9,2 px de haut : illisible. Il faut un cadre de 73 px pour 26 px de logotype. Les marges
     negatives n'enlevent RIEN au logo : la marge du fichier est transparente et parfaitement
     symetrique (182,7 au-dessus, 182,7 en dessous), elles annulent seulement la place qu'elle
     prendrait dans la mise en page. Fichier servi tel quel, ni recadre, ni recolore.
   - reputatiolab-official-black.svg : l'encre remplit 99 % du cadre mais le rapport est de
     1,77 pour 1 : c'est un LOCKUP a deux lignes (symbole au-dessus, mot en dessous). A 26 px
     le mot mesure 7 px de haut. On prend donc le motif deja valide de l'ancienne pastille :
     le symbole + « Le ReputatioLab » ecrit. Les deux seules autres pieces disponibles,
     assets/sv-reputatiolab.png et reputatiolab-ligne.png, portent AUSSI « SAPER VEDERE » :
     ils rediraient SAPER VEDERE a 300 px du logo principal. */
.bn-follaw-mark { display: block; width: auto; pointer-events: none; }
.bn-follaw-mark--26 { height: 73px; margin: -23.5px 0; }   /* 26 px de logotype : barre du haut */
.bn-follaw-mark--36 { height: 101px; margin: -32.5px 0; }  /* 36 px de logotype : tuile Top Topical */
.bn-logo-lien { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; text-decoration: none; color: #44596B; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.bn-logo-lien:hover { background: #E3E9EF; color: #1C2732; }
.bn-logo-lien__sym { height: 24px; width: 24px; display: block; }
.bn-logo-lien__lbl { font-family: 'Avenir Next','Lato',sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: -.01em; }
/* Les deux logos demandent 286 px : ils n'apparaissent que dans une barre d'en-tete large.
   En dessous de 1200 px de fenetre ils sortent. */
@media (max-width: 1199px) { .bn-header a.bn-logo-lien.hidden { display: none !important; } }
/* 10e tour (07/09) : la regle `body.sv-has-side-toc .bn-header a.bn-logo-lien { display: none }`
   est RETIREE. Elle reposait sur une mesure du 06/09 devenue fausse : la barre des pages internes
   ne faisait alors que 955 px (a 1280) ou 1065 px (a 1440) parce que le rail « Sommaire »
   poussait TOUTE la page, en-tete compris, et son contenu de 1081 px (logos + bouton Contact)
   y debordait de 16 a 126 px. Depuis ce tour, l'en-tete des pages internes reprend la largeur
   entiere (internal-pages/_shared.css : marge negative sur .bn-header egale au retrait du body)
   et le bouton Contact de la barre a disparu. Le contenu de la barre tient donc partout ou les
   logos s'affichent (1200 px et plus), sur l'accueil comme sur les pages internes. */

/* Logo officiel du Social Impact Score, tuile « Barometre SIS » de l'accueil.
   72 px de haut, servi tel quel : ni degrade, ni transparence, ni recadrage (sa charte les
   interdit). 18 px de zone de protection = le quart de sa largeur. */
.bn-sis-logo { height: 72px; width: auto; display: block; margin: 18px 0; }

/* ============ 9e tour : la tuile Top Topical ============ */
.bn-tt-tags { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bn-tag--bientot { background: #4FCCB8; color: #12313B; }
/* padding-right : la fleche de la tuile est posee en absolu en bas a droite. Mesure du 06/09 a
   1440 px : sans cette reserve, l'encre du logo passait SOUS la fleche (chevauchement de 12 px).
   Avec 3.4rem la ligne revient a la ligne au lieu de se superposer - elle ne tronque jamais. */
.bn-tt-outille { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1.1rem; padding-right: 3.4rem; }
.bn-grid--projets .bn-tile .bn-metric-label { padding-right: 3.4rem; }
.bn-tt-outille span { font-family: 'Avenir Next','Lato',sans-serif; font-weight: 700; font-size: .95rem; color: rgba(255,255,255,.82); }

/* Etudes importees de l'ancien site : un logo ou une capture ne remplit pas toute la colonne (les pages d'etude ne chargent que cette feuille) */
article.bn-prose img, article.bn-prose figure img { max-width: 100%; max-height: 520px; width: auto; height: auto; display: block; margin: 1.2rem auto; border-radius: 12px; }

/* Les Echos : le logo, pas le nom */
.bn-media-logo { height: 20px; width: auto; display: block; }

/* ============ 9e tour : la ligne des jeux, sur l'accueil ============
   Elle reprend .bn-join-row, exactement comme la ligne Presidentielle : c'est LUI qui
   porte le flex-direction: row en !important, parce que .bn-tile impose une colonne.
   Mesure du 06/09 : la meme tuile avec une classe maison sans !important restait en
   colonne, la fleche tombait au centre sous le texte. Ne pas re-inventer cette regle.
   Les huit noms de jeux s'etalent en pastilles au lieu de s'empiler : la ligne fait six
   colonnes de large, une colonne de huit lignes y serait un ecran de telephone etire.
   Elles ne tronquent jamais : elles reviennent a la ligne et la tuile grandit. */
.bn-jeux-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .85rem; }
.bn-jeu {
  display: inline-block; white-space: normal; overflow-wrap: anywhere;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
  color: #fff; border-radius: 999px; padding: .32rem .8rem;
  font-family: 'Avenir Next','Lato',sans-serif; font-size: .8rem; font-weight: 700; line-height: 1.3;
}
.bn-jeux-row:hover .bn-jeu { background: rgba(255,255,255,.22); }
/* La tuile n'est pas .bn-tile--navy-dark (son degrade lui est propre) : sans cette regle,
   la fleche garderait le fond clair et l'encre sombre des tuiles blanches, invisible ici. */
.bn-jeux-row .bn-tile__arrow { background: rgba(255,255,255,.18); color: #fff; }
.bn-jeux-row:hover .bn-tile__arrow { background: rgba(255,255,255,.32); color: #fff; }

/* Citation du fondateur, pleine largeur */
.bn-quote--wide { flex-direction: row !important; align-items: center !important; gap: 2rem; padding: 1.75rem 2rem !important; min-height: 0; }
.bn-quote--wide .bn-quote__text { font-size: clamp(1.1rem, 1.6vw, 1.45rem); max-width: 860px; flex: 1; }
.bn-quote--wide .bn-quote__who { margin-top: 0 !important; text-align: right; white-space: nowrap; }
@media (max-width: 640px) { .bn-quote--wide { flex-direction: column !important; align-items: flex-start !important; } .bn-quote--wide .bn-quote__who { text-align: left; } }

/* Page etude */
.bn-etude-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; }
@media (max-width: 900px) { .bn-etude-hero { grid-template-columns: 1fr; } }
.bn-etude-hero img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; border-radius: 16px; display: block; }
.bn-etude-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
@media (max-width: 900px) { .bn-etude-layout { grid-template-columns: 1fr; } }
.bn-toc { position: sticky; top: 92px; }
.bn-toc a { display: block; padding: .5rem .8rem; border-radius: 10px; color: var(--navy-800); text-decoration: none; font-size: .9rem; font-weight: 600; line-height: 1.3; }
.bn-toc a:hover { background: linear-gradient(135deg, rgba(71,161,218,.10), rgba(109,194,184,.10)); color: var(--cyan); }
.bn-toc .bn-toc__n { color: var(--cyan); font-weight: 800; margin-right: .4rem; }
.bn-prose { max-width: 820px; }
.bn-prose h2 { font-family: 'Avenir Next','Lato',sans-serif; font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.025em; line-height: 1.1; color: var(--navy-900); margin: 2.4rem 0 1rem; scroll-margin-top: 100px; }
.bn-prose h2:first-child { margin-top: 0; }
.bn-prose h3 { font-family: 'Avenir Next','Lato',sans-serif; font-weight: 700; font-size: 1.2rem; letter-spacing: -.015em; color: var(--navy-900); margin: 1.6rem 0 .5rem; }
.bn-prose p { margin: 0 0 .9rem; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.65; }
.bn-prose ul { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--ink-soft); line-height: 1.6; list-style: disc; }
.bn-prose li { margin: .3rem 0; }
.bn-prose li::marker { color: var(--cyan); }
.bn-prose strong { color: var(--navy-900); }
.bn-prose figure { margin: 1.4rem 0 1.8rem; }
.bn-prose figure img { width: 100%; border-radius: 14px; border: 1px solid rgba(26,43,69,.08); display: block; }
.bn-prose figcaption { font-size: .8rem; color: var(--mute); margin-top: .5rem; }
.bn-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 1rem 0 1.4rem; }
@media (max-width: 640px) { .bn-podium { grid-template-columns: 1fr; } }
.bn-podium div { border-radius: 14px; padding: 1rem 1.1rem; color: #fff; background: linear-gradient(135deg, #47A1DA 0%, #3769B1 55%, #324E9D 100%); }
.bn-podium div:nth-child(2) { background: linear-gradient(135deg, #6DC2B8 0%, #5AC2D9 50%, #49C1EE 100%); }
.bn-podium div:nth-child(3) { background: linear-gradient(135deg, #3F81C3 0%, #284494 55%, #262F65 100%); }
.bn-podium b { display: block; font-family: 'Avenir Next','Lato',sans-serif; font-size: 1.6rem; font-weight: 800; line-height: 1; margin-bottom: .35rem; }
.bn-podium span { font-size: .9rem; font-weight: 700; }
.bn-podium small { display: block; font-size: .78rem; opacity: .85; }