/**
 * ================================================================
 * FICHIER : Mon-Appli.css
 * EMPLACEMENT : pages/Mon-Appli/Mon-Appli.css
 * DESCRIPTION : Styles complets pour la page Mon-Appli.
 *               Design premium avec adaptation totale Bright & Dark mode,
 *               mockup smartphone 3D CSS interactif, cartes de fonctionnalités,
 *               guides multi-plateformes et accordéons FAQ.
 *
 * SOMMAIRE :
 *   - VARIABLES LOCALES & RESET
 *   - UNLOGGED CARD
 *   - HERO SECTION
 *   - SMARTPHONE MOCKUP 3D (Dark / Bright mode adaptatif)
 *   - FLOATING BUBBLES
 *   - 4 PILIERS FEATURES GRID
 *   - GUIDE MULTI-OS TABS & STEPS
 *   - FAQ ACCORDION
 *   - RESPONSIVE QUERIES
 *
 * DEPENDANCES :
 *   - _theme/theme.css (Variables globales)
 *
 * MODIFICATIONS :
 *   - 04/09/2026 14:32 : Création initiale Allman et variables adaptatives — A VALIDER PAR JaxX
 *
 * ================================================================
 */

/* ==========================================================================
   PAGE WRAPPER & RESET
   ========================================================================== */
.mon_appli_page_wrapper
{
	padding: 2.5rem 0 4rem 0;
}

/* ==========================================================================
   UNLOGGED CARD
   ========================================================================== */
.mon_appli_unlogged_wrapper
{
	padding: 5rem 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.unlogged_card
{
	max-width: 580px;
	padding: 3rem 2.5rem;
	border-radius: var(--border-radius-xl, 24px);
	text-align: center;
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}

.unlogged_icon
{
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(2, 132, 199, 0.15);
	color: var(--color-accent, #0284c7);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
}

.unlogged_icon .material-symbols-outlined
{
	font-size: 2rem;
}

.unlogged_card h1
{
	font-size: 1.75rem;
	font-weight: 800;
	margin-bottom: 1rem;
	color: var(--text-primary, #ffffff);
}

.unlogged_card p
{
	font-size: 1rem;
	color: var(--text-secondary, #94a3b8);
	line-height: 1.6;
	margin-bottom: 2rem;
}

.unlogged_actions
{
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.btn_login_redirect,
.btn_join_partner
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.75rem;
	border-radius: var(--border-radius-md, 12px);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	transition: all 0.25s ease;
}

.btn_login_redirect
{
	background: linear-gradient(135deg, var(--color-accent, #0284c7), #0369a1);
	color: #ffffff;
	box-shadow: 0 4px 15px rgba(2, 132, 199, 0.35);
}

.btn_login_redirect:hover
{
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(2, 132, 199, 0.45);
	color: #ffffff;
}

.btn_join_partner
{
	background: transparent;
	color: var(--text-primary, #f8fafc);
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.2));
}

.btn_join_partner:hover
{
	background: rgba(255, 255, 255, 0.05);
	color: var(--color-accent, #0284c7);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.mon_appli_hero
{
	text-align: center;
	max-width: 860px;
	margin: 0 auto 3.5rem auto;
}

.hero_badge_pill
{
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(2, 132, 199, 0.12);
	border: 1px solid rgba(2, 132, 199, 0.35);
	color: var(--color-accent, #0284c7);
	padding: 0.45rem 1.25rem;
	border-radius: 30px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin-bottom: 1.5rem;
}

.hero_badge_pill .pulse_dot
{
	font-size: 1.15rem;
	animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow
{
	0%, 100%
	{
		opacity: 1;
		transform: scale(1);
	}
	50%
	{
		opacity: 0.6;
		transform: scale(1.15);
	}
}

.hero_main_title
{
	font-size: 2.75rem;
	line-height: 1.2;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: var(--text-primary, #ffffff);
	margin-bottom: 1.25rem;
}

.hero_subtitle
{
	font-size: 1.15rem;
	line-height: 1.6;
	color: var(--text-secondary, #94a3b8);
	margin-bottom: 2rem;
}

.hero_cta_cluster
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.btn_pwa_primary
{
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	background: linear-gradient(135deg, var(--color-accent, #0284c7), #02669e);
	color: #ffffff;
	border: none;
	padding: 0.95rem 2rem;
	border-radius: var(--border-radius-md, 12px);
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(2, 132, 199, 0.35);
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn_pwa_primary:hover
{
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 12px 30px rgba(2, 132, 199, 0.5);
	color: #ffffff;
}

.btn_pwa_primary .material-symbols-outlined
{
	font-size: 1.35rem;
}

.btn_pwa_secondary
{
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(255, 255, 255, 0.05);
	color: var(--text-primary, #f8fafc);
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
	padding: 0.95rem 1.75rem;
	border-radius: var(--border-radius-md, 12px);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	transition: all 0.25s ease;
}

.btn_pwa_secondary:hover
{
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--color-accent, #0284c7);
	color: var(--color-accent, #0284c7);
}

.pwa_status_box
{
	margin-top: 1.25rem;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: rgba(16, 185, 129, 0.15);
	color: #10b981;
	border: 1px solid rgba(16, 185, 129, 0.3);
	padding: 0.4rem 1rem;
	border-radius: 20px;
	font-size: 0.85rem;
	font-weight: 600;
}

/* ==========================================================================
   SMARTPHONE MOCKUP 3D ADAPTATIF
   ========================================================================== */
.mon_appli_showcase
{
	margin: 0 auto 5rem auto;
	max-width: 1000px;
	position: relative;
}

.mockup_container
{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 2rem 0;
}

/* Châssis métallique smartphone */
.smartphone_frame
{
	width: 340px;
	height: 680px;
	background: #0f172a;
	border-radius: 46px;
	border: 8px solid #334155;
	box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.7),
				0 0 0 2px rgba(255, 255, 255, 0.1),
				inset 0 0 10px rgba(0, 0, 0, 0.8);
	position: relative;
	overflow: hidden;
	transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

html.bright_mode .smartphone_frame
{
	background: #f8fafc;
	border-color: #cbd5e1;
	box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25),
				0 0 0 2px rgba(0, 0, 0, 0.08),
				inset 0 0 10px rgba(0, 0, 0, 0.05);
}

.smartphone_camera_notch
{
	width: 110px;
	height: 22px;
	background: #000000;
	border-radius: 14px;
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.smartphone_screen
{
	width: 100%;
	height: 100%;
	background: var(--bg-primary, #0b1120);
	border-radius: 38px;
	padding: 2.25rem 1rem 1rem 1rem;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	color: var(--text-primary, #ffffff);
	transition: background-color 0.3s ease, color 0.3s ease;
}

html.bright_mode .smartphone_screen
{
	background: #ffffff;
	color: #0f172a;
}

/* Barre de statut mobile */
.phone_status_bar
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0.5rem 0.5rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	opacity: 0.8;
}

.phone_status_icons
{
	display: flex;
	gap: 0.25rem;
}

.phone_status_icons .phone_ico
{
	font-size: 0.95rem;
}

/* Header App sur l'écran */
.phone_app_header
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 0.25rem 0.75rem 0.25rem;
	border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
	margin-bottom: 0.85rem;
}

.phone_app_brand
{
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.85rem;
}

.phone_app_brand .Logo_MBR
{
	width: 18px;
	height: 18px;
	background-size: contain;
}

.phone_app_wallet_pill
{
	display: flex;
	align-items: center;
	gap: 0.3rem;
	background: rgba(2, 132, 199, 0.15);
	color: var(--color-accent, #0284c7);
	padding: 0.25rem 0.6rem;
	border-radius: 12px;
	font-size: 0.75rem;
	font-weight: 700;
}

.phone_app_wallet_pill .wallet_ico
{
	font-size: 0.85rem;
}

/* Carte Lead Alerte Directe */
.phone_lead_alert_card
{
	background: var(--bg-card, #1e293b);
	border: 1px solid rgba(2, 132, 199, 0.4);
	border-radius: 16px;
	padding: 0.85rem;
	margin-bottom: 0.75rem;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
	position: relative;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

html.bright_mode .phone_lead_alert_card
{
	background: #f1f5f9;
	border-color: rgba(2, 132, 199, 0.3);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.alert_card_header
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

.alert_pulse_tag
{
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: rgba(245, 158, 11, 0.15);
	color: #f59e0b;
	padding: 0.15rem 0.45rem;
	border-radius: 10px;
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

.alert_pulse_tag .tag_dot
{
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #f59e0b;
	animation: pulseDot 1.5s infinite;
}

@keyframes pulseDot
{
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.3; transform: scale(1.3); }
}

.alert_time
{
	font-size: 0.65rem;
	color: var(--text-secondary, #94a3b8);
}

.lead_type_badge
{
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.7rem;
	color: var(--color-accent, #0284c7);
	font-weight: 600;
	margin-bottom: 0.2rem;
}

.lead_type_badge .material-symbols-outlined
{
	font-size: 0.85rem;
}

.lead_title
{
	font-size: 0.85rem;
	font-weight: 800;
	margin: 0 0 0.4rem 0;
	line-height: 1.3;
}

.lead_meta_row
{
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.7rem;
	color: var(--text-secondary, #94a3b8);
	margin-bottom: 0.25rem;
}

.lead_meta_row .meta_ico
{
	font-size: 0.8rem;
	color: var(--color-accent, #0284c7);
}

.alert_card_action
{
	margin-top: 0.65rem;
}

.fake_btn_buy
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	background: linear-gradient(135deg, var(--color-accent, #0284c7), #0369a1);
	color: #ffffff;
	padding: 0.45rem 0.5rem;
	border-radius: 10px;
	font-size: 0.75rem;
	font-weight: 700;
	box-shadow: 0 4px 10px rgba(2, 132, 199, 0.3);
}

.fake_btn_buy .material-symbols-outlined
{
	font-size: 0.85rem;
}

/* Deuxième carte statut chantier */
.phone_secondary_card
{
	background: var(--bg-card, #1e293b);
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
	border-radius: 14px;
	padding: 0.75rem;
	margin-bottom: auto;
}

html.bright_mode .phone_secondary_card
{
	background: #f8fafc;
	border-color: rgba(0, 0, 0, 0.08);
}

.sec_card_top
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.3rem;
}

.sec_title
{
	font-size: 0.65rem;
	color: var(--text-secondary, #94a3b8);
	text-transform: uppercase;
	font-weight: 700;
}

.sec_badge
{
	background: rgba(16, 185, 129, 0.15);
	color: #10b981;
	padding: 0.1rem 0.4rem;
	border-radius: 8px;
	font-size: 0.65rem;
	font-weight: 700;
}

.sec_client
{
	font-size: 0.75rem;
	margin-bottom: 0.4rem;
}

.sec_action_links
{
	display: flex;
	gap: 0.75rem;
	font-size: 0.7rem;
	color: var(--color-accent, #0284c7);
	font-weight: 600;
}

.sec_link
{
	display: flex;
	align-items: center;
	gap: 0.2rem;
}

.sec_link .inline_ico
{
	font-size: 0.8rem;
}

/* Dock bas du téléphone */
.phone_bottom_dock
{
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0.65rem 0.25rem 0.25rem 0.25rem;
	border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
	margin-top: 0.5rem;
}

.dock_item
{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	font-size: 0.65rem;
	color: var(--text-secondary, #94a3b8);
}

.dock_item.active
{
	color: var(--color-accent, #0284c7);
	font-weight: 700;
}

.dock_item .material-symbols-outlined
{
	font-size: 1.15rem;
}

/* ==========================================================================
   FLOATING BUBBLES
   ========================================================================== */
.floating_feature_bubble
{
	position: absolute;
	padding: 1rem 1.25rem;
	border-radius: var(--border-radius-lg, 16px);
	display: flex;
	align-items: center;
	gap: 0.85rem;
	max-width: 280px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
	animation: floatBob 4s ease-in-out infinite;
	z-index: 10;
}

.bubble_right
{
	right: 4%;
	top: 25%;
	animation-delay: 0.5s;
}

.bubble_left
{
	left: 4%;
	bottom: 25%;
	animation-delay: 1.5s;
}

@keyframes floatBob
{
	0%, 100%
	{
		transform: translateY(0);
	}
	50%
	{
		transform: translateY(-8px);
	}
}

.bubble_ico_circle
{
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(2, 132, 199, 0.15);
	color: var(--color-accent, #0284c7);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.bubble_ico_circle.green_ico
{
	background: rgba(16, 185, 129, 0.15);
	color: #10b981;
}

.bubble_info strong
{
	display: block;
	font-size: 0.9rem;
	color: var(--text-primary, #ffffff);
	margin-bottom: 0.15rem;
}

html.bright_mode .bubble_info strong
{
	color: #0f172a;
}

.bubble_info span
{
	font-size: 0.78rem;
	color: var(--text-secondary, #94a3b8);
	line-height: 1.3;
	display: block;
}

html.bright_mode .bubble_info span
{
	color: #64748b;
}

/* ==========================================================================
   4 PILIERS FEATURES GRID
   ========================================================================== */
.mon_appli_features_section
{
	margin-bottom: 5.5rem;
}

.section_header_center
{
	text-align: center;
	max-width: 720px;
	margin: 0 auto 3rem auto;
}

.section_uptitle
{
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 800;
	color: var(--color-accent, #0284c7);
	margin-bottom: 0.5rem;
	display: block;
}

.section_title
{
	font-size: 2.25rem;
	font-weight: 900;
	color: var(--text-primary, #ffffff);
	letter-spacing: -0.01em;
	margin-bottom: 0.85rem;
}

.section_desc
{
	font-size: 1.05rem;
	color: var(--text-secondary, #94a3b8);
	line-height: 1.5;
}

.features_grid_4
{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

.feature_card
{
	padding: 1.75rem;
	border-radius: var(--border-radius-lg, 16px);
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.feature_card:hover
{
	transform: translateY(-4px);
	border-color: var(--color-accent, #0284c7);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.feature_icon_box
{
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
}

.feature_icon_box .material-symbols-outlined
{
	font-size: 1.75rem;
}

.icon_amber
{
	background: rgba(245, 158, 11, 0.15);
	color: #f59e0b;
}

.icon_blue
{
	background: rgba(2, 132, 199, 0.15);
	color: var(--color-accent, #0284c7);
}

.icon_green
{
	background: rgba(16, 185, 129, 0.15);
	color: #10b981;
}

.icon_purple
{
	background: rgba(168, 85, 247, 0.15);
	color: #a855f7;
}

.feature_card h3
{
	font-size: 1.2rem;
	font-weight: 800;
	margin: 0 0 0.75rem 0;
	color: var(--text-primary, #ffffff);
}

html.bright_mode .feature_card h3
{
	color: #0f172a;
}

.feature_card p
{
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--text-secondary, #94a3b8);
	margin-bottom: 1.5rem;
	flex-grow: 1;
}

html.bright_mode .feature_card p
{
	color: #64748b;
}

.feature_card_tag
{
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-accent, #0284c7);
	background: rgba(2, 132, 199, 0.1);
	padding: 0.25rem 0.65rem;
	border-radius: 6px;
	width: fit-content;
}

/* ==========================================================================
   GUIDE MULTI-OS TABS & STEPS
   ========================================================================== */
.mon_appli_guide_section
{
	margin-bottom: 5.5rem;
}

.guide_platform_tabs
{
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin-bottom: 2.5rem;
	flex-wrap: wrap;
}

.tab_btn
{
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--bg-card, #1e293b);
	color: var(--text-secondary, #94a3b8);
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	padding: 0.75rem 1.5rem;
	border-radius: 30px;
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.25s ease;
}

html.bright_mode .tab_btn
{
	background: #ffffff;
	color: #64748b;
	border-color: rgba(0, 0, 0, 0.1);
}

.tab_btn:hover
{
	color: var(--text-primary, #ffffff);
	border-color: var(--color-accent, #0284c7);
}

html.bright_mode .tab_btn:hover
{
	color: #0f172a;
}

.tab_btn.active
{
	background: linear-gradient(135deg, var(--color-accent, #0284c7), #0369a1);
	color: #ffffff;
	border-color: transparent;
	box-shadow: 0 4px 15px rgba(2, 132, 199, 0.35);
}

.guide_tab_content
{
	display: none;
}

.guide_tab_content.active
{
	display: block;
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn
{
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.steps_container
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.25rem;
}

.step_card
{
	padding: 1.5rem;
	border-radius: var(--border-radius-lg, 16px);
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
	position: relative;
}

.step_number
{
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--color-accent, #0284c7), #0369a1);
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: 1.1rem;
	margin-bottom: 1rem;
	box-shadow: 0 4px 10px rgba(2, 132, 199, 0.3);
}

.step_content h4
{
	font-size: 1.1rem;
	font-weight: 800;
	margin: 0 0 0.5rem 0;
	color: var(--text-primary, #ffffff);
}

html.bright_mode .step_content h4
{
	color: #0f172a;
}

.step_content p
{
	font-size: 0.9rem;
	color: var(--text-secondary, #94a3b8);
	line-height: 1.5;
	margin: 0;
}

html.bright_mode .step_content p
{
	color: #64748b;
}

.step_inline_ico
{
	vertical-align: middle;
	font-size: 1.15rem;
	color: var(--color-accent, #0284c7);
}

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.mon_appli_faq_section
{
	margin-bottom: 4rem;
}

.faq_accordion_wrapper
{
	max-width: 820px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.faq_item
{
	border-radius: var(--border-radius-md, 12px);
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.faq_question
{
	padding: 1.25rem 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 700;
	font-size: 1.05rem;
	cursor: pointer;
	color: var(--text-primary, #ffffff);
	user-select: none;
}

html.bright_mode .faq_question
{
	color: #0f172a;
}

.faq_question:hover
{
	color: var(--color-accent, #0284c7);
}

.faq_chevron
{
	transition: transform 0.25s ease;
	color: var(--text-secondary, #94a3b8);
}

.faq_item.active .faq_chevron
{
	transform: rotate(180deg);
	color: var(--color-accent, #0284c7);
}

.faq_answer
{
	display: none;
	padding: 0 1.5rem 1.25rem 1.5rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--text-secondary, #94a3b8);
}

html.bright_mode .faq_answer
{
	color: #64748b;
}

.faq_answer p
{
	margin: 0;
}

/* ==========================================================================
   RESPONSIVE QUERIES
   ========================================================================== */
@media (max-width: 1024px)
{
	.features_grid_4
	{
		grid-template-columns: repeat(2, 1fr);
	}
	.floating_feature_bubble
	{
		display: none;
	}
}

@media (max-width: 768px)
{
	.hero_main_title
	{
		font-size: 2.1rem;
	}
	.hero_subtitle
	{
		font-size: 1rem;
	}
	.features_grid_4
	{
		grid-template-columns: 1fr;
	}
	.hero_cta_cluster
	{
		flex-direction: column;
		width: 100%;
	}
	.btn_pwa_primary,
	.btn_pwa_secondary
	{
		width: 100%;
		justify-content: center;
	}
	.smartphone_frame
	{
		width: 300px;
		height: 600px;
	}
}

/* ==========================================================================
   BANDEAU AUTHENTIFICATION / ACCÈS RESTREINT
   ========================================================================== */
.mon_appli_auth_banner
{
	margin-bottom: 2rem;
	padding: 1.25rem 1.75rem;
	border-radius: var(--border-radius-lg, 16px);
	border: 1px solid rgba(245, 158, 11, 0.35);
	background: rgba(245, 158, 11, 0.08);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.auth_banner_content
{
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: 1;
	min-width: 280px;
}

.banner_ico
{
	font-size: 2rem;
	color: #f59e0b;
}

.banner_text strong
{
	display: block;
	font-size: 1.05rem;
	color: var(--text-color, #f8fafc);
	margin-bottom: 0.2rem;
}

.banner_text span
{
	font-size: 0.9rem;
	color: var(--text-secondary, #94a3b8);
}

.banner_actions
{
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.btn_partner_free
{
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1.25rem;
	background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
	color: #ffffff !important;
	font-size: 0.9rem;
	font-weight: 700;
	border-radius: 50px;
	text-decoration: none;
	box-shadow: 0 4px 15px rgba(2, 132, 199, 0.35);
	transition: all 0.25s ease;
}

.btn_partner_free:hover
{
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(2, 132, 199, 0.5);
	color: #ffffff !important;
}

.btn_login_quick
{
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.65rem 1.15rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
	color: var(--text-color, #f8fafc) !important;
	font-size: 0.9rem;
	font-weight: 600;
	border-radius: 50px;
	text-decoration: none;
	transition: all 0.25s ease;
}

.btn_login_quick:hover
{
	background: rgba(255, 255, 255, 0.12);
	color: var(--text-color, #f8fafc) !important;
}

/* ==========================================================================
   BOUTON D'INSTALLATION DANS LE MENU AFFILIÉ
   ========================================================================== */
.udn_install_btn
{
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.9rem;
	background: linear-gradient(135deg, rgba(2, 132, 199, 0.2) 0%, rgba(6, 182, 212, 0.2) 100%);
	border: 1px solid rgba(6, 182, 212, 0.5);
	color: #38bdf8 !important;
	font-size: 0.78rem;
	font-weight: 700;
	border-radius: 50px;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.25s ease;
	margin-left: 0.5rem;
}

.udn_install_btn .material-symbols-outlined
{
	font-size: 1.1rem;
	color: #38bdf8;
}

.udn_install_btn:hover
{
	background: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%);
	color: #ffffff !important;
	border-color: transparent;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(6, 182, 212, 0.35);
}

.udn_install_btn:hover .material-symbols-outlined
{
	color: #ffffff !important;
}

html.bright_mode .udn_install_btn
{
	background: rgba(2, 132, 199, 0.08);
	border-color: rgba(2, 132, 199, 0.4);
	color: #0284c7 !important;
}

html.bright_mode .udn_install_btn .material-symbols-outlined
{
	color: #0284c7;
}

html.bright_mode .udn_install_btn:hover
{
	background: #0284c7;
	color: #ffffff !important;
}

html.bright_mode .udn_install_btn:hover .material-symbols-outlined
{
	color: #ffffff !important;
}

/* ==========================================================================
   SECTION CTA FINALE
   ========================================================================== */
.mon_appli_final_cta_section
{
	margin-top: 4rem;
	padding: 3.5rem 2rem;
	border-radius: var(--border-radius-xl, 24px);
	text-align: center;
	border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
	position: relative;
	overflow: hidden;
}

.final_cta_inner
{
	max-width: 680px;
	margin: 0 auto;
}

.final_cta_badge
{
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 1rem;
	border-radius: 50px;
	background: rgba(2, 132, 199, 0.15);
	border: 1px solid rgba(2, 132, 199, 0.3);
	color: #38bdf8;
	font-size: 0.85rem;
	font-weight: 700;
	margin-bottom: 1.25rem;
}

.final_cta_inner h2
{
	font-size: 2rem;
	font-weight: 800;
	color: var(--text-color, #f8fafc);
	margin-bottom: 0.75rem;
}

.final_cta_inner p
{
	font-size: 1.05rem;
	color: var(--text-secondary, #94a3b8);
	line-height: 1.6;
	margin-bottom: 2rem;
}

.final_cta_actions
{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Boutons dans le Mockup Smartphone */
.alert_card_action .fake_btn_buy
{
	cursor: pointer;
	transition: all 0.25s ease;
}

.alert_card_action .fake_btn_buy:hover
{
	transform: scale(1.03);
	box-shadow: 0 4px 15px rgba(2, 132, 199, 0.4);
}