/* ==========================================================================
   SwissKH, compléments au kit Elementor
   Couleurs et typographies : Elementor > Réglages du site (source unique).
   Ici : ce que le kit ne sait pas exprimer (mouvement, ombres, effets de
   bouton, rendu des shortcodes, accessibilité).
   Les couleurs et tailles pointent vers les variables Elementor (--skh-*).
   ========================================================================== */

:root {
	/* Source unique : variables Elementor v4 (Réglages du site > Variables, préfixe skh-).
	   Les globales du kit (--e-global-color-*) portent les mêmes valeurs pour les
	   widgets classiques. Valeurs de secours identiques si une variable manque. */
	--skh-red: var(--skh-rouge, #E30613);
	--skh-red-deep: var(--skh-rouge-fonce, #B4040F);
	--skh-ink: var(--skh-anthracite, #0F1216);
	--skh-fg: var(--skh-texte, #0F1216);
	--skh-fg-2: var(--skh-texte-2, #48515C);
	--skh-fg-3: var(--skh-texte-3, #6E7782);
	--skh-line: var(--skh-acier-200, #DFE2E6);
	--skh-line-strong: var(--skh-acier-300, #C7CCD2);
	--skh-steel-50: var(--skh-acier-50, #F5F6F7);
	--skh-med: var(--skh-medical, #1C8EEE);
	--skh-med-deep: var(--skh-medical-fonce, #0F5FA8);

	--skh-font-display: 'Rajdhani', 'Arial Narrow', 'Roboto Condensed', sans-serif;
	--skh-font-body: 'Overpass', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--skh-font-mono: 'Overpass Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

	--skh-maxw: var(--skh-largeur-max, 1320px);
	--skh-gutter: var(--skh-gouttiere, clamp(16px, 4vw, 40px));
	--skh-sec-y: var(--skh-section-y, clamp(72px, 6vw + 40px, 140px));
	--skh-radius: var(--skh-rayon, 2px);
	--skh-header-h: var(--skh-hauteur-entete, 76px);
	--skh-ease: cubic-bezier(.2, .7, .15, 1);
	--skh-ease-io: cubic-bezier(.65, 0, .35, 1);
	--skh-shadow-1: 0 1px 2px rgba(9, 11, 14, .06), 0 2px 8px rgba(9, 11, 14, .05);
	--skh-shadow-2: 0 2px 4px rgba(9, 11, 14, .06), 0 12px 32px -8px rgba(9, 11, 14, .18);
	--skh-shadow-3: 0 30px 80px -20px rgba(9, 11, 14, .35);
}

/* ---------- Base ---------- */
html { scroll-padding-top: calc(var(--skh-header-h) + 16px); }
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
h1, h2, h3, h4, h5, .elementor-heading-title { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--skh-red); color: #fff; }
:focus-visible { outline: 2px solid var(--skh-red); outline-offset: 3px; border-radius: 1px; }
/* Liens : héritent de la couleur du bloc (annule le rose du reset Hello). */
a, a:hover, a:active { color: inherit; }
.elementor-widget-text-editor a:not(.elementor-button) {
	text-decoration: underline;
	text-decoration-color: var(--skh-red);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}
.elementor-widget-text-editor a:not(.elementor-button):hover { color: var(--skh-red); }

/* Section de premier niveau (classe CSS sur le conteneur) : marges latérales
   fluides et respiration verticale du design system. */
.skh-section { padding-inline: var(--skh-gutter); }
.skh-section--y { padding-block: var(--skh-sec-y); }
.skh-wrap { width: 100%; max-width: calc(var(--skh-maxw) + 2 * var(--skh-gutter)); margin-inline: auto; padding-inline: var(--skh-gutter); }

.skh-mono { font-family: var(--skh-font-mono); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.skh-num { font-variant-numeric: tabular-nums; }

/* ---------- Boutons : remplissage qui balaie de gauche à droite ----------
   Couleurs de base dans le kit (Style du thème > Boutons).
   Variantes : ajouter la classe CSS sur le widget Bouton.
     skh-btn-line       contour anthracite, fond transparent
     skh-btn-ghost-inv  contour blanc sur fond sombre
     skh-btn-white      fond blanc, balayage rouge
     skh-btn-med        bleu Médical                                        */
.elementor-button {
	--skh-fill: var(--skh-ink);
	--skh-fg-fill: #fff;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color .35s var(--skh-ease), border-color .35s var(--skh-ease);
}
.elementor-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--skh-fill);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .45s var(--skh-ease);
}
.elementor-button:hover::before,
.elementor-button:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.elementor-button:hover,
.elementor-button:focus-visible { color: var(--skh-fg-fill); border-color: var(--skh-fill); }
.elementor-button .elementor-button-icon { transition: transform .35s var(--skh-ease); }
.elementor-button:hover .elementor-button-icon { transform: translateX(4px); }

.skh-btn-line .elementor-button { background-color: transparent; color: var(--skh-fg); border: 1.5px solid currentColor; --skh-fill: var(--skh-ink); }
.skh-btn-ghost-inv .elementor-button { background-color: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .5); --skh-fill: #fff; --skh-fg-fill: var(--skh-ink); }
.skh-btn-white .elementor-button { background-color: #fff; color: var(--skh-ink); border-color: #fff; --skh-fill: var(--skh-red); }
.skh-btn-med .elementor-button { background-color: var(--skh-med); border-color: var(--skh-med); --skh-fill: var(--skh-med-deep); }

/* ---------- Lien fléché (classe sur un widget Titre, Texte ou Bouton texte) ---------- */
.skh-link-arrow a,
a.skh-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 4px;
	font-family: var(--skh-font-display);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	background: linear-gradient(var(--skh-red), var(--skh-red)) no-repeat 0 100% / 100% 2px;
	transition: background-size .4s var(--skh-ease), color .3s;
}
.skh-link-arrow a:hover,
a.skh-link-arrow:hover { background-size: 0 2px; background-position: 100% 100%; }

/* ---------- Surtitre de section (à utiliser avec parcimonie) ---------- */
.skh-kicker,
.skh-kicker .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--skh-font-mono);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.skh-kicker .elementor-heading-title::before,
.skh-kicker:not(:has(.elementor-heading-title))::before {
	content: "";
	width: 8px;
	height: 8px;
	background: var(--skh-red);
	flex: none;
}

/* ---------- Shortcodes fiche machine ---------- */
.skh-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.skh-spec { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.skh-spec th,
.skh-spec td { padding: 14px 0; border-bottom: 1px solid var(--skh-line); text-align: left; vertical-align: top; }
.skh-spec th { width: 42%; padding-right: 24px; font-weight: 400; color: var(--skh-fg-2); }
.skh-spec td { font-family: var(--skh-font-mono); font-variant-numeric: tabular-nums; color: var(--skh-fg); }
.skh-spec tr:first-child th,
.skh-spec tr:first-child td { border-top: 1px solid var(--skh-line-strong); }

.skh-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 32px; margin: 0; }
.skh-options > div { padding: 16px 0; border-top: 1px solid var(--skh-line); }
.skh-options dt { font-family: var(--skh-font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.2; }
.skh-options dd { margin: 6px 0 0; color: var(--skh-fg-2); font-size: .9375rem; }

/* ---------- Formulaires Elementor Pro ---------- */
.elementor-field-group .elementor-field:not(.elementor-select-wrapper):focus,
.elementor-field-group .elementor-select-wrapper select:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(227, 6, 19, .15);
}
.elementor-field-group .elementor-field-option input { accent-color: var(--skh-red); }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}