/* ═══════════════════════════════════════
   THÈME CLAIR — étude (branche theme-clair)
   Feuille chargée APRÈS le CSS de la page : elle ne fait que
   remplacer des couleurs, la mise en page reste identique.
   Le pied de page reste volontairement sombre.

   Palette
     fond            #ffffff
     fond alterné    #f3f6fb
     encre (titres)  #111827
     texte           #1b2333
     texte discret   #56627a
     bordures        #dde4ee
     bleu (texte)    #1a5cff   ← assez foncé pour être lisible sur blanc
═══════════════════════════════════════ */

body{background:#fff;color:#1b2333}

/* ── NAV ── */
#nb-nav{
  background:rgba(255,255,255,.97);
  border-bottom-color:rgba(17,24,39,.08);
}
#nb-nav.nb-scrolled{
  border-bottom-color:rgba(26,92,255,.35);
  box-shadow:0 4px 20px rgba(17,24,39,.06);
}
.nb-logo-name{color:#111827}
.nb-logo-name b{color:#1a5cff}
.nb-logo-sub{color:#56627a}
.nb-nav-links a{color:#56627a}
.nb-nav-links a:hover{color:#111827}
.nb-nav-links a.nb-active{color:#1a5cff;border-bottom-color:#1a5cff}
.nb-nav-btn:hover{box-shadow:0 4px 16px rgba(26,92,255,.3)!important}

/* ── HERO ── */
#nb-hero{background:#f5f8fc}
.nb-filigrane{color:rgba(26,92,255,.05)}
.nb-hero-tag-line{background:#1a5cff}
.nb-hero-tag span{color:#1a5cff}
.nb-hero-h1{color:#111827}
.nb-hero-h1 .nb-blue{color:#1a5cff}
.nb-hero-sub{color:#56627a;font-weight:400}
.nb-hero-cta{
  background:#111827;border-color:#111827;color:#fff;
}
.nb-hero-cta:hover{
  background:#1a5cff;border-color:#1a5cff;color:#fff;
}
/* Fondu de la photo vers le fond clair (plus court que sur fond sombre,
   sinon la photo paraît délavée) */
.nb-hero-photo::before{
  background:linear-gradient(to right,#f5f8fc 0%,rgba(245,248,252,.55) 14%,transparent 34%);
}

/* ── HÉROS : bloc de marque à la place de la photo ──
   Fond blanc, logo en couleurs normales. Le fondu vers le fond clair
   n'a plus lieu d'être, il n'y a plus de photo à estomper.
   Fond transparent : le logo flotte sur le fond du héros, sans couture
   verticale au milieu. Pour un panneau blanc distinct, remplacer
   transparent par #fff ci-dessous. */
.nb-hero-mark{
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
}
.nb-hero-mark::before{display:none}
.nb-hero-mark img{
  width:auto;
  height:auto;
  max-width:54%;
  max-height:42%;
  object-fit:contain;
  object-position:center;
  filter:none;
}
@media(max-width:900px){
  .nb-hero-mark img{max-width:46%;max-height:56%}
}

/* ── SERVICES ── */
#nb-services{background:#fff}
.nb-svc-tag,.nb-real-tag,.nb-contact-tag{color:#1a5cff}
.nb-svc-tag-line,.nb-real-tag-line,.nb-contact-tag-line{background:#1a5cff}
.nb-svc-h2,.nb-about-h2,.nb-real-title,.nb-contact-h2{color:#111827}
.nb-svc-h2 em,.nb-about-h2 em,.nb-real-title em,.nb-contact-h2 em{color:#1a5cff}
.nb-svc-sub{color:#56627a}
.nb-svc-card{
  background:#fff;
  border-color:#dde4ee;
  box-shadow:0 1px 2px rgba(17,24,39,.04);
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.nb-svc-card:hover{
  background:#fff;
  border-color:rgba(26,92,255,.45);
  box-shadow:0 14px 32px rgba(17,24,39,.09);
}
.nb-svc-card-icon{background:rgba(26,92,255,.1)}
.nb-svc-card-icon svg{stroke:#1a5cff}
.nb-svc-card-title{color:#111827}
.nb-svc-card-desc{color:#56627a}

/* ── À PROPOS ── */
#nb-about{background:#f3f6fb}
.nb-about-p{color:#56627a}
.nb-values{border-color:#dde4ee;background:#fff}
.nb-val{border-right-color:#dde4ee}
.nb-val-icon{border-color:#dde4ee;color:#1a5cff}
.nb-val:hover .nb-val-icon{border-color:#1a5cff;background:rgba(26,92,255,.08)}
.nb-val-icon img{opacity:1}
.nb-val-title{color:#111827}
.nb-val-bar span{background:#1a5cff}

/* ── RÉALISATIONS ── */
#nb-real{background:#fff}
.nb-real-item{background:#e9eef5}
.nb-real-item img{filter:none}
.nb-real-item:hover img{filter:brightness(1.04)}

/* Le thème sombre assombrissait les photos (filter: brightness(.9)), ce qui
   aidait les étiquettes blanches à ressortir. Sans ce filtre, elles pâlissent
   sur un carrelage clair. On renforce le dégradé déjà présent sous l'étiquette
   et on passe le texte en blanc franc : la photo reste nette, le texte tient. */
.nb-real-caption{
  padding-top:40px;
  background:linear-gradient(to top,
    rgba(6,8,14,.92) 0%,
    rgba(6,8,14,.62) 50%,
    transparent 100%);
}
.nb-real-label{color:#fff}
.nb-real-badge{
  background:rgba(26,92,255,.85);
  border-color:transparent;
  color:#fff;
}

/* ── CONTACT ── */
#nb-contact{background:#f3f6fb}
#nb-contact::before{
  background:radial-gradient(circle,rgba(45,111,255,.10) 0%,transparent 70%);
}
.nb-contact-sub{color:#56627a}
.nb-cf-group label{color:#56627a}
.nb-cf-group input,
.nb-cf-group select,
.nb-cf-group textarea{
  background:#fff;
  border-color:#8793a8;
  color:#111827;
}
.nb-cf-group select option{background:#fff;color:#111827}
.nb-cf-group input::placeholder,
.nb-cf-group textarea::placeholder{color:#7a869b}
.nb-cf-group input:focus,
.nb-cf-group select:focus,
.nb-cf-group textarea:focus{
  border-color:#1a5cff;
  background:#fff;
  box-shadow:0 0 0 3px rgba(26,92,255,.15);
}
.nb-cf-btn{background:#1a5cff}
.nb-cf-btn:hover{background:#1247d6}
.nb-cf-success{
  background:rgba(26,92,255,.08);
  border-color:rgba(26,92,255,.35);
  color:#1247d6;
}
.nb-cf-error{
  background:rgba(217,45,32,.07);
  border-color:rgba(217,45,32,.35);
  color:#b42318;
}
.nb-cf-error a{color:#912018}
.nb-cf-consent label{color:#56627a}
.nb-cf-consent a{color:#1a5cff}
.nb-cf-consent input{accent-color:#1a5cff}

/* ── PIED DE PAGE ── */
#nb-footer{
  background:#f3f6fb;
  border-top-color:#dde4ee;
  color:#1b2333;
}
.nb-foot-col+.nb-foot-col{border-left-color:#dde4ee;border-top-color:#dde4ee}

.nb-foot-brand{color:#111827}
.nb-foot-brand b{color:#1a5cff}
.nb-foot-sub{color:#56627a}
.nb-foot-section-title{color:#56627a}

.nb-foot-phone{color:#111827}
.nb-foot-phone:hover{color:#1a5cff}
.nb-foot-link{color:#56627a}
.nb-foot-link:hover{color:#111827}

.nb-foot-nav-title{color:#111827}
.nb-foot-nav-list a{color:#56627a}
.nb-foot-nav-list a:hover{color:#111827}

.nb-foot-copy{
  background:#e9eef6;
  border-top-color:#dde4ee;
}
.nb-foot-copy p,.nb-foot-copy a{color:#56627a}
.nb-foot-copy a:hover{color:#111827}
.nb-foot-copy .nb-sep{color:#b9c4d4}

/* Le logo du pied de page passe lui aussi sur fond clair. */
.nb-foot-logo-wrap img{filter:none}

/* ── BOUTON FLOTTANT ── */
.nb-float a{box-shadow:0 6px 22px rgba(26,92,255,.35)}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .nb-hero-photo::before{background:linear-gradient(to top,#f5f8fc 0%,transparent 35%)}
  .nb-val{border-bottom-color:#dde4ee}
}