/* ==========================================================================
   OuiConsigne – Calculatrice de frais
   Tout est scopé sous .oc-calc : rien ne fuit vers le thème (Phlox/Elementor),
   et les sélecteurs à double classe résistent aux styles génériques du thème.
   La police est héritée du site (pas de Google Fonts → pas de souci RGPD).
   ========================================================================== */

.oc-calc {
	/* Palette (reprise du template) */
	--oc-brand-900: #0a1d3b;
	--oc-brand-800: #0f2c59;
	--oc-brand-600: #0052a3;
	--oc-brand-500: #0066cc;
	--oc-brand-50:  #f0f7ff;
	--oc-blue-600:  #2563eb;
	--oc-blue-700:  #1d4ed8;
	--oc-blue-200:  #bfdbfe;
	--oc-green-400: #34d399;
	--oc-ink-900:   #0f172a;
	--oc-ink-800:   #1e293b;
	--oc-ink-700:   #334155;
	--oc-ink-400:   #94a3b8;
	--oc-ink-300:   #cbd5e1;
	--oc-ink-200:   #e2e8f0;
	--oc-ink-100:   #f1f5f9;
	--oc-ink-50:    #f8fafc;
	--oc-font:      inherit;

	container-type: inline-size;
	font-family: var(--oc-font);
	line-height: 1.5;
	color: var(--oc-ink-700);
	margin: 0 auto;
	max-width: 56rem;
	-webkit-font-smoothing: antialiased;
}

/* Reset local, limité au composant */
.oc-calc *,
.oc-calc *::before,
.oc-calc *::after { box-sizing: border-box; }

.oc-calc h2,
.oc-calc p,
.oc-calc hr { margin: 0; padding: 0; }

.oc-calc svg { display: block; flex-shrink: 0; }

/* L'attribut hidden doit gagner contre les display posés par nos classes */
.oc-calc [hidden] { display: none !important; }

/* ---------- Carte ---------- */
.oc-calc .oc-calc__card {
	background: #fff;
	border: 1px solid var(--oc-ink-100);
	border-radius: 1.5rem;
	box-shadow: 0 25px 50px -12px rgba(15, 23, 42, .18);
	overflow: hidden;
}

/* ---------- En-tête ---------- */
.oc-calc .oc-calc__head {
	position: relative;
	overflow: hidden;
	padding: 1.5rem;
	color: #fff;
	/*background: linear-gradient(90deg, var(--oc-brand-900), var(--oc-brand-800), var(--oc-brand-900));*/
	background: linear-gradient(90deg, #A78249 0%, var(--e-global-color-secondary) 100%);
}

.oc-calc .oc-calc__head-inner {
	position: relative;
	z-index: 1;
	max-width: 42rem;
}

.oc-calc .oc-calc__badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-bottom: .75rem;
	padding: .25rem .75rem;
	border-radius: 999px;
	background: rgba(0, 102, 204, .3);
	color: var(--oc-blue-200);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.oc-calc .oc-calc__badge svg {
	width: 1rem;
	height: 1rem;
	color: var(--oc-green-400);
}

.oc-calc .oc-calc__title {
	color: #fff;
	font-family: inherit;
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
	text-transform: none;
}

.oc-calc .oc-calc__lead {
	margin-top: .5rem;
	color: var(--oc-ink-300);
	font-size: .9375rem;
}

.oc-calc .oc-calc__glow {
	position: absolute;
	right: -3rem;
	bottom: -3rem;
	width: 16rem;
	height: 16rem;
	border-radius: 50%;
	background: rgba(0, 102, 204, .18);
	filter: blur(48px);
	pointer-events: none;
}

/* ---------- Corps ---------- */
.oc-calc .oc-calc__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: center;
	padding: 1.5rem;
}

.oc-calc .oc-calc__inputs {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	min-width: 0;
}

.oc-calc .oc-calc__label {
	display: block;
	margin: 0 0 .5rem;
	color: var(--oc-ink-700);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .025em;
	text-transform: uppercase;
}

/* Champ montant */
.oc-calc .oc-calc__field { position: relative; }

.oc-calc .oc-calc__input {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 1rem 3rem 1rem 1.25rem;
	border: 2px solid var(--oc-ink-200);
	border-radius: 1rem;
	background: var(--oc-ink-50);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
	color: var(--oc-brand-900);
	font-family: inherit;
	font-size: 1.5rem;
	font-weight: 900;
	line-height: 1.2;
	outline: none;
	transition: border-color .2s, background-color .2s;
	-moz-appearance: textfield;
	appearance: textfield;
}

.oc-calc .oc-calc__input::-webkit-outer-spin-button,
.oc-calc .oc-calc__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.oc-calc .oc-calc__input:focus {
	border-color: var(--oc-brand-500);
	background: #fff;
}

.oc-calc .oc-calc__suffix {
	position: absolute;
	top: 50%;
	right: 1.25rem;
	transform: translateY(-50%);
	color: var(--oc-ink-400);
	font-size: 1.5rem;
	font-weight: 700;
	pointer-events: none;
}

/* Slider : la partie gauche se remplit via --oc-fill (mis à jour en JS) */
.oc-calc .oc-calc__range {
	display: block;
	width: 100%;
	height: .75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(to right, var(--oc-brand-500) var(--oc-fill, 0%), var(--oc-ink-200) var(--oc-fill, 0%));
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.oc-calc .oc-calc__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 24px;
	height: 24px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--oc-brand-500);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .15), 0 2px 4px -1px rgba(0, 0, 0, .08);
	transition: transform .1s ease-in-out;
}

.oc-calc .oc-calc__range::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--oc-brand-500);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .15);
}

.oc-calc .oc-calc__range:hover::-webkit-slider-thumb { transform: scale(1.15); }

.oc-calc .oc-calc__range:focus-visible {
	box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--oc-brand-500);
}

.oc-calc .oc-calc__scale {
	display: flex;
	justify-content: space-between;
	margin-top: .5rem;
	padding: 0 .25rem;
	color: var(--oc-ink-400);
	font-size: .75rem;
	font-weight: 600;
}

/* Montants rapides */
.oc-calc .oc-calc__presets-label {
	display: block;
	margin-bottom: .5rem;
	color: var(--oc-ink-400);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.oc-calc .oc-calc__presets {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.oc-calc .oc-calc__preset {
	margin: 0;
	padding: .375rem .75rem;
	border: 1px solid var(--oc-ink-200);
	border-radius: .75rem;
	background: var(--oc-ink-100);
	box-shadow: none;
	color: var(--oc-ink-700);
	font-family: inherit;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s;
}

.oc-calc .oc-calc__preset:hover,
.oc-calc .oc-calc__preset:focus-visible {
	background: var(--oc-brand-50);
	color: var(--oc-brand-600);
	outline: none;
}

.oc-calc .oc-calc__preset[aria-pressed="true"] {
	border-color: var(--oc-brand-500);
	background: var(--oc-brand-50);
	color: var(--oc-brand-600);
}

/* ---------- Carte résultat ---------- */
.oc-calc .oc-calc__result {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 0;
	padding: 1.5rem;
	border-radius: 1rem;
	background: var(--oc-ink-900);
	box-shadow: 0 20px 25px -5px rgba(15, 23, 42, .2);
	color: #fff;
}

.oc-calc .oc-calc__kicker {
	display: block;
	color: var(--oc-ink-400);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.oc-calc .oc-calc__fee {
	margin-top: .25rem;
	color: #fff;
	font-size: 2.25rem;
	font-weight: 900;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.oc-calc .oc-calc__pct {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .375rem;
	margin-top: 1.25rem;
	padding: .375rem .75rem;
	border: 1px solid #334155;
	border-radius: .75rem;
	background: var(--oc-ink-800);
	color: var(--oc-ink-300);
	font-size: .75rem;
}

.oc-calc .oc-calc__pct-value {
	color: var(--oc-green-400);
	font-size: .875rem;
	font-weight: 700;
}

.oc-calc .oc-calc__sep {
	height: 0;
	margin: 1.5rem 0;
	border: 0;
	border-top: 1px solid var(--oc-ink-800);
	background: none;
}

.oc-calc .oc-calc__pitch {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
}

.oc-calc .oc-calc__pitch-icon {
	display: inline-flex;
	padding: .5rem;
	border-radius: .75rem;
	background: rgba(16, 185, 129, .2);
	color: var(--oc-green-400);
}

.oc-calc .oc-calc__pitch-icon svg { width: 1.25rem; height: 1.25rem; }

.oc-calc .oc-calc__slogan {
	color: var(--oc-ink-200);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.4;
	align-self: center;
}

.oc-calc .oc-calc__slogan strong {
	color: var(--oc-green-400);
	font-weight: 700;
}

/* CTA */
.oc-calc .oc-calc__cta-wrap { margin-top: 2rem; }

.oc-calc .oc-calc__cta,
.oc-calc .oc-calc__cta:visited {
	display: block;
	width: 100%;
	padding: 1rem 1.5rem;
	border: 0;
	border-radius: .75rem;
	/*background: linear-gradient(90deg, var(--oc-brand-500), var(--oc-blue-600));*/
	background: linear-gradient(90deg, #A78249 0%, var(--e-global-color-secondary) 100%);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .25);
	color: #fff;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	transition: transform .2s, box-shadow .2s, background .2s;
}

.oc-calc .oc-calc__cta:hover,
.oc-calc .oc-calc__cta:focus-visible {
	/*background: linear-gradient(90deg, var(--oc-brand-600), var(--oc-blue-700));*/
	background: linear-gradient(90deg, #B79259 0%, var(--e-global-color-secondary) 100%);
	box-shadow: 0 10px 20px -3px rgba(0, 102, 204, .35);
	color: #fff;
	text-decoration: none;
	transform: translateY(-2px);
	outline: none;
}

.oc-calc .oc-calc__note {
	margin-top: .75rem;
	color: var(--oc-ink-400);
	font-size: .75rem;
	text-align: center;
}

/* ---------- Responsive ----------
   Container queries : on réagit à la largeur réelle du bloc (colonne Elementor,
   sidebar…), pas à celle de l'écran. */
@container (min-width: 640px) {
	.oc-calc .oc-calc__head { padding: 2.5rem; }
	.oc-calc .oc-calc__title { font-size: 2.25rem; }
	.oc-calc .oc-calc__lead { font-size: 1rem; }
	.oc-calc .oc-calc__body { padding: 2.5rem; }
	.oc-calc .oc-calc__result { padding: 2rem; }
	.oc-calc .oc-calc__fee { font-size: 3rem; }
}

@container (min-width: 820px) {
	.oc-calc .oc-calc__body { grid-template-columns: 7fr 5fr; }
}

@media (prefers-reduced-motion: reduce) {
	.oc-calc *,
	.oc-calc *::before,
	.oc-calc *::after { transition: none !important; }
}