/**
 * Styles de base du Simulateur de Coût.
 *
 * Principe couleurs : chaque couleur utilise d'abord une variable CSS
 * scopée au widget (--calc-*), définie UNIQUEMENT si le marketing a
 * choisi une couleur dans l'onglet Style. Si rien n'est choisi, elle
 * retombe automatiquement sur les variables globales du thème
 * (--color-primary, --group-color-grey-*, etc.) — le widget suit donc
 * la charte du site sans configuration, tout en restant surchargeable
 * au cas par cas (ex : section à fond sombre).
 *
 * Note : la largeur du widget est entièrement pilotée par le contrôle
 * natif Elementor (Avancé → Mise en page → Largeur). Aucune règle CSS
 * ne doit forcer une largeur sur le wrapper du widget lui-même — un
 * précédent correctif ici entrait en conflit avec ce contrôle natif
 * (spécificité CSS trop élevée, gagnait systématiquement contre la
 * règle générée par Elementor) et a été retiré pour cette raison.
 */

.calc-recruteur-widget {
	--calc-radius: 8px;

	width: 100%;
	display: grid;
	/* Valeur de base : 2 colonnes. Le nombre réel de colonnes par
	   appareil est piloté explicitement par le contrôle "Nombre de
	   colonnes" (Style → Mise en page, responsive) — pas de seuil
	   automatique ici, pour rester prévisible. */
	grid-template-columns: 1fr 1fr;
	column-gap: 40px;
	row-gap: 20px;
	align-items: center;
}

/* Le passage à 1 colonne se fait via le contrôle "Nombre de colonnes"
   (responsive) — voir class-calc-recruteur-widget.php. */

/* ---------- Colonne des champs de saisie ---------- */

.calc-recruteur-inputs {
	display: flex;
	flex-direction: column;
	row-gap: 20px;
}

.calc-field label {
	display: block;
	font-weight: 700;
	margin-bottom: 8px;
	color: var(--calc-input-label, inherit);
}

.calc-field--number input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--calc-input-border, var(--group-color-grey-4, #d7dce1));
	border-radius: var(--calc-radius);
	background: var(--calc-input-bg, transparent);
	color: var(--calc-input-text, inherit);
}

/* ---------- Champ secteur (select) ---------- */

.calc-select-wrap {
	position: relative;
}

.calc-field--select select {
	width: 100%;
	padding: 10px 36px 10px 12px; /* espace à droite réservé à la flèche custom */
	border: 1px solid var(--calc-input-border, var(--group-color-grey-4, #d7dce1));
	border-radius: var(--calc-radius);
	background-color: var(--calc-select-bg, transparent);
	color: var(--calc-select-text, inherit);
	/* Supprime la flèche native du navigateur : on la redessine nous-mêmes
	   ci-dessous pour un rendu identique sur tous les navigateurs. */
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.calc-select-wrap::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--calc-select-arrow, var(--group-color-grey-1, #728695));
	border-bottom: 2px solid var(--calc-select-arrow, var(--group-color-grey-1, #728695));
	transform: translateY(-65%) rotate(45deg);
	pointer-events: none; /* laisse les clics passer jusqu'au select en dessous */
}

.calc-field--range__row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.calc-field--range__row input[type="range"] {
	flex: 1;
	-webkit-appearance: none;
	appearance: none;
	height: 4px;
	border-radius: 2px;
	cursor: pointer;
	outline: none;
	/* Repli statique tant que le JS n'a pas encore calculé le dégradé
	   de remplissage (voir calculator.js) — évite un flash sans couleur
	   au tout premier rendu. */
	background: var(--calc-range-track-bg, var(--group-color-grey-6, #F6F7F8));
}

/* --- Chrome / Edge / Safari (WebKit) --- */
.calc-field--range__row input[type="range"]::-webkit-slider-runnable-track {
	background: transparent; /* laisse apparaître le dégradé posé en JS sur l'input lui-même */
	height: 4px;
	border-radius: 2px;
}

.calc-field--range__row input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--calc-range-accent, var(--color-primary, #06375A));
	cursor: pointer;
	/* Centre le curseur (16px) sur la piste (4px) : (16 - 4) / 2 = 6 */
	margin-top: -6px;
}

/* --- Firefox --- */
.calc-field--range__row input[type="range"]::-moz-range-track {
	background: var(--calc-range-track-bg, var(--group-color-grey-6, #F6F7F8));
	height: 4px;
	border-radius: 2px;
}

/* Firefox a un pseudo-élément dédié à la portion remplie : pas besoin
   du dégradé JS ici, contrairement à WebKit. */
.calc-field--range__row input[type="range"]::-moz-range-progress {
	background: var(--calc-range-accent, var(--color-primary, #06375A));
	height: 4px;
	border-radius: 2px;
}

.calc-field--range__row input[type="range"]::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--calc-range-accent, var(--color-primary, #06375A));
	border: none;
	cursor: pointer;
}

.calc-field--range__min,
.calc-field--range__max {
	font-size: 0.85em;
	color: var(--group-color-grey-1, #728695);
}

.calc-field--range__value {
	display: block;
	margin-top: 6px;
	font-weight: 700;
	color: var(--calc-range-accent, var(--color-primary, #06375A));
}

/* ---------- Colonne des résultats ---------- */

.calc-recruteur-results {
	display: flex;
	flex-direction: column;
	row-gap: 16px; /* écart entre le bloc "léger" et le bloc "mis en avant" */
}

.calc-results-group--light {
	display: flex;
	flex-direction: column;
	row-gap: 16px; /* espacement entre les lignes du bloc "léger" uniquement */
}

.calc-results-group--highlight {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px; /* espacement entre les cartes du bloc "mis en avant" */
}

/* Résultats "light" : pleine largeur, en ligne */
.calc-result-light {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid var(--calc-light-divider, var(--group-color-grey-5, #e4e8ec));
}

.calc-result-light__label {
	font-weight: 700;
	color: var(--calc-light-label, var(--group-color-grey-1, #45525f));
}

.calc-result-light__value {
	font-weight: 700;
	color: var(--calc-light-value, var(--color-primary, #06375A));
}

/* Le préfixe/suffixe reprend la MÊME variable de couleur que la valeur
   (pas de contrôle couleur séparé) — seule la typographie peut différer.
   Léger ajustement vertical : une taille/graisse différente de celle de
   la valeur décale visuellement la ligne de base, d'où ce petit recentrage. */
.calc-result-light__prefix,
.calc-result-light__suffix {
	color: var(--calc-light-value, var(--color-primary, #06375A));
	position: relative;
	top: var(--calc-light-affix-offset, 0px);
}

/* Résultats mis en avant : cartes, 2 colonnes */
.calc-result-highlight {
	background: var(--calc-highlight-bg, var(--color-primary, #06375A));
	border-radius: var(--calc-radius);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.calc-result-highlight__label {
	font-weight: 700;
	color: var(--calc-highlight-label, #fff);
}

.calc-result-highlight__value {
	font-size: 1.6em;
	font-weight: 800;
	color: var(--calc-highlight-value, #fff);
}

/* Le préfixe/suffixe reprend la MÊME variable de couleur que la valeur. */
.calc-result-highlight__prefix,
.calc-result-highlight__suffix {
	color: var(--calc-highlight-value, #fff);
	position: relative;
	top: var(--calc-highlight-affix-offset, -1px);
}

/* La largeur (50%/100%, y compris par breakpoint) est désormais gérée
   directement par le contrôle responsive "Largeur" du repeater, via
   {{CURRENT_ITEM}} — plus de classe fixe ici. */

/* Icône : SVG choisi en médiathèque, appliqué en mask (voir PHP) */
.calc-icon {
	display: inline-block;
	width: 32px;
	height: 32px;
	background-color: var(--calc-icon-color, var(--color-tertiary, #FFC971));
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* ---------- Bouton d'appel à l'action ---------- */

.calc-recruteur-cta {
	grid-column: 1 / -1;
	text-align: center;
	margin-top: 12px; /* valeur par défaut ; surchargée par le contrôle de style "Espacement au-dessus du bouton" */
}

/* ---------- Pop-up ---------- */

.calc-recruteur-popup[hidden] {
	display: none;
}

.calc-recruteur-popup {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.calc-recruteur-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 42, 68, 0.6);
}

.calc-recruteur-popup__box {
	position: relative;
	background: #fff;
	border-radius: var(--calc-radius);
	padding: 32px;
	max-width: 560px;
	width: 90%;
	max-height: 85vh;
	overflow-y: auto;
}

.calc-recruteur-popup__close {
	position: absolute;
	top: 12px;
	right: 16px;
	background: none;
	border: none;
	font-size: 1.6em;
	line-height: 1;
	cursor: pointer;
}

.calc-recruteur-loading,
.calc-recruteur-error {
	text-align: center;
	color: var(--group-color-grey-1, #7a8794);
}