/* ============================================
   KingOpinion — Landing 1 (charte V2)
   ============================================ */

html { scroll-behavior: smooth; }
#rejoindre-le-panel { scroll-margin-top: 90px; }

/* ---------- Nav custom ---------- */
.l1-nav {
	background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
	color: #fff;
	padding: 12px 0;
	position: sticky;
	top: 0;
	z-index: 50;
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}
.l1-nav-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.l1-nav-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}
.l1-nav-brand svg {
	width: 32px;
	height: auto;
}
.l1-nav-brand-text {
	font-size: 17px;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.01em;
	line-height: 1;
}
@media (max-width: 540px) {
	.l1-nav-brand-text { font-size: 15px; }
}
.l1-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border-radius: 999px;
	background: linear-gradient(135deg, #FFB800, #FFD54F);
	color: #1E293B;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	box-shadow: 0 4px 14px rgba(255, 184, 0, 0.3);
	transition: all 0.2s ease;
}
.l1-nav-link:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(255, 184, 0, 0.45);
	color: #0F172A;
}
@media (max-width: 640px) {
	.l1-nav-brand svg { width: 100px; }
	.l1-nav-link { padding: 7px 14px; font-size: 12px; }
}

/* ---------- Hero ---------- */
.l1-hero {
	background: linear-gradient(135deg, #1E293B 0%, #334155 50%, #1E293B 100%);
	color: #fff;
	padding: 64px 16px 48px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.l1-hero::before {
	content: '';
	position: absolute;
	top: -30%;
	right: -10%;
	width: 480px;
	height: 480px;
	background: radial-gradient(circle, rgba(255, 184, 0, 0.18) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}
.l1-hero::after {
	content: '';
	position: absolute;
	bottom: -30%;
	left: -10%;
	width: 360px;
	height: 360px;
	background: radial-gradient(circle, rgba(0, 210, 106, 0.15) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}
.l1-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
}
.l1-hero h1 {
	font-size: clamp(1.8rem, 5vw, 3rem);
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0;
}
.l1-hero h1 .hero-amount {
	background: linear-gradient(135deg, #FFB800, #FFD54F);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
}
.l1-hero h1 sup {
	font-size: 50%;
	opacity: 0.6;
	margin-left: 2px;
	font-weight: 600;
}

/* (Marquee logos déplacé dans landing/partials/logos-v2.twig, self-contained) */

/* ---------- Section "Rejoindre le panel" ---------- */
.l1-panel {
	background: linear-gradient(135deg, #FFB800 0%, #FFD54F 100%);
	padding: 48px 16px 24px;
	position: relative;
	overflow: hidden;
}
.l1-panel::before {
	content: '';
	position: absolute;
	top: 10%;
	right: -15%;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
	border-radius: 50%;
	pointer-events: none;
}
.l1-panel-inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: end;
}
@media (min-width: 992px) {
	.l1-panel-inner { grid-template-columns: 1.05fr 1fr; gap: 40px; }
}
.l1-panel-content h2 {
	font-size: clamp(1.4rem, 3vw, 2.1rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	margin: 0 0 24px;
}
.l1-panel-content h2 strong { color: #0F172A; font-weight: 900; }
.l1-panel-content h2 sup { font-size: 50%; opacity: 0.65; font-weight: 600; }
.l1-panel-content h2 .panel-cta {
	display: block;
	font-size: 70%;
	color: #fff;
	opacity: 0.95;
	font-weight: 700;
	margin-top: 6px;
	text-transform: none;
}

/* Already connected state */
.l1-connected {
	background: #fff;
	border-radius: 20px;
	padding: 32px 28px;
	text-align: center;
	box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18);
	max-width: 480px;
	margin: 0 auto;
}
.l1-connected-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg, #00D26A, #00F27D);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	margin-bottom: 16px;
	box-shadow: 0 6px 18px rgba(0, 210, 106, 0.3);
}
.l1-connected-title {
	font-size: 18px;
	font-weight: 800;
	color: #0F172A;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin-bottom: 20px;
}
.l1-connected-title strong { color: #FFB800; }
.l1-connected-btn {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 18px;
	background: linear-gradient(135deg, #FFB800, #FFD54F);
	color: #1E293B;
	font-weight: 700;
	font-size: 13px;
	text-decoration: none;
	text-align: center;
	line-height: 1.25;
	box-shadow: 0 6px 18px rgba(255, 184, 0, 0.4);
	transition: all 0.2s ease;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.l1-connected-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(255, 184, 0, 0.55);
	color: #0F172A;
}
.l1-connected-btn strong {
	display: block;
	font-weight: 900;
	font-size: 17px;
	margin-bottom: 2px;
	letter-spacing: 0.01em;
}

/* Image king-queen à droite */
.l1-panel-img {
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.l1-panel-img img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Trustpilot widget — préservé, restyle V2 */
.trustpilot-widget {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 20px auto 0;
	padding: 14px 20px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
	max-width: 280px;
}
.trustpilot-widget .stars {
	display: flex;
	gap: 4px;
}
.trustpilot-widget .star { width: 20px; height: 20px; }
.trustpilot-widget .rating-text {
	font-size: 1rem;
	font-weight: 800;
	color: #1E293B;
	display: inline;
}
.trustpilot-widget .trustpilot-text {
	font-size: 0.95rem;
	font-weight: 700;
	color: #00B85C;
	display: inline;
	margin-left: 6px;
}
.trustpilot-widget .review-count {
	font-size: 11px;
	color: #94A3B8;
	font-style: italic;
}

/* ============================================
   Module-1 (tunnel inscription) — compat shim
   Restyle V2 sans toucher au module-1.twig
   ============================================ */

/* Bootstrap utilities shims utilisés par le module */
.l1-panel .d-flex { display: flex; }
.l1-panel .flex-row { flex-direction: row; }
.l1-panel .flex-column { flex-direction: column; }
.l1-panel .justify-content-center { justify-content: center; }
.l1-panel .justify-content-between { justify-content: space-between; }
.l1-panel .justify-content-start { justify-content: flex-start; }
.l1-panel .align-items-center { align-items: center; }
.l1-panel .align-items-end { align-items: flex-end; }
.l1-panel .text-center { text-align: center; }
.l1-panel .text-uppercase { text-transform: uppercase; }
.l1-panel .text-white { color: #fff; }
.l1-panel .text-black { color: #0F172A; }
.l1-panel .text-primary { color: #FFB800; }
.l1-panel .text-warning { color: #FFB800; }
.l1-panel .bg-white { background: #fff; }
.l1-panel .bg-warning { background: #FFB800; }
.l1-panel .gap-3 { gap: 1rem; }
.l1-panel .w-100 { width: 100%; }
.l1-panel .col { flex: 1 1 0%; min-width: 0; }
.l1-panel .position-relative { position: relative; }

/* Wrapper #js-pinel-container */
#js-pinel-container {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18);
	max-width: 480px;
	margin: 0 auto;
	overflow: hidden;
}
#js-pinel-container #subcont { padding: 0; }

/* Step 1 (sélection du montant) : appliqué uniquement au form#step-1,
   pas au .combien-gangner (qui est le container englobant tous les steps) */
#js-pinel-container #step-1 {
	background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
	color: #fff;
	border-radius: 20px 20px 0 0;
}
#js-pinel-container #step-1 h3 {
	font-size: 17px;
	font-weight: 800;
	margin: 0 0 18px;
	text-align: center;
	color: #fff;
	letter-spacing: -0.01em;
}
#js-pinel-container #step-1 h3 sup { font-size: 60%; opacity: 0.6; }

#js-pinel-container #step-1 .combien-gangner--prix {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	align-items: stretch;
	margin-top: 8px;
}
.combien-gangner--prix-item,
.combien-gangner .btn-xs {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 20px;
	border-radius: 12px;
	background: linear-gradient(135deg, #FFB800, #FFD54F);
	color: #1E293B;
	font-weight: 800;
	font-size: 15px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 6px 18px rgba(255, 184, 0, 0.4);
	width: 100%;
	animation: l1AmountPulse 1.8s ease-in-out infinite;
}
.combien-gangner--prix-item:nth-child(2),
.combien-gangner .btn-xs:nth-child(2) { animation-delay: 0.3s; }
.combien-gangner--prix-item:nth-child(3),
.combien-gangner .btn-xs:nth-child(3) { animation-delay: 0.6s; }
.combien-gangner--prix-item:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 12px 28px rgba(255, 184, 0, 0.55), 0 0 0 4px rgba(255, 184, 0, 0.2);
	color: #0F172A;
	animation: none;
}
@keyframes l1AmountPulse {
	0%, 100% { box-shadow: 0 6px 18px rgba(255, 184, 0, 0.4), 0 0 0 0 rgba(255, 184, 0, 0.45); }
	50% { box-shadow: 0 8px 24px rgba(255, 184, 0, 0.5), 0 0 0 8px rgba(255, 184, 0, 0); }
}

/* Continue button animation */
#js-pinel-container .form .continue {
	animation: l1CtaPulse 2s ease-in-out infinite;
}
#js-pinel-container .form .continue:hover { animation: none; }
@keyframes l1CtaPulse {
	0%, 100% { box-shadow: 0 6px 18px rgba(255, 107, 0, 0.35), 0 0 0 0 rgba(255, 107, 0, 0.4); }
	50% { box-shadow: 0 8px 22px rgba(255, 107, 0, 0.45), 0 0 0 10px rgba(255, 107, 0, 0); }
}

/* Forms (step 1/2/3) — fond clair par défaut, padding-bottom généreux pour le bouton CTA */
#js-pinel-container .form {
	padding: 24px 24px 32px;
	background: #fff;
	color: #1E293B;
	box-sizing: border-box;
}
#js-pinel-container .form h3 {
	font-size: 17px;
	font-weight: 800;
	color: #0F172A;
	margin: 0 0 16px;
	text-align: center;
	letter-spacing: -0.01em;
}
#js-pinel-container .form label {
	display: block;
	margin: 12px 0 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: #475569;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
#js-pinel-container .form input,
#js-pinel-container .form select {
	display: block;
	width: 100%;
	padding: 11px 14px;
	font-size: 14px;
	font-family: inherit;
	font-weight: 500;
	color: #0F172A;
	background: #F8FAFC;
	border: 1.5px solid #E2E8F0;
	border-radius: 10px;
	box-shadow: none;
	transition: all 0.15s ease;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
#js-pinel-container .form input:focus,
#js-pinel-container .form select:focus {
	border-color: #FFB800;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(255, 184, 0, 0.15);
	outline: none;
}
#js-pinel-container .form .d-flex.flex-row {
	display: flex;
	gap: 10px;
	margin-bottom: 4px;
}
#js-pinel-container .form .d-flex.flex-row > div { flex: 1 1 0; min-width: 0; }

#js-pinel-container .form .birthdate {
	display: flex;
	gap: 8px;
	padding: 0 !important;
}
#js-pinel-container .form .birthdate > div {
	flex: 1 1 0;
	max-width: none;
}
#js-pinel-container .form .birthdate select {
	max-width: 100%;
	margin: 0;
	padding: 11px 10px;
	font-size: 13px;
}
#js-pinel-container .form select {
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292%22%20height%3D%22292%22%3E%3Cpath%20fill%3D%22%23475569%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 10px auto;
	padding-right: 32px;
}

/* Continue button */
#js-pinel-container .form .continue {
	cursor: pointer;
	display: block;
	width: 100%;
	margin: 18px auto 0;
	padding: 14px 24px;
	background: linear-gradient(135deg, #FF6B00, #FF8C00);
	color: #fff;
	font-weight: 800;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border: none;
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(255, 107, 0, 0.35);
	transition: all 0.2s ease;
}
#js-pinel-container .form .continue:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(255, 107, 0, 0.45);
}

#js-pinel-container .form .question {
	display: block;
	margin: 6px 0 12px;
	text-align: center;
	font-size: 14px;
	color: #475569;
}
#js-pinel-container .form .question a {
	color: #B45309;
	font-weight: 600;
}

/* Validation error spans */
#js-pinel-container .form span[id$="_exists"],
#js-pinel-container .form span#badmail,
#js-pinel-container .form span#password_weak {
	display: none;
	font-size: 12px;
	color: #DC2626 !important;
	margin-top: -4px;
	margin-bottom: 4px;
	padding: 6px 10px;
	background: #FEE2E2;
	border-radius: 8px;
}
#js-pinel-container .form.submitted input:invalid,
#js-pinel-container .form.submitted select:invalid {
	border-color: #DC2626;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* Mentions privacy en bas du form step 2 */
#js-pinel-container .form p {
	margin: 12px 0 0;
	color: #94A3B8;
	font-size: 10.5px;
	line-height: 1.5;
}
#js-pinel-container .form p a { color: #64748B; text-decoration: underline; }

/* Container classic (carrousel des steps) — overflow:clip vertical seulement (laisse le bouton respirer si shadow déborde) */
#js-pinel-container #container-classic {
	position: relative;
	display: flex;
	justify-content: center;
	transition: height 0.5s ease;
	overflow-x: hidden;
	overflow-y: visible;
}
#js-pinel-container #container-classic .form:not(.animated) { display: none; }
#js-pinel-container .animated {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	animation-duration: 0.6s;
	animation-fill-mode: both;
}
#js-pinel-container .fadeInRight { animation-name: l1FadeInRight; }
#js-pinel-container .fadeOutLeft { animation-name: l1FadeOutLeft; }
@keyframes l1FadeInRight {
	from { opacity: 0; transform: translate3d(40px, 0, 0); }
	to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes l1FadeOutLeft {
	from { opacity: 1; transform: translate3d(0, 0, 0); }
	to { opacity: 0; transform: translate3d(-40px, 0, 0); }
}

/* CNIL footer */
#js-pinel-container .cnil {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	background: #F1F5F9;
	color: #64748B;
	font-size: 10px;
	line-height: 1.5;
	border-top: 1px solid #E2E8F0;
}
#js-pinel-container .cnil > div { flex-shrink: 0; }
#js-pinel-container .cnil img { width: 32px; height: auto; }
#js-pinel-container .cnil a { color: #475569; }

/* État "déjà connecté" — déjà stylé par .l1-connected dans la section "Rejoindre le panel" ci-dessus */
.icon-user::before {
	content: '\f007';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	font-size: 28px;
	color: #00B85C;
}

/* Responsive */
@media (max-width: 540px) {
	#js-pinel-container { max-width: 100%; margin: 0; border-radius: 16px; }
	.combien-gangner { padding: 20px 18px 16px; }
	#js-pinel-container .form { padding: 20px 18px 16px; }
	#js-pinel-container .form .d-flex.flex-row { flex-direction: column; gap: 0; }
}

/* ---------- Print / accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}