/* ==========================================================
   NUTRI QUESTIONNAIRE v2 — Feuille de styles
   ========================================================== */

:root {
	--nq-blue:       #10152D;
	--nq-yellow:     #F5B027;
	--nq-warm-white: #F8F7F4;
	--nq-white:      #FFFFFF;
	--nq-text:       #333333;
	--nq-grey-light: #EEEEEE;
	--nq-error:      #C62828;
	--nq-success:    #2E7D32;
}

/* ── Reset ciblé ────────────────────────────────────────── */
#nq-wrapper,
#nq-wrapper * {
	box-sizing: border-box;
	margin:     0;
	padding:    0;
}
#nq-wrapper ul  { list-style: none; }
#nq-wrapper a   { text-decoration: none; }
#nq-wrapper img { display: block; max-width: 100%; }

/* ==========================================================
   ÉTAPE 1 — SAISIE DU CODE
   ========================================================== */

#nq-step-code {
	min-height:      100vh;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
}

#nq-step-code .nq-code-bg {
	min-height:      100vh;
	background:      var(--nq-blue);
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	padding:         24px 16px;
	/* neutralise les paddings du thème */
	margin-left:  -9999px;
	margin-right: -9999px;
	padding-left:  9999px;
	padding-right: 9999px;
}

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

.nq-code-card {
	background:    var(--nq-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;
}

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

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

.nq-code-form {
	display:        flex;
	flex-direction: column;
	gap:            14px;
}

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

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

.nq-btn-access {
	background:     var(--nq-yellow);
	color:          var(--nq-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%;
}
.nq-btn-access:hover   { opacity: 0.92; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(245,176,39,0.45); }
.nq-btn-access:active  { transform: translateY(0); }
.nq-btn-access:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

/* ==========================================================
   ÉTAPE 2 — QUESTIONNAIRE
   ========================================================== */

#nq-step-questionnaire {
	background: var(--nq-warm-white);
	min-height: 100vh;
}

/* ── Barre mobile (masquée sur desktop) ─────────────────── */
.nq-mobile-bar {
	position:   sticky;
	top:        0;
	z-index:    200;
	background: var(--nq-blue);
	box-shadow: 0 3px 16px rgba(0, 0, 0, 0.25);
}
.admin-bar .nq-mobile-bar { top: 32px; }

.nq-mobile-bar-inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         13px 20px;
}

.nq-logo-sm {
	height:     46px;
	width:      auto;
	object-fit: contain;
}

.nq-section-counter {
	color:       var(--nq-yellow);
	font-size:   15px;
	font-weight: 700;
	white-space: nowrap;
}

/* Barre de progression mobile */
.nq-progress-bar-container {
	background: rgba(255, 255, 255, 0.2);
	height:     8px;
	overflow:   hidden;
}
.nq-progress-bar {
	height:     100%;
	background: var(--nq-yellow);
	transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Mise en page deux colonnes ─────────────────────────── */
.nq-layout {
	display:     flex;
	align-items: stretch;
	min-height:  calc(100vh - 58px);
}

/* Colonne gauche : sections (65%) */
.nq-col-content {
	flex:  0 0 65%;
	width: 65%;
}

.nq-sections-container {
	padding: 40px 32px 60px;
}

/* Colonne droite : sidebar (35%) */
.nq-col-sidebar {
	flex:       0 0 35%;
	width:      35%;
	background: var(--nq-blue);
	position:   sticky;
	top:        58px;
	height:     calc(100vh - 58px);
	overflow-y: auto;
}
.admin-bar .nq-col-sidebar {
	top:    90px;
	height: calc(100vh - 90px);
}

.nq-sidebar-inner {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	padding:        48px 24px 40px 28px;
	gap:            24px;
}

.nq-sidebar-logo {
	height:      80px;
	width:       auto;
	object-fit:  contain;
	flex-shrink: 0;
}

.nq-sidebar-counter {
	color:       var(--nq-yellow);
	font-size:   17px;
	font-weight: 800;
	text-align:  center;
	line-height: 1.4;
}

.nq-sidebar-progress-wrap {
	width:         100%;
	background:    rgba(255, 255, 255, 0.18);
	height:        8px;
	border-radius: 3px;
	overflow:      hidden;
}
.nq-sidebar-progress {
	height:     100%;
	background: var(--nq-yellow);
	transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.nq-sidebar-divider {
	width:      100%;
	border:     none;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin:     0;
}

.nq-sidebar-instructions {
	background:    rgba(255, 255, 255, 0.07);
	border-radius: 10px;
	border-left:   3px solid var(--nq-yellow);
	padding:       18px 20px;
	width:         100%;
}
.nq-sidebar-instructions p {
	color:       rgba(255, 255, 255, 0.82);
	font-size:   14px;
	line-height: 1.75;
	font-style:  italic;
}

/* ── Animation section ──────────────────────────────────── */
.nq-section { animation: nq-fadein 0.3s ease both; }

@keyframes nq-fadein {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ── Carte de section ───────────────────────────────────── */
.nq-section-card {
	background:    var(--nq-white);
	border-radius: 14px;
	box-shadow:    0 2px 20px rgba(0, 0, 0, 0.07);
	padding:       36px 36px 28px;
	margin-bottom: 28px;
}

.nq-section-title {
	font-size:      20px;
	font-weight:    700;
	color:          var(--nq-blue);
	text-transform: uppercase;
	text-align:     center;
	border-left:    4px solid var(--nq-yellow);
	padding-left:   12px;
	margin-bottom:  32px;
}

/* ── Liste d'items ──────────────────────────────────────── */
.nq-items-list {
	display:        flex;
	flex-direction: column;
	gap:            2px;
}

.nq-item {
	border-radius: 7px;
	transition:    background 0.15s;
}
.nq-item:hover { background: rgba(16, 21, 45, 0.05); }

.nq-checkbox-label {
	display:     flex;
	align-items: flex-start;
	gap:         13px;
	padding:     10px 12px;
	cursor:      pointer;
	width:       100%;
	user-select: none;
}

.nq-checkbox-input {
	position:       absolute;
	opacity:        0;
	width:          0;
	height:         0;
	pointer-events: none;
}

.nq-custom-checkbox {
	flex-shrink:   0;
	width:         20px;
	height:        20px;
	border:        2px solid var(--nq-blue);
	border-radius: 5px;
	background:    var(--nq-white);
	transition:    background 200ms ease, border-color 200ms ease, background-image 200ms ease;
	margin-top:    2px;
	position:      relative;
}
.nq-checkbox-input:checked + .nq-custom-checkbox {
	background-color:    var(--nq-yellow);
	border-color:        var(--nq-yellow);
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8l3.5 3.5L13 4'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: center;
	background-size:     12px 12px;
}

.nq-item-text {
	color:       var(--nq-text);
	font-size:   15px;
	line-height: 1.8;
}

/* ── Boutons de navigation ──────────────────────────────── */
.nq-nav-buttons {
	display:        flex;
	flex-direction: column;
	align-items:    stretch;
	gap:            0;
}

.nq-btn {
	display:        block;
	width:          100%;
	text-align:     center;
	border-radius:  10px;
	padding:        14px 36px;
	font-size:      16px;
	font-weight:    700;
	cursor:         pointer;
	transition:     all 0.2s;
	border:         2px solid transparent;
	margin-top:     12px;
	white-space:    nowrap;
}

.nq-btn-prev { background: transparent; border-color: var(--nq-blue); color: var(--nq-blue); }
.nq-btn-prev:hover { background: rgba(16, 21, 45, 0.06); }

.nq-btn-next { background: var(--nq-blue); border-color: var(--nq-blue); color: var(--nq-white); }
.nq-btn-next:hover { opacity: 0.85; }

.nq-btn-submit { background: var(--nq-yellow); border-color: var(--nq-yellow); color: var(--nq-blue); }
.nq-btn-submit:hover { opacity: 0.9; box-shadow: 0 4px 14px rgba(245,176,39,0.4); }

.nq-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ==========================================================
   ÉTAPE 3 — CONFIRMATION
   ========================================================== */

#nq-step-confirmation .nq-confirmation-bg {
	min-height:      100vh;
	background:      var(--nq-blue);
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         24px 16px;
	margin-left:  -9999px;
	margin-right: -9999px;
	padding-left:  9999px;
	padding-right: 9999px;
}

.nq-confirmation-card {
	background:    var(--nq-white);
	border-radius: 18px;
	box-shadow:    0 4px 32px rgba(0, 0, 0, 0.3);
	padding:       56px 44px;
	max-width:     520px;
	width:         100%;
	text-align:    center;
}

.nq-confirm-logo {
	height:        80px;
	width:         auto;
	object-fit:    contain;
	margin:        0 auto 24px;
	/* logo blanc sur fond blanc → inversion */
	filter:        invert(1) brightness(0);
}

.nq-check-icon {
	width:           72px;
	height:          72px;
	background:      var(--nq-success);
	color:           var(--nq-white);
	font-size:       36px;
	font-weight:     900;
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	margin:          0 auto 28px;
	box-shadow:      0 4px 16px rgba(46, 125, 50, 0.35);
}

.nq-confirm-title {
	color:         var(--nq-blue);
	font-size:     26px;
	font-weight:   800;
	margin-bottom: 16px;
}

.nq-confirm-text {
	color:       #5a6070;
	font-size:   16px;
	line-height: 1.75;
}

/* ==========================================================
   DESKTOP (≥ 768px) — sidebar visible, barre mobile masquée
   ========================================================== */

@media (min-width: 768px) {
	.nq-mobile-bar { display: none; }

	.nq-layout { min-height: 100vh; }

	.nq-col-sidebar {
		top:    0;
		height: 100vh;
	}
	.admin-bar .nq-col-sidebar {
		top:    32px;
		height: calc(100vh - 32px);
	}
}

/* ==========================================================
   MOBILE (< 768px) — une seule colonne
   ========================================================== */

@media (max-width: 767px) {

	/* Étape 1 */
	.nq-logo-outside {
		height:        80px;
		max-height:    80px;
		margin-bottom: -40px;
	}
	.nq-code-card {
		padding:       68px 24px 36px;
		border-radius: 14px;
	}
	.nq-title { font-size: 24px; }

	/* Étape 2 */
	.nq-col-sidebar  { display: none; }
	.nq-col-content  { flex: 0 0 100%; width: 100%; }

	.nq-sections-container {
		padding: 20px 0 48px;
	}

	.nq-section-card {
		border-radius: 0;
		padding:       24px 16px 20px;
		box-shadow:    none;
		border-bottom: 1px solid #e8e8e8;
	}

	.nq-nav-buttons {
		padding: 0 16px;
	}

	/* Étape 3 */
	.nq-confirmation-card {
		padding:       36px 24px;
		border-radius: 14px;
	}
}