/* =============================================================================
   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);
	/* Taille optique de DM Sans : la maquette fixe « opsz » à 14 pour les
	   textes courants et intertitres (16, 26…). Mesuré sur Figma : un intitulé
	   26 Medium y fait 411 px de large, soit la chasse d'opsz 14 (automatique :
	   400 px, trop étroit). Les grands titres (46/50) et les grands chiffres,
	   eux, sont en taille optique automatique dans la maquette (« Frequently
	   asked questions » : 540 px = auto ; opsz 14 donnerait 602 px) : voir la
	   liste d'exceptions plus bas. */
	font-variation-settings: "opsz" 14;
	-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 ---------------------------------------------------- */

/* La gouttière est intégrée à la largeur plutôt que posée en marge interne :
   avec box-sizing: border-box, un max-width de 1280 assorti de 20 de padding
   ne laissait que 1240 de contenu, soit 40 de moins que la maquette. Ici la
   zone utile fait exactement 1280 dès que la fenêtre le permet, et se replie
   sur 24 de gouttière en dessous. */
.kd-container {
	width: min(100% - 48px, var(--kd-container));
	margin-inline: auto;
}

/* 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;
}

/* Chaque variante répète son survol sur `a` ET sur `button` : le reset ci-dessus
   agit à (0,2,1) à l'état survolé, et effacerait sinon fond et bordure d'une
   pilule rendue en <button> — les boutons des formulaires, notamment. */

/* 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,
.kd button.kd-btn--solid:hover,
.kd button.kd-btn--solid:focus {
	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,
.kd button.kd-btn--ghost:hover,
.kd button.kd-btn--ghost:focus {
	border: 2px solid var(--kd-white);
	background-color: var(--kd-white);
	color: var(--kd-grey);
}

/* Variante contour vert sur fond clair — Figma : bordure 2, fond vert à 4 %,
   flou d'arrière-plan de 7. */
.kd .kd-btn--outline {
	background-color: rgba(0, 240, 0, 0.04);
	border: 2px solid var(--kd-green);
	color: var(--kd-green);
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
}

.kd .kd-btn--outline:hover,
.kd a.kd-btn--outline:hover,
.kd button.kd-btn--outline:hover,
.kd button.kd-btn--outline:focus {
	border: 2px solid var(--kd-green);
	background-color: var(--kd-green);
	color: var(--kd-grey);
}

/* Variante pleine grise — troisième bouton des bandeaux de conversion. */
.kd .kd-btn--dark {
	background-color: var(--kd-grey);
	color: var(--kd-white);
}

.kd .kd-btn--dark:hover,
.kd a.kd-btn--dark:hover,
.kd button.kd-btn--dark:hover,
.kd button.kd-btn--dark:focus {
	background-color: var(--kd-green);
	color: var(--kd-grey);
}

/* Variante contour gris — les cartes de demande, claires ou vertes, où un
   contour blanc disparaîtrait et un contour vert se confondrait avec le fond. */
.kd .kd-btn--slate {
	background-color: transparent;
	border: 2px solid var(--kd-grey);
	color: var(--kd-grey);
}

.kd .kd-btn--slate:hover,
.kd a.kd-btn--slate:hover,
.kd button.kd-btn--slate:hover,
.kd button.kd-btn--slate:focus {
	border: 2px solid var(--kd-grey);
	background-color: var(--kd-grey);
	color: var(--kd-white);
}

/* Variante pleine grise à libellé vert — posée sur un panneau vert, où le
   survol vert de la variante ci-dessus se confondrait avec le fond. */
.kd .kd-btn--darkgreen {
	background-color: var(--kd-grey);
	color: var(--kd-green);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.kd .kd-btn--darkgreen:hover,
.kd a.kd-btn--darkgreen:hover,
.kd button.kd-btn--darkgreen:hover,
.kd button.kd-btn--darkgreen:focus {
	background-color: var(--kd-white);
	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;
}

/* Un interligne franc sépare deux blocs, quels qu'ils soient : la maquette
   intercale une ligne vide entre paragraphes comme autour des listes. */
.kd .kd-rte > * + * {
	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;
	margin-bottom: 0;
}

/* --- 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__text,
.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-intro__outro,
.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-split__heading,
.kd-anim .kd-split__intro,
.kd-anim .kd-split__label,
.kd-anim .kd-split__text,
.kd-anim .kd-split__links,
.kd-anim .kd-split__actions,
.kd-anim .kd-split__media,
.kd-anim .kd-tiles__heading,
.kd-anim .kd-tiles__item,
.kd-anim .kd-pillars__heading,
.kd-anim .kd-pillars__item,
.kd-anim .kd-legal__heading,
.kd-anim .kd-legal__intro,
.kd-anim .kd-legal__body,
.kd-anim .kd-table__row,
.kd-anim .kd-columns__header,
.kd-anim .kd-columns__item,
.kd-anim .kd-columns__outro,
.kd-anim .kd-compare__header,
.kd-anim .kd-compare__card,
.kd-anim .kd-steps__header,
.kd-anim .kd-steps__media,
.kd-anim .kd-faq__heading,
.kd-anim .kd-faq__item,
.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;
}

/* --- Alignement des cartes de service ----------------------------------
   Un titre passant sur deux lignes décalait le texte et les liens des cartes
   voisines. La piste devient une grille dont chaque carte partage les rangées
   (subgrid) : visuel, titre, texte et liens se calent sur la même ligne
   partout, chaque rangée prenant la hauteur de son contenu le plus haut.

   Cette règle vit ici et non dans la feuille du module : le compilateur CSS de
   Beaver Builder aplatit les blocs @supports des modules, ce qui la rendait
   inopérante. D'où aussi le préfixe `html`, qui porte la spécificité à (0,3,1)
   pour passer devant le CSS de module, chargé après ce socle. */
@supports (grid-template-rows: subgrid) {
	html .kd .kd-services__track {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: max-content;
		grid-template-rows: auto auto 1fr auto;
		align-items: stretch;
	}

	html .kd .kd-services__slide,
	html .kd .kd-services__card {
		display: grid;
		grid-row: 1 / -1;
		grid-template-rows: subgrid;
	}

	html .kd .kd-services__slide {
		row-gap: 0;
	}

	html .kd .kd-services__card {
		row-gap: 44px;
		height: auto;
	}
}

/* --- 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;
	}
}

/* --- Mouvement réduit ---------------------------------------------------
   Ces règles vivent ici, et non dans la feuille des modules : le compilateur
   CSS de Beaver Builder retire les media queries qu'il ne sait pas lire —
   celle-ci comprise — et en applique le contenu à TOUT LE MONDE. Le bloc
   posé dans un module coupait donc les transitions pour tous, au lieu de les
   couper pour qui les refuse.

   Comme pour le bloc @supports ci-dessus, le préfixe `html` porte la
   spécificité à (0,3,1) : ce socle est chargé AVANT le CSS compilé des
   modules, qui l'emporterait sinon à spécificité égale. */
@media (prefers-reduced-motion: reduce) {
	html .kd .kd-form__group,
	html .kd .kd-form__privacy,
	html .kd .kd-form__seg,
	html .kd .kd-form__caret,
	html .kd .kd-form__control,
	html .kd .kd-form__option,
	html .kd .kd-faq__panel,
	html .kd .kd-faq__item.is-open .kd-faq__panel {
		transition: none;
	}
}

/* Paragraphe d'accroche en gras dans un texte courant (« Who we are »). */
.kd .kd-rte .kd-bold {
	font-weight: 700;
}


/* Grands titres et grands chiffres : taille optique automatique, comme dans
   la maquette. Ils rétrécissent sur mobile (34, 28 px) et la taille optique
   suit alors leur corps réel. */
.kd .kd-columns__heading,
.kd .kd-compare__heading,
.kd .kd-compare__title,
.kd .kd-cta__title,
.kd .kd-faq__heading,
.kd .kd-features__heading,
.kd .kd-features__outro-heading,
.kd .kd-features__number,
.kd .kd-form__numeral,
.kd .kd-form__thanks-title,
.kd.kd-hero .kd-hero__title,
.kd .kd-intro__title,
.kd .kd-itad__title,
.kd-itad .kd-itad__title,
.kd .kd-legal__heading,
.kd .kd-pillars__heading,
.kd .kd-pillars__number,
.kd .kd-split__heading--green46,
.kd .kd-split__heading--grey,
.kd .kd-steps__heading,
.kd .kd-steps__number,
.kd .kd-tiles__heading {
	font-variation-settings: normal;
	font-optical-sizing: auto;
}