/* ==========================================================
   JULIE RECUEIL ALIMENTAIRE — Feuille de styles
   Harmonisé avec Nutri Questionnaire v2
   ========================================================== */

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

/* ── Reset ciblé ────────────────────────────────────────── */
#jra-wrapper,
#jra-wrapper * {
	box-sizing: border-box;
	margin:     0;
	padding:    0;
}
#jra-wrapper input,
#jra-wrapper select,
#jra-wrapper button,
#jra-wrapper textarea {
	font-family: inherit;
}
#jra-wrapper img { display: block; max-width: 100%; }

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

/* ==========================================================
   ÉTAPE 1 — INIT (fond bleu full-bleed)
   ========================================================== */

#jra-step-init {
	min-height: 100vh;
}

/* Wrapper full-bleed : étend le fond bleu au-delà du conteneur WP */
.jra-init-bg {
	min-height:      100vh;
	background:      var(--jra-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 */
.jra-logo-outside {
	height:        120px;
	max-height:    120px;
	width:         auto;
	object-fit:    contain;
	display:       block;
	margin-bottom: -50px;
	position:      relative;
	z-index:       2;
}

/* ==========================================================
   CARTE GÉNÉRIQUE
   ========================================================== */

.jra-card {
	background:    var(--jra-white);
	border-radius: 14px;
	box-shadow:    0 2px 20px rgba(0, 0, 0, 0.07);
	padding:       32px 36px 28px;
	margin-bottom: 20px;
	width:         100%;
}

/* Carte d'init (sur fond bleu) */
#jra-step-init .jra-card {
	max-width:  480px;
	padding-top: 80px;
	box-shadow:  0 12px 48px rgba(0, 0, 0, 0.35);
	border-radius: 18px;
	position:    relative;
	z-index:     1;
}
#jra-step-init .jra-label {
	text-align: center;
}

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

.jra-subtitle {
	color:         var(--jra-hint);
	font-size:     15px;
	line-height:   1.6;
	margin-bottom: 28px;
	text-align:    center;
}

/* Titre de section */
.jra-section-title {
	font-size:     16px;
	font-weight:   700;
	color:         var(--jra-blue);
	border-left:   4px solid var(--jra-yellow);
	padding-left:  12px;
	margin-bottom: 18px;
}

/* ==========================================================
   FORMULAIRES
   ========================================================== */

.jra-label {
	display:       block;
	color:         var(--jra-blue);
	font-size:     13px;
	font-weight:   700;
	margin-bottom: 6px;
}

.jra-input {
	width:         100%;
	border:        2px solid #d6d9e0;
	border-radius: 9px;
	padding:       12px 14px;
	font-size:     15px;
	color:         var(--jra-text);
	outline:       none;
	transition:    border-color 0.2s, box-shadow 0.2s;
	background:    var(--jra-white);
}
.jra-input:focus {
	border-color: var(--jra-blue);
	box-shadow:   0 0 0 3px rgba(16, 21, 45, 0.1);
}
.jra-input-code {
	text-align:     center;
	letter-spacing: 3px;
	font-weight:    600;
	font-size:      17px;
}
.jra-input-sm { max-width: 220px; }

.jra-select {
	width:         100%;
	border:        2px solid #d6d9e0;
	border-radius: 9px;
	padding:       12px 14px;
	font-size:     15px;
	color:         var(--jra-text);
	outline:       none;
	background:    var(--jra-white);
	cursor:        pointer;
	transition:    border-color 0.2s;
}
.jra-select:focus { border-color: var(--jra-blue); }

.jra-form-group { margin-bottom: 18px; }
.jra-form-row {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   16px;
}

.jra-hint {
	color:         var(--jra-hint);
	font-size:     13px;
	line-height:   1.6;
	margin-bottom: 14px;
}

/* ── Checkbox diabète ───────────────────────────────────── */
.jra-diabete-group { margin-bottom: 20px; }

.jra-checkbox-label {
	display:     flex;
	align-items: flex-start;
	gap:         12px;
	cursor:      pointer;
	user-select: none;
}
.jra-checkbox-native {
	position:       absolute;
	opacity:        0;
	width:          0;
	height:         0;
	pointer-events: none;
}
.jra-custom-checkbox {
	flex-shrink:   0;
	width:         20px;
	height:        20px;
	border:        2px solid var(--jra-blue);
	border-radius: 5px;
	background:    var(--jra-white);
	transition:    background 200ms ease, border-color 200ms ease, background-image 200ms ease;
	margin-top:    2px;
}
.jra-checkbox-native:checked + .jra-custom-checkbox {
	background-color:    var(--jra-yellow);
	border-color:        var(--jra-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;
}
.jra-checkbox-text {
	color:       var(--jra-text);
	font-size:   14px;
	line-height: 1.6;
}

/* ── RGPD ───────────────────────────────────────────────── */
.jra-rgpd {
	color:         var(--jra-hint);
	font-size:     12px;
	line-height:   1.6;
	background:    rgba(16, 21, 45, 0.05);
	border-radius: 8px;
	padding:       12px 14px;
	margin-bottom: 20px;
}

/* ==========================================================
   TYPES DE REPAS
   ========================================================== */

.jra-repas-types {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   10px;
}

.jra-repas-type-btn {
	border:        2px solid #d6d9e0;
	border-radius: 9px;
	padding:       11px 8px;
	font-size:     13px;
	font-weight:   700;
	color:         var(--jra-blue);
	background:    var(--jra-warm-white);
	cursor:        pointer;
	transition:    all 0.18s;
	text-align:    center;
}
.jra-repas-type-btn:hover   { border-color: var(--jra-yellow); }
.jra-repas-type-btn.selected {
	background:   var(--jra-yellow);
	border-color: var(--jra-yellow);
	color:        var(--jra-blue);
}

/* ==========================================================
   LIGNES ALIMENTS
   ========================================================== */

#jra-aliments-list {
	display:        flex;
	flex-direction: column;
	gap:            10px;
	margin-bottom:  14px;
}

.jra-aliment-row {
	display:               grid;
	grid-template-columns: 1fr 160px 36px;
	gap:                   10px;
	align-items:           center;
}

.jra-btn-remove-aliment {
	background:      transparent;
	border:          2px solid #d6d9e0;
	border-radius:   7px;
	color:           var(--jra-error);
	font-size:       18px;
	font-weight:     700;
	cursor:          pointer;
	width:           36px;
	height:          36px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      background 0.15s, border-color 0.15s;
	padding:         0;
	line-height:     1;
}
.jra-btn-remove-aliment:hover {
	background:   rgba(198, 40, 40, 0.08);
	border-color: var(--jra-error);
}
/* Masque le bouton supprimer si une seule ligne */
.jra-aliment-row:first-child:last-child .jra-btn-remove-aliment {
	opacity:        0.3;
	pointer-events: none;
}

/* ==========================================================
   BOUTONS
   ========================================================== */

.jra-btn-primary {
	display:        block;
	width:          100%;
	background:     var(--jra-yellow);
	color:          var(--jra-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;
	text-align:     center;
	letter-spacing: 0.5px;
}
.jra-btn-primary:hover    { opacity: 0.9; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(245,176,39,0.4); }
.jra-btn-primary:active   { transform: translateY(0); }
.jra-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.jra-btn-secondary {
	background:    transparent;
	border:        2px solid var(--jra-blue);
	border-radius: 9px;
	color:         var(--jra-blue);
	padding:       10px 20px;
	font-size:     14px;
	font-weight:   700;
	cursor:        pointer;
	transition:    background 0.15s;
}
.jra-btn-secondary:hover { background: rgba(16, 21, 45, 0.06); }

.jra-btn-termine {
	display:       block;
	width:         100%;
	background:    transparent;
	border:        2px solid var(--jra-blue);
	border-radius: 10px;
	color:         var(--jra-blue);
	padding:       13px 32px;
	font-size:     15px;
	font-weight:   700;
	cursor:        pointer;
	transition:    background 0.15s;
	text-align:    center;
	margin-top:    10px;
}
.jra-btn-termine:hover { background: rgba(16, 21, 45, 0.06); }

.jra-repas-actions {
	display:        flex;
	flex-direction: column;
	gap:            0;
}

/* ==========================================================
   MESSAGES D'ERREUR
   ========================================================== */

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

/* ==========================================================
   ÉTAPE 2 — SAISIE REPAS
   ========================================================== */

/* Barre d'en-tête sticky (identique à nq-mobile-bar) */
.jra-header-bar {
	position:        sticky;
	top:             0;
	z-index:         200;
	background:      var(--jra-blue);
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         13px 24px;
	box-shadow:      0 3px 16px rgba(0, 0, 0, 0.25);
}
.admin-bar .jra-header-bar { top: 32px; }

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

.jra-header-label {
	color:       var(--jra-yellow);
	font-size:   15px;
	font-weight: 700;
}

/* Full-bleed sur le conteneur repas — compatible Elementor */
#jra-step-repas {
	width:        100vw;
	position:     relative;
	left:         50%;
	margin-left:  -50vw;
	margin-right: -50vw;
	background:   var(--jra-blue);
	min-height:   100vh;
}

.jra-repas-layout {
	display:         flex;
	justify-content: center;
	align-items:     flex-start;
	min-height:      100vh;
}
.jra-repas-content {
	width:     100%;
	max-width: 680px;
	padding:   40px 20px 60px;
}

/* Carte actions (boutons) */
.jra-card-actions {
	background: transparent;
	box-shadow:  none;
	padding-left: 0;
	padding-right: 0;
}
.jra-card-actions .jra-btn-termine {
	border-color: rgba(255, 255, 255, 0.45);
	color:        rgba(255, 255, 255, 0.85);
}
.jra-card-actions .jra-btn-termine:hover {
	background:   rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.7);
}
.jra-card-actions .jra-error-msg {
	background: rgba(198, 40, 40, 0.25);
	color:      #ffb3b3;
	border-left-color: #ff6b6b;
}

/* ==========================================================
   ÉTAPES 3 & 4 — CONFIRMATIONS (fond bleu full-bleed)
   ========================================================== */

.jra-confirm-bg {
	min-height:      100vh;
	background:      var(--jra-blue);
	display:         flex;
	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;
}

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

.jra-confirm-logo {
	height:     80px;
	width:      auto;
	object-fit: contain;
	margin:     0 auto 24px;
	/* logo blanc inversé pour fond blanc */
	filter:     invert(1) brightness(0);
}

.jra-check-icon {
	width:           72px;
	height:          72px;
	background:      var(--jra-success);
	color:           var(--jra-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);
}

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

.jra-confirm-text {
	color:         var(--jra-hint);
	font-size:     15px;
	line-height:   1.75;
	margin-bottom: 28px;
}

/* ==========================================================
   DESKTOP (≥ 768px)
   ========================================================== */

@media (min-width: 768px) {
	.jra-header-bar { top: 0; }
	.admin-bar .jra-header-bar { top: 32px; }
}

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

@media (max-width: 767px) {
	.jra-logo-outside {
		height:        80px;
		max-height:    80px;
		margin-bottom: -40px;
	}

	#jra-step-init .jra-card {
		padding:       68px 20px 32px;
		border-radius: 14px;
	}

	.jra-form-row { grid-template-columns: 1fr; }

	.jra-repas-types { grid-template-columns: repeat(2, 1fr); }

	.jra-aliment-row { grid-template-columns: 1fr 110px 36px; }

	.jra-repas-content { padding: 20px 14px 48px; }

	.jra-confirm-card {
		padding:       36px 20px;
		border-radius: 14px;
	}

	.jra-input-sm { max-width: 100%; }
}