/* ==========================================================
   BRIQUE 1 VERSION 1
   Hub CTA page 1037
   Reprise esthétique inspirée de votre copie STELLYX
   Objectifs
   Conteneur central beaucoup plus large
   Panneau premium sombre translucide
   Cartes larges en dégradés propres et lisibles
   Aucun chevauchement de boutons
   Trois colonnes sur desktop seulement si la largeur le permet
   ========================================================== */

/* Masquer le titre natif WordPress */
body.page-id-1037 .entry-title,
body.page-id-1037 h1.entry-title,
body.page-id-1037 h1.wp-block-post-title{
  display: none !important;
}

/* Supprimer les spacers Gutenberg */
body.page-id-1037 .wp-block-spacer{
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Déverrouiller les conteneurs parent du thème sur cette page */
body.page-id-1037 .site-main,
body.page-id-1037 .content-area,
body.page-id-1037 .container,
body.page-id-1037 .site-content,
body.page-id-1037 .wp-site-blocks,
body.page-id-1037 main,
body.page-id-1037 #primary,
body.page-id-1037 #content{
  max-width: none !important;
  width: 100% !important;
}

/* Variables */
body.page-id-1037{
  --nv-white: rgba(255,255,255,0.94);
  --nv-white-2: rgba(255,255,255,0.82);
  --nv-white-3: rgba(255,255,255,0.70);

  --nv-panel-a: rgba(19, 82, 209, 0.62);
  --nv-panel-b: rgba(40, 81, 163, 0.44);

  --nv-border: rgba(255,255,255,0.14);

  --nv-shadow-panel: 0 30px 90px rgba(0,0,0,0.50);
  --nv-shadow-card: 0 18px 44px rgba(0,0,0,0.34);

  --nv-radius-panel: 28px;
  --nv-radius-card: 20px;

  --nv-btn-bg: rgba(10,12,18,0.22);
  --nv-btn-bg-hover: rgba(10,12,18,0.30);
  --nv-btn-border: rgba(255,255,255,0.26);
}

/* Bloc global - Pleine largeur dans le "couloir" du thème */
body.page-id-1037 .nv-cta-hub{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    transform: none !important;
    box-sizing: border-box;
}

body.page-id-1037 .nv-cta-hub{
  position: relative;
  padding: 60px 0rem;
  background-color: var(--vx-bg); /* fond bleu-gris clair */
  min-height: calc(100vh - 150px);
  overflow: hidden;
}

/* calque 1 : remplissage pleine largeur, flouté, sans déformation */
body.page-id-1037 .nv-cta-hub::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image: var(--bg_url);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;

  filter: blur(18px);
  transform: scale(1.08);

  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

/* calque 2 : image nette, centrée, limitée à 1536 px, sans déformation */
body.page-id-1037 .nv-cta-hub::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  left: 50%;
  transform: translateX(-50%);

  /* width: min(1536px, 100vw);*/
  width: min(1536px, 100%);

  /* background:
  radial-gradient(circle at 18% 12%, rgba(0,170,255,0.10), rgba(0,0,0,0.00) 55%),
  radial-gradient(circle at 80% 18%, rgba(170,90,255,0.10), rgba(0,0,0,0.00) 55%),
  linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.46));
  */
  background-image: var(--bg_url);
  background-size: 100% auto;
  background-position: center top;
  background-repeat: repeat-y;

  opacity: 1;
  z-index: 1;
  pointer-events: none;
}


/* Conteneur de centrage, très large, visible immédiatement */
body.page-id-1037 .nv-cta-hub__wrap{
  position: relative;
  z-index: 2;
  max-width: 1960px;
  width: calc(100% - 120px);
  margin: 0 auto;
  padding: 15px 0 2cqmax
}

/* Panneau central */
body.page-id-1037 .nv-cta-hub__content-bg{
  position: absolute;
  inset: 0;
  border-radius: var(--nv-radius-panel);
  background: linear-gradient(180deg, var(--nv-panel-a), var(--nv-panel-b));
  border: 1px solid var(--nv-border);
  box-shadow: var(--nv-shadow-panel);
  z-index: 0;
  overflow: hidden;
  /* backdrop-filter: blur(14px);*/
  backdrop-filter: blur(14px);
}

/* Légers halos internes, pas agressifs */
body.page-id-1037 .nv-cta-hub__content-bg::before{
  content: "";
  position: absolute;
  inset: -2px;
  /*background:
    radial-gradient(circle at 20% 25%, rgba(0,180,255,0.12), rgba(0,0,0,0.00) 58%),
    radial-gradient(circle at 52% 18%, rgba(255,100,180,0.08), rgba(0,0,0,0.00) 58%),
    radial-gradient(circle at 84% 28%, rgba(160,90,255,0.12), rgba(0,0,0,0.00) 58%);
  */
    pointer-events: none;
}

/* Contenu */
body.page-id-1037 .nv-cta-hub__content{
  position: relative;
  z-index: 1;
  /*padding: 46px 64px 42px;*/
  padding: 30px 30px 42px;
  color: var(--nv-white);
}

/* Head */
body.page-id-1037 .nv-cta-hub__head{
  text-align: center;
  max-width: 1280px;
  margin: 0 auto 28px;
}

body.page-id-1037 .nv-cta-hub__title{
  margin: 0 0 10px;
  font-size: 60px;
  line-height: 1.06;
  letter-spacing: -0.2px;
  color: var(--nv-white);
  text-shadow: 0 12px 30px rgba(0,0,0,0.34);
}

body.page-id-1037 .nv-cta-hub__lead{
  margin: 0 auto;
  max-width: 980px;
  line-height: 1.65;
  color: var(--nv-white-2);
}

/* Grille, trois colonnes seulement si confortable */
body.page-id-1037 .nv-cta-hub__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 30px;
  align-items: stretch;
}

/* Cartes, grandes tiles, lisibles */
body.page-id-1037 .nv-cta-card{
  border-radius: var(--nv-radius-card);
  padding: 28px 28px 22px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: var(--nv-shadow-card);

  background: linear-gradient(135deg, rgba(40,120,255,0.70), rgba(70,220,160,0.58));
  color: rgba(255,255,255,0.96);

  display: flex;
  flex-direction: column;
  gap: 12px;

  min-height: 240px;
  overflow: hidden;
  position: relative;
}

/* Dégradés, inspirés de la copie */
body.page-id-1037 .nv-cta-hub__grid .nv-cta-card:nth-child(1){
  background: linear-gradient(135deg, rgba(40,120,255,0.70), rgba(70,220,160,0.58));
}

body.page-id-1037 .nv-cta-hub__grid .nv-cta-card:nth-child(2){
  background: linear-gradient(135deg, rgba(255,70,120,0.66), rgba(120,90,255,0.60));
}

body.page-id-1037 .nv-cta-hub__grid .nv-cta-card:nth-child(3){
  background: linear-gradient(135deg, rgba(0,190,255,0.60), rgba(160,80,255,0.58));
}

/* Halo léger en coin, comme sur l’exemple */
body.page-id-1037 .nv-cta-card::after{
  content: "";
  position: absolute;
  inset: -40px -40px auto auto;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  filter: blur(2px);
  transform: rotate(12deg);
  pointer-events: none;
}

/* Titres et textes */
body.page-id-1037 .nv-cta-card__title{
  line-height: 1.12;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  color: rgba(255,255,255,0.96);
  margin-bottom: 12px;
  text-shadow: 0 12px 26px rgba(0,0,0,0.20);
  max-width: 92%;
}

body.page-id-1037 .nv-cta-card__text{
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  max-width: 92%;
}

/* Boutons, pas de min width agressif, pas de chevauchement */
body.page-id-1037 .nv-cta-btn{
  margin-top: auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 54px;
  width: min(320px, 88%);
  padding: 0 26px;

  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;

  color: rgba(255,255,255,0.98) !important;
  background: var(--nv-btn-bg);
  border: 1px solid var(--nv-btn-border);
  box-shadow: 0 18px 36px rgba(0,0,0,0.26);
  backdrop-filter: blur(10px);

  font-weight: 700;
  letter-spacing: 0.2px;

  transition: transform 160ms ease, filter 160ms ease, background 160ms ease;
}

body.page-id-1037 .nv-cta-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.05) saturate(1.05);
  background: var(--nv-btn-bg-hover);
}

body.page-id-1037 .nv-cta-btn:active{
  transform: translateY(0);
}

/* Note */
body.page-id-1037 .nv-cta-hub__note{
  margin: 24px auto 0;
  max-width: 1300px;
  text-align: center;
  line-height: 1.6;
  color: var(--nv-white-3);
}

/* Responsive
   Dès que l’écran est trop étroit, on empile pour rester propre.
   Vous gardez ainsi une vraie esthétique, sans compression. */
@media (max-width: 1200px){
  body.page-id-1037 .nv-cta-hub__wrap{
    width: calc(100% - 28px);
    padding: 46px 0 60px;
  }

  body.page-id-1037 .nv-cta-hub__content{
    padding: 30px 22px 22px;
  }

  body.page-id-1037 .nv-cta-hub__grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body.page-id-1037 .nv-cta-card{
    min-height: auto;
  }

  body.page-id-1037 .nv-cta-btn{
    width: min(340px, 92%);
  }
}