/* NBI3LIK Brand 2.0 - generated by build_live.py */
:root{--deep:#003B25;--deep2:#002C1B;--green:#39D979;--ink:#13784A;--off:#F5F4EF;--sand:#EDEBE5;--white:#FFFFFF;--char:#18201C;--grey:#E7E7E2;--mute:#5C635F}
.nb,.nb *{box-sizing:border-box}
body.nb2{margin:0;background:var(--off);color:var(--char);font-family:'Manrope','Noto Sans',system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.nb a{color:var(--ink);text-decoration:none}
.nb a:hover{color:var(--deep)}
[dir=rtl] .nb,[dir=rtl] .nb *{font-family:'Noto Sans Arabic','Manrope',system-ui,sans-serif}
[dir=rtl] .nb .eyebrow,[dir=rtl] .nb .trust-l,[dir=rtl] .nb .hero-aside,[dir=rtl] .nb .cities,[dir=rtl] .nb .ctas-im .t,[dir=rtl] .nb .lbl,[dir=rtl] .nb .k{letter-spacing:0;text-transform:none}
[dir=rtl] .nb .h1{line-height:1.24;letter-spacing:0}
[dir=rtl] .nb .h2{line-height:1.32;letter-spacing:0}
[dir=rtl] .nb .lat,[dir=rtl] .nb .lat *{font-family:'Manrope',system-ui,sans-serif}
.nb p{margin:0}
.nb .wrap{max-width:1440px;margin:0 auto;padding:0 80px}
.nb .sec{padding:128px 0}
.nb .bg-white{background:#fff}
.nb .eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0 0 20px}
.nb .dark .eyebrow{color:var(--green)}
.nb .h1{font-size:80px;line-height:1.02;font-weight:800;letter-spacing:-.03em;margin:0}
.nb .h2{font-size:56px;line-height:1.06;font-weight:800;letter-spacing:-.025em;margin:0}
.nb .h3{font-size:30px;line-height:1.2;font-weight:700;letter-spacing:-.015em;margin:0}
.nb .lead{font-size:19px;line-height:1.6}
.nb .g{color:var(--green)}
.nb .dark{background:var(--deep);color:#fff}
.nb .muted{color:var(--mute)}
.nb .dark .muted{color:rgba(255,255,255,.74)}
.nb .tbd{border-bottom:2px dashed rgba(57,217,121,.75)}
.nb .tbd-box{display:inline-block;background:rgba(57,217,121,.12);border:1px dashed rgba(19,120,74,.55);border-radius:8px;padding:3px 10px;color:var(--ink);font-size:15px;font-weight:600}
.nb .btns{display:flex;gap:16px;flex-wrap:wrap}
.nb .btn{display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 28px;border-radius:999px;font-size:15px;font-weight:700;white-space:nowrap;transition:background .2s,border-color .2s}
.nb .btn svg{width:18px;height:18px;transition:transform .25s}
.nb .btn:hover svg{transform:translateX(3px)}
[dir=rtl] .nb .btn svg,[dir=rtl] .nb .arr{transform:scaleX(-1)}
[dir=rtl] .nb .btn:hover svg{transform:scaleX(-1) translateX(3px)}
.nb .btn-green{background:var(--green);color:var(--deep)}
.nb .btn-green:hover{background:#4FE38B;color:var(--deep)}
.nb .btn-ghost{border:1.5px solid rgba(255,255,255,.55);color:#fff}
.nb .btn-ghost:hover{border-color:#fff;color:#fff}
.nb .btn-deep{background:var(--deep);color:#fff}
.nb .btn-deep:hover{background:var(--deep2);color:#fff}
.nb .btn-line{height:46px;padding:0 22px;border:1.5px solid var(--green);color:#fff;font-size:14px}
.nb .btn-line:hover{background:var(--green);color:var(--deep)}
.nb .link{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:999px;background:var(--green);color:var(--char);font-weight:700;font-size:14px;line-height:1.25;white-space:nowrap;transition:background .2s}
.nb .link:hover{background:#4FE38B;color:var(--char)}
.nb .link svg{width:16px;height:16px;flex:none;transition:transform .25s}
.nb .link:hover svg{transform:translateX(3px)}
[dir=rtl] .nb .link:hover svg{transform:scaleX(-1) translateX(3px)}
.nb .hdr{position:absolute;top:0;left:0;right:0;z-index:5}
.nb .hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:104px}
.nb .logo{display:block;width:150px;height:auto}
.nb .nav{display:flex;gap:36px;font-size:15px;font-weight:600}
.nb .nav a{color:rgba(255,255,255,.82);padding:8px 0}
.nb .nav a:hover{color:#fff}
.nb .nav a.on{color:#fff;box-shadow:inset 0 -2px 0 var(--green)}
.nb .hdr-r{display:flex;align-items:center;gap:22px}
.nb .lang{font-size:14px;font-weight:600;color:rgba(255,255,255,.75)}
.nb .burger{display:none;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--green);color:#fff;place-items:center}
.nb .burger svg{width:20px;height:20px}
.nb .hero{position:relative;background:var(--deep);color:#fff;overflow:hidden;min-height:840px}
.nb .hero-media{position:absolute;top:0;bottom:0;right:0;width:56%;clip-path:polygon(24% 0,100% 0,100% 100%,0 100%)}
.nb .hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.nb .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,59,37,.92) 0%,rgba(0,59,37,.3) 34%,rgba(0,59,37,0) 60%),linear-gradient(0deg,rgba(0,28,17,.6),rgba(0,28,17,0) 38%)}
[dir=rtl] .nb .hero-media{right:auto;left:0;clip-path:polygon(0 0,76% 0,100% 100%,0 100%)}
[dir=rtl] .nb .hero-media img{transform:scaleX(-1)}
[dir=rtl] .nb .hero-media::after{background:linear-gradient(270deg,rgba(0,59,37,.92) 0%,rgba(0,59,37,.3) 34%,rgba(0,59,37,0) 60%),linear-gradient(0deg,rgba(0,28,17,.6),rgba(0,28,17,0) 38%)}
.nb .hero .wrap{position:relative;z-index:2}
.nb .hero-in{padding-top:212px;padding-bottom:112px;max-width:800px}
.nb .hero .lead{color:rgba(255,255,255,.84);max-width:520px;margin:32px 0 44px}
.nb .proof{display:flex;align-items:center;gap:14px;margin-top:48px;font-size:15px;color:rgba(255,255,255,.84);max-width:520px}
.nb .proof i{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--green);color:var(--green);display:grid;place-items:center;flex:none}
.nb .proof svg{width:16px;height:16px}
.nb .hero-aside{position:absolute;z-index:2;top:152px;right:80px;font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;line-height:1.9;color:#fff}
.nb .hero-aside::after{content:"";display:block;width:52px;height:1.5px;background:var(--green);margin-top:18px}
[dir=rtl] .nb .hero-aside{right:auto;left:80px;font-size:16px}
.nb .cities{position:absolute;z-index:2;bottom:48px;right:80px;display:flex;gap:14px;align-items:center;padding:13px 24px;border-radius:999px;border:1px solid rgba(255,255,255,.4);background:rgba(0,28,17,.45);backdrop-filter:blur(8px);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.nb .cities i{width:4px;height:4px;border-radius:50%;background:var(--green)}
[dir=rtl] .nb .cities{right:auto;left:80px;font-size:14px}
.nb .trust{background:var(--sand);padding:40px 0}
.nb .trust .wrap{display:flex;align-items:center;gap:56px}
.nb .trust-l{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);width:190px;flex:none;line-height:1.6}
.nb .logos{flex:1;display:flex;align-items:center;justify-content:space-around;gap:40px}
.nb .logos img{width:auto;filter:grayscale(1) brightness(.6) contrast(1.3);opacity:.8;mix-blend-mode:multiply;display:block}
.nb .trust-n{font-size:13px;color:var(--mute);width:170px;flex:none;line-height:1.5}
.nb .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:60px}
.nb .cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.nb .card{border-radius:20px;padding:40px 36px 36px;background:#fff;border:1px solid var(--grey);display:flex;flex-direction:column;min-height:470px;position:relative}
.nb .card.dk{background:var(--deep);color:#fff;border-color:var(--deep)}
.nb .card .num{font-size:15px;font-weight:700;color:var(--ink)}
.nb .card.dk .num{color:var(--green)}
.nb .card h3{font-size:26px;font-weight:800;letter-spacing:-.01em;margin:12px 0 12px;line-height:1.15}
.nb .card .tag{font-size:16px;line-height:1.55;margin:0 0 28px;color:var(--mute)}
.nb .card.dk .tag{color:rgba(255,255,255,.82)}
.nb .ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px;font-size:15px;line-height:1.5}
.nb .ul li{display:flex;gap:12px;align-items:flex-start}
.nb .ul li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex:none;margin-top:9px}
.nb .card-foot{margin-top:auto;padding-top:36px;display:flex;align-items:flex-end;justify-content:space-between}
.nb .circ{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--char);color:var(--char)}
.nb .circ svg{width:18px;height:18px}
.nb .card.dk .circ{background:var(--green);border-color:var(--green);color:var(--deep)}
.nb .deco{width:60px;height:60px;color:#DCDBD4}
.nb .card.dk .deco{color:rgba(57,217,121,.4)}
.nb .stats{margin-top:40px;background:var(--deep);border-radius:20px;color:#fff;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:46px 0}
.nb .stat{text-align:center;padding:0 24px;border-left:1px solid rgba(255,255,255,.14)}
.nb .stat:first-child{border-left:0}
[dir=rtl] .nb .stat{border-left:0;border-right:1px solid rgba(255,255,255,.14)}
[dir=rtl] .nb .stat:first-child{border-right:0}
.nb .stat b{display:inline-block;font-size:52px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.nb .stat span{display:block;font-size:15px;color:rgba(255,255,255,.76);margin-top:6px}
.nb .carousel{position:relative}
.nb .pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.nb .pcard{background:#fff;border:1px solid var(--grey);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.nb .pcard .im{aspect-ratio:16/10;overflow:hidden;position:relative}
.nb .pcard .im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.nb .pcard:hover .im img{transform:scale(1.03)}
.nb .pcard .bd{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.nb .pcard .nm{display:flex;align-items:center;justify-content:space-between;gap:16px}
.nb .pcard h3,.nb .pcard h4{font-size:20px;font-weight:800;margin:0;letter-spacing:-.01em}
.nb .pcard .nm img{height:34px;width:auto;opacity:.85}
.nb .pcard .sc{font-size:14px;color:var(--mute);margin:6px 0 22px}
.nb .mets{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid var(--grey);padding-top:20px;margin-top:auto}
.nb .mets b{display:inline-block;white-space:nowrap;font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.01em;line-height:1.2}
.nb .mets span{display:block;font-size:13px;color:var(--mute);margin-top:4px}
.nb .car-btn{position:absolute;top:31%;width:54px;height:54px;border-radius:50%;background:var(--char);color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.2);z-index:3}
.nb .car-btn svg{width:20px;height:20px}
.nb .car-prev{left:-27px}
.nb .car-next{right:-27px}
.nb .note{font-size:14px;color:var(--mute);margin-top:14px}
.nb .method{background:var(--deep);color:#fff;position:relative;overflow:hidden}
.nb .method::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 500px at 85% 20%,rgba(57,217,121,.10),transparent 60%),radial-gradient(700px 500px at 0% 100%,rgba(0,0,0,.25),transparent 60%)}
.nb .method .wrap{position:relative;display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:center}
.nb .method .muted{margin:24px 0 40px;max-width:420px}
.nb .steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:relative}
.nb .steps::before{content:"";position:absolute;top:38px;left:8%;right:8%;height:1.5px;background:linear-gradient(90deg,var(--green),rgba(57,217,121,.15))}
[dir=rtl] .nb .steps::before{background:linear-gradient(270deg,var(--green),rgba(57,217,121,.15))}
.nb .step{text-align:center;position:relative;padding:0 4px}
.nb .step .ic{width:76px;height:76px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:var(--deep);display:grid;place-items:center;margin:0 auto 20px;color:#fff}
.nb .step .ic svg{width:30px;height:30px}
.nb .step b{display:block;font-size:18px;font-weight:800;color:var(--green)}
.nb .step span{display:block;font-size:14px;font-weight:600;line-height:1.35;margin-top:4px}
.nb .exp .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:96px;align-items:start}
.nb .exp .lead{margin:28px 0 36px;color:var(--mute)}
.nb .exp-item{display:flex;gap:24px;padding:30px 0;border-top:1px solid var(--grey)}
.nb .exp-item:last-child{border-bottom:1px solid var(--grey)}
.nb .ic2{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--deep);color:var(--deep);display:grid;place-items:center;flex:none}
.nb .ic2 svg{width:24px;height:24px}
.nb .exp-item h3,.nb .exp-item h4{font-size:20px;font-weight:800;margin:2px 0 6px}
.nb .exp-item p{color:var(--mute);font-size:16px}
.nb .ctas{display:grid;grid-template-columns:1fr 1fr;min-height:420px}
.nb .ctas-im{position:relative;overflow:hidden}
.nb .ctas-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nb .ctas-im::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,28,17,.82),rgba(0,28,17,.28))}
[dir=rtl] .nb .ctas-im::after{background:linear-gradient(270deg,rgba(0,28,17,.82),rgba(0,28,17,.28))}
.nb .ctas-im .t{position:absolute;z-index:2;left:80px;top:50%;transform:translateY(-50%);color:#fff;font-size:26px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.55}
[dir=rtl] .nb .ctas-im .t{left:auto;right:80px;font-size:32px}
.nb .ctas-im .t::after{content:"";display:block;width:52px;height:1.5px;background:var(--green);margin-top:22px}
.nb .ctas-tx{background:var(--sand);padding:80px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.nb .ctas-tx .h3{font-size:34px;font-weight:800}
.nb .ctas-tx p{color:var(--mute);margin:16px 0 32px;max-width:460px}
.nb .ftr{background:var(--off);padding:64px 0 32px;border-top:1px solid var(--grey)}
.nb .ftr-top{display:flex;align-items:center;justify-content:space-between;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--grey)}
.nb .ftr .logo{width:170px}
.nb .ftr-nav{display:flex;gap:32px;font-size:15px;font-weight:600}
.nb .ftr-nav a{color:var(--char)}
.nb .soc{display:flex;gap:12px}
.nb .soc a{width:42px;height:42px;border-radius:50%;border:1px solid #D6D5CE;display:grid;place-items:center;color:var(--deep)}
.nb .soc svg{width:18px;height:18px}
.nb .ftr-bot{display:flex;justify-content:space-between;gap:24px;padding-top:24px;font-size:13px;color:var(--mute)}
.nb .ftr-bot a{color:var(--mute)}
.nb .ihero{position:relative;background:var(--deep);color:#fff;overflow:hidden}
.nb .ihero > .wrap{position:relative;z-index:2;padding-top:184px;padding-bottom:120px}
.nb .ihero-in{max-width:700px}
.nb .ihero .h1{font-size:72px;line-height:1.04}
.nb .ihero .lead{color:rgba(255,255,255,.84);margin:28px 0 0;max-width:560px}
.nb .ihero .btns{margin-top:40px}
.nb .ihero .hero-media{width:48%}
.nb .crumb{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:30px;font-weight:600;display:flex;gap:10px}
.nb .crumb a{color:rgba(255,255,255,.6)}
.nb .attr{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);font-size:14px;color:rgba(255,255,255,.66);max-width:560px}
.nb .tier{min-height:690px}
.nb .tier .for{padding:18px 20px;border-radius:14px;background:var(--off);font-size:15px;line-height:1.5;margin-bottom:28px}
.nb .card.dk .for{background:rgba(255,255,255,.07)}
.nb .lbl{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.nb .card.dk .lbl{color:var(--green)}
.nb .tier .card-foot .btn{height:50px;font-size:14px}
.nb .media-note{display:flex;align-items:center;gap:14px;margin-top:32px;font-size:15px;color:var(--mute)}
.nb .media-note i{width:34px;height:34px;border-radius:50%;background:rgba(0,59,37,.08);color:var(--deep);display:grid;place-items:center;flex:none}
.nb .media-note svg{width:16px;height:16px}
.nb .sits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.nb .sit{border-top:2px solid var(--deep);padding-top:30px;display:flex;flex-direction:column}
.nb .sit h3{font-size:30px;font-weight:800;margin:6px 0 14px;letter-spacing:-.015em}
.nb .sit p{color:var(--mute);font-size:16px}
.nb .first{margin:26px 0 24px;padding:18px 20px;background:var(--off);border-radius:14px;font-size:15px;line-height:1.5}
.nb .first b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:4px}
.nb .sit .link{margin-top:auto;align-self:flex-start}
.nb .kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:60px}
.nb .kpi{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:20px;padding:32px;min-height:220px;display:flex;flex-direction:column}
.nb .k{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.nb .kpi b{font-size:21px;font-weight:700;margin-top:auto;line-height:1.35}
.nb .kpi.q{background:var(--green);color:var(--deep);border-color:var(--green)}
.nb .kpi.q .k{color:var(--deep)}
.nb .faqg{display:grid;grid-template-columns:4fr 8fr;gap:80px}
.nb .faq-q{border-bottom:1px solid var(--grey);padding:28px 0}
.nb .faq-q:first-child{border-top:1px solid var(--grey)}
.nb .q-h{display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:20px;font-weight:700;line-height:1.4}
.nb .q-a{margin-top:14px;color:var(--mute);max-width:700px;font-size:16px}
.nb .pm{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--deep);color:var(--deep);display:grid;place-items:center;flex:none}
.nb .pm svg{width:16px;height:16px}
.nb .faq-q.open .pm{background:var(--deep);color:#fff}
.nb .case{display:grid;grid-template-columns:5fr 7fr;background:#fff;border:1px solid var(--grey);border-radius:24px;overflow:hidden}
.nb .case-im{position:relative;min-height:620px}
.nb .case-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nb .case-bd{padding:52px 56px}
.nb .case-top{display:flex;align-items:center;justify-content:space-between;gap:20px}
.nb .case-top img{height:52px;width:auto}
.nb .pill{display:inline-flex;padding:7px 14px;border-radius:999px;background:rgba(0,59,37,.08);color:var(--deep);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.nb .case-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin-top:34px}
.nb .cs{padding:20px 0;border-top:1px solid var(--grey)}
.nb .cs.full{grid-column:1/-1}
.nb .cs .n{font-size:12px;font-weight:700;color:var(--ink);letter-spacing:.14em;text-transform:uppercase}
.nb .cs p{margin:8px 0 0;font-size:16px;line-height:1.5}
.nb .ocards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.nb .ocards .pcard .bd p{color:var(--mute);font-size:15px;margin:10px 0 24px}
.nb .soon{display:inline-flex;align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);border:1px solid var(--grey);border-radius:999px;padding:6px 12px;margin-top:auto}
.nb .story{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin-top:56px}
.nb .st{border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:28px 24px;background:rgba(255,255,255,.04);position:relative;min-height:180px}
.nb .st .n{color:var(--green);font-weight:700;font-size:14px}
.nb .st h4{font-size:19px;font-weight:800;margin:18px 0 8px;text-transform:uppercase;letter-spacing:.03em}
.nb .st p{font-size:14px;color:rgba(255,255,255,.72)}
.nb .st:not(:last-child)::after{content:"";position:absolute;right:-21px;top:50%;width:22px;height:1.5px;background:var(--green)}
.nb .banner{margin-top:40px;border-radius:20px;background:var(--green);color:var(--deep);padding:30px 36px;display:flex;justify-content:space-between;align-items:center;gap:32px}
.nb .banner b{font-size:22px;font-weight:800;line-height:1.3}
.nb .banner > span{font-size:15px;max-width:460px}
.nb .chain{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;margin-top:60px}
.nb .ch{background:#fff;border:1px solid var(--grey);border-radius:20px;padding:28px 26px;position:relative;min-height:176px}
.nb .ch .n{color:var(--ink);font-weight:700;font-size:14px}
.nb .ch h4{font-size:19px;font-weight:800;margin:20px 0 8px;text-transform:uppercase;letter-spacing:.03em;color:var(--deep)}
.nb .ch p{font-size:14px;color:var(--mute);line-height:1.5}
.nb .ch:not(:last-child)::after{content:"";position:absolute;right:-17px;top:50%;width:10px;height:10px;border-top:2px solid var(--green);border-right:2px solid var(--green);transform:translateY(-50%) rotate(45deg)}
.nb .split{display:grid;grid-template-columns:5fr 6fr;gap:96px;align-items:start}
.nb .split .body p{color:var(--mute);margin-bottom:20px;font-size:17px}
.nb .pull{margin-top:36px;padding:32px 36px;border-radius:20px;background:var(--deep);color:#fff;font-size:22px;font-weight:700;line-height:1.45}
.nb .pull span{color:var(--green)}
.nb .aud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:60px}
.nb .au{border-top:1.5px solid var(--green);padding-top:26px}
.nb .au b{display:block;font-size:24px;font-weight:800;margin:12px 0 8px;line-height:1.25}
.nb .au span{color:rgba(255,255,255,.72);font-size:15px}
.nb .aud-note{margin-top:48px;font-size:17px;color:rgba(255,255,255,.8)}
.nb .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.nb .dd{background:#fff;border:1px solid var(--grey);border-radius:20px;padding:36px;display:flex;gap:22px}
.nb .xx{width:42px;height:42px;border-radius:50%;background:rgba(0,59,37,.08);color:var(--deep);display:grid;place-items:center;flex:none}
.nb .xx svg{width:16px;height:16px}
.nb .dd h4{font-size:20px;font-weight:800;margin:6px 0 8px}
.nb .dd p{color:var(--mute);font-size:16px}
.nb .team{display:grid;grid-template-columns:4fr 7fr;gap:80px;align-items:center}
.nb .portrait{aspect-ratio:4/5;border-radius:24px;background:repeating-linear-gradient(135deg,#EFEDE6 0 14px,#E7E5DD 14px 28px);display:grid;place-items:center;color:var(--mute);font-weight:700;font-size:14px;border:1px dashed #CBC9C0;text-align:center;padding:24px}
.nb .role{font-size:15px;font-weight:700;color:var(--ink);margin:10px 0 22px}
.nb .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.nb .chip{padding:10px 18px;border-radius:999px;border:1px solid var(--grey);background:#fff;font-size:14px;font-weight:600;color:var(--char)}
.nb .chip.on{background:var(--deep);color:#fff;border-color:var(--deep)}
.nb .aswar{display:flex;align-items:center;gap:22px;margin-top:32px;padding:22px 24px;border-radius:18px;background:var(--off)}
.nb .aswar img{height:48px;width:auto}
.nb .aswar p{font-size:15px;color:var(--mute)}
.nb .feat{display:grid;grid-template-columns:7fr 5fr;background:#fff;border:1px solid var(--grey);border-radius:24px;overflow:hidden}
.nb .feat-im{position:relative;min-height:440px}
.nb .feat-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nb .feat-bd{padding:56px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.nb .feat-bd .h3{font-size:32px;font-weight:800;margin:14px 0 16px;line-height:1.2}
.nb .feat-bd p{color:var(--mute);margin-bottom:30px}
.nb .meta{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.nb .acards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:28px}
.nb .acard{background:#fff;border:1px solid var(--grey);border-radius:20px;padding:36px;display:flex;flex-direction:column;min-height:320px}
.nb .ic3{width:56px;height:56px;border-radius:16px;background:var(--deep);color:var(--green);display:grid;place-items:center;margin-bottom:28px}
.nb .ic3 svg{width:26px;height:26px}
.nb .acard h3{font-size:24px;font-weight:800;margin:12px 0 12px;line-height:1.25}
.nb .acard p{color:var(--mute);font-size:16px;margin-bottom:28px}
.nb .acard .link{margin-top:auto;align-self:flex-start}
.nb .upc{display:grid;grid-template-columns:180px 1fr 140px;gap:32px;align-items:center;padding:28px 0;border-top:1px solid var(--grey)}
.nb .upc:last-child{border-bottom:1px solid var(--grey)}
.nb .upc h4{font-size:20px;font-weight:800;margin:0 0 6px}
.nb .upc p{color:var(--mute);font-size:15px}
.nb .upc .soon{margin:0;justify-self:end}
.nb .contact{position:relative;background:var(--deep);color:#fff;overflow:hidden}
.nb .contact::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 600px at 100% 0%,rgba(57,217,121,.10),transparent 60%)}
.nb .contact > .wrap{position:relative;display:grid;grid-template-columns:5fr 6fr;gap:80px;padding-top:184px;padding-bottom:120px;align-items:start}
.nb .contact .lead{color:rgba(255,255,255,.84);margin-top:28px}
.nb .csteps{margin-top:48px;display:flex;flex-direction:column}
.nb .cst{display:flex;gap:22px;padding:24px 0;border-top:1px solid rgba(255,255,255,.14)}
.nb .cst .n{font-size:14px;font-weight:700;color:var(--green);width:28px;flex:none;padding-top:2px}
.nb .cst h4{font-size:15px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin:0 0 6px}
.nb .cst p{font-size:15px;color:rgba(255,255,255,.72)}
.nb .mail{display:flex;align-items:center;gap:16px;margin-top:28px;font-size:18px;font-weight:700;color:#fff}
.nb .mail i{width:48px;height:48px;border-radius:50%;background:var(--green);color:var(--deep);display:grid;place-items:center}
.nb .mail svg{width:20px;height:20px}
.nb .form{background:#fff;color:var(--char);border-radius:24px;padding:44px;box-shadow:0 30px 80px rgba(0,16,10,.35)}
.nb .form .h3{font-size:26px;font-weight:800}
.nb .form .sub{color:var(--mute);font-size:15px;margin:10px 0 30px}
.nb .fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.nb .fld label{display:block;font-size:13px;font-weight:700;margin-bottom:8px}
.nb .fld label em{color:var(--ink);font-style:normal}
.nb .in{height:52px;border:1px solid #DAD9D2;border-radius:12px;background:var(--off);padding:0 16px;display:flex;align-items:center;justify-content:space-between;font-size:15px;color:#8B908D}
.nb .in svg{width:16px;height:16px;color:var(--char)}
.nb .fld.full{grid-column:1/-1}
.nb .ta{height:128px;align-items:flex-start;padding-top:15px}
.nb .svc{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-radius:12px;border:1px dashed #CFCEC7;font-size:14px;font-weight:600;color:var(--char)}
.nb .svc svg{width:16px;height:16px}
.nb .consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--mute);line-height:1.5}
.nb .box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--deep);flex:none;margin-top:1px}
.nb .form .btn{margin-top:26px;width:100%;justify-content:center}
.nb .form .fine{font-size:13px;color:var(--mute);text-align:center;margin-top:14px}
.nb .needs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:56px}
.nb .need{display:flex;gap:16px;align-items:center;padding:26px 28px;border-radius:18px;background:#fff;border:1px solid var(--grey);font-size:16px;font-weight:700}
.nb .need i{width:36px;height:36px;border-radius:50%;background:var(--green);color:var(--deep);display:grid;place-items:center;flex:none}
.nb .need svg{width:16px;height:16px}
.nb .stat b,.nb .mets b{direction:ltr;unicode-bidi:isolate}
.nb .ihero-grid{display:grid;grid-template-columns:7fr 5fr;gap:96px;align-items:end}
.nb .pil{display:grid;grid-template-columns:40px 1fr auto;gap:16px;align-items:baseline;padding:18px 0;border-top:1px solid rgba(255,255,255,.16)}
.nb .pil:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.nb .pil .n{color:var(--green);font-weight:700;font-size:14px}
.nb .pil b{font-size:20px;font-weight:800}
.nb .pil span:last-child{font-size:14px;color:rgba(255,255,255,.66)}
@media (max-width:700px){
.nb .wrap{padding:0 20px}
.nb .sec{padding:80px 0}
.nb .h1{font-size:40px;line-height:1.06}
.nb .mets b{font-size:22px}
.nb .h2{font-size:36px;line-height:1.1}
.nb .h3{font-size:24px}
.nb .lead{font-size:17px}
.nb .nav,.nb .hdr-r .btn,.nb .lang{display:none}
.nb .burger{display:grid}
.nb .hdr .wrap{height:76px}
.nb .logo{width:118px}
.nb .hero{min-height:0}
.nb .hero-in{padding-top:128px;padding-bottom:0}
.nb .hero .lead{margin:24px 0 32px}
.nb .btns{flex-direction:column;align-items:stretch}
.nb .btn{justify-content:center}
.nb .proof{margin-top:32px}
.nb .hero-media{position:relative;width:auto;height:320px;clip-path:none;margin-top:48px}
.nb .hero-media::after{background:linear-gradient(180deg,var(--deep) 0%,rgba(0,59,37,0) 45%)}
.nb .hero-aside{display:none}
.nb .cities{right:auto;left:20px;bottom:20px;gap:8px;padding:10px 14px;font-size:10px;letter-spacing:.12em}
.nb .trust{padding:36px 0}
.nb .trust .wrap{flex-direction:column;align-items:flex-start;gap:24px}
.nb .logos{flex-wrap:wrap;gap:28px 40px;justify-content:flex-start}
.nb .trust-l,.nb .trust-n{width:auto}
.nb .sec-head{flex-direction:column;align-items:flex-start;gap:24px;margin-bottom:40px}
.nb .cards3{grid-template-columns:1fr;gap:20px}
.nb .card{min-height:0;padding:32px 26px 28px}
.nb .stats{grid-template-columns:1fr 1fr;row-gap:32px;padding:32px 0}
.nb .stat{padding:0 12px}
.nb .stat:nth-child(3){border-left:0}
.nb .stat b{font-size:38px}
.nb .stat span{font-size:13px}
.nb .pcards{display:flex;overflow-x:auto;gap:16px;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px 8px}
.nb .pcard{flex:0 0 84%;scroll-snap-align:start}
.nb .car-btn{display:none}
.nb .method .wrap{grid-template-columns:1fr;gap:48px}
.nb .steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px}
.nb .steps::before{display:none}
.nb .step .ic{width:64px;height:64px}
.nb .exp .wrap{grid-template-columns:1fr;gap:24px}
.nb .ctas{grid-template-columns:1fr}
.nb .ctas-im{min-height:260px}
.nb .ctas-im .t{left:20px;font-size:19px}
.nb .ctas-tx{padding:48px 20px}
.nb .ctas-tx .h3{font-size:28px}
.nb .ftr-top{flex-direction:column;align-items:flex-start}
.nb .ftr-nav{flex-wrap:wrap;gap:14px 24px}
.nb .ftr-bot{flex-direction:column;gap:8px}
}


/* ---- live-only rules (already scoped) ---- */
.nb-sec.e-con,.nb-sec.e-con>.e-con-inner{--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;--gap:0px;--row-gap:0px;--column-gap:0px;--content-width:100%;padding:0!important;gap:0!important;max-width:none!important;width:100%!important}
.nb-sec .elementor-widget,.nb-sec .elementor-widget-html{width:100%!important;max-width:100%!important;margin:0!important;--kit-widget-spacing:0px}
.nb-sec .elementor-widget-container{padding:0!important;margin:0!important}
.nb{font-family:'Manrope','Noto Sans',system-ui,sans-serif;color:var(--char);font-size:17px;line-height:1.6}
.nb h1,.nb h2,.nb h3,.nb h4{font-family:inherit;color:inherit;text-transform:none}
.nb .hdr-logo{display:block;line-height:0}
.nb .logo{width:150px;height:auto}
.nb .burger{background:none;cursor:pointer;padding:0}
.nb .nav-m{display:none}
.nb .mail{text-decoration:none}
.nb-solid .nb .hdr{position:relative;background:var(--deep)}
.nb details.faq-q summary{list-style:none;cursor:pointer}
.nb details.faq-q summary::-webkit-details-marker{display:none}
.nb .faq-q .i-minus{display:none}
.nb .faq-q[open] .i-minus{display:block}
.nb .faq-q[open] .i-plus{display:none}
.nb .faq-q[open] .pm{background:var(--deep);color:#fff}
.nb .ocards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.nb .ocards.two .pcard .im{aspect-ratio:16/9}
.nb .pcard .pill{align-self:flex-start;margin-bottom:16px}
.nb .pcard .soon{margin-top:auto}
.nb .pcards .pcard .sc{margin-bottom:0}
.nb .team.noimg{grid-template-columns:6fr 5fr;align-items:start}
.nb .ihero .h1.h1-art{font-size:50px;line-height:1.12}
[dir=rtl] .nb .ihero .h1.h1-art{line-height:1.45}
.nb .h1.h1-contact{font-size:72px;line-height:1.04}
.nb .byline{margin-top:26px;font-size:14px;color:rgba(255,255,255,.66)}
.nb .feat-im{display:block}
[dir=rtl] .nb .ch:not(:last-child)::after{right:auto;left:-17px;transform:translateY(-50%) rotate(-135deg)}
[dir=rtl] .nb .st:not(:last-child)::after{right:auto;left:-21px}
.nb .form .wpforms-container{--wpforms-field-size-input-height:52px;--wpforms-field-border-radius:12px;--wpforms-field-background-color:#F5F4EF;--wpforms-field-border-color:#DAD9D2;--wpforms-field-text-color:#18201C;--wpforms-label-color:#18201C;--wpforms-label-sublabel-color:#5C635F;--wpforms-label-error-color:#B3261E;--wpforms-button-background-color:#39D979;--wpforms-button-text-color:#003B25;--wpforms-button-border-radius:999px;--wpforms-button-size-height:56px;--wpforms-button-size-font-size:15px;--wpforms-field-size-font-size:15px;--wpforms-label-size-font-size:13px;margin:0!important}
.nb .form .wpforms-field-label{font-weight:700!important}
.nb .form .wpforms-submit-container{margin-top:10px!important}
.nb .form button.wpforms-submit{width:100%!important;font-weight:700!important;font-family:inherit!important}
.nb .form input,.nb .form select,.nb .form textarea{font-family:inherit!important}
.nb .form .fine{margin-top:16px}
@media (max-width:1100px){
 .nb .wrap{padding:0 40px}
 .nb .h1{font-size:64px} .nb .ihero .h1{font-size:56px} .nb .h1.h1-contact{font-size:56px} .nb .h2{font-size:44px}
 .nb .hero-aside{display:none}
 .nb .method .wrap,.nb .exp .wrap,.nb .split,.nb .team,.nb .team.noimg,.nb .faqg,.nb .contact>.wrap,.nb .ihero-grid{grid-template-columns:1fr;gap:48px}
 .nb .kpis,.nb .aud,.nb .needs,.nb .ocards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .nb .chain,.nb .story{grid-template-columns:repeat(3,minmax(0,1fr))}
 .nb .ch::after,.nb .st::after{display:none}
 .nb .feat{grid-template-columns:1fr} .nb .feat-im{min-height:320px}
 .nb .trust .wrap{flex-wrap:wrap;gap:28px}
 .nb .ctas-im .t{left:40px} [dir=rtl] .nb .ctas-im .t{right:40px;left:auto} .nb .ctas-tx{padding:56px 40px}
 .nb .cities{right:40px} [dir=rtl] .nb .cities{left:40px;right:auto}
}
@media (max-width:700px){
 .nb .wrap{padding:0 20px}
 .nb .h1,.nb .ihero .h1,.nb .h1.h1-contact{font-size:40px;line-height:1.08}
 .nb .ihero .h1.h1-art{font-size:32px}
 .nb .h2,.nb .h2[style]{font-size:32px!important;line-height:1.14!important}
 [dir=rtl] .nb .hero-media{clip-path:none;left:auto}
 [dir=rtl] .nb .cities{left:auto;right:20px}
 [dir=rtl] .nb .ctas-im .t{right:20px}
 .nb .cities{left:20px;right:auto}
 .nb .ihero>.wrap{padding-top:124px;padding-bottom:64px}
 .nb .ihero .hero-media{position:relative;width:auto;height:260px;clip-path:none}
 .nb .contact>.wrap{padding-top:124px;padding-bottom:72px}
 .nb .form{padding:28px 20px}
 .nb .sec-head .muted{max-width:none!important}
 .nb .kpis,.nb .aud,.nb .needs,.nb .ocards,.nb .ocards.two,.nb .chain,.nb .story,.nb .grid2,.nb .acards,.nb .sits,.nb .pcards{grid-template-columns:1fr}
 .nb .pcards{display:grid;overflow:visible;margin:0;padding:0}
 .nb .upc{grid-template-columns:1fr;gap:8px}
 .nb .upc .soon{justify-self:start}
 .nb .banner{flex-direction:column;align-items:flex-start}
 .nb .tier{min-height:0}
 .nb .dd{padding:26px}
 .nb .feat-bd{padding:32px 24px}
 .nb .pil{grid-template-columns:36px 1fr}
 .nb .pil span:last-child{grid-column:2}
 .nb .faq-q .q-h{font-size:17px}
}

/* ---- Codex refinements (redesign/refinements.css, 2026-09-11), merged and corrected ----

   Changes against the Codex file:

   - .nb .btn no longer forces charcoal text: it made white-on-deep-green buttons unreadable (Nos offres, Ressources).

   - the fixed header stays in the flow on .nb-solid pages (privacy, 404), where nothing reserves its height.

   - one mobile-menu breakpoint (900px); the older 1024px drawer rules were removed from the live CSS. */

:root{--nbi-deep-green:#003B25;--nbi-green:#39D979;--nbi-white:#FFFFFF;--nbi-off-white:#F5F4EF;--nbi-charcoal:#18201C;--nbi-soft-grey:#E7E7E2}

.nb .wrap{max-width:1320px;padding-inline:32px}

.nb .h1,.nb .h2,.nb .card h3,.nb .exp-item h3{font-weight:700}

.nb .h2{font-size:clamp(2.5rem,4.5vw,4.5rem);max-width:1000px}

.nb .btn{font-weight:600;padding:16px 24px;height:auto;min-height:56px}

.nb .btn-green,.nb .btn-green:hover{color:var(--nbi-charcoal)}

.nb .btn-ghost,.nb .btn-line{color:var(--nbi-white)}

.nb .btn:focus-visible,.nb a:focus-visible,.nb button:focus-visible{outline:3px solid var(--nbi-green);outline-offset:5px}

.nb .hdr{position:fixed;background:rgba(0,59,37,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:50}

.nb-solid .nb .hdr{position:relative;background:var(--nbi-deep-green)}

.nb .hdr .wrap{height:96px;gap:24px}

.nb .hdr .logo{width:128px}

.nb .nav{gap:22px;font-size:14px;white-space:nowrap}

.nb .hdr-r{gap:18px}

.nb .hdr .btn{font-size:13px;padding:12px 18px;min-height:44px}

.nb .hdr .btn-line{background:var(--nbi-green);color:var(--nbi-charcoal)}

.nb .hdr .btn-line:hover{background:#4FE38B;color:var(--nbi-charcoal)}

.nb .nb-new-hero{min-height:90svh;display:flex;align-items:center;isolation:isolate}

.nb .nb-new-hero .wrap{width:100%;z-index:2}

.nb .nb-new-hero .hero-in{padding:160px 0 80px;max-width:100%;position:relative}

.nb .nb-new-hero .h1{font-size:clamp(3.8rem,6.5vw,6.5rem);line-height:1.07;letter-spacing:-.04em}

.nb .nb-new-hero .eyebrow{color:var(--nbi-green)}

.nb .nb-new-hero .lead{max-width:620px;margin:28px 0 32px;color:rgba(255,255,255,.86)}

.nb .nb-new-hero .hero-media{position:absolute;inset:0;width:100%;height:100%;margin:0;clip-path:none;z-index:0}

.nb .nb-new-hero .hero-media img{object-position:80% center;transform:none}

.nb .nb-new-hero .hero-media::after{background:linear-gradient(90deg,rgba(0,59,37,.98) 0%,rgba(0,59,37,.94) 35%,rgba(0,59,37,.4) 70%,rgba(0,59,37,.12) 100%)}

.nb .trust{background:var(--nbi-off-white);border-bottom:1px solid var(--nbi-soft-grey)}

.nb .trust .wrap{gap:32px}

.nb .trust-l{text-transform:none;letter-spacing:0;font-size:17px;color:var(--nbi-charcoal);width:235px}

.nb .trust .logos{gap:28px}

.nb .trust .logos img{max-width:130px;object-fit:contain}

.nb .nb-situations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:56px}

.nb .nb-situations>a{color:var(--nbi-charcoal);border-top:1px solid var(--nbi-soft-grey);padding:28px 0;position:relative;transition:border-color .2s}

.nb .nb-situations>a:hover{border-top-color:var(--nbi-deep-green)}

.nb .nb-situations .num{color:var(--nbi-deep-green);font-size:14px;font-weight:700}

.nb .nb-situations h3{font-size:28px;font-weight:600;line-height:1.2;padding-inline-end:35px;margin:22px 0}

.nb .nb-situations svg{width:24px;height:24px;position:absolute;inset-inline-end:0;bottom:44px}

.nb .nb-progression{margin:30px 0 48px;display:flex;gap:20px;flex-wrap:wrap;font-size:14px;font-weight:600}

.nb .nb-progression span{color:var(--nbi-deep-green)}

.nb .nb-offers{grid-template-columns:1fr 1fr 1.12fr;align-items:stretch}

.nb .nb-offers .card{padding:36px 28px;border-radius:22px}

.nb .nb-offers .card h3{font-size:28px;line-height:1.15}

.nb .nb-offers .link{font-size:14px;white-space:normal;min-height:44px}

.nb .nb-offers .link svg{flex:none}

.nb .nb-statement .h2{max-width:1150px;line-height:1.15}

.nb .nb-pipeline{padding:0;list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin:64px 0 56px}

.nb .nb-pipeline li{display:flex;align-items:center;gap:14px;position:relative}

.nb .nb-pipeline svg{width:28px;height:28px;flex:none;color:var(--nbi-green)}

.nb .nb-pipeline li:not(:last-child)::after{content:'→';position:absolute;inset-inline-end:0;color:var(--nbi-green)}

.nb .nb-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:28px;border-top:1px solid rgba(255,255,255,.25);font-size:15px}

.nb .pcard h3{font-size:24px;font-weight:700;margin:0;line-height:1.2}

.nb .pcard .sc{font-size:16px;line-height:1.6}

.nb .pcard .link{align-self:flex-start;margin-top:auto;white-space:normal;min-height:44px}

.nb .pcard[id]{scroll-margin-top:120px}

.nb .nb-method .lead{max-width:660px;margin-top:28px}

.nb .nb-method .steps{margin-top:64px}

.nb .nb-method .step span{font-size:16px}

.nb .nb-levers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:64px}

.nb .nb-levers article{border-top:1px solid var(--nbi-soft-grey);padding-top:28px}

.nb .nb-levers svg{width:32px;height:32px;color:var(--nbi-charcoal)}

.nb .nb-levers h3{font-size:28px;line-height:1.2;font-weight:600;margin:24px 0 16px}

.nb .nb-levers p{font-size:17px;line-height:1.6}

.nb .nb-levers ul{padding-inline-start:18px;font-size:15px;line-height:1.7;margin:24px 0 0}

.nb .nb-editorial{max-width:1000px;font-size:clamp(2rem,3.6vw,3.5rem);line-height:1.2;letter-spacing:-.02em;margin-top:100px;padding-top:56px;border-top:1px solid var(--nbi-soft-grey);color:var(--nbi-deep-green);font-weight:700}

.nb .exp-item h3{font-size:26px;line-height:1.25;margin:2px 0 12px}

.nb .nb-form-section{background:var(--nbi-off-white)}

.nb .nb-form-section .lead{margin-top:24px;max-width:650px}

.nb .nb-home-form{max-width:880px;margin-top:48px;background:var(--nbi-white);border:1px solid var(--nbi-soft-grey);border-radius:22px;padding:40px}

.nb .nb-final{background:linear-gradient(90deg,rgba(0,59,37,.98),rgba(0,59,37,.88) 40%,rgba(0,59,37,.16)),url('https://nbi3lik.com/wp-content/uploads/2026/09/nb-terrasse-coucher-soleil.webp') center/cover}

.nb .nb-final .h2{margin:18px 0 36px}

.nb .nb-final-copy{max-width:780px}

.nb .ftr-nav{flex-wrap:wrap;gap:24px}

.nb .ftr .logo{width:150px}

.nb .ftr-lang{font-weight:700}

.nb section[id]{scroll-margin-top:120px}

.nb .nb-home-form .wpforms-container{--wpforms-field-size-input-height:52px;--wpforms-field-border-radius:12px;--wpforms-field-background-color:#F5F4EF;--wpforms-field-border-color:#DAD9D2;--wpforms-field-text-color:#18201C;--wpforms-label-color:#18201C;--wpforms-button-background-color:#39D979;--wpforms-button-text-color:#18201C;--wpforms-button-border-radius:999px;--wpforms-button-size-height:56px;--wpforms-button-size-font-size:15px;margin:0!important}

.nb .nb-home-form .wpforms-field-label{font-size:18px!important;font-weight:600!important}

.nb .nb-home-form .wpforms-field{padding-block:14px!important}

.nb .nb-home-form button.wpforms-submit{width:100%!important;font-weight:700!important;font-family:inherit!important}

.nb .nb-home-form input,.nb .nb-home-form select,.nb .nb-home-form textarea{font-family:inherit!important}

.nb .nb-home-form legend{letter-spacing:0!important;text-transform:none!important}

[dir=rtl] .nb .nb-new-hero .h1{line-height:1.24;letter-spacing:0}

[dir=rtl] .nb .nb-new-hero .hero-media{inset:0;clip-path:none}

[dir=rtl] .nb .nb-new-hero .hero-media img{object-position:20% center}

[dir=rtl] .nb .nb-new-hero .hero-media::after{background:linear-gradient(270deg,rgba(0,59,37,.98),rgba(0,59,37,.94) 35%,rgba(0,59,37,.4) 70%,rgba(0,59,37,.12))}

[dir=rtl] .nb .nb-pipeline li:not(:last-child)::after{content:'←'}

[dir=rtl] .nb .nb-final{background-image:linear-gradient(270deg,rgba(0,59,37,.98),rgba(0,59,37,.88) 40%,rgba(0,59,37,.16)),url('https://nbi3lik.com/wp-content/uploads/2026/09/nb-terrasse-coucher-soleil.webp')}

.admin-bar .nb .hdr{top:32px}

@media(max-width:1100px){

 .nb .wrap{padding-inline:24px}

 .nb .hdr .nav{gap:14px;font-size:13px}.nb .hdr .logo{width:110px}.nb .hdr-r{gap:10px}.nb .hdr .wrap{gap:18px}

 .nb .nb-levers{grid-template-columns:repeat(2,minmax(0,1fr))}

 .nb .nb-offers .card{padding:28px 22px}.nb .nb-offers .card h3{font-size:25px}

 .nb .trust-l,.nb .trust-n{width:100%}

 .nb .nb-pipeline{gap:16px}.nb .nb-pipeline li{flex-direction:column;align-items:flex-start}

 .nb .sec{padding-block:96px}

}

@media(max-width:900px){

 .nb .hdr .nav,.nb .lang{display:none}.nb .burger{display:grid}

 .nb-menu-open{overflow:hidden}

 .nb-menu-open .nb .hdr{position:fixed;background:var(--nbi-deep-green);-webkit-backdrop-filter:none;backdrop-filter:none} /* a backdrop-filter makes the header the containing block of the fixed menu */

 .nb-menu-open .nb .hdr .nav{display:flex;position:fixed;top:96px;left:0;right:0;bottom:0;overflow:auto;padding:16px 24px 32px;background:var(--nbi-deep-green);flex-direction:column;font-size:18px;gap:0}

 .admin-bar.nb-menu-open .nb .hdr .nav{top:128px}

 .nb-menu-open .nb .nav a{padding:14px 0;min-height:44px;border-bottom:1px solid rgba(255,255,255,.12);box-shadow:none}

 .nb-menu-open .nb .nav a.on{color:var(--nbi-green)}

 .nb-menu-open .nb .nav-m{display:block}

 .nb-menu-open .nb .nav-cta{margin-top:24px;background:var(--nbi-green);color:var(--nbi-charcoal)!important;border-radius:999px;text-align:center;padding:16px!important;border:0!important;font-weight:700}

 .nb .nb-offers{grid-template-columns:1fr 1fr}.nb .nb-offers .card.dk{grid-column:1/-1;transform:none}

 .nb .nb-situations h3{font-size:24px}

 .nb .nb-new-hero .h1{font-size:clamp(3rem,7.5vw,4.8rem)}

 .nb .exp .wrap{gap:40px}

 .nb .nb-kpis{grid-template-columns:1fr 1fr}

 .nb .ftr-top{align-items:flex-start}.nb .ftr-nav{gap:18px}

}

@media(max-width:782px){.admin-bar .nb .hdr{top:46px}.admin-bar.nb-menu-open .nb .hdr .nav{top:142px}}

@media(max-width:600px){

 .nb .wrap{padding-inline:20px}

 .nb .sec{padding-block:72px}

 .nb .hdr .wrap{height:80px}.nb .hdr .logo{width:100px}

 .nb .hdr .hdr-r>.btn{display:none}

 .nb-menu-open .nb .hdr .nav{top:80px}

 .nb .nb-new-hero{min-height:90svh;align-items:flex-start}

 .nb .nb-new-hero .hero-in{padding:132px 0 72px}

 .nb .nb-new-hero .h1{font-size:clamp(2rem,8.2vw,3.15rem);letter-spacing:-.035em;line-height:1.13}

 .nb .nb-new-hero .hero-media{display:block;width:100%;height:100%;opacity:1;margin:0}

 .nb .nb-new-hero .hero-media img{object-position:70% center}

 .nb .nb-new-hero .hero-media::after{background:linear-gradient(90deg,rgba(0,59,37,.97),rgba(0,59,37,.75)),linear-gradient(0deg,rgba(0,59,37,.9),transparent)}

 .nb .nb-new-hero .lead{font-size:17px;margin:24px 0 30px}

 .nb .nb-new-hero .eyebrow{font-size:11px}

 .nb .btns{gap:12px;align-items:stretch}

 .nb .btns .btn{justify-content:center;white-space:normal;width:100%;font-size:14px}

 .nb .h2{font-size:clamp(2rem,8vw,2.7rem);line-height:1.13}

 .nb .trust{padding:36px 0}

 .nb .trust .logos{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:100%;justify-items:center}

 .nb .nb-situations{grid-template-columns:1fr;gap:0;margin-top:32px}

 .nb .nb-offers{grid-template-columns:1fr}.nb .nb-offers .card.dk{grid-column:auto}

 .nb .nb-offers .card{min-height:0;padding:32px 26px}

 .nb .nb-pipeline{grid-template-columns:1fr;margin-block:40px;gap:24px}

 .nb .nb-pipeline li{flex-direction:row;align-items:center;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.2)}

 .nb .nb-pipeline li:not(:last-child)::after{content:'↓'}

 .nb .nb-kpis{gap:20px;font-size:14px}

 .nb .nb-method .steps{grid-template-columns:1fr;gap:24px}

 .nb .nb-method .steps::before{left:37px;right:auto;top:0;bottom:0;height:auto;width:1px;background:rgba(255,255,255,.3)}

 .nb .nb-method .step{display:grid;grid-template-columns:76px 26px 1fr;align-items:center;text-align:start;gap:20px;padding:0}

 .nb .nb-method .ic{margin:0}.nb .nb-method .step span{margin:0}

 .nb .nb-levers{grid-template-columns:1fr;gap:40px;margin-top:40px}

 .nb .nb-editorial{margin-top:64px;padding-top:40px}

 .nb .nb-home-form{padding:24px 18px}

 .nb .wpforms-container .wpforms-field.wpforms-one-half{width:100%!important;margin-inline:0!important;float:none!important} /* every form: one field per row on phones (the contact form kept two ~138px inputs) */

 .nb .nb-home-form .nb-pick li{width:auto!important}

 .nb .ftr-top,.nb .ftr-bot{flex-direction:column}

 .nb .ftr-nav{display:grid;grid-template-columns:1fr 1fr;width:100%}.nb .ftr-nav a{min-height:44px}

 .nb .nb-final .btn{white-space:normal}

 .nb section[id]{scroll-margin-top:100px}

 [dir=rtl] .nb .nb-method .steps::before{left:auto;right:37px}

 [dir=rtl] .nb .nb-pipeline li:not(:last-child)::after{content:'↓'}

 [dir=rtl] .nb .nb-new-hero .hero-media::after{background:linear-gradient(270deg,rgba(0,59,37,.97),rgba(0,59,37,.75))}

}

@media(prefers-reduced-motion:reduce){.nb *,.nb *::before,.nb *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.nb .pcard:hover img{transform:none}}

/* Astra "back to top" button (theme default: 32px blue #046BD2 square) in brand colours, 44px touch target.

   Astra shows/hides it with an inline display style, so display is left alone here. */

#ast-scroll-top.ast-scroll-top-icon{width:44px;height:44px;line-height:44px;font-size:15px;text-align:center;border-radius:999px;background:var(--nbi-deep-green,#003B25)!important;color:var(--nbi-green,#39D979)!important;border:1px solid rgba(57,217,121,.4);box-shadow:0 8px 24px rgba(0,28,17,.25);cursor:pointer;transition:background-color .2s,color .2s}

#ast-scroll-top.ast-scroll-top-icon:hover{background:var(--nbi-green,#39D979)!important;color:var(--nbi-deep-green,#003B25)!important}

#ast-scroll-top.ast-scroll-top-icon:focus-visible{outline:3px solid var(--nbi-green,#39D979);outline-offset:4px}

#ast-scroll-top .ast-icon svg,#ast-scroll-top .ast-icon svg path{fill:currentColor}

@media(max-width:600px){#ast-scroll-top.ast-scroll-top-icon{right:16px;bottom:16px}[dir=rtl] #ast-scroll-top.ast-scroll-top-icon{right:auto;left:16px}}

/* Homepage form: « De quoi avez-vous besoin ? » inherited the contact form's small uppercase group-title style

   (Customizer CSS on .nb-pick legends, meant for the sub-groups inside its services block). On the homepage it is

   a question like every other label, so it gets the same size, weight, colour and sentence case. */

.nb .nb-home-form .nb-pick legend.wpforms-field-label{font-size:18px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;color:var(--nbi-charcoal)!important;margin-bottom:12px!important}

/* Text links that sit inside running text (article bodies, the form privacy note) looked like the words around

   them. Standalone links are green pill buttons (.link); inline ones get the standard cue: brand green, underlined. */

body.nb2 .elementor-widget-text-editor a{color:#13784A;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}

body.nb2 .elementor-widget-text-editor a:hover{color:#003B25}

.nb .wpforms-field-description a{color:#13784A;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}

.nb .wpforms-field-description a:hover{color:#003B25}



/* Homepage rhythm (user pick, 2026-09-11): white « Où en est votre projet ? », soft green « Nos offres » so the

   white offer cards and the dark premium card stand out. Last situation row's padding trimmed from the section end. */

.nb #situations{background:#fff}

.nb #situations .nb-situations{margin-bottom:-28px}

.nb #offres{background:#E8F0EA}

.nb #offres .card:not(.dk){border-color:#D3E2D8}



/* Informative icons (2026-09-11): one style for every list of distinct ideas - situations, offers, KPIs, chain,

   audience, case-study grid, upcoming articles. Soft-green tile on light grounds, translucent green on dark ones. */

.nb .ico{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:#E8F0EA;color:var(--nbi-deep-green);margin-bottom:18px;font-style:normal;flex:none}

.nb .ico svg{width:24px;height:24px;position:static}

.nb .dark .ico,.nb .card.dk .ico,.nb .kpi .ico{background:rgba(57,217,121,.14);color:var(--nbi-green)}

.nb .kpi.q .ico{background:rgba(0,59,37,.12);color:var(--nbi-deep-green)}

.nb #offres .card:not(.dk) .ico{background:#E8F0EA}

.nb .upc-m{display:flex;align-items:center;gap:14px}

.nb .upc-m .ico{margin:0}

.nb .nb-situations .ico{margin-bottom:16px}

[dir=rtl] .nb .st:last-child .ico svg{transform:scaleX(-1)}  /* rising trend reads right-to-left */

@media (max-width:600px){.nb .ico{width:38px;height:38px;border-radius:10px;margin-bottom:14px}.nb .ico svg{width:20px;height:20px}}



/* Tweak 01 (2026-09-11): on phones a "Parlons de votre projet" pill is fixed to the bottom once the hero is passed.

   nbi3lik-brand2.php adds the markup (not on the contact pages) and toggles body.nb-cta-on; it hides over forms. */

.nb .nb-sticky-cta{display:none}

@media (max-width:768px){

 .nb .nb-sticky-cta{display:flex;align-items:center;justify-content:center;gap:10px;position:fixed;z-index:60;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));min-height:52px;padding:0 24px;border-radius:999px;background:var(--nbi-green);color:var(--nbi-charcoal);font-weight:700;font-size:15px;line-height:1.2;box-shadow:0 10px 28px rgba(0,59,37,.28);transform:translateY(calc(100% + 40px));visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}

 .nb .nb-sticky-cta:hover{color:var(--nbi-charcoal)}

 .nb .nb-sticky-cta svg{width:18px;height:18px;flex:none}

 body.nb-cta-on .nb .nb-sticky-cta{transform:none;visibility:visible;transition:transform .25s ease}

 body.nb-menu-open .nb .nb-sticky-cta{visibility:hidden}

 body.nb-cta-on #ast-scroll-top{bottom:calc(84px + env(safe-area-inset-bottom))!important}

}

[dir=rtl] .nb .nb-sticky-cta svg{transform:scaleX(-1)}

@media (prefers-reduced-motion:reduce){.nb .nb-sticky-cta{transition:none!important}}



/* Tweak 02 (2026-09-11): homepage offer buttons deep-link to their card on Nos offres (#leads, #offre-360,

   #growth-engine). The card clears the fixed header and flashes a green outline so the eye finds it. */

.nb .tier{scroll-margin-top:120px}

.nb .tier:target{outline:3px solid transparent;outline-offset:6px;animation:nbTarget 2.4s ease-out both}

@keyframes nbTarget{0%,55%{outline-color:#39D979}100%{outline-color:transparent}}

@media (prefers-reduced-motion:reduce){.nb .tier:target{animation:none;outline-color:#39D979}}

@media (max-width:768px){.nb .tier{scroll-margin-top:100px}}



/* Tweak 03 (2026-09-11): the contact form's two folded panels (services, project details), drawn as brand cards

   with a +/- cue instead of the browser's bare disclosure triangle. Markup: nbi3lik-services-collapse.php. */

.nb .wpforms-container details.nbi3lik-services{margin:8px 0 20px!important;padding:0 20px!important;background:#fff;border:1px solid var(--nbi-soft-grey)!important;border-radius:16px!important}

.nb .wpforms-container details.nbi3lik-services[open]{padding-bottom:12px!important}

.nb .wpforms-container details.nbi3lik-services>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 0;margin:0!important;cursor:pointer;font-weight:600;font-size:16px;line-height:1.35;color:var(--nbi-deep-green)}

.nb .wpforms-container details.nbi3lik-services>summary::-webkit-details-marker{display:none}

.nb .wpforms-container details.nbi3lik-services>summary::after{content:"+";flex:none;font-size:24px;font-weight:500;line-height:1;color:#13784A}

.nb .wpforms-container details.nbi3lik-services[open]>summary::after{content:"\2013"}

.nb .wpforms-container details.nbi3lik-services>summary:focus-visible{outline:3px solid var(--nbi-green);outline-offset:4px;border-radius:8px}



/* Tweak 04 (2026-09-11): thumb-size tap targets without moving anything. The consent checkbox grows to 22px next to

   its (already clickable) sentence; the footer's bottom links get a 44px+ hit area, padding cancelled by margin. */

.nb [id$="-field_11-container"] li{display:flex;gap:12px;align-items:flex-start}

.nb [id$="-field_11-container"] input[type=checkbox]{width:22px!important;height:22px!important;flex:none;margin-top:1px}

.nb [id$="-field_11-container"] li label{padding:2px 0 8px}

.nb .ftr-bot a{display:inline-block;padding:13px 2px;margin:-13px -2px}

.nb [id$="-field_11-container"] li label{margin:0!important;padding-inline-start:0!important}



/* Tweak 05 (2026-09-11): a shorter homepage on phones. The hero ends right after its buttons (no 90svh floor), and

   the four levers are <details> that phones fold into an accordion (JS in nbi3lik-brand2.php closes 2-4).

   On desktop the summary is inert, so the four columns look exactly as before. */

.nb .nb-levers summary{list-style:none;display:block}

.nb .nb-levers summary::-webkit-details-marker{display:none}

@media (min-width:769px){.nb .nb-levers summary{pointer-events:none}}

@media (max-width:768px){

 .nb .nb-new-hero{min-height:0!important;padding-bottom:64px!important}

 .nb .nb-levers{gap:0}

 .nb .nb-levers article{padding-top:0}

 .nb .nb-levers summary{display:flex;align-items:center;gap:14px;min-height:72px;cursor:pointer}

 .nb .nb-levers summary svg{width:28px;height:28px;flex:none}

 .nb .nb-levers summary h3{flex:1;margin:0;font-size:22px}

 .nb .nb-levers summary::after{content:"+";flex:none;font-size:26px;line-height:1;color:#13784A}

 .nb .nb-levers details[open] summary::after{content:"\2013"}

 .nb .nb-levers details[open]{padding-bottom:28px}

 .nb .nb-levers details>p{margin-top:4px}

}



/* Production services (2026-09-11): promotional videos and 360° virtual tours, sold on their own or inside

   360 / Growth Engine. Nos offres gets a soft-green section of two cards (#production); the homepage offers

   section ends with a one-line pointer to it. */

.nb .nb-prod-sec{background:#E8F0EA}

.nb .nb-prod{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}

.nb .nb-prod .card{min-height:0;border-color:#D3E2D8}

.nb .nb-prod .card .ul{margin-bottom:32px}

.nb .nb-prod .card-foot{margin-top:auto}

.nb .nb-offers-note{display:flex;align-items:center;gap:16px 20px;margin-top:40px;padding:20px 24px;border-radius:18px;background:#fff;border:1px solid #D3E2D8}

.nb .nb-offers-note .ico{margin:0}

.nb .nb-offers-note p{flex:1;margin:0;font-size:16px;line-height:1.5}

@media (max-width:768px){

 .nb .nb-prod{grid-template-columns:1fr;gap:20px}

 .nb .nb-offers-note{flex-wrap:wrap}

 .nb .nb-offers-note p{flex-basis:calc(100% - 64px)}

}



/* Situation cards (2026-09-11, user request): the three « Où en est votre projet ? » stages are boxes like the project

   cards (white, 1px border, 20px radius), with a soft green-tinted shadow so they read on the white section.

   Hover (mouse devices only) fills them deep green. */

.nb .nb-situations{gap:24px}

.nb .nb-situations>a{background:#fff;border:1px solid var(--nbi-soft-grey);border-radius:20px;padding:28px 28px 32px;box-shadow:0 1px 2px rgba(0,59,37,.04),0 14px 34px -20px rgba(0,59,37,.22);transition:background .35s,border-color .35s,color .35s,box-shadow .35s,transform .35s cubic-bezier(.16,1,.3,1)}

.nb .nb-situations h3{margin:22px 0 0}

.nb .nb-situations svg.arr{inset-inline-end:28px;bottom:34px;transition:transform .35s cubic-bezier(.16,1,.3,1),color .35s}

.nb #situations .nb-situations{margin-bottom:0}

@media (hover:hover){

 .nb .nb-situations>a:hover{background:var(--nbi-deep-green);border-color:var(--nbi-deep-green);color:#fff;transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(0,59,37,.45)}

 .nb .nb-situations>a:hover .num{color:var(--nbi-green)}

 .nb .nb-situations>a:hover .ico{background:rgba(57,217,121,.16);color:var(--nbi-green)}

 .nb .nb-situations>a:hover svg.arr{transform:translateX(6px);color:var(--nbi-green)}

 [dir=rtl] .nb .nb-situations>a:hover svg.arr{transform:translateX(-6px)}

}

.nb .nb-situations>a:focus-visible{outline:3px solid var(--nbi-green);outline-offset:4px}

@media (prefers-reduced-motion:reduce){.nb .nb-situations>a,.nb .nb-situations svg.arr{transition:none}}

@media (max-width:768px){.nb .nb-situations{gap:16px}.nb .nb-situations>a{padding:24px 22px 28px}.nb .nb-situations svg.arr{inset-inline-end:22px;bottom:28px}}

/* Arrow sits in the top corner, level with the icon tile, so it lines up on every card whatever the title length.

   Arabic keeps its mirrored arrow on hover (scaleX(-1) first, then the slide). */

.nb .nb-situations svg.arr{top:38px;bottom:auto}

@media (hover:hover){[dir=rtl] .nb .nb-situations>a:hover svg.arr{transform:scaleX(-1) translateX(6px)}}

@media (max-width:768px){.nb .nb-situations svg.arr{top:34px;bottom:auto}}



/* Trust strip (2026-09-11, user request): client logos in their original colours (the grey filter is gone) and about

   1.5x bigger, each sized to its shape (wide Adrar/Aswar, square Greenview/Gold Bayt) so they weigh the same. The label

   and the note stack in a left column, the logos share the rest of the row in four equal slots. */

.nb .trust{padding:44px 0}

.nb .trust .wrap{display:grid;grid-template-columns:240px minmax(0,1fr);grid-template-areas:"l logos" "n logos";column-gap:56px;row-gap:10px;align-items:center}

.nb .trust-l{grid-area:l;align-self:end;width:auto;margin:0;font-size:18px;font-weight:700;line-height:1.35}

.nb .trust-n{grid-area:n;align-self:start;width:auto;margin:0}

.nb .trust .logos{grid-area:logos;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;justify-items:center;gap:24px}

.nb .trust .logos img{filter:none;opacity:1;mix-blend-mode:normal;width:auto;max-width:100%;object-fit:contain}

.nb .trust .logos img:nth-child(1){height:66px!important}

.nb .trust .logos img:nth-child(2),.nb .trust .logos img:nth-child(3){height:110px!important}

.nb .trust .logos img:nth-child(4){height:78px!important}

@media (max-width:1024px){

 .nb .trust .wrap{grid-template-columns:1fr;grid-template-areas:"l" "logos" "n";row-gap:24px}

 .nb .trust-l,.nb .trust-n{align-self:auto}

}

@media (max-width:600px){

 .nb .trust{padding:36px 0}

 .nb .trust .logos{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}

 .nb .trust .logos img:nth-child(1){height:50px!important}

 .nb .trust .logos img:nth-child(2),.nb .trust .logos img:nth-child(3){height:88px!important}

 .nb .trust .logos img:nth-child(4){height:60px!important}

}



/* Lovable pass, deploy 1 (2026-09-11): the parts of the Lovable mock-up that read better than ours.

   Situation cards get a one-line description; offer lists use check marks and a full-width button; the four levers

   and the expertise list become cards with icon tiles (desktop); content headings drop to the smaller tier. */

.nb .nb-situations .sit-d{margin:10px 0 0;font-size:15px;line-height:1.5;color:#5c6660;transition:color .35s}

@media (hover:hover){.nb .nb-situations>a:hover .sit-d{color:rgba(255,255,255,.78)}}

.nb .ul li::before{width:18px;height:18px;border-radius:50%;margin-top:3px;background:#E8F0EA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003B25' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}

.nb .card.dk .ul li::before{background:rgba(57,217,121,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2339D979' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}

.nb .nb-offers .card .num{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}

.nb .nb-offers .card-foot,.nb .nb-prod .card-foot{padding-top:28px}

.nb .nb-offers .card-foot .link,.nb .nb-prod .card-foot .link{width:100%;justify-content:center}

@media (min-width:769px){

 .nb .nb-levers{gap:20px}

 .nb .nb-levers article{background:#fff;border:1px solid var(--nbi-soft-grey);border-radius:20px;padding:28px 26px 30px;box-shadow:0 1px 2px rgba(0,59,37,.04),0 14px 34px -20px rgba(0,59,37,.18)}

 .nb .nb-levers summary svg{width:48px;height:48px;padding:12px;box-sizing:border-box;border-radius:13px;background:#E8F0EA;color:var(--nbi-deep-green)}

 .nb .nb-levers h3{font-size:22px;margin:20px 0 10px}

 .nb .nb-levers p{font-size:16px}

 .nb section:not(#opportunites):not(#parlons-resultats):not(.ctas):not(#ctas) .h2{font-size:clamp(2.25rem,3.3vw,3.2rem);letter-spacing:-.03em;line-height:1.08}

}

.nb .exp-list{display:grid;gap:14px}

.nb .exp-item,.nb .exp-item:last-child{background:#fff;border:1px solid var(--nbi-soft-grey);border-radius:20px;padding:22px 24px;gap:18px;align-items:flex-start;box-shadow:0 1px 2px rgba(0,59,37,.04),0 14px 34px -20px rgba(0,59,37,.18)}

.nb .ic2{width:48px;height:48px;border-radius:13px;border:0;background:#E8F0EA;color:var(--nbi-deep-green)}

.nb .exp-item h3{font-size:20px;line-height:1.3;margin:2px 0 6px}

.nb .exp-item p{font-size:15px}



/* Lovable pass, deploy 2 (2026-09-11): homepage form in two columns (intro + the Contact page's three next steps on the

   left, form on the right) and « Quel est votre projet ? » as pill choices (JS in nbi3lik-brand2.php 2.2.2). */

@media (min-width:1025px){

 .nb #projet .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}

 .nb #projet .nb-form-intro{position:sticky;top:120px}

 .nb #projet .nb-home-form{max-width:none;margin-top:0}

}

.nb .nb-next{list-style:none;margin:40px 0 0;padding:0}

.nb .nb-next li{display:grid;grid-template-columns:40px 1fr;gap:12px;padding:20px 0;border-top:1px solid var(--nbi-soft-grey)}

.nb .nb-next .n{font-weight:800;font-size:14px;color:#13784A;padding-top:3px}

.nb .nb-next h3{font-size:18px;font-weight:700;margin:0 0 6px}

.nb .nb-next p{font-size:15px;line-height:1.55;color:#5c6660;margin:0}

.nb .nb-seg{display:flex;flex-wrap:wrap;gap:10px}

.nb .nb-seg button{min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid var(--nbi-soft-grey);background:#fff;color:var(--nbi-charcoal);font-family:inherit;font-weight:600;font-size:15px;line-height:1.2;cursor:pointer;transition:background .2s,border-color .2s,color .2s}

.nb .nb-seg button:hover{border-color:var(--nbi-deep-green)}

.nb .nb-seg button[aria-checked="true"]{background:var(--nbi-deep-green);border-color:var(--nbi-deep-green);color:#fff}

.nb .nb-seg button:focus-visible{outline:3px solid var(--nbi-green);outline-offset:3px}

.nb .nb-seg-src{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden}

/* Phones and tablets: heading, then the form, then the three steps (the steps no longer push the form down). */

@media (max-width:1024px){

 .nb #projet .wrap{display:flex;flex-direction:column}

 .nb #projet .nb-form-intro{display:contents}

 .nb #projet .nb-form-intro .h2{order:1}.nb #projet .nb-form-intro .lead{order:2}

 .nb #projet .nb-home-form{order:3}

 .nb #projet .nb-next{order:4;margin-top:32px}

}



/* Lovable pass, deploy 3 (2026-09-11): dark footer with columns. Brand blurb, « Offres » (deep links to each offer and

   to Production) and « Agence » (the rest of the menu + Contact), then the bottom bar. Markup: nbi3lik-brand2.php 2.3.0. */

.nb .ftr-dark{background:var(--nbi-deep-green);color:rgba(255,255,255,.72);border-top:1px solid rgba(255,255,255,.08);padding:72px 0 32px}

.nb .ftr-dark .ftr-top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.12)}

.nb .ftr-dark .logo{width:150px}

.nb .ftr-brand p{margin:20px 0 0;max-width:36ch;font-size:15px;line-height:1.6;color:rgba(255,255,255,.72)}

.nb .ftr-col{display:flex;flex-direction:column;align-items:flex-start;gap:2px}

.nb .ftr-h{margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--nbi-green)}

[dir=rtl] .nb .ftr-h{letter-spacing:0;text-transform:none}

.nb .ftr-col a{color:#fff;font-size:15px;font-weight:500;padding:7px 0;transition:color .2s}

.nb .ftr-col a:hover{color:var(--nbi-green)}

.nb .ftr-dark .ftr-bot{color:rgba(255,255,255,.6);border:0}

.nb .ftr-dark .ftr-bot a{color:rgba(255,255,255,.82)}

.nb .ftr-dark .ftr-bot a:hover{color:var(--nbi-green)}

@media (max-width:768px){

 .nb .ftr-dark{padding:56px 0 28px}

 .nb .ftr-dark .ftr-top{grid-template-columns:1fr 1fr;gap:36px 24px}

 .nb .ftr-brand{grid-column:1/-1}

 .nb .ftr-col a{padding:11px 0}

}



/* Project card logos (2026-09-11, user request): bigger and at full opacity (they were 34px at 85%). Each logo gets a

   height for its shape, so the square marks (Greenview, Gold Bayt) carry the same weight as the wide ones. */

.nb .pcard .nm{gap:14px}

.nb .pcard .nm img{height:44px;width:auto;max-width:132px;object-fit:contain;opacity:1;flex:none}

.nb .pcard .nm img[src*="logo-adrar"]{height:40px}

.nb .pcard .nm img[src*="logo-greenview"],.nb .pcard .nm img[src*="logo-gold-bayt"]{height:56px}

.nb .pcard .nm img[src*="logo-aswar"]{height:48px}

@media (max-width:600px){

 .nb .pcard .nm img{height:40px;max-width:118px}

 .nb .pcard .nm img[src*="logo-adrar"]{height:34px}

 .nb .pcard .nm img[src*="logo-greenview"],.nb .pcard .nm img[src*="logo-gold-bayt"]{height:48px}

 .nb .pcard .nm img[src*="logo-aswar"]{height:42px}

}



/* Scroll reveal for the situation cards (2026-09-12, user request): they rise and fade in when the section comes

   into view, 90ms apart, once. .nb-reveal is added by JS (nbi3lik-brand2.php 2.3.1) so nothing can hide the cards

   when JS is off, and that JS skips the whole thing under reduced motion. */

.nb .nb-situations.nb-reveal>a{opacity:0;transform:translateY(52px) scale(.97);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),background .35s,border-color .35s,color .35s,box-shadow .35s}

.nb .nb-situations.nb-reveal>a:nth-child(2){transition-delay:.13s}

.nb .nb-situations.nb-reveal>a:nth-child(3){transition-delay:.26s}

.nb .nb-situations.nb-reveal>a.is-in{opacity:1;transform:none}

/* Hover keeps its own lift once the card has landed. */

@media (hover:hover){.nb .nb-situations.nb-reveal>a.is-in:hover{transform:translateY(-4px);transition-delay:0s}}

.nb .nb-situations.nb-anim-off>a{transition:none!important}

/* Stronger reveal (2026-09-12): 18px was too small to notice and it fired at the very bottom edge, so the cards

   had already settled by the time they were in view. Now 52px + a touch of scale, 0.7s, and the observer waits

   until the card is 22% up the screen (nbi3lik-brand2.php 2.3.3). */

/* New Groupe Aswar logo (2026-09-12): the v4 mark carries a single-line wordmark, so it needs more height than

   the old two-line lockup to hold its own next to Greenview and Gold Bayt in the client strip. */

.nb .trust .logos img:nth-child(4){height:96px!important}

@media (max-width:768px){.nb .trust .logos img:nth-child(4){height:80px!important}}

.nb .pcard .nm img[src*="logo-aswar"]{height:54px}

@media (max-width:600px){.nb .pcard .nm img[src*="logo-aswar"]{height:46px}}

/* Project cards with the description line removed (2026-09-12, user request): the paragraph used to carry the gap

   between the name row and the button, so the name row provides it now, and the card is a little less tall. */

.nb .pcard .nm{margin-bottom:24px}

.nb .pcard .bd{padding:24px 28px 28px}

/* The client strip is logos only now (2026-09-12, user request): no label, no note, so the two-column grid that

   reserved 240px for them is gone and the four logos share the full width. */

.nb .trust .wrap{display:block}

.nb .trust .logos{grid-area:auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}

@media (max-width:768px){.nb .trust .logos{grid-template-columns:1fr 1fr;gap:28px 24px}}

/* Situation card backgrounds (2026-09-12, user request): a photo fills each card behind a white scrim, heavier at

   the bottom where the title and the description sit, lighter at the top so the picture still reads. Hover keeps

   the deep-green treatment, now as a translucent wash so the photo stays visible under it. */

.nb .nb-situations>a{overflow:hidden;isolation:isolate}

.nb .nb-situations .sit-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;margin:0;border-radius:inherit}

.nb .nb-situations>a::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;

 background:linear-gradient(to top,rgba(255,255,255,.95) 0%,rgba(255,255,255,.95) 58%,rgba(255,255,255,.66) 78%,rgba(255,255,255,.34) 100%),linear-gradient(100deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.72) 52%,rgba(255,255,255,.34) 100%);

 transition:background .35s}

@media (hover:hover){

 .nb .nb-situations>a:hover::after{background:linear-gradient(to top,rgba(0,59,37,.90) 0%,rgba(0,59,37,.86) 55%,rgba(0,59,37,.76) 100%)}

 .nb .nb-situations>a:hover{background:transparent}

 .nb .nb-situations>a:hover .sit-bg{transform:scale(1.04)}

}

.nb .nb-situations .sit-bg{transition:transform .6s cubic-bezier(.16,1,.3,1)}

@media (prefers-reduced-motion:reduce){.nb .nb-situations .sit-bg{transition:none}}

/* The text sits on the left (right in Arabic), so the scrim is heaviest there and thins out across the card:

   the photo is visible where nothing is written, and the text gets more cover than a flat wash would give it. */

[dir=rtl] .nb .nb-situations>a::after{background:linear-gradient(to top,rgba(255,255,255,.95) 0%,rgba(255,255,255,.95) 58%,rgba(255,255,255,.66) 78%,rgba(255,255,255,.34) 100%),linear-gradient(260deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.72) 52%,rgba(255,255,255,.34) 100%)}

/* A touch darker than the plain-background version: the description is the smallest text on the card. */

.nb .nb-situations .sit-d{color:#4c574f}

/* Desktop: rather than a faint wash over the whole card (the photo read as a smudge), the text keeps a column on

   the left and the photo band on the right of each card shows at close to full strength. Tablet and phone keep the

   soft all-over wash above, where the cards are too narrow to split. */

@media (min-width:1025px){

 .nb .nb-situations>a::after{background:linear-gradient(to right,#fff 0%,rgba(255,255,255,.99) 46%,rgba(255,255,255,.86) 60%,rgba(255,255,255,.40) 80%,rgba(255,255,255,.12) 100%)}

 [dir=rtl] .nb .nb-situations>a::after{background:linear-gradient(to left,#fff 0%,rgba(255,255,255,.99) 46%,rgba(255,255,255,.86) 60%,rgba(255,255,255,.40) 80%,rgba(255,255,255,.12) 100%)}

 .nb .nb-situations h3{padding-inline-end:36%}

 .nb .nb-situations .sit-d{padding-inline-end:34%}

 .nb .nb-situations>a:hover::after{background:linear-gradient(to right,rgba(0,59,37,.94) 0%,rgba(0,59,37,.90) 55%,rgba(0,59,37,.62) 100%)}

 [dir=rtl] .nb .nb-situations>a:hover::after{background:linear-gradient(to left,rgba(0,59,37,.94) 0%,rgba(0,59,37,.90) 55%,rgba(0,59,37,.62) 100%)}

}

/* Desktop only: a soft halo behind the arrow, which sits over the strongest part of the photo (2:1 without it). */

@media (min-width:1025px){

 .nb .nb-situations>a::after{background:linear-gradient(to right,#fff 0%,rgba(255,255,255,.99) 46%,rgba(255,255,255,.86) 60%,rgba(255,255,255,.40) 80%,rgba(255,255,255,.12) 100%)}

 [dir=rtl] .nb .nb-situations>a::after{background:linear-gradient(to left,#fff 0%,rgba(255,255,255,.99) 46%,rgba(255,255,255,.86) 60%,rgba(255,255,255,.40) 80%,rgba(255,255,255,.12) 100%)}

 .nb .nb-situations>a:hover::after{background:linear-gradient(to right,rgba(0,59,37,.94) 0%,rgba(0,59,37,.90) 55%,rgba(0,59,37,.62) 100%)}

 [dir=rtl] .nb .nb-situations>a:hover::after{background:linear-gradient(to left,rgba(0,59,37,.94) 0%,rgba(0,59,37,.90) 55%,rgba(0,59,37,.62) 100%)}

}

/* Tablet and phone: the card is too narrow to hold a text column and a photo side by side, so the photo band goes

   across the top, where only the icon tile and the arrow sit, and the scrim closes up over the text below. */

@media (max-width:1024px){

 .nb .nb-situations>a::after{background:linear-gradient(to bottom,rgba(255,255,255,.34) 0%,rgba(255,255,255,.52) 22%,rgba(255,255,255,.90) 40%,rgba(255,255,255,.95) 52%,rgba(255,255,255,.95) 100%)}

 [dir=rtl] .nb .nb-situations>a::after{background:linear-gradient(to bottom,rgba(255,255,255,.34) 0%,rgba(255,255,255,.52) 22%,rgba(255,255,255,.90) 40%,rgba(255,255,255,.95) 52%,rgba(255,255,255,.95) 100%)}

}

/* The arrow sits over the photo, so it gets a disc of its own rather than a soft halo (which read as a smudge on

   the busier images). Sized to clear the 24px icon; turns deep green with the card on hover. */

.nb .nb-situations svg.arr{border-radius:50%;background:rgba(255,255,255,.88);box-shadow:0 0 0 9px rgba(255,255,255,.88);transition:background .35s,box-shadow .35s,transform .35s cubic-bezier(.16,1,.3,1),color .35s}

@media (hover:hover){

 .nb .nb-situations>a:hover svg.arr{background:rgba(0,59,37,.9);box-shadow:0 0 0 9px rgba(0,59,37,.9)}

}

@media (prefers-reduced-motion:reduce){.nb .nb-situations svg.arr{transition:none}}

/* Lever card backgrounds (2026-09-12, user request): one photo per lever, shown as a band across the top of the

   card where only the icon sits, with the scrim closing up over the heading, the text and the list. Declared as CSS

   backgrounds inside the desktop query, so phones — where the levers are a compact accordion — never load them. */

@media (min-width:769px){

 .nb .nb-levers article{position:relative;overflow:hidden;isolation:isolate;background-color:#fff;background-repeat:no-repeat;background-size:100% auto;background-position:center top}  /* full width, not cropped in: 'cover' magnified the photo at 299px */

 .nb .nb-levers article>*{position:relative;z-index:1}

 .nb .nb-levers article::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;

  background:linear-gradient(to bottom,rgba(255,255,255,.30) 0%,rgba(255,255,255,.46) 16%,rgba(255,255,255,.90) 30%,rgba(255,255,255,.96) 42%,rgba(255,255,255,.97) 100%)}

 .nb .nb-levers article:nth-child(1){background-image:url(https://nbi3lik.com/wp-content/uploads/2026/09/lv-strategie.webp)}

 .nb .nb-levers article:nth-child(2){background-image:url(https://nbi3lik.com/wp-content/uploads/2026/09/lv-contenu.webp)}

 .nb .nb-levers article:nth-child(3){background-image:url(https://nbi3lik.com/wp-content/uploads/2026/09/lv-ads.webp)}

 .nb .nb-levers article:nth-child(4){background-image:url(https://nbi3lik.com/wp-content/uploads/2026/09/lv-leads.webp);background-position:center -60px}  /* the keys sit low in this frame: pull it up into the visible band */

}

/* The levers rise in like the situation cards (2026-09-12, user request). Same distance, easing and 130ms gap;

   four cards, so one more step. JS in nbi3lik-brand2.php 2.3.4 adds .nb-reveal and skips it under reduced motion. */

.nb .nb-levers.nb-reveal>article{opacity:0;transform:translateY(52px) scale(.97);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}

.nb .nb-levers.nb-reveal>article:nth-child(2){transition-delay:.13s}

.nb .nb-levers.nb-reveal>article:nth-child(3){transition-delay:.26s}

.nb .nb-levers.nb-reveal>article:nth-child(4){transition-delay:.39s}

.nb .nb-levers.nb-reveal>article.is-in{opacity:1;transform:none}

.nb .nb-levers.nb-anim-off>article{transition:none!important}

/* The levers on phones match the desktop cards (2026-09-12, user request): the accordion is gone — every card is

   open, with its icon tile, heading, text, list and background photo. Written as one override block rather than by

   unpicking the earlier accordion rules. The phone page gets longer; that is the trade for the cards. */

@media (max-width:768px){

 .nb .nb-levers{gap:16px;margin-top:40px}

 .nb .nb-levers article{position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--nbi-soft-grey);border-top:1px solid var(--nbi-soft-grey);border-radius:20px;padding:24px 22px 28px;

  box-shadow:0 1px 2px rgba(0,59,37,.04),0 14px 34px -20px rgba(0,59,37,.18);

  background-color:#fff;background-repeat:no-repeat;background-size:100% auto;background-position:center top}

 .nb .nb-levers article>*{position:relative;z-index:1}

 .nb .nb-levers article::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;

  background:linear-gradient(to bottom,rgba(255,255,255,.30) 0%,rgba(255,255,255,.46) 16%,rgba(255,255,255,.90) 30%,rgba(255,255,255,.96) 42%,rgba(255,255,255,.97) 100%)}

 .nb .nb-levers article:nth-child(1){background-image:url(https://nbi3lik.com/wp-content/uploads/2026/09/lv-strategie.webp)}

 .nb .nb-levers article:nth-child(2){background-image:url(https://nbi3lik.com/wp-content/uploads/2026/09/lv-contenu.webp)}

 .nb .nb-levers article:nth-child(3){background-image:url(https://nbi3lik.com/wp-content/uploads/2026/09/lv-ads.webp)}

 .nb .nb-levers article:nth-child(4){background-image:url(https://nbi3lik.com/wp-content/uploads/2026/09/lv-leads.webp);background-position:center -50px}

 /* summary is no longer a control: no toggle, no +/- marker */

 .nb .nb-levers summary{display:block;min-height:0;cursor:default;pointer-events:none}

 .nb .nb-levers summary::after,

 .nb .nb-levers details[open] summary::after{content:none}  /* the accordion's +/- marker, still winning on specificity */

 .nb .nb-levers summary svg{width:48px;height:48px;padding:12px;box-sizing:border-box;border-radius:13px;background:#E8F0EA;color:var(--nbi-deep-green);flex:none}

 .nb .nb-levers summary h3,.nb .nb-levers h3{font-size:22px;line-height:1.25;margin:20px 0 10px}

 .nb .nb-levers p{font-size:16px}

 .nb .nb-levers details[open]{padding-bottom:0}

 .nb .nb-levers details>p{margin-top:0}

}

/* « Notre méthode » comes to life (2026-09-12, user request): the method rail draws from the first step to the

   last, each step lifts in and its ring turns green as the line reaches it, and the line icons trace themselves.

   The class is added by method() in nbi3lik-brand2.php 2.3.6, which skips all of it under reduced motion — the

   site-wide reduced-motion rule drops transitions, and without the class nothing is ever hidden. */

.nb .nb-method .steps.nb-seq::before{background:rgba(255,255,255,.20)}

.nb .nb-method .steps.nb-seq::after{content:"";position:absolute;top:38px;left:8%;right:8%;height:1.5px;

 background:linear-gradient(90deg,var(--nbi-green),rgba(57,217,121,.35));

 transform:scaleX(0);transform-origin:left center;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}

[dir=rtl] .nb .nb-method .steps.nb-seq::after{transform-origin:right center;background:linear-gradient(270deg,var(--nbi-green),rgba(57,217,121,.35))}

.nb .nb-method .steps.nb-seq.is-in::after{transform:scaleX(1)}

.nb .nb-method .steps.nb-seq .step{opacity:0;transform:translateY(52px);transition:opacity .6s ease,transform .75s cubic-bezier(.16,1,.3,1)}

.nb .nb-method .steps.nb-seq.is-in .step{opacity:1;transform:none}

.nb .nb-method .steps.nb-seq .ic{border-color:rgba(255,255,255,.22);transition:border-color .6s ease,background .3s,color .3s}

.nb .nb-method .steps.nb-seq.is-in .ic{border-color:var(--nbi-green)}

.nb .nb-method .steps.nb-seq .ic svg *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s ease}

.nb .nb-method .steps.nb-seq.is-in .ic svg *{stroke-dashoffset:0}

 .nb .nb-method .steps.nb-seq .step:nth-child(1),

 .nb .nb-method .steps.nb-seq .step:nth-child(1) .ic,

 .nb .nb-method .steps.nb-seq .step:nth-child(1) .ic svg *{transition-delay:0.18s}

 .nb .nb-method .steps.nb-seq .step:nth-child(2),

 .nb .nb-method .steps.nb-seq .step:nth-child(2) .ic,

 .nb .nb-method .steps.nb-seq .step:nth-child(2) .ic svg *{transition-delay:0.34s}

 .nb .nb-method .steps.nb-seq .step:nth-child(3),

 .nb .nb-method .steps.nb-seq .step:nth-child(3) .ic,

 .nb .nb-method .steps.nb-seq .step:nth-child(3) .ic svg *{transition-delay:0.50s}

 .nb .nb-method .steps.nb-seq .step:nth-child(4),

 .nb .nb-method .steps.nb-seq .step:nth-child(4) .ic,

 .nb .nb-method .steps.nb-seq .step:nth-child(4) .ic svg *{transition-delay:0.66s}

 .nb .nb-method .steps.nb-seq .step:nth-child(5),

 .nb .nb-method .steps.nb-seq .step:nth-child(5) .ic,

 .nb .nb-method .steps.nb-seq .step:nth-child(5) .ic svg *{transition-delay:0.82s}

 .nb .nb-method .steps.nb-seq .step:nth-child(6),

 .nb .nb-method .steps.nb-seq .step:nth-child(6) .ic,

 .nb .nb-method .steps.nb-seq .step:nth-child(6) .ic svg *{transition-delay:0.98s}

.nb .nb-method .steps.nb-anim-off .step,

.nb .nb-method .steps.nb-anim-off .ic,

.nb .nb-method .steps.nb-anim-off .ic svg *,

.nb .nb-method .steps.nb-anim-off::after{transition:none!important}

/* A step you point at fills in: the only interactive state this section has ever had. */

@media (hover:hover){

 .nb .nb-method .step .ic{transition:border-color .6s ease,background .3s ease,color .3s ease}

 .nb .nb-method .step:hover .ic{background:var(--nbi-green);border-color:var(--nbi-green);color:var(--nbi-deep-green)}

}

/* Phones stack the steps, so the rail runs down the column instead of across the row. */

@media (max-width:768px){

 .nb .nb-method .steps.nb-seq::after{left:37px;right:auto;top:0;bottom:0;width:1px;height:auto;

  background:linear-gradient(180deg,var(--nbi-green),rgba(57,217,121,.35));transform:scaleY(0);transform-origin:center top;transition:transform 1.3s cubic-bezier(.16,1,.3,1)}

 [dir=rtl] .nb .nb-method .steps.nb-seq::after{left:auto;right:37px;transform-origin:center top}

 .nb .nb-method .steps.nb-seq.is-in::after{transform:scaleY(1)}

}

/* The method section background is a photograph now (2026-09-12, user request): a Moroccan development at blue

   hour under a deep-green wash, so the white text keeps the contrast the flat green gave it. A separate portrait

   crop is used on phones, where the section is taller than it is wide and 'cover' would slice the wide frame. */

.nb .nb-method{position:relative;isolation:isolate;background-image:url(https://nbi3lik.com/wp-content/uploads/2026/09/bg-methode.webp);background-size:cover;background-position:center;background-repeat:no-repeat}

.nb .nb-method::after{content:"";position:absolute;inset:0;z-index:-1;

 background:linear-gradient(110deg,rgba(0,59,37,.94) 0%,rgba(0,59,37,.90) 42%,rgba(0,59,37,.82) 72%,rgba(0,59,37,.74) 100%)}

[dir=rtl] .nb .nb-method::after{background:linear-gradient(250deg,rgba(0,59,37,.94) 0%,rgba(0,59,37,.90) 42%,rgba(0,59,37,.82) 72%,rgba(0,59,37,.74) 100%)}

@media (max-width:768px){

 .nb .nb-method{background-image:url(https://nbi3lik.com/wp-content/uploads/2026/09/bg-methode-portrait.webp)}

 .nb .nb-method::after{background:linear-gradient(180deg,rgba(0,59,37,.93) 0%,rgba(0,59,37,.88) 45%,rgba(0,59,37,.84) 100%)}

 /* Each step gets its own container, like the pill that rises at the bottom of the screen. */

 .nb .nb-method .steps{gap:14px}

 .nb .nb-method .step{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:14px 16px;

  grid-template-columns:64px 26px 1fr;gap:14px}

 .nb .nb-method .step .ic{width:56px;height:56px}

 .nb .nb-method .step .ic svg{width:26px;height:26px}

 /* the rail runs behind the containers, showing in the gaps between them */

 .nb .nb-method .steps::before,.nb .nb-method .steps.nb-seq::after{left:44px}

 [dir=rtl] .nb .nb-method .steps::before,[dir=rtl] .nb .nb-method .steps.nb-seq::after{left:auto;right:44px}

}

/* The expertise cards slide up like the others (2026-09-12, user request). Three cards, same distance and easing.

   JS: nbi3lik-brand2.php 2.3.7 adds .nb-reveal here too and skips everything under reduced motion. */

.nb .exp-list.nb-reveal>.exp-item{opacity:0;transform:translateY(52px) scale(.98);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}

.nb .exp-list.nb-reveal>.exp-item:nth-child(2){transition-delay:.13s}

.nb .exp-list.nb-reveal>.exp-item:nth-child(3){transition-delay:.26s}

.nb .exp-list.nb-reveal>.exp-item.is-in{opacity:1;transform:none}

.nb .exp-list.nb-anim-off>.exp-item{transition:none!important}

/* The form section closes the page (2026-09-12, user request: redesign rather than a photo — a form is the one

   place that should stay quiet). Deep-green band with the white card floating on it, the three steps as a numbered

   rail echoing « Notre méthode », and a soft glow so this band and the footer below it do not read as one slab. */

.nb .nb-form-section{background:var(--nbi-deep-green);color:#fff;position:relative;overflow:hidden;isolation:isolate}

.nb .nb-form-section::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;

 background:radial-gradient(820px 430px at 88% 10%,rgba(57,217,121,.10),transparent 62%),radial-gradient(620px 420px at -6% 100%,rgba(0,0,0,.22),transparent 60%)}

.nb .nb-form-section .h2{color:#fff}

.nb .nb-form-section .lead{color:rgba(255,255,255,.76)}

/* Three steps on a rail, numbers in green rings */

.nb .nb-form-section .nb-next{margin-top:44px}

.nb .nb-form-section .nb-next li{grid-template-columns:34px 1fr;gap:18px;padding:0 0 28px;border-top:0;position:relative}

.nb .nb-form-section .nb-next li:last-child{padding-bottom:0}

.nb .nb-form-section .nb-next li:not(:last-child)::before{content:"";position:absolute;inset-inline-start:16.5px;top:38px;bottom:4px;width:1px;background:rgba(57,217,121,.32)}

.nb .nb-form-section .nb-next .n{width:34px;height:34px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--nbi-green);color:var(--nbi-green);display:grid;place-items:center;font-size:13px;padding:0}

.nb .nb-form-section .nb-next h3{color:#fff;font-size:19px;margin:4px 0 6px}

.nb .nb-form-section .nb-next p{color:rgba(255,255,255,.72)}

/* The card lifts off the band: green edge on top, a deeper shadow, a little more room */

.nb .nb-form-section .nb-home-form{border:1px solid rgba(255,255,255,.10);border-top:3px solid var(--nbi-green);

 box-shadow:0 40px 90px -45px rgba(0,0,0,.6),0 2px 6px rgba(0,0,0,.12);padding:44px}

@media (max-width:768px){

 .nb .nb-form-section .nb-home-form{padding:26px 20px;border-radius:20px}

 .nb .nb-form-section .nb-next{margin-top:36px}

}

@media (max-width:600px){

 /* nearly full width on a phone: every pixel to the fields */

 .nb .nb-form-section .nb-home-form{margin-inline:-10px;padding:24px 16px}

}

/* The opportunity section background (2026-09-12, user request): the same night, at ground level, under a

   deep-green wash — the method section is the aerial, this one is the arrival. Separate portrait crop on phones,

   where the section is taller than it is wide. */

.nb .nb-statement{position:relative;isolation:isolate;background-image:url(https://nbi3lik.com/wp-content/uploads/2026/09/bg-opportunites.webp);background-size:cover;background-position:center;background-repeat:no-repeat}

.nb .nb-statement::after{content:"";position:absolute;inset:0;z-index:-1;

 background:linear-gradient(105deg,rgba(0,59,37,.95) 0%,rgba(0,59,37,.91) 40%,rgba(0,59,37,.80) 70%,rgba(0,59,37,.70) 100%)}

[dir=rtl] .nb .nb-statement::after{background:linear-gradient(255deg,rgba(0,59,37,.95) 0%,rgba(0,59,37,.91) 40%,rgba(0,59,37,.80) 70%,rgba(0,59,37,.70) 100%)}

@media (max-width:768px){

 .nb .nb-statement{background-image:url(https://nbi3lik.com/wp-content/uploads/2026/09/bg-opportunites-portrait.webp)}

 .nb .nb-statement::after{background:linear-gradient(180deg,rgba(0,59,37,.94) 0%,rgba(0,59,37,.89) 45%,rgba(0,59,37,.85) 100%)}

}

/* The five stages arrive along the chain, then the four metrics slide up under them. */

.nb .nb-pipeline.nb-reveal>li{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .65s cubic-bezier(.16,1,.3,1)}

.nb .nb-pipeline.nb-reveal>li.is-in{opacity:1;transform:none}

 .nb .nb-pipeline.nb-reveal>li:nth-child(2){transition-delay:0.11s}

 .nb .nb-pipeline.nb-reveal>li:nth-child(3){transition-delay:0.22s}

 .nb .nb-pipeline.nb-reveal>li:nth-child(4){transition-delay:0.33s}

 .nb .nb-pipeline.nb-reveal>li:nth-child(5){transition-delay:0.44s}

.nb .nb-kpis.nb-reveal>span{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .65s cubic-bezier(.16,1,.3,1)}

.nb .nb-kpis.nb-reveal>span.is-in{opacity:1;transform:none}

 .nb .nb-kpis.nb-reveal>span:nth-child(2){transition-delay:0.64s}

 .nb .nb-kpis.nb-reveal>span:nth-child(3){transition-delay:0.73s}

 .nb .nb-kpis.nb-reveal>span:nth-child(4){transition-delay:0.82s}

.nb .nb-pipeline.nb-anim-off>li,.nb .nb-kpis.nb-anim-off>span{transition:none!important}

/* The pipeline stages turn over (2026-09-12, user request): the icon was smaller than its label, so each stage

   is now a box — icon in a green tile with the term under it, one sentence on the back. The five arrows are gone;

   a hairline behind the boxes carries the sequence instead. Click handling: nbi3lik-brand2.php 2.4.0. */

.nb .nb-pipeline{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;align-items:stretch;position:relative}

.nb .nb-pipeline::before{content:"";position:absolute;inset-inline:0;top:50%;height:1px;background:rgba(57,217,121,.22);z-index:0}

.nb .nb-pipeline li{display:block;position:relative;z-index:1;perspective:1000px;padding:0;border:0}

.nb .nb-pipeline li:not(:last-child)::after{content:none}

.nb .nb-pipeline .flip{display:block;position:relative;width:100%;height:176px;margin:0;padding:0;border:0;background:none;

 font:inherit;color:inherit;text-align:start;cursor:pointer;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.16,1,.3,1)}

.nb .nb-pipeline .flip.is-flipped{transform:rotateY(180deg)}

.nb .nb-pipeline .fc{position:absolute;inset:0;box-sizing:border-box;display:flex;padding:20px 18px;border-radius:18px;

 border:1px solid rgba(255,255,255,.20);background:rgba(12,92,58,.82);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:border-color .3s,background .3s}

.nb .nb-pipeline .front{flex-direction:column;justify-content:center;align-items:flex-start;gap:14px}

.nb .nb-pipeline .front svg{box-sizing:content-box;width:32px;height:32px;padding:10px;border-radius:12px;background:rgba(57,217,121,.14);color:var(--nbi-green)}

.nb .nb-pipeline .front .t{font-size:18px;font-weight:600;line-height:1.25;color:#fff}

.nb .nb-pipeline .back{transform:rotateY(180deg);align-items:center;font-size:15px;line-height:1.5;color:#fff;

 background:rgba(16,105,66,.93);border-color:rgba(57,217,121,.45)}

/* the hint that it turns, and the one that turns it back */

.nb .nb-pipeline .fc::after{position:absolute;top:12px;inset-inline-end:14px;font-size:15px;line-height:1;color:rgba(255,255,255,.45)}

.nb .nb-pipeline .front::after{content:"\21BB"}

.nb .nb-pipeline .back::after{content:"\00D7";font-size:18px}

@media (hover:hover){

 .nb .nb-pipeline .flip:hover .fc{border-color:rgba(57,217,121,.7);background:rgba(18,112,70,.9)}

 .nb .nb-pipeline .flip:hover .front svg{background:rgba(57,217,121,.2)}

}

.nb .nb-pipeline .flip:focus-visible{outline:3px solid var(--nbi-green);outline-offset:4px;border-radius:18px}

@media (prefers-reduced-motion:reduce){.nb .nb-pipeline .flip{transition:none}}

@media (max-width:1024px){

 .nb .nb-pipeline{gap:14px}

 .nb .nb-pipeline .flip{height:190px}

 .nb .nb-pipeline .front .t{font-size:16px}

 .nb .nb-pipeline .back{font-size:14px}

}

@media (max-width:768px){

 /* one per row; the phone rules for the old layout (row flex, bottom border, down arrow) are undone here */

 .nb .nb-pipeline{grid-template-columns:1fr;gap:12px;margin-block:40px}

 .nb .nb-pipeline::before{display:none}

 .nb .nb-pipeline li{padding-bottom:0;border-bottom:0}

 .nb .nb-pipeline li:not(:last-child)::after{content:none}

 .nb .nb-pipeline .flip{height:140px}

 .nb .nb-pipeline .front{flex-direction:row;align-items:center;gap:16px}

 .nb .nb-pipeline .front .t{font-size:18px}

 .nb .nb-pipeline .back{font-size:15px;padding-inline-end:40px}

}

/* The faces carry their own dark ground: over the lit part of the photograph a translucent card left the back

   text at 3:1 (measured), so both faces sit on deep green at 78% / 93%. */

/* The old chain arrows are removed for RTL too — `[dir=rtl] … ::after{content:'↓'}` outranked the plain rule,

   so Arabic phones still showed a green ↓ between the boxes. */

[dir=rtl] .nb .nb-pipeline li:not(:last-child)::after{content:none}

@media (max-width:768px){[dir=rtl] .nb .nb-pipeline li:not(:last-child)::after{content:none}}

/* Lighter green and a larger box (2026-09-12, user request): the faces were near-black deep green; they now sit

   on #0C5C3A / #106942 at 82% / 93%, the boxes are 176px tall on desktop (140 on phones) and the icon tile and

   label grew with them. */

/* The back face at #106942 with 92%-white text measured 3.2:1, so the ground is a shade deeper (#0B5637) and

   the sentence is pure white: still clearly lighter than the near-black it started from. */

/* Back face restored to the lighter #106942: the 3.2:1 that prompted darkening it was the card's border caught

   at the edge of the measurement crop, not the text's ground — the real figure there is about 7:1 with white text. */

/* Closer to the reference card the user recorded (2026-09-12): the turn is slower and deeper so the near edge

   visibly swings towards you, the hint became a round control in the corner the way theirs is, and the back names

   the term above its sentence. The recording itself held only the two end states — no frames of the rotation —

   so the curve here is chosen, not copied. */

.nb .nb-pipeline li{perspective:620px}

.nb .nb-pipeline .flip{transition:transform .8s cubic-bezier(.22,.86,.2,1)}

.nb .nb-pipeline .fc{box-shadow:0 1px 2px rgba(0,0,0,.18)}

.nb .nb-pipeline .flip.is-flipped .back{box-shadow:0 26px 50px -26px rgba(0,0,0,.55)}

/* room for the control, and the term above the sentence */

.nb .nb-pipeline .front{justify-content:flex-start;padding-bottom:58px}

.nb .nb-pipeline .back{flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;padding-bottom:58px}

.nb .nb-pipeline .back .bt{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--nbi-green)}

[dir=rtl] .nb .nb-pipeline .back .bt{letter-spacing:0;text-transform:none;font-size:13px}

/* the round control, bottom corner, like the reference */

.nb .nb-pipeline .fc::after{top:auto;bottom:14px;inset-inline-start:16px;inset-inline-end:auto;

 width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.3);

 font-size:15px;color:rgba(255,255,255,.8);transition:border-color .3s,background .3s}

@media (hover:hover){.nb .nb-pipeline .flip:hover .fc::after{border-color:var(--nbi-green);background:rgba(57,217,121,.18)}}

@media (max-width:768px){

 /* phones keep the small corner glyph: a 34px chip does not fit beside the row layout */

 .nb .nb-pipeline .flip{height:150px}

 .nb .nb-pipeline .front{justify-content:center;padding-bottom:20px}

 .nb .nb-pipeline .back{padding-bottom:20px;padding-inline-end:44px}

 .nb .nb-pipeline .fc::after{top:12px;bottom:auto;inset-inline-start:auto;inset-inline-end:14px;

  width:auto;height:auto;border:0;background:none;display:block}

}

/* With reduced motion the turn is dropped (site-wide rule), which left the faces swapping with no visible change

   at all. Reduced motion gets a cross-fade instead: no rotation — the part that causes trouble — but the change is

   still visible. The faces stop being back-to-back, so the back simply sits over the front when it is showing. */

/* The owner asked for the turn to run even when the device asks for reduced motion (2026-09-12), so the flip

   boxes are the one exception to the site-wide reduced-motion rule: the cross-fade fallback is gone and the 3D

   turn is restored with !important, which is what it takes to beat `.nb *{transition:none!important}`. Everything

   else on the site still honours the setting. */

@media (prefers-reduced-motion:reduce){

 .nb .nb-pipeline .flip{transform-style:preserve-3d!important;transition:transform .8s cubic-bezier(.22,.86,.2,1)!important}

 .nb .nb-pipeline .flip.is-flipped{transform:rotateY(180deg)!important}

 .nb .nb-pipeline .fc{transition:none!important;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;opacity:1!important}

 .nb .nb-pipeline .front{transform:none!important}

 .nb .nb-pipeline .back{transform:rotateY(180deg)!important}

}

/* The cards take the pill's colours (2026-09-12, user request): brand green with charcoal text, the same recipe

   as the « Parlons de votre projet » button, so the row reads as the page's action colour rather than as five

   dark panels. Charcoal on #39D979 measures about 9:1. */

.nb .nb-pipeline .fc{background:var(--nbi-green);border:1px solid rgba(0,59,37,.18);color:var(--nbi-charcoal);

 box-shadow:0 8px 22px -12px rgba(0,59,37,.45)}

.nb .nb-pipeline .front .t{color:var(--nbi-charcoal)}

.nb .nb-pipeline .front svg{background:rgba(0,59,37,.12);color:var(--nbi-deep-green)}

.nb .nb-pipeline .back{background:var(--nbi-green);border-color:rgba(0,59,37,.18);color:var(--nbi-charcoal)}

.nb .nb-pipeline .back .bt{color:var(--nbi-deep-green)}

.nb .nb-pipeline .fc::after{border-color:rgba(0,59,37,.3);color:rgba(0,59,37,.78)}

.nb .nb-pipeline .flip.is-flipped .back{box-shadow:0 24px 46px -22px rgba(0,59,37,.55)}

@media (hover:hover){

 .nb .nb-pipeline .flip:hover .fc{background:#2ECB6E;border-color:rgba(0,59,37,.3)}

 .nb .nb-pipeline .flip:hover .front svg{background:rgba(0,59,37,.18)}

 .nb .nb-pipeline .flip:hover .fc::after{border-color:var(--nbi-deep-green);background:rgba(0,59,37,.1);color:var(--nbi-deep-green)}

}

/* White text inside the green cards (2026-09-12, user request: white, not black). The tile, the eyebrow and the

   ↻ control follow it. Note for later: white on #39D979 measures about 1.9:1 — well under the 4.5:1 threshold —

   so this is the owner's aesthetic call, flagged at the time, not an oversight. */

.nb .nb-pipeline .fc{color:#fff}

.nb .nb-pipeline .front .t{color:#fff}

.nb .nb-pipeline .front svg{background:rgba(255,255,255,.2);color:#fff}

.nb .nb-pipeline .back{color:#fff}

.nb .nb-pipeline .back .bt{color:#fff}

.nb .nb-pipeline .fc::after{border-color:rgba(255,255,255,.55);color:#fff}

@media (hover:hover){

 .nb .nb-pipeline .flip:hover .front svg{background:rgba(255,255,255,.28)}

 .nb .nb-pipeline .flip:hover .fc::after{border-color:#fff;background:rgba(255,255,255,.16);color:#fff}

}

/* The four metrics and the rule above them are gone (2026-09-12, user request) — the rule was that block's own

   border-top, so removing the block removed the line with it. The cards go back to the green they had before the

   pill-colour experiment: lighter green faces, white text, which measured 6.6:1. */

.nb .nb-pipeline .fc{background:rgba(12,92,58,.82);border:1px solid rgba(57,217,121,.45);color:#fff;

 box-shadow:0 1px 2px rgba(0,0,0,.18)}

.nb .nb-pipeline .front .t{color:#fff}

.nb .nb-pipeline .front svg{background:rgba(57,217,121,.16);color:var(--nbi-green)}

.nb .nb-pipeline .back{background:rgba(16,105,66,.93);border-color:rgba(57,217,121,.45);color:#fff}

.nb .nb-pipeline .back .bt{color:var(--nbi-green)}

.nb .nb-pipeline .fc::after{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.8)}

.nb .nb-pipeline .flip.is-flipped .back{box-shadow:0 26px 50px -26px rgba(0,0,0,.55)}

@media (hover:hover){

 .nb .nb-pipeline .flip:hover .fc{background:rgba(18,112,70,.9);border-color:rgba(57,217,121,.7)}

 .nb .nb-pipeline .flip:hover .front svg{background:rgba(57,217,121,.24)}

 .nb .nb-pipeline .flip:hover .fc::after{border-color:var(--nbi-green);background:rgba(57,217,121,.18);color:#fff}

}

/* With « Notre méthode » gone (2026-09-12) the projects and levers sections were both on the page's off-white and

   read as one block. The leviers now carries the same soft green as « Nos offres », so the run down the page is

   off-white -> soft green -> white instead of one long stretch. */

.nb #leviers{background:#E8F0EA}

/* The audit (2026-09-12) found the reveal ran on the homepage only. The same rise now covers every group on every

   page. The four groups tuned earlier (.nb-situations, .nb-levers, .exp-list, .nb-pipeline) carry two classes in

   their selectors and so outrank this block; it applies to everything else. */

.nb .nb-reveal>*{opacity:0;transform:translateY(52px) scale(.97);

 transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}

.nb .nb-reveal>:nth-child(2){transition-delay:.13s}

.nb .nb-reveal>:nth-child(3){transition-delay:.26s}

.nb .nb-reveal>:nth-child(4){transition-delay:.39s}

.nb .nb-reveal>:nth-child(n+5){transition-delay:.52s}

.nb .nb-reveal>.is-in{opacity:1;transform:none}

.nb .nb-anim-off>*{transition:none!important}

/* « Par où commencer » (Nos offres) follows the homepage pipeline (2026-09-12): the step and its title on the face,

   the description, the first step and the call to action on the back. The back face stays in normal flow and the

   front is absolute over it, so the card is exactly as tall as its longest side needs — no fixed height to outgrow

   in either language. Same green faces and white text as the pipeline cards. */

.nb .nb-flips{align-items:stretch}

.nb .nb-flips>*{border-top:0;padding-top:0;perspective:1100px;display:flex}

/* The grid stretches the three cells to the tallest; the card and its back face take that whole height, so the

   three cards end level instead of each one stopping at its own text. */

.nb .nb-flips .flip{position:relative;display:grid;flex:1;width:100%;transform-style:preserve-3d;

 transition:transform .8s cubic-bezier(.22,.86,.2,1)}


.nb .nb-flips .flip.is-flipped{transform:rotateY(180deg)}

.nb .nb-flips .fc{grid-area:1/1;position:relative;box-sizing:border-box;display:flex;flex-direction:column;width:100%;margin:0;text-align:start;

 padding:28px 26px 74px;border-radius:20px;background:rgba(12,92,58,.94);border:1px solid rgba(57,217,121,.45);

 color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18);backface-visibility:hidden;-webkit-backface-visibility:hidden}

.nb .nb-flips .front{justify-content:center;gap:0;font:inherit;color:#fff;cursor:pointer}

.nb .nb-flips .back{position:relative;transform:rotateY(180deg);background:rgba(16,105,66,.97);cursor:pointer}

/* the call to action keeps its own click; everything else on the back turns the card over (2026-09-12) */

.nb .nb-flips .back .link{cursor:pointer}

.nb .nb-flips .flip.is-flipped .back{box-shadow:0 26px 50px -26px rgba(0,0,0,.55)}

.nb .nb-flips .front .ico{background:rgba(57,217,121,.16);color:var(--nbi-green);margin-bottom:22px;flex:none}

.nb .nb-flips .front .ico svg{color:var(--nbi-green)}

.nb .nb-flips .front .eyebrow{color:var(--nbi-green)}

.nb .nb-flips .front h3{color:#fff;margin:8px 0 0;font-size:30px;font-weight:800;letter-spacing:-.015em}

.nb .nb-flips .back p{color:rgba(255,255,255,.86);font-size:16px;margin:0}

.nb .nb-flips .back .first{margin:22px 0 22px;background:#F5F4EF;color:var(--nbi-charcoal,#18201C)}

.nb .nb-flips .back .first b{color:var(--nbi-deep-green,#003B25)}

.nb .nb-flips .back .link{align-self:flex-start;margin-top:auto}

/* the round control, bottom corner, as on the pipeline cards */

.nb .nb-flips .front::after{content:"\21BB";position:absolute;bottom:18px;inset-inline-start:26px;width:34px;height:34px;

 display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.3);font-size:15px;

 color:rgba(255,255,255,.8);transition:border-color .3s,background .3s}

.nb .nb-flips .fb{position:absolute;bottom:18px;inset-inline-start:26px;width:34px;height:34px;padding:0;

 display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:none;

 font:inherit;font-size:19px;line-height:1;color:rgba(255,255,255,.8);cursor:pointer;

 transition:border-color .3s,background .3s}

@media (hover:hover){

 .nb .nb-flips .flip:hover .fc{background:rgba(18,112,70,.96);border-color:rgba(57,217,121,.7)}

 .nb .nb-flips .flip:hover .front .ico{background:rgba(57,217,121,.24)}

 .nb .nb-flips .flip:hover .front::after,.nb .nb-flips .fb:hover{border-color:var(--nbi-green);background:rgba(57,217,121,.18);color:#fff}

}

.nb .nb-flips .front:focus-visible,.nb .nb-flips .fb:focus-visible{outline:3px solid var(--nbi-green);outline-offset:4px}

/* the face turned away takes no clicks, whatever the browser does with inert */

.nb .nb-flips .flip:not(.is-flipped) .back,.nb .nb-flips .flip.is-flipped .front{pointer-events:none}

.nb .nb-flips .flip.is-flipped .fb{pointer-events:auto}

/* The turn is deliberate here, as on the pipeline cards: a card that changed face without moving read as broken. */

@media (prefers-reduced-motion:reduce){

 .nb .nb-flips .flip{transition:transform .8s cubic-bezier(.22,.86,.2,1)!important}

}

@media (max-width:1100px){.nb .nb-flips .front h3{font-size:26px}}

@media (max-width:700px){

 .nb .nb-flips .fc{padding:26px 22px 72px}

 .nb .nb-flips .front::after,.nb .nb-flips .fb{inset-inline-start:22px}

}

/* « Notre grille de lecture » (Projets) joins the same flip cards (2026-09-12). It sits on the deep green band and
   its cards are a fifth of the row, so the face keeps the small uppercase title it always had and the back carries
   the question as a green label above its brief. */
.nb .story .st{border:0;background:none;padding:0;min-height:0}
.nb .story .fc{padding:26px 22px 70px}
.nb .story .front .ico{margin-bottom:18px}
.nb .story .front .n{color:var(--nbi-green);font-weight:700;font-size:14px}
.nb .story .front h4{font-size:19px;font-weight:800;margin:14px 0 0;text-transform:uppercase;letter-spacing:.03em;color:#fff}
[dir=rtl] .nb .story .front h4{text-transform:none;letter-spacing:0;font-size:21px}
.nb .story .back{justify-content:flex-start}
.nb .story .back .bq{font-size:13px;font-weight:800;line-height:1.35;color:#A8EFC6;margin-bottom:12px}
/* the brand green measures 3.8:1 on this face — too thin for 13px of real copy, so the question takes a lighter
   tint of the same green (5.2:1) while the decorative number keeps the brand colour */
.nb .story .back p{font-size:14px;line-height:1.55;color:rgba(255,255,255,.82);margin:0}
.nb .story .front::after,.nb .story .fb{inset-inline-start:22px;bottom:16px}
@media (max-width:1100px){.nb .story .front h4{font-size:19px}}
/* Audit fix 3 (2026-09-12): the three lists that were still bare rows get the card treatment the rest of the site
   uses — the audience on À propos, the upcoming topics on Ressources and the FAQ on Nos offres. Each takes the card
   its own ground calls for: the translucent white card of the KPI blocks on the deep green band, the white card with
   a grey hairline on the light ones. Markup is untouched; only the rules that drew separating lines are replaced. */
.nb .aud{gap:20px}
.nb .au{border-top:0}

.nb .upcs{display:grid;gap:16px}
.nb .upc{border-top:0;border-bottom:0;padding:24px 26px;background:#fff;border:1px solid var(--nbi-soft-grey,#E7E7E2);
 border-radius:20px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.nb .upc:last-child{border-bottom:1px solid var(--nbi-soft-grey,#E7E7E2)}

.nb .faq-q,.nb .faq-q:first-child{border:1px solid var(--nbi-soft-grey,#E7E7E2);border-radius:18px;
 padding:22px 26px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.nb .faq-q+.faq-q{margin-top:12px}
@media (max-width:700px){
 .nb .upc{padding:22px 20px}
 .nb .au{padding:24px 20px}
 .nb .faq-q,.nb .faq-q:first-child{padding:20px 20px}
}
/* The audience blocks on À propos join the flip cards (2026-09-12): the label and the answer on the face, the
   sentence behind. They sit on the same deep green band as « Notre grille de lecture » and take the same faces. */
.nb .aud .fc{padding:26px 24px 70px}
.nb .aud .front{justify-content:flex-start}
.nb .aud .front .ico{margin-bottom:18px;flex:none}
.nb .aud .front .k{color:var(--nbi-green)}
.nb .aud .front b{display:block;font-size:24px;font-weight:800;line-height:1.25;margin:12px 0 0;color:#fff}
.nb .aud .back{justify-content:center;padding-top:70px}  /* matches the room left for the control, so the
 sentence sits on the card's true centre rather than above it */
.nb .aud .back span{font-size:15px;line-height:1.55;color:rgba(255,255,255,.86)}
.nb .aud .front::after,.nb .aud .fb{inset-inline-start:24px;bottom:16px}
@media (max-width:1100px){.nb .aud .front b{font-size:22px}}
@media (max-width:700px){
 .nb .aud .fc{padding:24px 20px 68px}
 .nb .aud .front::after,.nb .aud .fb{inset-inline-start:20px}
}
/* Each article card now opens on its own picture instead of a dark icon tile (2026-09-12), so every article on the
   Ressources page is announced by an image the way the featured one already was. The padding moves from the card to
   an inner body, and the card clips the picture to its own radius. The picture is decorative — the title next to it
   is the real link — so it is hidden from screen readers and skipped by the keyboard. */
.nb .acard{padding:0;overflow:hidden}
.nb .acard-im{display:block;position:relative;aspect-ratio:16/9;background:var(--nbi-deep-green,#003B25);overflow:hidden}
.nb .acard-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;margin:0;
 transition:transform .6s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){.nb .acard:hover .acard-im img{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){.nb .acard-im img{transition:none}}
.nb .acard-bd{display:flex;flex-direction:column;flex:1;padding:30px 32px 32px}
.nb .acard-bd .meta{display:block}
.nb .acard h3{margin-top:10px}
@media (max-width:700px){.nb .acard-bd{padding:26px 22px 28px}}
/* A photograph behind each of the five steps on À propos (2026-09-12), as the situation cards have on the homepage.
   At 227px wide there is no room for the homepage's side-by-side split, so the picture fills the card, a deep green
   wash sits over it and the text turns white. The arrow between the cards is the card's own ::after, so the wash is
   ::before. Both sit behind the content on their own z-index, which is why the card needs isolation. */
/* No overflow:hidden here — the arrow between two steps is the card's own ::after and sits outside it, so clipping
   the card removes the chain. The picture and the wash are rounded by inheriting the card's radius instead. */
.nb .ch{position:relative;border-color:transparent}
.nb .ch-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;margin:0;z-index:-2;
 border-radius:inherit}
/* The picture is a texture, not a subject: it is dimmed and drained at the source, then covered by a heavy wash so
   it barely surfaces behind the words (2026-09-13, user asked for them to disappear into the background). */
.nb .ch-bg{filter:brightness(.5) saturate(.55)}
.nb .ch::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
 background:linear-gradient(180deg,rgba(0,45,28,.88) 0%,rgba(0,45,28,.93) 52%,rgba(0,45,28,.97) 100%)}
.nb .ch .ico{background:rgba(57,217,121,.18);color:var(--nbi-green)}
.nb .ch .ico svg{color:var(--nbi-green)}
.nb .ch .n{color:var(--nbi-green)}
.nb .ch h4{color:#fff}
.nb .ch p{color:rgba(255,255,255,.88)}
/* the arrow between two cards sits on the section ground, not on a card, so it keeps the brand green */
/* Only the picture moves on hover. A transition on .ch itself would replace the one the reveal sets on
   .nb-reveal>* — same specificity, later in the file — and the cards would stop fading in. */
/* the wash lightens a little on hover instead of the picture zooming, which would spill past the open card */
@media (hover:hover){
 .nb .ch::before{transition:background .35s}
 .nb .ch:hover::before{background:linear-gradient(180deg,rgba(0,45,28,.80) 0%,rgba(0,45,28,.87) 52%,rgba(0,45,28,.94) 100%)}
}
@media (prefers-reduced-motion:reduce){.nb .ch::before{transition:none}}
/* The chain steps turn over too (2026-09-13). The card itself is only the wrapper now — it keeps the chevron that
   joins it to the next step and must not be clipped or turned — while the picture, the wash and the words live on
   the front FACE, which is what rotates. The back is the plain green face the other flip groups use. */
.nb .chain .ch{background:none;border:0;padding:0;min-height:0}
.nb .chain .ch::before{content:none}
.nb .chain .fc{padding:26px 22px 70px}
.nb .chain .front{position:relative;isolation:isolate;background:none;border-color:rgba(57,217,121,.30)}
.nb .chain .front .ch-bg{filter:brightness(.5) saturate(.55)}
.nb .chain .front::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
 background:linear-gradient(180deg,rgba(0,45,28,.88) 0%,rgba(0,45,28,.93) 52%,rgba(0,45,28,.97) 100%)}
.nb .chain .front .ico{margin-bottom:0}
.nb .chain .front .n{display:block;margin-top:18px}
.nb .chain .front h4{margin:10px 0 0}
/* the fronts sit under a heavy wash, so the shared lighter back would jump; this one stays in the same family */
.nb .chain.nb-flips .back{justify-content:center;padding-top:70px;background:rgba(9,68,43,.97)}
.nb .chain .back span{font-size:14px;line-height:1.55;color:rgba(255,255,255,.88)}
.nb .chain .front::after,.nb .chain .fb{inset-inline-start:22px;bottom:16px}
@media (hover:hover){
 .nb .chain .flip:hover .front::before{background:linear-gradient(180deg,rgba(0,45,28,.80) 0%,rgba(0,45,28,.87) 52%,rgba(0,45,28,.94) 100%)}
 .nb .chain .front::before{transition:background .35s}
}
@media (prefers-reduced-motion:reduce){.nb .chain .front::before{transition:none}}
/* The site-wide reduced-motion rule switches every transition off, which would leave the cards appearing without
   rising. The reveal keeps its motion under that setting (2026-09-13, owner's call, as for the flip cards), so the
   transitions are restored inside the query. LONGHANDS only: a `transition:` shorthand here would reset
   transition-delay to 0 and the cards would all arrive at once instead of one after another. */
@media (prefers-reduced-motion:reduce){
 .nb .nb-reveal>*{transition-property:opacity,transform!important;transition-duration:.7s!important;
  transition-timing-function:cubic-bezier(.16,1,.3,1)!important}
 .nb .nb-reveal>:nth-child(2){transition-delay:.13s!important}
 .nb .nb-reveal>:nth-child(3){transition-delay:.26s!important}
 .nb .nb-reveal>:nth-child(4){transition-delay:.39s!important}
 .nb .nb-reveal>:nth-child(n+5){transition-delay:.52s!important}
 .nb .nb-anim-off>*{transition:none!important}
}
/* Social profiles (2026-09-13): the three profile marks sit under the footer blurb, and WhatsApp floats on every
   page. While a URL is empty the plugin renders a <span> rather than an <a>, so a placeholder shows without leading
   anywhere; `.is-empty` is what that looks like. */
.nb .ftr-soc-h{margin-top:28px}
.nb .ftr-social{display:flex;gap:10px;margin-top:14px}
.nb .nb-soc{display:grid;place-items:center;width:42px;height:42px;border-radius:999px;
 border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:rgba(255,255,255,.85);
 transition:background .25s,border-color .25s,color .25s}
.nb .nb-soc svg{width:20px;height:20px}
.nb a.nb-soc:hover{background:var(--nbi-green);border-color:var(--nbi-green);color:var(--nbi-deep-green)}
.nb a.nb-soc:focus-visible{outline:3px solid var(--nbi-green);outline-offset:3px}
.nb .nb-soc.is-empty{opacity:.4}

/* WhatsApp sits on the opposite side from the back-to-top button, which is always at the inline end. */
.nb .nb-wa{position:fixed;z-index:70;inset-inline-start:20px;bottom:20px;width:54px;height:54px;border-radius:999px;
 display:grid;place-items:center;background:#25D366;color:#fff;box-shadow:0 10px 28px rgba(0,40,20,.32);
 transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.nb .nb-wa svg{width:29px;height:29px}
.nb a.nb-wa:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,40,20,.4);color:#fff}
.nb a.nb-wa:focus-visible{outline:3px solid var(--nbi-green);outline-offset:4px}
.nb .nb-wa.is-empty{opacity:.55}
@media (max-width:768px){
 /* the sticky call to action takes the bottom of the screen when it is showing */
 .nb .nb-wa{inset-inline-start:16px;bottom:16px;width:50px;height:50px}
 .nb .nb-wa svg{width:27px;height:27px}
 body.nb-cta-on .nb .nb-wa{bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.nb .nb-wa{transition:none}}
@media print{.nb .nb-wa{display:none}}
/* WhatsApp stays on the right in both languages (2026-09-13, owner's call — not mirrored for Arabic). In French the
   back-to-top button already owns that corner, so it moves above WhatsApp: the one people actually press sits lowest
   and closest to the thumb. In Arabic the back-to-top is on the left and nothing has to move. */
.nb .nb-wa{inset-inline-start:auto;left:auto;right:30px;bottom:30px}
html:not([dir=rtl]) #ast-scroll-top.ast-scroll-top-icon{bottom:96px!important}
@media (max-width:768px){
 .nb .nb-wa{inset-inline-start:auto;left:auto;right:16px;bottom:16px}
 body.nb-cta-on .nb .nb-wa{bottom:calc(80px + env(safe-area-inset-bottom))}
 html:not([dir=rtl]) #ast-scroll-top.ast-scroll-top-icon{bottom:78px!important}
 html:not([dir=rtl]) body.nb-cta-on #ast-scroll-top.ast-scroll-top-icon{bottom:calc(142px + env(safe-area-inset-bottom))!important}
}
/* (2026-09-13) Two corrections to the WhatsApp button. The mark is centred in its box but not to the eye: the tail
   pulls the mark's weight down and slightly left, measured at 2.26px low and 0.59px left of the disc centre on the
   54px button, so the glyph is nudged back up. Not by the whole 2.26px: the tail is thin, so centring the WEIGHT overshoots and
   the mark then reads high — 1.4px is where the air above and below the mark evens out, judged against renders of
   0 / 0.9 / 1.4 / 2.26. And the placeholder dimming is what made the green look
   washed out — the button now sits at full strength whether or not the link is filled in, in a slightly deeper
   green than the stock one. */
.nb .nb-wa svg{transform:translate(.6px,-1.4px)}
.nb .nb-wa{background:#25DD6B;opacity:1}
.nb .nb-wa.is-empty{opacity:1}
.nb a.nb-wa:hover{background:#1EC85E}
/* (2026-09-13) The site-wide `a:hover{color:var(--deep)}` paints the very colour the header and the dark footer use
   as their background, so any link there without a hover rule of its own disappeared under the pointer. The nav
   links, the footer columns and the footer bottom row each already set one; these two did not — the language switch
   in the header (reported) and the logo. */
.nb .hdr .lang:hover,.nb .hdr .lang:focus-visible{color:#fff}
.nb .hdr .hdr-logo:hover,.nb .ftr .hdr-logo:hover{color:var(--nbi-ink,#13784A)}


/* --- Language switcher (flag + two-letter code, dropdown) ---------------- */
.nb .nblang{position:relative;display:inline-block}
.nb .nblang-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px;border:1.5px solid rgba(255,255,255,.22);border-radius:999px;background:none;color:rgba(255,255,255,.85);font-size:13px;font-weight:700;letter-spacing:.04em;line-height:1;cursor:pointer}
.nb .nblang-btn:hover,.nb .nblang-btn:focus-visible{color:#fff;border-color:rgba(255,255,255,.45)}
.nb .nblang-flag{display:block;flex:none;width:20px;height:14px;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.14) inset}
.nb .nblang-flag svg{display:block;width:100%;height:100%}
.nb .nblang-caret{width:12px;height:12px;flex:none;transition:transform .18s ease}
.nb .nblang-btn[aria-expanded="true"] .nblang-caret{transform:rotate(180deg)}
.nb .nblang-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;inset-inline-start:auto;min-width:104px;padding:6px;background:#fff;border:1px solid var(--grey);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.18);z-index:60}
.nb .nblang-menu[hidden]{display:none}
.nb .nblang-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--char);font-size:13px;font-weight:700;letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.nb .nblang-opt:hover,.nb .nblang-opt:focus-visible{background:var(--off);color:var(--deep)}
.nb .nblang-opt.is-active{background:var(--off);color:var(--deep)}
/* Footer: the same marks, but a plain link to the other language - no panel to open upwards. */
.nb .ftr-bot a.ftr-lang{display:inline-flex;align-items:center;gap:7px;vertical-align:middle}
@media (max-width:600px){
.nb .nblang-btn{gap:6px;padding:0 10px;height:36px}
.nb .nblang-flag{width:18px;height:12px}
}

/* ------------------------------------------------------ client marquee (user, 2026-09-15)
   Replaces the tile strip of earlier the same day. Four identical copies of the logo list sit in
   one track and the track shifts -25% (100% / 4 copies), so copy 2 lands exactly where copy 1
   began and the loop resets with no seam. MARQUEE_COPIES in build_live.py and the -25% below must
   change together, or the reset jumps.
   Spacing is half a gap on each side of every item, never a `gap` on the track: that way the
   distance between two logos is identical inside a copy AND across the join between two copies,
   which is the other half of why the loop is invisible.
   Four copies also keep the track wider than the viewport up to ~2880px; fewer copies show a
   blank gap at the join on a large monitor.
   direction:ltr is deliberate. The strip travels right to left in all three languages; without it
   RTL mirrors the flex row and the track walks off its own end instead of looping. */
.nb .nb-mq{--pm-bg:var(--nbi-white);--pm-gap:104px;--pm-row:96px;--pm-fade:150px;--pm-duration:16s;
 background:var(--pm-bg);padding-block:52px;border-bottom:1px solid var(--nbi-soft-grey)}
.nb .nb-mq__viewport{overflow:hidden;direction:ltr;width:100%;min-width:0;
 -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--pm-fade),#000 calc(100% - var(--pm-fade)),transparent 100%);
 mask-image:linear-gradient(to right,transparent 0,#000 var(--pm-fade),#000 calc(100% - var(--pm-fade)),transparent 100%)}
.nb .nb-mq__track{display:flex;width:max-content;will-change:transform;animation:pm-scroll var(--pm-duration) linear infinite}
.nb .nb-mq__group{display:flex;align-items:center;flex:0 0 auto;margin:0;padding:0;list-style:none}
.nb .nb-mq__item{flex:0 0 auto;height:var(--pm-row);display:grid;place-items:center;padding-inline:calc(var(--pm-gap)/2)}
.nb .nb-mq__item img{height:var(--h,48px);width:auto;max-width:none;object-fit:contain;display:block}
/* Optical sizing per logo, carried over from the heights tuned on 11 Sep: a wide script and a
   square emblem at the same pixel height do not read as the same size. */
.nb .nb-mq__item:nth-child(1){--h:44px}
.nb .nb-mq__item:nth-child(2){--h:76px}
.nb .nb-mq__item:nth-child(3){--h:76px}
.nb .nb-mq__item:nth-child(4){--h:66px}
@keyframes pm-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-25%,0,0)}}
@media (max-width:768px){
.nb .nb-mq{--pm-gap:56px;--pm-row:64px;--pm-fade:52px;--pm-duration:12s;padding-block:32px}
.nb .nb-mq__item:nth-child(1){--h:30px}
.nb .nb-mq__item:nth-child(2){--h:52px}
.nb .nb-mq__item:nth-child(3){--h:52px}
.nb .nb-mq__item:nth-child(4){--h:44px}
}
/* The site-wide rule near the top of this file kills EVERY animation under reduced motion
   (.nb *{animation:none!important}), which would leave this strip frozen - the same trap that made
   the flip cards and the scroll reveal look broken on the owner's machine twice before. The owner
   has chosen to keep motion regardless of that setting both times, so the marquee is forced here
   too. Delete this block to honour the visitor's setting instead. */
@media (prefers-reduced-motion:reduce){
.nb .nb-mq__track{animation:pm-scroll var(--pm-duration) linear infinite!important}
}

/* ------------------------------ homepage « Nos offres » heading (user, 2026-09-15)
   The h2 « Une solution a chaque etape de votre croissance. » and the LEADS -> 360 ->
   GROWTH ENGINE line were removed, so the eyebrow is the section's only label and now
   carries the <h2> element too. At this size the 0.16em eyebrow tracking reads as gappy,
   so it is eased back; the bottom margin grows because the eyebrow now sits directly on
   the cards instead of on a heading. `.nb-progression` in this file is dead CSS now - its
   only user was the line that was removed. */
.nb #offres .eyebrow,.nb #projets .eyebrow{font-size:32px;line-height:1.15;letter-spacing:.05em;margin:0 0 36px}
@media (max-width:1024px){.nb #offres .eyebrow,.nb #projets .eyebrow{font-size:27px;margin-bottom:30px}}
@media (max-width:768px){.nb #offres .eyebrow,.nb #projets .eyebrow{font-size:22px;letter-spacing:.04em;margin-bottom:24px}}