/* Prediag, page id 897
   Objectifs
   1) 
   2)
*/

/* Masquer le titre natif si le thème l’affiche */
body.page-id-897 .entry-title,
body.page-id-897 h1.entry-title,
body.page-id-897 h1.wp-block-post-title{
  display: none !important;
}

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

/* 1) Pour mémoire : 
 * Breadcrumb injecté sois le header par functions.php 
 */

/* 2) Conteneur plugin 
 * Conteneur principal (wrapper) : nv-prediag-wrap avec l'ancre body.page-id-897 
 * Wrapper fond plein largeur, commence sous le breadcrumb 
 */

 /* pleine largeur dans le "couloir" du thème */

body.page-id-897 .nv-prediag-wrap{
    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;

    position: relative;
    padding: 50px 0rem;
    background-color: var(--vx-bg); /* fond bleu-gris clair */
    min-height: 100vh;
    overflow: hidden;
}

/* image de fond */
/*body.page-id-897 .nv-prediag-wrap::before{
  content: "";
    position: absolute;
    inset: 0;
    background-image: url("./img/fond_cosmos_bleu_futuriste_1536x1024.jpg");
    background-size: 1536px auto !important;
    background-position: center top !important;
    background-repeat: no-repeat;
    opacity: 1;         
    z-index: 0;
    pointer-events: none;
}
*/

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

  background-image: url("./img/fond_cosmos_bleu_futuriste_1536x1024.jpg");
  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;
}

/*
body.page-id-897 .nv-prediag-wrap::after{
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("./img/fond_cosmos_bleu_futuriste_1536x1024.jpg");
    background-size: 1536px auto;
    background-position: center top;
    background-repeat: repeat-y;
    z-index: 1;
    pointer-events: none;
  }
*/

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

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

  width: min(1536px, 100vw);

  background-image: url("./img/fond_cosmos_bleu_futuriste_1536x1024.jpg");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: repeat-y;

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

/* Le contenu passe au-dessus du fond */
body.page-id-897 .nv-prediag-wrap > *{
  position: relative;
  z-index: 3;
}

/* 
 * Contenu lisible (.nv-prediag-card) centré 
 */
body.page-id-897 .nv-prediag-card{
  max-width: 900px;
  margin: 0 auto;

  background: rgba(255,255,255,0.92);
  border-radius: 14px;
  padding: 20px;
}

.nv-prediag-title{
  margin: 0 0 10px 0;
  font-size: 20px;
  line-height: 1.2;
}

.nv-prediag-text{
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.nv-prediag-actions{
  margin: 14px 0 0 0;
}

/*
.nv-prediag-btn{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.25);
}
*/

.nv-prediag-link{
  margin-left: 10px;
  text-decoration: underline;
}

.nv-prediag-limit{
  font-size: 13px;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.15);
  background: rgba(245,245,245,0.95);
  margin: 0 0 14px 0;
}

/* =========================================================
   BRIQUE 2. FORMULAIRE
   Objectif : aérer, aligner, améliorer la lisibilité
   ========================================================= */

body.page-id-897 .nv-prediag-form{
  margin-top: 18px;
}

/* Chaque question devient un "cartouche" propre */
body.page-id-897 .nv-prediag-field{
  margin: 16px 0;
  padding: 16px 16px 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.78);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* Label plus lisible */
body.page-id-897 .nv-prediag-label{
  display: block;
  margin: 0 0 10px 0;
  font-size: 16px;
  line-height: 1.35;
}

/* Numéro visuellement stable */
body.page-id-897 .nv-prediag-num{
  display: inline-block;
  min-width: 30px;
  opacity: 0.85;
}

/* Étoile rouge obligatoire */
body.page-id-897 .nv-prediag-star{
  color: #d11;
}

/* Champ principal, plus grand, plus confortable */
body.page-id-897 .nv-prediag-control{
  width: 100%;
  max-width: 720px;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.98);
  font-size: 15px;
  line-height: 1.35;
}

/* Focus propre, sans agressivité */
body.page-id-897 .nv-prediag-control:focus{
  outline: none;
  border-color: rgba(30,80,200,0.55);
  box-shadow: 0 0 0 4px rgba(30,80,200,0.14);
}

/* Bloc poids : discret, aligné, sur une ligne */
body.page-id-897 .nv-prediag-weight{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.10);

  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

body.page-id-897 .nv-prediag-weight-label{
  margin: 0;
  font-size: 14px;
  opacity: 0.85;
}

/* Input poids compact */
body.page-id-897 .nv-prediag-weight-input{
  width: 90px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.98);
  font-size: 14px;
}

body.page-id-897 .nv-prediag-weight-hint{
  margin: 0;
  font-size: 13px;
  opacity: 0.75;
}

/* Consentements plus lisibles */
body.page-id-897 .nv-prediag-consent{
  margin-top: 18px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.85);
}

body.page-id-897 .nv-prediag-check{
  display: block;
  margin: 10px 0;
  font-size: 14px;
  line-height: 1.35;
}

/* Bouton et actions */
body.page-id-897 .nv-prediag-actions{
  margin-top: 18px;
}

/* Messages erreurs et résultats, plus propres */
body.page-id-897 .nv-prediag-errors,
body.page-id-897 .nv-prediag-result{
  margin-top: 16px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.85);
}

body.page-id-897 .nv-prediag-errors{
  border-color: rgba(160,0,0,0.25);
  background: rgba(255,245,245,0.92);
}

body.page-id-897 .nv-prediag-result{
  border-color: rgba(30,80,200,0.20);
  background: rgba(245,250,255,0.92);
}

/* Responsive */
@media (max-width: 720px){
  body.page-id-897 .nv-prediag-field{
    padding: 14px;
  }

  body.page-id-897 .nv-prediag-control{
    max-width: 100%;
  }

  body.page-id-897 .nv-prediag-weight{
    gap: 10px;
  }
}

/* =========================================================
   BRIQUE 2. PAGE DE RETOUR (RÉSULTATS + RÉCAP)
   Objectif : aérer, hiérarchiser, améliorer la lecture
   ========================================================= */

/* Bloc résultat déjà stylé, on renforce légèrement la structure */
body.page-id-897 .nv-prediag-result{
  margin-top: 18px;
  padding: 16px;
  border-radius: 16px;
}

body.page-id-897 .nv-prediag-result-title{
  font-size: 16px;
  margin-bottom: 8px;
}

body.page-id-897 .nv-prediag-result-line{
  margin-top: 8px;
  line-height: 1.45;
}

/* Le bloc recap global */
body.page-id-897 .nv-prediag-recap{
  margin-top: 22px;
  padding-top: 6px;
}

/* Titre trop imposant : on le ramène à une hiérarchie cohérente */
body.page-id-897 .nv-prediag-subtitle{
  font-size: 18px;
  line-height: 1.25;
  margin: 0 0 12px 0;
}

/* Liste numérotée aérée */
body.page-id-897 .nv-prediag-ol{
  margin: 0;
  padding-left: 22px;
}

/* Chaque item comme une petite carte légère */
body.page-id-897 .nv-prediag-ol > li{
  margin: 10px 0;
  padding: 12px 12px 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.68);
}

/* Question, réponse, poids : respirations */
body.page-id-897 .nv-prediag-q{
  display: block;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 6px;
}

body.page-id-897 .nv-prediag-a{
  display: block;
  line-height: 1.35;
  margin: 0 0 6px 0;
}

body.page-id-897 .nv-prediag-w{
  display: block;
  font-size: 13px;
  opacity: 0.80;
  margin: 0;
}

/* Bouton "Modifier et relancer" mieux posé */
body.page-id-897 .nv-prediag-actions{
  margin-top: 18px;
}

/* Responsive : on réduit un peu les paddings sur mobile */
@media (max-width: 720px){
  body.page-id-897 .nv-prediag-ol > li{
    padding: 11px;
  }
  body.page-id-897 .nv-prediag-subtitle{
    font-size: 17px;
  }
}

@media print {
  body * {
    visibility: hidden;
  }

  .nv-prediag-print,
  .nv-prediag-print * {
    visibility: visible;
  }

  .nv-prediag-print {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }

  .nv-prediag-actions {
    display: none;
  }
}

.nv-prediag-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.78);
  color: #0b2a4a;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}

.nv-prediag-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

.nv-prediag-btn:active{
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}