/* Section centrale */

.section-centrale-main {
  margin: 0;
}

.sc-hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 90px 20px 40px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Image de fond */
.sc-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--sc-hero-bg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

/* Contenu au dessus */
.sc-hero-inner{
  position: relative;
  z-index: 1;
}

/* Voile sombre */
.sc-overlay {
  position: relative;
  width: 100%;
  max-width: 1200px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 24px;
  padding: 36px 36px 44px;
  box-sizing: border-box;
}

/* Contenu interne */
.sc-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Logo + slogans centrés */
.sc-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

/* novatra */
.sc-brand {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
}

/* Bloc slogans */
.sc-slogan {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #ffffff;
}

/* Ligne 1 (petit) */
.sc-slogan-small {
  font-size: 20px;
  font-weight: 600;
}

/* Ligne 1 (petit) */
.sc-slogan-small2 {
  font-size: 20px;
  font-weight: 600;
  margin : 10px auto; 
}

/* Ligne 2 (gros) */
.sc-slogan-big {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
}

/* Rangée de pavés */
.sc-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* Pavé cliquable */
.sc-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 22px 28px;
  min-width: 260px;
  min-height: 140px;

  text-decoration: none;
  border-radius: 18px;
  color: #ffffff;
  text-align: center;

  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

/* Ligne principale du pavé */
.sc-btn-line1 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* Sous-ligne */
.sc-btn-line2 {
  font-size: 17px; 
  font-weight: 400;
}

.sc-btn{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 14px 34px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.12);
  text-shadow: 0 2px 12px rgba(0,0,0,0.40);
  background-size: 140% 140%;
  background-position: 28% 28%;
  transition: transform 220ms ease, box-shadow 220ms ease, background-position 420ms ease;
}

.sc-btn > *{
  position: relative;
  z-index: 2;
}

.sc-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 90% at 18% 18%, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(140% 120% at 92% 102%, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.02));
  pointer-events:none;
  z-index: 1;
}


/* Couleurs des 4 pavés */

/* 1. Bleu vers jaune, avec un passage turquoise pour une transition propre */
/* 2. Rouge vers cyan, avec un passage violet pour éviter le gris au milieu */
/* 3. Vert vers magenta, avec un passage bleu pour une transition plus élégante */
/* 4. */ 

.sc-btn-1{
  background: linear-gradient(135deg, #0b33ff 0%, #1aa7c6 52%, #ffd84d 100%); 
  background-image: url("https://www.valyntis.com/wp-content/themes/novatra-child/assets/img/JBC%20Cosmos%20Matrix1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  }

.sc-btn-2{
  background: linear-gradient(135deg, #ff2a2a 0%, #b24cff 52%, #00eaff 100%); 
  background-image: url("https://www.valyntis.com/wp-content/themes/novatra-child/assets/img/JBC_visuel_reseau_abstrait_1920x1080.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sc-btn-3{
  background: linear-gradient(135deg, #18f05a 0%, #2a63ff 52%, #ff2fd6 100%); 
  background-image: url("https://www.valyntis.com/wp-content/themes/novatra-child/assets/img/JBC%20Cosmos%20Matrix1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sc-btn-4{
  background: linear-gradient(135deg, #ff8a1a 0%, #ffc84d 38%, #12b176 100%);
  background-image:
    linear-gradient(135deg, rgba(11, 255, 92, 0.85) 0%, rgba(26, 120, 198, 0.85) 52%, rgba(113, 77, 255, 0.85) 100%),
    url("https://www.valyntis.com/wp-content/themes/novatra-child/assets/img/JBC%20Cosmos%20Matrix1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Survol */
.sc-btn:hover, 
.sc-btn:focus {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
  opacity: 0.97;
}

.sc-btn:hover,
.sc-btn:focus{
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.14);
  background-position: 70% 70%;
  opacity: 0.97;  
}


/* Responsive iPhone & co */
@media (max-width: 768px) {
  .sc-hero {
    min-height: 100vh;
    padding: 70px 16px 32px;
  }

  .sc-overlay {
    padding: 26px 20px 32px;
  }

  .sc-slogan-small {
    font-size: 18px;
  }

  .sc-slogan-big {
    font-size: 24px;
  }

  .sc-buttons {
    justify-content: flex-start;
  }

  .sc-btn {
    width: 100%;
    max-width: 380px;
    min-height: 130px;
    padding: 18px 22px;
  }

  .sc-btn-line1 {
    font-size: 18px;
  }

  .sc-btn-line2 {
    font-size: 16px;
  }
}



/* =========================================================
   PAGE "SECTION CENTRALE" (ID 684) : intégration dans WordPress
   ========================================================= */

/* 1. Cacher le titre WordPress "Section centrale" */
body.page-id-684 .wp-block-post-title,
body.page-id-684 .entry-title,
body.page-id-684 .entry-header,
body.page-id-684 h1 {
  display: none;
}

/* 2. Supprimer l’espace entre le header et le contenu */
body.page-id-684 .wp-site-blocks,
body.page-id-684 main,
body.page-id-684 .site-main,
body.page-id-684 .entry-content,
body.page-id-684 .wp-block-post-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Le bloc shortcode ne rajoute pas de marge en haut */
body.page-id-684 .wp-block-shortcode {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3. Conteneur de la section centrale : pas de marge, pas de padding */
body.page-id-684 .section-centrale-main {
  margin: 0;
  padding: 0;
}

/* 4. Héros en pleine largeur d'écran */
body.page-id-684 .section-centrale-main .sc-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);   /* sort de la colonne pour prendre toute la largeur */
}

/* 5. On sécurise le fond en "cover" sur toute la zone */
body.page-id-684 .section-centrale-main .sc-hero,
body.page-id-684 .section-centrale-main .sc-overlay {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


/* -------------------------------------------------
   PAGE "Section centrale" (ID 684) :
   Supprimer le spacer au-dessus du contenu
   ------------------------------------------------- */

body.page-id-684 .wp-block-spacer {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* -------------------------------------------------
   PAGE "Section centrale" (ID 684) :
   Supprimer le titre principal
   ------------------------------------------------- */

body.page-id-684 .h1.wp-block-post-title {
    display: none !important;
}