/* Structure principale du header */
header {
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: center !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 9999997 !important;
	height: 78px;
	width: 100%;
	background-color: var(--colorEtape3);
	color: #fff;
	padding: 0 20px;
	box-sizing: border-box;
}

body {
	padding-top: 0 !important;
}

.main-body-container {
	margin-top: 81px !important;
	position: relative !important;
	padding-top: 0 !important;
}

header a,
header a:visited,
header a:link,
header a:hover {
	color: #fff;
	text-decoration: none;
}

/* Colonnes principales */
.header-left-col {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 15px;
	height: 100%;
}

.header-center-col {
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	height: 100%;
	z-index: 10;
}

.header-right-col {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 15px;
	height: 100%;
}

/* Menu toggle */
#btnMenuIntermediaire {
	color: #fff;
	border: none;
	background: transparent;
	font-size: 24px;
	padding: 5px;
	cursor: pointer;
}

/* Logo de la page en cours */
.logo-page-en-cours {
	width: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo-page-en-cours img {
	width: 38px;
	height: auto;
	margin: 0 !important;
}

.logo-page-en-cours i.bi {
	font-size: 38px;
	color: #fff;
	line-height: 1;
}

/* Gestion de l'icône Mode Expert dans le header */
body:not(.mode-expert-active) .logo-page-en-cours .header-icon-calc-expert,
body:not(.mode-expert-active) .header-icon-calc-expert,
.header-icon-calc-expert {
	display: none !important;
}

.header-icon-calc-normal {
	display: inline-block;
}

body.mode-expert-active .logo-page-en-cours .header-icon-calc-normal,
body.mode-expert-active .header-icon-calc-normal {
	display: none !important;
}

body.mode-expert-active .logo-page-en-cours .header-icon-calc-expert {
	display: block !important;
	height: 38px !important;
	width: auto !important;
	max-width: 42px !important;
	object-fit: contain !important;
	margin: 0 !important;
}

@media (max-width: 1415.98px) {
	body.mode-expert-active .logo-page-en-cours .header-icon-calc-expert {
		height: 32px !important;
		max-width: 35px !important;
	}
}

@media (max-width: 767.98px) {
	body.mode-expert-active .logo-page-en-cours .header-icon-calc-expert {
		height: 24px !important;
		max-width: 27px !important;
	}
}

/* Liens sites immobiliers */
#lien-immo {
	width: 134px;
	flex-shrink: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

#lien-immo img {
	width: 38px;
	height: 38px;
	object-fit: contain;
	transition: transform 0.2s ease;
}

#lien-immo img:hover {
	transform: scale(1.1);
}

/* Contenu centre (Reset et statut) */
.header-center-content {
	display: grid;
	grid-template-columns: 120px 60px 120px;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin: 0 10px;
}

.center-left {
	font-family: "Albert Sans", "Inter", sans-serif;
	font-size: 10px;
	font-weight: 800;
	color: #f2f2f2;
	line-height: 1.2;
	text-align: right;
	text-transform: uppercase;
	cursor: help;
}

.center-mid {
	display: flex;
	justify-content: center;
	align-items: center;
}

.reset-button-circle {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 2px solid #fff;
	background-color: transparent;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	padding: 0;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.reset-button-circle:hover {
	transform: scale(1.08);
	border-color: #f2f2f2;
}

.reset-button-circle img {
	width: 24px;
	height: auto;
}

.center-right {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.btn-offres-header {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border: 2px solid #fff;
	border-radius: 4px;
	color: #fff !important;
	font-family: "Albert Sans", "Inter", sans-serif;
	font-size: 11px;
	font-weight: 800;
	padding: 4px 12px;
	text-decoration: none;
	background-color: #01677d;
	transition: background-color 0.2s ease, color 0.2s ease;
	line-height: 1.2;
}

.btn-offres-header:hover {
	background-color: #fff;
	color: var(--colorEtape3) !important;
}

/* Actions PDF / Save */
.header-actions {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	margin-right: 5px;
}

/* Button indicateur de devise dans le bandeau du haut (Encadré rouge) */
.top-header-currency-container {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.top-header-currency-btn {
	background: #ffffff;
	color: #308796;
	border: 1px solid #ffffff;
	border-radius: 4px;
	padding: 0 6px;
	font-family: "Albert Sans", "Inter", sans-serif;
	font-size: 11px;
	font-weight: 800;
	cursor: pointer;
	line-height: 1 !important;
	height: 18px !important;
	box-sizing: border-box !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	transition: all 0.2s ease;
	outline: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.top-header-currency-btn span {
	display: inline-block;
	line-height: 1;
	margin-top: 1px;
}

.top-header-currency-btn:hover {
	background: #f1f5f9;
	color: #01677d;
	transform: scale(1.05);
}

.top-header-currency-btn.is-conversion-mode {
	background: #e0f2fe;
	color: #0284c7;
	border-color: #38bdf8;
}

/* Hover popup / Tooltip pour l'indicateur de devise du haut */
.top-header-currency-hover-popup {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	background-color: #1e293b;
	color: #ffffff;
	padding: 5px 10px;
	border-radius: 4px;
	font-family: "Albert Sans", "Inter", sans-serif;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
	z-index: 1050;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	pointer-events: none;
}

.top-header-currency-hover-popup::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #1e293b transparent;
}

.top-header-currency-container:hover .top-header-currency-hover-popup {
	visibility: visible;
	opacity: 1;
	transform: translateX(-50%) translateY(2px);
}

.header-action-item {
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.2s ease;
}

.header-action-item:hover {
	transform: scale(1.1);
}

/* Bouton "Retour au Lexique" (affiché uniquement depuis une loupe du Lexique) */
.retour-lexique-btn {
	gap: 4px;
	padding: 6px 10px;
	border: 2px solid #e53935;
	border-radius: 8px;
	color: #ffffff;
	font-size: 1.3rem;
	text-decoration: none;
}

.retour-lexique-btn[hidden] {
	display: none;
}

.retour-lexique-btn:hover {
	color: #ffffff;
	background-color: rgba(229, 57, 53, 0.25);
}

.header-action-item img {
	height: 38px;
	width: 38px;
	object-fit: contain;
}

/* Crédits */
#credit {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	font-size: 1.3em;
	font-weight: bold;
	color: #fff;
	background: transparent;
	padding: 0;
	border-radius: 0;
}

#credit .logo {
	width: 38px;
	height: auto;
}

/* Séparateur vertical */
.separatorV {
	border-left: 2.4px solid var(--colorEtape4);
	height: 50px;
	flex-shrink: 0;
	opacity: 0.8;
}

.mobile-only-separator {
	display: none !important;
}

.header-legend {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 6px;
	flex-shrink: 0;
}

.legend-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: 6px;
	font-family: "Albert Sans", "Inter", sans-serif;
	font-size: 11px;
	font-weight: bold;
	height: 20px;
	box-sizing: border-box;
	line-height: 1;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.legend-obligatoire {
	background-color: #fff6c3;
	color: #d8000c;
}

.legend-saisie-possible {
	background-color: #ffffff !important;
	color: #0056b3;
	border: none !important;
}

.legend-asterisk {
	margin-right: 5px;
	font-size: 13px;
	line-height: 1;
	display: inline-block;
	transform: translateY(1.5px);
}

.logo-wrapper {
	position: relative !important;
	display: block !important;
	width: 280px !important;
	height: 62px !important;
	margin-top: 1px !important;
	margin-bottom: -5px !important;
}

.logo-layer {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}

.logo-layer-disque {
	z-index: 1 !important;
}

.logo-layer-r {
	z-index: 2 !important;
}

.logo-layer-text {
	z-index: 3 !important;
}

#logo-principal {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Lien de retour vers l'accueil autour du logo Rabbit Immo */
.logo-principal-link {
	display: block !important;
	text-decoration: none !important;
	cursor: pointer !important;
	line-height: 0 !important;
}

#simulateur-titre-sous-logo-principal {
	font-family: "Albert Sans", "Inter", sans-serif;
	font-size: 15px;
	font-weight: 800;
	color: #fff;
	text-align: center;
	margin-top: -3px;
	margin-bottom: 0;
	letter-spacing: 0.8px;
	position: relative !important;
	z-index: 10 !important;
	white-space: nowrap !important;
}

.section-connexion {
	position: relative;
}

.admin-alert {
	position: absolute;
	top: 0;
	right: 0;
}

.header-left-col {
    z-index: 99999 !important;
    position: relative !important;
}

#nav-Navigation {
    position: absolute;
    top: 78px;
    left: 0;
    z-index: 999999 !important;
    background-color: var(--colorEtape3);
    width: 400px;
    padding: 20px;
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.3);
}

#nav-Navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#nav-Navigation a,
#nav-Navigation a.nav-link,
#nav-Navigation li.nav-item > a {
	color: #fff;
	text-decoration: none;
	display: flex !important;
	align-items: center !important;
	padding: 5px 0;
}

#nav-Navigation a:hover {
	color: #ddd;
}

#nav-Navigation .logo,
#nav-Navigation i.bi,
#nav-Navigation i.logo,
#nav-Navigation li.nav-item > a > i.bi,
#nav-Navigation li.nav-item > a > img.logo,
#nav-Navigation .nav-menu-icon {
	width: 28px !important;
	min-width: 28px !important;
	max-width: 28px !important;
	height: 25px !important;
	margin-right: 10px !important;
	margin-left: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	object-fit: contain !important;
	text-align: center !important;
}

#nav-Navigation li.nav-item > a > i.bi,
#nav-Navigation i.bi {
	font-size: 1.5em !important;
	line-height: 1 !important;
}

.nav-link img {
	display: inline-block;
}

.nav-link:hover {
	background-color: var(--colorEtape4);
}

#nav-Navigation .nav-item-rentabilite,
.nav-item-rentabilite {
	background-color: #18667c !important;
	margin-left: -20px !important;
	margin-right: -20px !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
	width: calc(100% + 40px) !important;
	box-sizing: border-box !important;
}

#nav-Navigation .nav-item-rentabilite a.nav-link,
#nav-Navigation .nav-item-rentabilite a.nav-link:hover,
#nav-Navigation .nav-item-rentabilite a.nav-link:focus,
#nav-Navigation .nav-item-rentabilite a.nav-link:active,
.nav-item-rentabilite .nav-link,
.nav-item-rentabilite .nav-link:hover {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	width: 100% !important;
	margin: 0 !important;
}

/* TUNNEL Mode Page Layout & MACARON SIGNATURE Overlay (#dda201) */
main:has(img[src*="premiere_utilisation"]):not(#home):not(#irlPageWrapper),
main:has(img[src*="gold_r_symbol"]):not(#home):not(#irlPageWrapper) {
	min-height: 0 !important;
	height: auto !important;
	position: relative !important;
	background-color: transparent !important;
	overflow: visible !important;
	width: 100% !important;
}

/* MACARON SIGNATURE Container Styling */
main:has(img[src*="premiere_utilisation"]):not(#home) > div.d-flex.flex-column.align-items-center {
	border: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	position: relative !important;
	z-index: 10 !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 80px 20px 50px 20px !important;
	min-height: 480px !important;
}

main:has(img[src*="premiere_utilisation"]):not(#home) > div.card,
main:has(img[src*="gold_r_symbol"]):not(#home) > div.card {
	border: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	position: relative !important;
	z-index: 10 !important;
	width: 100% !important;
	max-width: 980px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 50px 20px 30px 20px !important;
	min-height: calc(100vh - 180px) !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-start !important;
}

/* Push Retour button container strictly to the bottom of the card frame */
#proprietaireRetourDiv {
	position: relative !important;
	margin-top: auto !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
	padding-top: 40px !important;
	padding-bottom: 10px !important;
	width: 100% !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	z-index: 999 !important;
}

#proprietaireRetourDiv a,
#proprietaireRetourDiv a:hover,
#proprietaireRetourDiv a:focus {
	background-color: #334155 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 20px !important;
	font-size: 1.1rem !important;
	font-weight: 600 !important;
	box-shadow: 0 4px 12px rgba(51, 65, 85, 0.3) !important;
	text-decoration: none !important;
}

/* Side-by-side flex layout for choice buttons (left & right on same line) */
main:has(img[src*="premiere_utilisation"]):not(#home) .card div.d-flex.flex-column.gap-3,
main:has(img[src*="gold_r_symbol"]):not(#home) .card div.d-flex.flex-column.gap-3 {
	flex-direction: row !important;
	justify-content: center !important;
	align-items: stretch !important;
	gap: 24px !important;
	width: 100% !important;
	margin-top: 15px !important;
}

main:has(img[src*="premiere_utilisation"]):not(#home) .card div.d-flex.flex-column.gap-3 > a.btn,
main:has(img[src*="gold_r_symbol"]):not(#home) .card div.d-flex.flex-column.gap-3 > a.btn {
	flex: 1 1 0px !important;
	width: 33.33% !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
}

/* Gold Banner box for ETES-VOUS LOCATAIRE OU PROPRIETAIRE ? */
main:has(img[src*="premiere_utilisation"]):not(#home) div.px-5 {
	background-color: #dda201 !important;
	border-radius: 6px !important;
	padding: 14px 40px !important;
	box-shadow: 0 4px 15px rgba(221, 162, 1, 0.3) !important;
	display: block !important;
	width: 90% !important;
	max-width: 820px !important;
	margin: 0 auto 20px auto !important;
	text-align: center !important;
}

main:has(img[src*="premiere_utilisation"]):not(#home) div.px-5 h1 {
	background-color: transparent !important;
	color: #ffffff !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	display: block !important;
	font-weight: 700 !important;
	font-size: 2.1rem !important;
}

/* EXPLICIT CENTERED RESET FOR HOMEPAGE (#home) - Keeps rotating subtitle (#phraseAccueil) perfectly centered under logo */
main#home #section1,
main#home #section1 div,
main#home #section1 h1,
main#home section h1 {
	text-align: center !important;
	width: 100% !important;
	display: block !important;
	margin: 0 auto !important;
	padding: 0 !important;
	background-color: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

main#home #section1 #phraseAccueil {
	display: inline !important;
	text-align: center !important;
}

/* Sub-TUNNEL Pages (LOCATAIRE & PROPRIETAIRE) -> Green / Teal Banner #368c99 */
main:has(a[href*="capacite"]):not(#home) h1,
main:has(a[href*="mensualite"]):not(#home) h1,
main:has(a[href*="racheter"]):not(#home) h1,
main:has(a[href*="vendre"]):not(#home) h1,
main:has(a[href*="louer"]):not(#home) h1,
main:not(#home) .card h1 {
	background-color: #368c99 !important;
	color: #ffffff !important;
	padding: 12px 35px !important;
	border-radius: 8px !important;
	display: inline-block !important;
	width: auto !important;
	max-width: max-content !important;
	margin: 0 auto 20px auto !important;
	font-weight: 700 !important;
	font-size: 1.85rem !important;
	text-transform: uppercase !important;
	box-shadow: 0 4px 14px rgba(54, 140, 153, 0.25) !important;
	text-align: center !important;
}

/* Inject White Icon via CSS ::before on LOCATAIRE H1 Banner */
main:has(a[href*="capacite"]):not(#home) .card h1::before,
main:has(a[href*="mensualite"]):not(#home) .card h1::before {
	content: "\f4da" !important; /* bi-person-badge */
	font-family: "bootstrap-icons" !important;
	font-size: 1.65rem !important;
	vertical-align: middle !important;
	margin-right: 12px !important;
	color: #ffffff !important;
	display: inline-block !important;
}

/* Inject White Icon via CSS ::before on PROPRIETAIRE H1 Banner */
main:has(a[href*="racheter"]):not(#home) .card h1::before,
main:has(a[href*="vendre"]):not(#home) .card h1::before,
main:has(a[href*="louer"]):not(#home) .card h1::before,
main:has(a[href*="achat_revente"]):not(#home) .card h1::before,
main:has(a[href*="irl"]):not(#home) .card h1::before {
	content: "\f425" !important; /* bi-house-door-fill */
	font-family: "bootstrap-icons" !important;
	font-size: 1.65rem !important;
	vertical-align: middle !important;
	margin-right: 12px !important;
	color: #ffffff !important;
	display: inline-block !important;
}

/* Sub-TUNNEL H1 Title Icon Styling */
main .card h1 i.bi {
	color: #ffffff !important;
	font-size: 1.85rem !important;
	vertical-align: middle !important;
	margin-right: 12px !important;
	display: inline-block !important;
}

/* TUNNEL Mode Choice Buttons: Gold #dda201 Background with Doubled Text Size (1.55rem) & White Font */
main:has(img[src*="premiere_utilisation"]):not(#home) .card a.btn:not(.btn-outline-secondary),
main:has(img[src*="gold_r_symbol"]):not(#home) .card a.btn:not(.btn-outline-secondary) {
	background-color: #dda201 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 14px !important;
	padding: 20px 24px !important;
	font-weight: 700 !important;
	font-size: 1.55rem !important;
	line-height: 1.35 !important;
	box-shadow: 0 4px 14px rgba(221, 162, 1, 0.3) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
	text-align: center !important;
}

main:has(img[src*="premiere_utilisation"]):not(#home) .card a.btn:not(.btn-outline-secondary) span,
main:has(img[src*="gold_r_symbol"]):not(#home) .card a.btn:not(.btn-outline-secondary) span {
	font-size: 1.55rem !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	display: block !important;
}

/* EXPLICIT HOMEPAGE MACARON BADGE STYLING (#home) - Reduced by 20% (112px x 112px) */
main#home .premiere-utilisation-box img {
	content: normal !important;
	width: 112px !important;
	height: 112px !important;
	object-fit: contain !important;
	image-rendering: smooth !important;
	filter: drop-shadow(0 6px 14px rgba(0,0,0,0.3)) !important;
	display: block !important;
}

/* Force Macaron badge image to premiere_utilisation.png ONLY on TUNNEL pages (excludes #home) */
main:not(#home) img[src*="gold_r_symbol"] {
	content: url('/img/icons/premiere_utilisation.png') !important;
	width: 90px !important;
	height: 90px !important;
	object-fit: contain !important;
	image-rendering: smooth !important;
}

/* Ensure Button 2 ALWAYS displays a single question mark ? inline at the end of text */
main a[href*="mensualite"] span::after,
main a[href*="mensualite"] .text-dark::after {
	content: ' ?' !important;
	font-size: inherit !important;
	font-weight: bold !important;
	color: #ffffff !important;
	display: inline !important;
}

/* Force small sub-label text replacement to (mode Express: basé sur votre loyer) in pure WHITE (#ffffff) */
main a[href*="capacite"] small {
	font-size: 0 !important;
	line-height: 0 !important;
	visibility: hidden !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

main a[href*="capacite"] small::after {
	content: '(mode Express: basé sur votre loyer)' !important;
	font-size: 1.15rem !important;
	line-height: 1.4 !important;
	color: #ffffff !important; /* ALL WHITE TEXT */
	font-weight: 600 !important;
	display: block !important;
	visibility: visible !important;
	margin-top: 4px !important;
}

/* OVERRIDE BOOTSTRAP .text-dark AND .text-muted ON TUNNEL BUTTONS TO WHITE */
main .card a.btn .text-dark,
main .card a.btn span {
	color: #ffffff !important;
}

main:has(img[src*="premiere_utilisation"]):not(#home) .card a.btn:not(.btn-outline-secondary) *,
main:has(img[src*="gold_r_symbol"]):not(#home) .card a.btn:not(.btn-outline-secondary) * {
	color: #ffffff !important;
}

/* TUNNEL Choice Button Icon Styling */
main:has(img[src*="premiere_utilisation"]):not(#home) .card a.btn i.bi,
main:has(img[src*="gold_r_symbol"]):not(#home) .card a.btn i.bi {
	color: #ffffff !important;
	font-size: 1.75rem !important;
	vertical-align: middle !important;
	margin-right: 12px !important;
	display: inline-block !important;
}

/* Express Title Left & Right Icons forced to 100% Bright White */
.express-page-main-title img,
.express-title-left-icon,
.express-title-icon,
#simulateurEmprunt .header-bandeau h1 img {
	filter: brightness(0) invert(1) !important;
	-webkit-filter: brightness(0) invert(1) !important;
}

main:has(img[src*="premiere_utilisation"]):not(#home) .card a.btn:not(.btn-outline-secondary):hover,
main:has(img[src*="gold_r_symbol"]):not(#home) .card a.btn:not(.btn-outline-secondary):hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 18px rgba(221, 162, 1, 0.45) !important;
	background-color: #c99300 !important;
	color: #ffffff !important;
}

/* Dark Gray #334155 styling for Back / Retour button */
main:has(img[src*="premiere_utilisation"]):not(#home) .card a.btn-outline-secondary,
main:has(img[src*="gold_r_symbol"]):not(#home) .card a.btn-outline-secondary,
main .card a[href*="app_first_use"].btn {
	background-color: #334155 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 20px !important;
	padding: 10px 30px !important;
	font-weight: 600 !important;
	font-size: 1.05rem !important;
	box-shadow: 0 4px 12px rgba(51, 65, 85, 0.25) !important;
	transition: background-color 0.2s ease, transform 0.2s ease !important;
}

main .card a[href*="app_first_use"].btn * {
	color: #ffffff !important;
}

main .card a[href*="app_first_use"].btn:hover {
	background-color: #1e293b !important;
	color: #ffffff !important;
	transform: translateY(-1px) !important;
}

/* MACARON SIGNATURE Badge (Smooth Anti-Aliased 90px size, top: 5px, left: 15px) stacked on top-left gold frame corner */
main:has(img[src*="premiere_utilisation"]):not(#home) div[style*="position: absolute"],
main:has(img[src*="gold_r_symbol"]):not(#home) div[style*="position: absolute"] {
	display: block !important;
	top: 5px !important;
	left: 15px !important;
	z-index: 20 !important;
}

main:has(img[src*="premiere_utilisation"]):not(#home) div[style*="position: absolute"] img,
main:has(img[src*="gold_r_symbol"]):not(#home) div[style*="position: absolute"] img {
	width: 90px !important;
	height: 90px !important;
	min-width: 90px !important;
	min-height: 90px !important;
	object-fit: contain !important;
	image-rendering: auto !important;
	image-rendering: smooth !important;
}

@media screen and (max-width: 1100px) {
	#lien-immo,
	#info-offre,
	#header-simulateur,
	.header-center-col {
		display: none !important;
	}

	/* Show header-actions on mobile as a vertical stack of currency & lang buttons to the left of credits coin */
	.header-actions {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 2px !important;
		margin: 0 4px 0 0 !important;
	}

	/* Hide action icons (PDF & Save) in header-actions on mobile */
	.header-actions #pdfVisiteBtn,
	.header-actions #pdfSimBtn,
	.header-actions #Enregistrer {
		display: none !important;
	}

	/* 25% size reduction for Currency Button on mobile (14px height, 8.5px font) */
	.top-header-currency-container {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.top-header-currency-btn {
		height: 14px !important;
		font-size: 8.5px !important;
		padding: 0 4px !important;
		border-radius: 3px !important;
		line-height: 1 !important;
		box-sizing: border-box !important;
	}

	.top-header-currency-btn span {
		font-size: 8.5px !important;
		line-height: 1 !important;
		margin-top: 1px !important;
	}

	/* 25% size reduction for Language Switcher on mobile (14px height, 8.5px font) */
	.lang-switcher-container {
		margin-right: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	.lang-switcher-btn {
		height: 14px !important;
		font-size: 8.5px !important;
		padding: 0 4px !important;
		border-radius: 3px !important;
		gap: 2px !important;
		line-height: 1 !important;
		box-sizing: border-box !important;
	}

	.lang-switcher-btn span {
		font-size: 8.5px !important;
		line-height: 1 !important;
		margin-top: 1px !important;
	}

	.lang-switcher-btn .lang-caret {
		font-size: 7px !important;
		margin-left: 1px !important;
		line-height: 1 !important;
		margin-top: 1px !important;
	}

	.lang-switcher-menu {
		top: calc(100% + 2px) !important;
		border-radius: 3px !important;
		padding: 0 !important;
	}

	.lang-switcher-item {
		height: 14px !important;
		font-size: 8.5px !important;
		padding: 0 4px !important;
		line-height: 14px !important;
	}

	/* Assurer que la légende, le séparateur et le logo s'affichent à la suite sur mobile */
	.header-legend {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		gap: 3px !important;
	}

	.legend-badge {
		padding: 2px 5px !important;
		font-size: 8px !important;
		height: 14px !important;
		line-height: 10px !important;
		border-radius: 4px !important;
		font-weight: 800 !important;
		white-space: nowrap !important;
	}

	.legend-asterisk {
		font-size: 8px !important;
		margin-right: 2px !important;
	}

	.logo-page-en-cours {
		display: flex !important;
	}

	.logo-page-en-cours img, 
	.logo-page-en-cours img.logo, 
	.logo-page-en-cours i.bi {
		font-size: 32px !important;
		width: 32px !important;
		min-width: 32px !important;
		max-width: 32px !important;
		height: 32px !important;
		min-height: 32px !important;
		max-height: 32px !important;
		display: block !important;
		object-fit: contain !important;
	}

	.separatorV {
		display: none !important;
	}

	.mobile-separator {
		display: block !important;
		height: 38px !important;
		margin: 0 2px !important;
		border-left: 2.4px solid #c5a040 !important; /* Matches PC separator thickness */
		width: 2.4px !important;
		background: transparent !important;
	}

	.mobile-only-separator {
		display: block !important;
		height: 38px !important;
		margin: 0 2px !important;
		border-left: 2.4px solid #c5a040 !important; /* Matches PC separator thickness */
		width: 2.4px !important;
		background: transparent !important;
	}

	header {
		display: flex !important;
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: center !important;
		padding: 0 4px !important;
		gap: 2px !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 1000 !important;
		height: 75px !important; 
	}

	body {
		padding-top: 75px !important;
	}

	.header-left-col {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 4px !important;
		flex: 1 1 auto !important;
	}

	.header-right-col {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 5px !important;
		flex: 0 0 auto !important;
		margin-right: 4px !important;
	}

	#logo-principal {
		margin-top: 0px;
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
		margin-left: 6px !important;
	}

	.logo-wrapper {
		width: 290px !important; /* Enlarged from 275px to match mockup target */
		height: 62px !important; 
		margin-top: 1px !important;
		margin-bottom: -1px !important;
	}

	.logo-layer {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 100% !important;
		height: 100% !important;
		object-fit: contain !important;
	}

	#simulateur-titre-sous-logo-principal {
		font-size: 11px !important; 
		margin-top: -1px !important;
		white-space: nowrap !important;
		letter-spacing: 0.45px !important;
		font-weight: 800 !important;
	}

	#btnMenuIntermediaire {
		font-size: 26px;
		padding: 2px;
		margin-left: 10px !important;
	}

	#credit {
		font-size: 1.4em !important;
		padding: 0 !important;
		margin: 0 !important;
		background: transparent !important;
		gap: 4px !important;
		border-radius: 0 !important;
		border-left: none !important;
		flex-direction: row !important;
		align-items: center !important;
		font-family: "Albert Sans", "Inter", sans-serif !important;
		font-weight: 800 !important;
	}

	#credit .logo {
		width: 28px !important;
		margin-right: 0 !important;
	}

	#credit span {
		margin-left: 2px !important; /* Adjusted to positive margin-left to prevent collision */
		color: #fff !important;
	}

	#credit .infinity-logo-header {
		width: 24px !important;
		height: auto !important;
		margin-left: 2px !important;
	}

	.hide-on-mobile {
		display: none !important;
	}

	/* Style de la connexion/déconnexion sur mobile pour correspondre à l'icône Power blanche de la maquette */
	#section-connexion ul {
		margin: 0 !important;
		padding: 0 !important;
	}
	/* Annule le "header ul { border-bottom: 2px solid teal }" de main.mobilev3.css qui dépassait sous la bordure du bandeau
	   (limité à la liste du compte : le menu déroulant garde sa bordure Bootstrap) */
	#section-connexion > ul {
		border: 0 !important;
	}
	#section-connexion li.nav-item {
		margin: 0 !important;
	}
	#section-connexion li.nav-item a.mobileDiconnect,
	#section-connexion li.nav-item.dropdown > a.nav-link {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 !important;
		font-size: 0 !important; /* Cache le texte */
		color: #fff !important;
		background: transparent !important;
	}
	#section-connexion li.nav-item a.mobileDiconnect i.bi,
	#section-connexion li.nav-item.dropdown > a.nav-link i.bi,
	#section-connexion li.dropdown-toggle::after {
		font-size: 26px !important;
		color: #fff !important;
		margin: 0 !important;
		display: inline-block !important;
	}
	/* Cacher la flèche dropdown sur mobile */
	#section-connexion li.nav-item.dropdown > a.nav-link::after {
		display: none !important;
	}
	/* Masquer le texte "Connexion Inscription" de la version de base */
	#section-connexion li[role="button"] {
		padding: 0 !important;
		margin: 0 !important;
	}
	#section-connexion li[role="button"] span#popoverAccueil {
		display: none !important;
	}
	#section-connexion li[role="button"] i.bi {
		font-size: 26px !important;
		color: #fff !important;
		margin: 0 !important;
	}
	.mobile-hide-separator {
		display: none !important;
	}
}

@media screen and (max-width: 1600px) and (min-width: 1101px) {
	.header-left-col {
		gap: 8px !important;
	}
	.logo-wrapper {
		width: 220px !important;
		height: 48px !important;
	}
	#simulateur-titre-sous-logo-principal {
		font-size: 12px !important;
	}
	#lien-immo {
		width: 110px !important;
		gap: 6px !important;
	}
	#lien-immo img {
		width: 32px !important;
		height: 32px !important;
	}
	.legend-badge {
		padding: 2px 6px !important;
		font-size: 10px !important;
		height: 18px !important;
	}
	.header-legend {
		gap: 4px !important;
	}
}

@media screen and (min-width: 1101px) {
	#section-connexion {
		display: flex !important;
		align-items: center !important;
		height: 100% !important;
	}
	#section-connexion > ul {
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		list-style: none !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: flex-start !important;
		gap: 3px !important;
	}
	#section-connexion > ul > li.nav-item {
		margin: 0 !important;
		padding: 0 !important;
		display: flex !important;
		align-items: center !important;
	}
	#section-connexion > ul > li.nav-item > a.mobileDiconnect,
	#section-connexion > ul > li.nav-item > a.nav-link {
		padding: 1px 0 !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		gap: 6px !important;
		font-family: "Albert Sans", "Inter", sans-serif !important;
		font-size: 11px !important;
		font-weight: 700 !important;
		color: #ffffff !important;
		line-height: 1.2 !important;
		text-transform: uppercase !important;
	}
	#section-connexion > ul > li.nav-item > a.mobileDiconnect i.bi,
	#section-connexion > ul > li.nav-item > a.nav-link i.bi {
		font-size: 15px !important;
		line-height: 1 !important;
		margin: 0 !important;
		display: inline-block !important;
	}
}

@media screen and (max-width: 576px) {
	#btnMenuIntermediaire {
		margin-left: 4px !important;
	}
	#logo-principal {
		margin-left: 6px !important; /* Shift logo right to clear the hamburger menu */
	}
	.logo-wrapper {
		width: 231px !important; /* Enlarged by another 10% from 210px */
		height: 50px !important;  /* Enlarged by another 10% from 45px */
	}
	#simulateur-titre-sous-logo-principal {
		font-size: 11px !important;
	}
	.logo-page-en-cours img, 
	.logo-page-en-cours img.logo, 
	.logo-page-en-cours i.bi {
		font-size: 24px !important;
		width: 24px !important;
		min-width: 24px !important;
		max-width: 24px !important;
		height: 24px !important;
		min-height: 24px !important;
		max-height: 24px !important;
	}
	.mobile-separator,
	.mobile-only-separator {
		margin: 0 2px !important;
	}
	.header-right-col {
		margin-right: 4px !important;
		gap: 6px !important;
	}
	#credit {
		font-size: 1.15em !important;
		gap: 4px !important;
	}
	#credit .logo {
		width: 22px !important;
	}
	#section-connexion li.nav-item a.mobileDiconnect i.bi,
	#section-connexion li.nav-item.dropdown > a.nav-link i.bi,
	#section-connexion li[role="button"] i.bi {
		font-size: 22px !important;
	}
}

/* TUNNEL MODE OVERLAY SYSTEM */
header {
    z-index: 9999997 !important;
    overflow: visible !important;
}

.header-left-col {
    z-index: 9999998 !important;
    position: relative !important;
    overflow: visible !important;
}

#nav-Navigation {
    position: fixed !important;
    top: 78px !important;
    left: 0 !important;
    z-index: 9999999 !important;
    opacity: 1 !important;
    background-color: var(--colorEtape3) !important;
    width: 400px !important;
    padding: 20px !important;
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.4) !important;
}

header:has(#nav-Navigation.show),
header:has(#nav-Navigation.collapsing) {
    z-index: 9999999 !important;
}

#nav-Navigation a {
    white-space: nowrap !important;
}

main.in-tunnel-mode,
body.in-tunnel-mode main {
    position: relative !important;
    overflow: visible !important;
    z-index: 10 !important;
    width: 100% !important;
    background-color: transparent !important;
}

.tunnel-gold-overlay-frame {
    position: absolute !important;
    top: 6px !important;
    left: 30px !important;
    right: 30px !important;
    bottom: 0px !important;
    border: 4px solid #dda201 !important;
    border-radius: 8px !important;
    pointer-events: none !important;
    z-index: 1 !important;
    background: transparent !important;
    box-shadow: inset 0 0 10px rgba(221, 162, 1, 0.1) !important;
}

body.in-tunnel-mode main > div:not(.tunnel-gold-overlay-frame):not(.tunnel-gold-macaron-badge):not(.tunnel-gold-retour-badge),
body.in-tunnel-mode .ar-container {
    position: relative !important;
    z-index: 10 !important;
}

.tunnel-gold-macaron-badge {
    position: absolute !important;
    top: 2px !important;
    left: 8px !important;
    z-index: 99950 !important;
    pointer-events: none !important;
    user-select: none !important;
}

.tunnel-gold-macaron-badge img {
    width: 85px !important;
    height: 85px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3)) !important;
    transition: none !important;
    cursor: default !important;
    pointer-events: none !important;
    user-select: none !important;
}

.tunnel-gold-macaron-badge img:hover {
    transform: none !important;
}

.tunnel-gold-retour-badge {
    position: absolute !important;
    bottom: 0px !important;
    left: 50% !important;
    transform: translate(-50%, 50%) !important;
    z-index: 100 !important;
    pointer-events: auto !important;
}

.tunnel-gold-retour-badge a.btn-tunnel-retour {
    background-color: #334155 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 7px 26px !important;
    border-radius: 25px !important;
    border: 2px solid #dda201 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
    transform: none !important;
}

.tunnel-gold-retour-badge a.btn-tunnel-retour:hover {
    background-color: #1e293b !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
    transform: none !important;
}