/*======================================================*/
/*  Section "Nouvelles" — nos applications maison        */
/*  (index.php) : WebBoard & Rally.band                  */
/*======================================================*/
.nw {
   --wb-1: #6c5ce7;
   --wb-2: #a855f7;
   --rb-1: #ff8a3d;
   --rb-2: #ff5e1a;
   --ar-1: #6c5ce7;
   --ar-2: #ff5c8a;
   --th-1: #9ccc3c;
   --th-2: #4e8f1f;
   position: relative;
   overflow: hidden;
   isolation: isolate;
   padding: 26px 22px 110px;
   color: #e9e6ff;
   background: linear-gradient(180deg, #120f2b 0%, #1a1440 50%, #120f2b 100%);
}

/* Aurores de couleur qui ondulent en fond */
.nw-aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.nw-aurora span {
   position: absolute;
   border-radius: 50%;
   filter: blur(90px);
   opacity: .45;
   animation: nw-aurora 18s ease-in-out infinite alternate;
}

.nw-aurora span:nth-child(1) { width: 640px; height: 520px; top: 8%;  left: -200px; background: #6c5ce7; }
.nw-aurora span:nth-child(2) { width: 560px; height: 560px; top: 40%; right: -220px; background: #ff6a2b; animation-delay: -7s; opacity: .32; }
.nw-aurora span:nth-child(3) { width: 520px; height: 420px; bottom: -120px; left: 25%; background: #d946ef; animation-delay: -12s; opacity: .28; }

@keyframes nw-aurora {
   from { transform: translate(0, 0) scale(1); }
   to   { transform: translate(80px, -40px) scale(1.2); }
}

/* Petites étoiles */
.nw::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background-image:
      radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent),
      radial-gradient(1px 1px at 32% 68%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 58% 14%, #fff, transparent),
      radial-gradient(1px 1px at 76% 48%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 90% 82%, #fff, transparent),
      radial-gradient(1px 1px at 46% 90%, #fff, transparent);
   background-size: 520px 520px;
   opacity: .35;
   animation: nw-twinkle 5s ease-in-out infinite alternate;
}

@keyframes nw-twinkle { to { opacity: .12; } }

/*--- Bandeau défilant ---*/
.nw-marquee {
   margin: 0 -22px;
   padding: 16px 0;
   overflow: hidden;
   background: linear-gradient(90deg, var(--wb-1), #d946ef 50%, var(--rb-2));
   transform: rotate(-1.2deg) scale(1.02);
   box-shadow: 0 12px 40px rgba(108, 92, 231, 0.4);
}

.nw-track {
   display: flex;
   align-items: center;
   gap: 22px;
   width: max-content;
   animation: nw-marquee 38s linear infinite;
}

.nw-track span {
   color: #fff;
   font-size: 18px;
   font-weight: 700;
   letter-spacing: .5px;
   text-transform: uppercase;
   white-space: nowrap;
}

.nw-track i {
   font-style: normal;
   color: rgba(255, 255, 255, 0.7);
   font-size: 16px;
}

@keyframes nw-marquee { to { transform: translateX(-50%); } }

/*--- En-tête ---*/
.nw-head {
   max-width: 780px;
   margin: 80px auto 70px;
   text-align: center;
}

.nw-kicker {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 8px 18px 8px 14px;
   border-radius: 50px;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.18);
   color: #fff;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
}

.nw-ping {
   position: relative;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #ff4d6d;
}

.nw-ping::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 50%;
   background: #ff4d6d;
   animation: nw-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes nw-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }

.nw-title {
   margin: 20px 0 12px;
   font-family: 'Poppins', Verdana, sans-serif;
   font-size: clamp(2.4rem, 6vw, 4.4rem);
   font-weight: 700;
   line-height: 1.05;
   letter-spacing: -1.5px;
   text-align: center;
   color: #fff;
}

.nw-title span {
   background: linear-gradient(90deg, #a78bfa, #f472b6, #fb923c, #a78bfa);
   background-size: 300% 100%;
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   animation: nw-gradient 6s linear infinite;
}

@keyframes nw-gradient { to { background-position: 300% 0; } }

.nw-sub {
   margin: 0 auto;
   max-width: 600px;
   font-size: 17px;
   line-height: 1.6;
   color: #b9b3e0;
}

/*--- Bloc produit (texte + visuel, en zigzag) ---*/
.nw-prod {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
   align-items: center;
   gap: 64px;
   max-width: 1240px;
   margin: 0 auto 110px;
}

.nw-prod:last-child { margin-bottom: 0; }
/* Un bloc sur deux : texte à droite, visuel à gauche */
.nw-rev .nw-copy { order: 2; }

.nw-copy,
.nw-visual { min-width: 0; }

.nw-brand {
   display: flex;
   align-items: center;
   gap: 14px;
   flex-wrap: wrap;
}

.nw-logo {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 56px;
   height: 56px;
   border-radius: 16px;
   color: #fff;
   font-size: 26px;
   box-shadow: 0 12px 30px var(--glow), inset 0 -3px 0 rgba(0, 0, 0, 0.15);
   background: linear-gradient(135deg, var(--c1), var(--c2));
}

.nw-name {
   font-size: clamp(2rem, 4vw, 2.8rem);
   font-weight: 700;
   letter-spacing: -1px;
   color: #fff;
}

.nw-name em { font-style: normal; color: var(--c1); }

.nw-new {
   padding: 4px 12px;
   border-radius: 50px;
   background: linear-gradient(135deg, var(--c1), var(--c2));
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1px;
   text-transform: uppercase;
}

.nw-wb { --c1: var(--wb-1); --c2: var(--wb-2); --glow: rgba(108, 92, 231, 0.55); --tint: rgba(108, 92, 231, 0.18); }
.nw-th { --c1: var(--th-1); --c2: var(--th-2); --glow: rgba(140, 198, 63, 0.45); --tint: rgba(140, 198, 63, 0.16); }
.nw-ar { --c1: var(--ar-2); --c2: var(--ar-1); --glow: rgba(255, 92, 138, 0.5); --tint: rgba(255, 92, 138, 0.16); }
.nw-rb { --c1: var(--rb-1); --c2: var(--rb-2); --glow: rgba(255, 106, 43, 0.5);  --tint: rgba(255, 138, 61, 0.16); }

.nw-tagline {
   margin: 22px 0 14px;
   font-size: clamp(1.4rem, 2.6vw, 1.9rem);
   font-weight: 600;
   line-height: 1.25;
   color: #fff;
}

.nw-wb .nw-tagline span {
   background: linear-gradient(90deg, #ff6b8b, #f4a261, #8ac7a0, #6aa9e9, #8b7cf6);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

.nw-rb .nw-tagline span { color: var(--rb-1); }
.nw-th .nw-tagline span { color: var(--th-1); }

/* Dégradé repris du titre d'ardoise.delisou.be */
.nw-ar .nw-tagline span {
   background: linear-gradient(90deg, #ffc15e, #ff7a59, #ff5c8a, #a58bff, #38bdf8);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

.nw-ar .nw-logo { background: linear-gradient(135deg, var(--ar-1), var(--ar-2)); }

.nw-desc {
   font-size: 16px;
   line-height: 1.7;
   color: #c3bde6;
}

.nw-desc b { color: #fff; font-weight: 600; }

.nw-feats {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
   margin: 22px 0 18px;
   padding: 0;
   list-style: none;
}

.nw-feats li {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 14px;
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.09);
   color: #ece9ff;
   font-size: 14.5px;
   font-weight: 500;
   line-height: 1.3;
   transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.nw-feats li i {
   flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 34px;
   height: 34px;
   border-radius: 10px;
   background: var(--tint);
   color: var(--c1);
   font-size: 16px;
}

.nw-rb .nw-feats li i { color: #ffab73; }
.nw-wb .nw-feats li i { color: #b5a8ff; }
.nw-ar .nw-feats li i { color: #ff8fb0; }
.nw-th .nw-feats li i { color: #b9e07a; }

.nw-feats li:hover {
   transform: translateY(-3px);
   background: rgba(255, 255, 255, 0.09);
   border-color: var(--c1);
}

.nw-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 28px;
}

.nw-chips span {
   padding: 5px 12px;
   border-radius: 50px;
   border: 1px dashed rgba(255, 255, 255, 0.3);
   color: #cfc9f2;
   font-size: 13px;
}

.nw-chips span:first-child {
   border-style: solid;
   border-color: #34d399;
   color: #6ee7b7;
   font-weight: 600;
}

.nw-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}

.nw-btn,
.nw-btn-ghost {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 14px 26px;
   border-radius: 50px;
   font-size: 16px;
   font-weight: 600;
   text-decoration: none !important;
   transition: transform .25s ease, box-shadow .25s ease, background .25s ease, gap .25s ease;
}

.nw-btn {
   background: linear-gradient(135deg, var(--c1), var(--c2));
   color: #fff !important;
   box-shadow: 0 12px 30px var(--glow);
}

.nw-btn:hover { transform: translateY(-3px); gap: 16px; box-shadow: 0 18px 40px var(--glow); }

.nw-btn-ghost {
   border: 1px solid rgba(255, 255, 255, 0.28);
   color: #fff !important;
   background: rgba(255, 255, 255, 0.04);
}

.nw-btn-ghost:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-3px); }

/*--- Visuel : fenêtre + téléphone + notifications ---*/
.nw-visual { perspective: 1600px; }

.nw-stage {
   position: relative;
   display: block;
   padding: 30px 70px 60px 0;
   text-decoration: none !important;
}

.nw-rev .nw-stage { padding: 30px 0 60px 70px; }

/* Halo coloré derrière la maquette */
.nw-stage::before {
   content: "";
   position: absolute;
   inset: 10% 5%;
   z-index: 0;
   border-radius: 40px;
   background: linear-gradient(135deg, var(--c1), var(--c2));
   filter: blur(60px);
   opacity: .45;
}

.nw-window {
   position: relative;
   z-index: 1;
   display: block;
   overflow: hidden;
   border-radius: 16px;
   background: #fff;
   box-shadow: 0 40px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1);
   transform: rotateY(-10deg) rotateX(5deg);
   transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}

.nw-rev .nw-window { transform: rotateY(10deg) rotateX(5deg); }

.nw-window img { display: block; width: 100%; }

.nw-window-app { background: #16193a; }

.nw-bar {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 14px;
   background: #f1f1f4;
}

.nw-lights { display: flex; gap: 6px; }
.nw-lights i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.nw-lights i:nth-child(2) { background: #febc2e; }
.nw-lights i:nth-child(3) { background: #28c840; }

.nw-url {
   flex: 1;
   padding: 4px 12px;
   border-radius: 8px;
   background: #fff;
   color: #777;
   font-size: 12px;
}

.nw-url i { color: #2f9e44; }

/* Téléphone */
.nw-phone {
   position: absolute;
   z-index: 2;
   right: 0;
   bottom: 0;
   display: block;
   width: 28%;
   min-width: 120px;
   aspect-ratio: 460 / 995;
   padding: 7px;
   border-radius: 30px;
   background: #0d0b1f;
   box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.12);
   transform: rotate(6deg);
   transition: transform .7s cubic-bezier(.2, .8, .2, 1);
   animation: nw-float 6s ease-in-out infinite;
}

.nw-rev .nw-phone { right: auto; left: 0; transform: rotate(-6deg); animation-delay: -3s; }

.nw-phone img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top;
   border-radius: 24px;
}

.nw-notch {
   position: absolute;
   top: 13px;
   left: 50%;
   width: 32%;
   height: 12px;
   border-radius: 10px;
   background: #0d0b1f;
   transform: translateX(-50%);
}

@keyframes nw-float {
   0%, 100% { translate: 0 0; }
   50%      { translate: 0 -12px; }
}

/* Notifications flottantes */
.nw-toast {
   position: absolute;
   z-index: 3;
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 11px 16px 11px 11px;
   border-radius: 16px;
   background: rgba(255, 255, 255, 0.95);
   color: #1f1b3a;
   font-size: 13.5px;
   line-height: 1.3;
   box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
   animation: nw-float 5s ease-in-out infinite;
   white-space: nowrap;
}

.nw-toast small { color: #6b6690; font-size: 12px; }

.nw-toast-ico {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border-radius: 11px;
   background: linear-gradient(135deg, var(--c1), var(--c2));
   color: #fff;
   font-size: 16px;
}

.nw-toast-1 { top: 4px;   left: -18px; animation-delay: -1s; }
.nw-toast-2 { bottom: 16px; left: 12%; animation-delay: -2.5s; }
.nw-rev .nw-toast-1 { left: auto; right: -10px; animation-delay: -1.5s; }
.nw-rev .nw-toast-2 { left: auto; right: 12%; animation-delay: -3.5s; }

/* Petite affiche QR code flottante (Ardoise) */
.nw-qr {
   position: absolute;
   z-index: 3;
   bottom: 10px;
   left: 14%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   padding: 12px 12px 10px;
   border-radius: 16px;
   background: #fff;
   color: #16122a;
   font-size: 13px;
   box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
   transform: rotate(-6deg);
   animation: nw-float 5.5s ease-in-out infinite;
   animation-delay: -1s;
}

.nw-rev .nw-qr { left: auto; right: 14%; transform: rotate(6deg); }

.nw-qr img { display: block; width: 96px; height: 96px; image-rendering: pixelated; }
.nw-qr b { font-weight: 700; letter-spacing: .3px; }

/* Survol : tout se redresse */
.nw-stage:hover .nw-window { transform: rotateY(0) rotateX(0) scale(1.02); }
.nw-stage:hover .nw-phone  { transform: rotate(0deg) translateY(-8px); }

/*--- Responsive ---*/
@media (max-width: 960px) {
   .nw-prod { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-bottom: 90px; }
   .nw-rev .nw-copy { order: 0; }
   .nw-visual { order: -1; max-width: 640px; width: 100%; margin: 0 auto; }
   .nw-window, .nw-rev .nw-window { transform: none; }
}

@media (max-width: 600px) {
   .nw { padding: 0 16px 80px; }
   .nw-marquee { margin: 0 -16px; padding: 12px 0; }
   .nw-track span { font-size: 15px; }
   .nw-head { margin: 56px auto 48px; }
   .nw-stage { padding: 20px 40px 40px 0; }
   .nw-rev .nw-stage { padding: 20px 0 40px 40px; }
   .nw-phone { min-width: 96px; border-radius: 22px; padding: 5px; }
   .nw-phone img { border-radius: 18px; }
   .nw-notch { top: 9px; height: 8px; }
   .nw-toast { font-size: 12px; padding: 8px 12px 8px 8px; gap: 8px; }
   .nw-toast-ico { width: 28px; height: 28px; font-size: 13px; border-radius: 8px; }
   .nw-toast-2 { display: none; }
   .nw-qr { left: 6px; bottom: 4px; padding: 8px 8px 6px; font-size: 11px; }
   .nw-qr img { width: 64px; height: 64px; }
   .nw-rev .nw-qr { left: auto; right: 6px; }
   .nw-toast-1 { left: -6px; }
   .nw-rev .nw-toast-1 { left: auto; right: -6px; }
   .nw-feats { grid-template-columns: minmax(0, 1fr); }
   .nw-actions a { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
   .nw *, .nw::before { animation: none !important; }
}