/* ===========================================================
   CyNoLux — Bande « Travaillons ensemble »
   Posée en fin de page, juste avant le pied de page, sur l'accueil, À propos,
   Services, Packs et le portfolio (liste et fiches).

   Même composition que la bande « Prêt à commencer ? » de mentasys : un bloc
   « nuit » arrondi, une aurore qui dérive lentement derrière, un filigrane
   (ici le logo CyNoLux) et un seul appel, centré. L'or du bouton reste le seul
   point lumineux.

   ⚠️ POURQUOI un fichier à part, chargé par toutes ces pages : l'appel final
   existait en cinq versions (hm-cta, lp-cta, cta-band, cnx-partners__cta…) avec
   chacune sa feuille, et chaque page avait ses mots. Un seul bloc, une seule
   règle. Classes à préfixe ct- : rien n'est hérité des anciennes versions.
   Les images du filigrane sont résolues depuis CE fichier (../img/…), donc
   valables depuis la racine comme depuis /portfolio/.
   =========================================================== */

.ct-wrap { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }

.ct-band {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  padding: clamp(52px, 7vw, 84px) 24px;
  border-radius: var(--r-xl, 40px);
  background: linear-gradient(160deg, var(--navy-800, #0A2258), var(--navy-900, #071938));
  color: #fff;
}

/* Aurore : bleu de marque à gauche et à droite, une touche d'or au centre. */
.ct-aurora {
  position: absolute; z-index: -1; inset: -40% -10%; pointer-events: none;
  background:
    radial-gradient(30% 46% at 22% 62%, rgba(62, 107, 219, .42), transparent 70%),
    radial-gradient(28% 42% at 50% 30%, rgba(253, 185, 19, .16), transparent 70%),
    radial-gradient(30% 46% at 80% 62%, rgba(30, 77, 183, .40), transparent 70%);
  animation: ct-drift 18s ease-in-out infinite alternate;
}
@keyframes ct-drift {
  from { transform: translate3d(-3%, 0, 0) scale(1); }
  to   { transform: translate3d(3%, -4%, 0) scale(1.08); }
}

/* Filigrane : la forme exacte du logo (C, N, ruban) en masque, teinte claire
   très discrète. Il signe le bloc sans gêner la lecture. */
.ct-mark {
  position: absolute; z-index: -1; top: 50%; left: 50%; pointer-events: none;
  width: min(640px, 130vw); aspect-ratio: 1099 / 1002;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(253, 185, 19, .10));
  -webkit-mask: url(../img/cn-c.webp) center / contain no-repeat, url(../img/cn-n.webp) center / contain no-repeat, url(../img/cn-ribbon.webp) center / contain no-repeat;
  mask: url(../img/cn-c.webp) center / contain no-repeat, url(../img/cn-n.webp) center / contain no-repeat, url(../img/cn-ribbon.webp) center / contain no-repeat;
}

.ct-inner { position: relative; max-width: 640px; margin: 0 auto; }
.ct-band h2 {
  color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.15; letter-spacing: -.02em; margin-bottom: 14px;
}
.ct-band p { max-width: 480px; margin: 0 auto 30px; color: rgba(233, 240, 255, .78); line-height: 1.7; }
.ct-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ct-band .btn-ghost {
  color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.ct-band .btn-ghost:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }

@media (max-width: 560px) { .ct-actions .btn { flex: 1 1 100%; } }

@media (prefers-reduced-motion: reduce) { .ct-aurora { animation: none; } }
.cyn-lite .ct-aurora { animation: none; }