/* =============================================================================
   Katana Digital — socle
   1. Jetons de design (relevés sur la maquette Figma « HomePage »)
   2. Reset ciblé du thème parent Beaver Builder
   3. Primitives partagées (conteneur, bouton, lien fléché, contenu éditeur)

   Tout est scopé sous .kd pour ne jamais déborder sur le reste du site.
   Les règles de module portent un `.kd` en préfixe (spécificité 0,2,0) afin de
   passer devant `.fl-post-content h2` (0,1,1) du thème bb-theme.
   ========================================================================== */

/* --- 1. Jetons -------------------------------------------------------- */

:root {
	--kd-green: #00f000;
	--kd-grey: #54565a;
	--kd-white: #fefefe;
	--kd-bg: #fafafa;
	--kd-light: #ececec;
	--kd-rule: #d9d9d9;

	--kd-font: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--kd-font-alt: "Roboto", ui-sans-serif, system-ui, sans-serif;

	--kd-container: 1280px;

	/* Échelle typographique relevée dans Figma */
	--kd-h1: 50px;          /* Hero — DM Sans Medium 50 / 1.4          */
	--kd-h2: 46px;          /* Titres de section — Medium 46 / 1.4     */
	--kd-h3: 26px;          /* « H3 - titles » — Medium 26 / 1.8       */
	--kd-lead: 26px;        /* Chapeaux — Medium 26 / 1.8              */
	--kd-body: 16px;        /* « H4 - main text » — Regular 16 / 1.8   */
	--kd-leading: 1.8;
}

/* --- 2. Reset ciblé du thème parent ----------------------------------- */

.kd,
.kd *,
.kd *::before,
.kd *::after {
	box-sizing: border-box;
}

.kd {
	font-family: var(--kd-font);
	font-size: var(--kd-body);
	line-height: var(--kd-leading);
	color: var(--kd-grey);
	/* Pas de font-variation-settings "opsz" ici : forcer opsz 14 sur du 50 px
	   élargit les glyphes d'environ 10 % et fait sauter une ligne au titre du
	   hero. L'axe optique est laissé au navigateur, comme dans la maquette. */
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Reset des liens — volontairement à (0,1,1) pour battre le `a { color }` du
   thème (0,0,1) tout en restant SOUS chaque composant (.kd .kd-btn…, ≥ 0,2,0).
   Le hover du thème (`a:hover` du skin, 0,1,1, chargé après nous) est
   neutralisé par la règle (0,2,1) ci-dessous, qui ne fixe PAS la couleur :
   chaque composant garde ainsi la main sur ses propres états. */
.kd a {
	color: inherit;
	text-decoration: none;
	background: none;
	border: 0;
	box-shadow: none;
	outline: 0;
}

.kd a:hover,
.kd a:focus {
	text-decoration: none;
}

.kd a:focus-visible,
.kd button:focus-visible {
	outline: 2px solid var(--kd-green);
	outline-offset: 3px;
}

.kd button,
.kd input[type="button"],
.kd input[type="submit"] {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-transform: none;
	letter-spacing: inherit;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Le thème pose `button:hover { background:#2b7bb9; border:1px solid… }`
   (0,1,1), à égalité avec le reset ci-dessus mais chargé après lui : il
   gagnerait à l'état survolé. On répète donc le reset au hover/focus à
   (0,2,1), sans toucher à la couleur pour laisser chaque composant gérer
   la sienne (flèches vertes du carrousel, burger, sélecteur de langue…). */
.kd button:hover,
.kd button:focus,
.kd input[type="button"]:hover,
.kd input[type="button"]:focus,
.kd input[type="submit"]:hover,
.kd input[type="submit"]:focus {
	background: none;
	border: 0;
	box-shadow: none;
	text-decoration: none;
}

.kd h1,
.kd h2,
.kd h3,
.kd h4,
.kd h5,
.kd h6,
.kd p,
.kd ul,
.kd ol,
.kd figure,
.kd blockquote {
	margin: 0;
	padding: 0;
	font-family: inherit;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.kd ul,
.kd ol {
	list-style: none;
}

.kd img,
.kd svg {
	display: block;
	max-width: 100%;
	height: auto;
}

.kd hr {
	margin: 0;
	border: 0;
}

/* --- 3. Primitives ---------------------------------------------------- */

.kd-container {
	width: 100%;
	max-width: var(--kd-container);
	margin-inline: auto;
	padding-inline: 20px;
}

/* Bouton pilule — Figma : px 20 / py 12, rayon 50, gap 18,
   DM Sans Black 14 / 24, interlettrage 0.5, capitales. */
.kd .kd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 12px 20px;
	border: 0;
	border-radius: 50px;
	font-family: var(--kd-font);
	font-weight: 900;
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Le chevron mesure 10 × 5 dans la maquette, pivoté d'un quart de tour : il
   occupe donc une boîte de 5 × 10. On dimensionne au viewBox complet
   (11.4142 × 7.12132) pour que le tracé fasse exactement 10 × 5, contour de
   2 compris. */
.kd .kd-btn__arrow,
.kd .kd-link__arrow {
	width: 11.4142px;
	height: 7.12132px;
	flex: none;
}

/* Variante pleine — fond vert, texte gris, sans bordure. */
.kd .kd-btn--solid {
	background-color: var(--kd-green);
	color: var(--kd-grey);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.kd .kd-btn--solid:hover,
.kd a.kd-btn--solid:hover {
	background-color: var(--kd-white);
	color: var(--kd-grey);
}

/* Variante contour blanc sur fond sombre — bordure 2 px. */
.kd .kd-btn--ghost {
	background-color: rgba(255, 255, 255, 0.01);
	border: 2px solid var(--kd-white);
	color: var(--kd-white);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.kd .kd-btn--ghost:hover,
.kd a.kd-btn--ghost:hover {
	background-color: var(--kd-white);
	color: var(--kd-grey);
}

/* Variante contour vert sur fond clair. */
.kd .kd-btn--outline {
	background-color: transparent;
	border: 2px solid var(--kd-green);
	color: var(--kd-green);
}

.kd .kd-btn--outline:hover {
	background-color: var(--kd-green);
	color: var(--kd-grey);
}

/* Lien texte + chevron — « Explore All Services », « see more ».
   Figma : gap 18, DM Sans Black 14 / 24, interlettrage 0.5, capitales. */
.kd .kd-link {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	font-family: var(--kd-font);
	font-weight: 900;
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--kd-grey);
	transition: color 0.2s ease;
}

.kd .kd-link:hover {
	color: var(--kd-green);
}

.kd .kd-link__arrow {
	color: var(--kd-green);
}

/* Contenu issu de l'éditeur WordPress (champs « editor » des modules). */
.kd .kd-rte > p {
	margin: 0;
}

.kd .kd-rte > p + p {
	margin-top: 1.8em;
}

.kd .kd-rte a {
	color: var(--kd-green);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kd .kd-rte strong,
.kd .kd-rte b {
	font-weight: 500;
}

.kd .kd-rte ul {
	list-style: disc;
	padding-left: 1.2em;
}

/* --- Masquage avant animation ------------------------------------------
   La classe .kd-anim est posée sur <html> en tête de document, avant le
   premier rendu. Elle masque les éléments que GSAP va animer, le temps qu'il
   se charge en pied de page — sans elle ils apparaissent puis disparaissent
   d'un coup. katana-animations.js retire la classe dès qu'il a fixé les états
   de départ, et la retire aussi immédiatement si GSAP n'a pas pu se charger,
   afin de ne jamais laisser la page vide. */

.kd-anim .kd-hero__eyebrow,
.kd-anim .kd-hero__title,
.kd-anim .kd-hero__subtitle,
.kd-anim .kd-hero__actions .kd-btn,
.kd-anim .kd-hero__wordmark,
.kd-anim .kd-hero__scroll,
.kd-anim .kd-intro__title,
.kd-anim .kd-intro__text,
.kd-anim .kd-services__slide,
.kd-anim .kd-services__footer,
.kd-anim .kd-itad__block > *,
.kd-anim .kd-features__heading,
.kd-anim .kd-features__item,
.kd-anim .kd-media__frame,
.kd-anim .kd-media__badge,
.kd-anim .kd-media__text,
.kd-anim .kd-resources__heading,
.kd-anim .kd-resources__item,
.kd-anim .kd-cta__title,
.kd-anim .kd-cta__text,
.kd-anim .kd-cta__actions,
.kd-anim .kd-footer__grid > * {
	opacity: 0;
	visibility: hidden;
}

/* Les tranches de verre n'animent ni l'opacité ni la transform : elles partent
   d'une hauteur nulle et se déploient vers le bas.

   Aucune transform n'est possible ici — 2D comme 3D, elle promeut la tranche
   sur sa propre couche de composition et Chrome cesse d'échantillonner le fond
   pour le backdrop-filter : le glissement se jouerait à vide. Le contenu de la
   tranche étant uniforme verticalement, le déploiement est de toute façon
   indiscernable d'une translation.

   Le préfixe `html` porte la spécificité à (0,2,1) pour passer devant la
   feuille du module, chargée après ce socle et qui fixe height: 100%. */
html.kd-anim .kd-hero__pane {
	height: 0;
}

/* --- Points de rupture ------------------------------------------------ */

@media (max-width: 1024px) {
	:root {
		--kd-h1: 40px;
		--kd-h2: 34px;
		--kd-h3: 22px;
		--kd-lead: 20px;
	}
}

@media (max-width: 767px) {
	:root {
		--kd-h1: 32px;
		--kd-h2: 28px;
		--kd-h3: 20px;
		--kd-lead: 18px;
		--kd-body: 15px;
	}

	.kd-container {
		padding-inline: 24px;
	}
}