/* ==========================================================
   JULIE NUTRITION HUB — Feuille de styles
   Harmonisé avec Nutri Questionnaire v2
   ========================================================== */

:root {
	--jnh-blue:       #10152D;
	--jnh-yellow:     #F5B027;
	--jnh-warm-white: #F8F7F4;
	--jnh-white:      #FFFFFF;
	--jnh-text:       #333333;
	--jnh-error:      #C62828;
}

/* ── Reset ciblé ────────────────────────────────────────── */
#jnh-wrapper,
#jnh-wrapper * {
	box-sizing: border-box;
	margin:     0;
	padding:    0;
}
#jnh-wrapper img { display: block; max-width: 100%; }

/* ── Animation ──────────────────────────────────────────── */
@keyframes jnh-fadein {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}
#jnh-step-code,
#jnh-step-choix { animation: jnh-fadein 0.3s ease both; }

/* ==========================================================
   ÉTAPES 1 & 2 — Fond plein écran bleu (full-bleed)
   ========================================================== */

#jnh-step-code,
#jnh-step-choix {
	min-height: 100vh;
}

/* Wrapper full-bleed : étend le fond bleu au-delà du conteneur WP */
.jnh-bg {
	min-height:      100vh;
	background:      var(--jnh-blue);
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	padding:         24px 16px;
	/* Technique full-bleed WordPress */
	margin-left:  -9999px;
	margin-right: -9999px;
	padding-left:  9999px;
	padding-right: 9999px;
}

/* Logo flottant au-dessus de la carte */
.jnh-logo-outside {
	height:        120px;
	max-height:    120px;
	width:         auto;
	object-fit:    contain;
	display:       block;
	margin-bottom: -50px;
	position:      relative;
	z-index:       2;
}

/* ==========================================================
   CARTE CODE / CARTE CHOIX
   ========================================================== */

.jnh-code-card,
.jnh-choix-card {
	background:    var(--jnh-white);
	border-radius: 18px;
	box-shadow:    0 12px 48px rgba(0, 0, 0, 0.35);
	padding:       80px 44px 52px;
	max-width:     480px;
	width:         100%;
	text-align:    center;
	position:      relative;
	z-index:       1;
}

.jnh-title {
	color:         var(--jnh-blue);
	font-size:     30px;
	font-weight:   800;
	line-height:   1.2;
	margin-bottom: 12px;
}

.jnh-subtitle {
	color:         #5a6070;
	font-size:     15px;
	line-height:   1.6;
	margin-bottom: 36px;
}

/* ── Formulaire code ─────────────────────────────────────── */
.jnh-code-form {
	display:        flex;
	flex-direction: column;
	gap:            14px;
}

#jnh-code-input {
	border:         2px solid #d6d9e0;
	border-radius:  10px;
	padding:        15px 18px;
	font-size:      17px;
	color:          var(--jnh-text);
	outline:        none;
	transition:     border-color 0.2s, box-shadow 0.2s;
	text-align:     center;
	letter-spacing: 3px;
	font-weight:    600;
	width:          100%;
}
#jnh-code-input:focus {
	border-color: var(--jnh-blue);
	box-shadow:   0 0 0 3px rgba(16, 21, 45, 0.12);
}

.jnh-error-msg {
	color:         var(--jnh-error);
	font-size:     13px;
	padding:       10px 14px;
	background:    rgba(198, 40, 40, 0.08);
	border-radius: 8px;
	border-left:   3px solid var(--jnh-error);
	text-align:    left;
}

/* ── Bouton accéder ──────────────────────────────────────── */
.jnh-btn-access {
	background:     var(--jnh-yellow);
	color:          var(--jnh-blue);
	border:         none;
	border-radius:  10px;
	padding:        15px 32px;
	font-size:      16px;
	font-weight:    800;
	cursor:         pointer;
	transition:     opacity 0.2s, transform 0.15s, box-shadow 0.2s;
	letter-spacing: 0.5px;
	width:          100%;
}
.jnh-btn-access:hover   { opacity: 0.92; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(245,176,39,0.45); }
.jnh-btn-access:active  { transform: translateY(0); }
.jnh-btn-access:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

/* ==========================================================
   CARTE CHOIX DE MODULE
   ========================================================== */

.jnh-choix-buttons {
	display:        flex;
	flex-direction: column;
	gap:            16px;
}

.jnh-choix-btn {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            6px;
	background:     var(--jnh-warm-white);
	border:         2px solid #d6d9e0;
	border-radius:  14px;
	padding:        24px 20px;
	cursor:         pointer;
	transition:     border-color 0.2s, box-shadow 0.2s, transform 0.15s;
	width:          100%;
	text-align:     center;
	font-family:    inherit;
}
.jnh-choix-btn:hover {
	border-color: var(--jnh-yellow);
	box-shadow:   0 4px 20px rgba(245,176,39,0.25);
	transform:    translateY(-2px);
}

.jnh-choix-icon  { font-size: 32px; line-height: 1; }
.jnh-choix-label { color: var(--jnh-blue); font-size: 17px; font-weight: 800; }
.jnh-choix-desc  { color: #5a6070; font-size: 13px; }

/* ==========================================================
   MOBILE (< 768px)
   ========================================================== */

@media (max-width: 767px) {
	.jnh-logo-outside {
		height:        80px;
		max-height:    80px;
		margin-bottom: -40px;
	}
	.jnh-code-card,
	.jnh-choix-card {
		padding:       68px 24px 36px;
		border-radius: 14px;
	}
	.jnh-title { font-size: 24px; }
}