/**
 * Kraalio — feuille de base.
 *
 * Chargée sur le front ET dans le canevas de l'éditeur (add_editor_style),
 * ce qui garantit un rendu identique des deux côtés.
 *
 * Tout ce qui peut être exprimé dans theme.json l'est dans theme.json.
 * Ne restent ici que les comportements que theme.json ne couvre pas.
 */

/* -------------------------------------------------------------------------
   1. Réglages de document
   ---------------------------------------------------------------------- */

:root {
	/*
	 * Hauteur de l'en-tête collant. assets/js/interactions.js la mesure et la
	 * réécrit ; elle vaut 0 sur les gabarits dont l'en-tête ne colle pas.
	 * Repli unique : deux valeurs divergentes décalaient les ancres.
	 */
	--kraalio-header-height: 62px;
}

html {
	scroll-behavior: smooth;
	/* Compense l'en-tête collant lors des ancres #section. */
	scroll-padding-top: var(--kraalio-header-height);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Titres et chapôs : pas de mot orphelin en fin de ligne. */
h1, h2, h3, h4,
.wp-block-post-title,
.wp-block-heading {
	text-wrap: pretty;
	overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
   2. Accessibilité
   ---------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--surface);
	clip-path: none;
	color: var(--wp--preset--color--primary);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 8px;
	line-height: normal;
	padding: 14px 22px;
	text-decoration: none;
	top: 8px;
	width: auto;
	z-index: 100000;
	border-radius: 100px;
	box-shadow: var(--wp--preset--shadow--card);
}

/* -------------------------------------------------------------------------
   3. Sections sombres
   ---------------------------------------------------------------------- */

/**
 * theme.json fixe la couleur des titres au vert forêt : invisible sur fond
 * sombre. Sur les fonds sombres de la charte, les titres héritent donc de la
 * couleur du conteneur. Spécificité 0,2,0 : passe devant `:root :where(h2)`.
 */
:is(
	.kraalio-on-dark,
	.has-forest-background-color,
	.has-ink-background-color,
	.has-forest-night-gradient-background,
	.has-primary-background-color,
	.has-primary-dark-background-color
) :is(h1, h2, h3, h4, h5, .wp-block-heading, .wp-block-post-title) {
	color: inherit;
}

:is(
	.kraalio-on-dark,
	.has-forest-background-color,
	.has-ink-background-color,
	.has-forest-night-gradient-background,
	.has-primary-background-color,
	.has-primary-dark-background-color
) :is(h6, .is-style-kraalio-eyebrow) {
	color: var(--wp--preset--color--mint);
}

:is(
	.kraalio-on-dark,
	.has-forest-background-color,
	.has-ink-background-color,
	.has-forest-night-gradient-background,
	.has-primary-background-color,
	.has-primary-dark-background-color
) a:not(.wp-element-button) {
	color: var(--wp--preset--color--mint);
}

:is(
	.kraalio-on-dark,
	.has-forest-background-color,
	.has-ink-background-color,
	.has-forest-night-gradient-background,
	.has-primary-background-color,
	.has-primary-dark-background-color
) a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--surface);
}

/* -------------------------------------------------------------------------
   4. En-tête collant
   ---------------------------------------------------------------------- */

/**
 * L'en-tête était déclaré collant mais ne collait pas.
 *
 * Le cœur enveloppe TOUJOURS une partie de gabarit dans un élément (voir
 * render_block_core_template_part) : l'en-tête vivait donc dans un `<div>`
 * haut d'une centaine de pixels. Or un élément `sticky` ne peut pas sortir de
 * son bloc conteneur — il se décrochait au bout de ~45 px de défilement.
 *
 * `display: contents` efface la boîte du conteneur sans toucher à son contenu :
 * le bloc conteneur de l'en-tête devient la page entière, et il colle enfin.
 * Le sélecteur ne vise que le conteneur de l'en-tête, jamais celui du pied.
 */
.wp-block-template-part:has(> .kraalio-header) {
	display: contents;
}

.kraalio-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background-color: var(--wp--preset--color--base);
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent);
	border-bottom: 1px solid var(--wp--preset--color--border);
	transition: box-shadow 0.2s ease;
}

@supports (backdrop-filter: blur(8px)) {
	.kraalio-header {
		backdrop-filter: blur(8px);
	}
}

.kraalio-header.is-scrolled {
	box-shadow: var(--wp--preset--shadow--soft);
}

/* -------------------------------------------------------------------------
   5. Divers
   ---------------------------------------------------------------------- */

/*
 * Le logo garde ses proportions quel que soit le fichier chargé, sans jamais
 * dépasser la hauteur de la barre.
 *
 * Pas de `width: auto` ici : le cœur pose la largeur choisie dans l'éditeur sur
 * le conteneur et met l'image à `width: 100%`. Forcer `auto` ne servait à rien
 * là où le sélecteur du cœur est plus spécifique, et faisait s'effondrer à zéro
 * un SVG dépourvu de `width`/`height` ou de `viewBox` intrinsèques là où il
 * gagnait — un logo invisible, sans le moindre message d'erreur.
 */
.wp-block-site-logo img {
	height: auto;
	max-height: 40px;
}


/* -------------------------------------------------------------------------
   6. Bandeau d'annonce
   ---------------------------------------------------------------------- */

/**
 * Il précède l'en-tête collant et défile avec la page, comme sur la maquette.
 * Videz la partie de gabarit « Bandeau d'annonce » pour le retirer.
 */
.kraalio-announcement p {
	max-width: none;
}

.kraalio-announcement a {
	color: var(--wp--preset--color--mint);
	font-weight: 700;
	text-decoration: none;
}

.kraalio-announcement a:hover {
	color: var(--wp--preset--color--surface);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   7. Lignes « libellé à gauche, valeur à droite »
   ---------------------------------------------------------------------- */

/**
 * Panneaux denses (file d'envoi, lignes d'écran) : la valeur de droite ne doit
 * jamais être compressée ni coupée en plein mot. C'est le libellé de gauche
 * qui se réduit et passe à la ligne.
 *
 * `min-width: 0` est indispensable : sans lui, un élément flex refuse de
 * descendre sous la largeur de son plus long mot et pousse le voisin.
 */
.kraalio-row__main {
	flex: 1 1 auto;
	min-width: 0;
}

.kraalio-row__value {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   8. Sections en deux colonnes
   ---------------------------------------------------------------------- */

/**
 * WordPress remet les colonnes côte à côte dès 782 px. Pour ces sections-là —
 * héros, panneau mobile, formulaire de devis, FAQ — deux colonnes à cette
 * largeur donnent des blocs de ~200 px, illisibles. On repousse donc
 * l'empilement à 900 px.
 */
@media (max-width: 899px) {
	.wp-block-columns.kraalio-split {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.kraalio-split > .wp-block-column {
		flex-basis: 100% !important;
	}

	/* La colonne d'introduction collante de la FAQ n'a plus lieu d'être
	   une fois les colonnes empilées. */
	.wp-block-columns.kraalio-split > .wp-block-column > .wp-block-group[style*="sticky"] {
		position: static !important;
	}
}

/* -------------------------------------------------------------------------
   10. Commandes de carrousel
   ---------------------------------------------------------------------- */

/**
 * Injectées par assets/js/interactions.js. Elles vivent ici et non dans
 * blocks/group.css : le style « carrousel » est enregistré pour core/group
 * comme pour core/columns, et le CSS par bloc n'est servi que si le bloc
 * correspondant est présent sur la page.
 */
.kraalio-carousel-controls {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-block-start: var(--wp--preset--spacing--20);
}

/*
 * Une règle d'auteur bat `[hidden] { display: none }` du navigateur : sans
 * ceci, `controls.hidden = true` ne masquait rien et un carrousel non
 * défilable laissait deux flèches grises et inertes sous la section.
 */
.kraalio-carousel-controls[hidden] {
	display: none;
}

.kraalio-carousel-controls button {
	inline-size: 40px;
	block-size: 40px;
	border-radius: 100px;
	border: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

.kraalio-carousel-controls button:hover:not([disabled]) {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--primary);
}

.kraalio-carousel-controls button[disabled] {
	opacity: 0.4;
	cursor: default;
}

/* -------------------------------------------------------------------------
   11. En-tête : la barre ne doit jamais déborder
   ---------------------------------------------------------------------- */

/**
 * La navigation ne bascule en menu déroulant qu'en dessous de 600 px
 * (overlayMenu: « mobile »). Entre 600 et 900 px, le logo, cinq pastilles en
 * `nowrap` et le bouton d'essai totalisent plus que la largeur disponible :
 * la barre poussait la page et faisait apparaître un défilement horizontal.
 * Le bouton d'essai s'efface — il reste atteignable dans la navigation.
 *
 * Seuil relevé de 860 à 900 px avec le passage du logo à 150 px : il occupe
 * désormais ~34 px de plus que l'ancien couple « pictogramme + titre ».
 */
/*
 * Le libellé du bouton ne se coupe jamais : une pilule sur deux lignes dans une
 * barre de navigation lit comme un défaut de mise en page. S'il ne tient plus,
 * c'est la règle ci-dessous qui l'escamote — pas un retour à la ligne.
 */
.kraalio-header__cta .wp-element-button {
	white-space: nowrap;
}

@media (max-width: 900px) {
	.kraalio-header__cta {
		display: none;
	}
}


/* -------------------------------------------------------------------------
   12. Couche de design — relief, mouvement, action
   ---------------------------------------------------------------------- */

/**
 * Une page entièrement statique se lit comme un document, pas comme un
 * produit. Trois gestes suffisent à la rendre vivante sans la rendre bavarde :
 * les surfaces cliquables réagissent, les sections arrivent au lieu d'apparaître
 * d'un bloc, et l'action principale reste à portée de pouce sur mobile.
 *
 * Tout est en amélioration progressive : sans JavaScript et sans `:hover`
 * (écrans tactiles), la page reste complète et lisible.
 */

/* --- Cartes : le relief signale ce qui est vivant ------------------------- */

:is(
	.is-style-kraalio-card,
	.is-style-kraalio-card-compact,
	.is-style-kraalio-card-highlight,
	.is-style-kraalio-testimonial
) {
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

@media (hover: hover) {
	:is(.is-style-kraalio-card, .is-style-kraalio-card-compact):hover {
		transform: translateY(-3px);
		box-shadow: var(--wp--preset--shadow--card);
		border-color: var(--wp--preset--color--sage-2);
	}
}

/* --- Boutons : un appui léger plutôt qu'un simple changement de teinte ---- */

.wp-element-button,
.wp-block-button__link {
	transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

@media (hover: hover) {
	.wp-block-button:not(.is-style-outline) .wp-element-button:hover {
		transform: translateY(-2px);
		box-shadow: var(--wp--preset--shadow--soft);
	}
}

/* L'appui doit se sentir : sinon le bouton paraît inerte au clic. */
.wp-element-button:active {
	transform: translateY(0);
}

/* --- Liens de texte : le soulignement se construit --------------------- */

/**
 * `text-decoration` s'anime mal. Un dégradé de fond en guise de trait se
 * laisse mesurer, donc animer, et se replie proprement si l'animation est
 * refusée (le trait reste, simplement déjà déployé).
 */
@media (hover: hover) {
	.wp-block-post-content a:not(.wp-element-button):not(.wp-block-navigation-item__content),
	.entry-content a:not(.wp-element-button) {
		background-image: linear-gradient(currentColor, currentColor);
		background-repeat: no-repeat;
		background-position: 0 100%;
		background-size: 0% 1px;
		transition: background-size 0.24s ease;
	}

	.wp-block-post-content a:not(.wp-element-button):not(.wp-block-navigation-item__content):hover,
	.entry-content a:not(.wp-element-button):hover {
		background-size: 100% 1px;
	}
}

/* --- Révélation au défilement ---------------------------------------- */

/**
 * `.kraalio-reveal` n'est posé QUE par JavaScript, jamais dans le balisage :
 * sans script, aucune section n'est masquée. C'est la seule façon sûre de
 * faire ceci — une classe écrite dans le HTML laisserait une page vide aux
 * visiteurs sans JavaScript et aux robots d'indexation qui n'exécutent rien.
 */
.kraalio-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.kraalio-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* --- Barre d'action mobile ---------------------------------------------- */

/**
 * Sous 900 px le bouton d'essai quitte l'en-tête faute de place. Il revient
 * ici, en bas de l'écran, une fois le héros dépassé : c'est là que se joue la
 * conversion sur téléphone, et c'est la zone que le pouce atteint.
 */
.kraalio-action-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 70;
	display: none;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	background-color: var(--wp--preset--color--surface);
	border-block-start: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 -6px 24px rgb(31 58 38 / 10%);
	transform: translateY(100%);
	transition: transform 0.28s ease;
}

.kraalio-action-bar.is-visible {
	transform: none;
}

.kraalio-action-bar__label {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--contrast-2);
	margin: 0;
}

.kraalio-action-bar .wp-element-button {
	white-space: nowrap;
	padding: 11px 18px;
}

@media (max-width: 900px) {
	.kraalio-action-bar {
		display: flex;
	}

	/*
	 * La barre ne doit jamais recouvrir la fin du pied de page. La reserve est
	 * conditionnee a sa presence reelle : la barre est creee par JavaScript,
	 * et sans script cette hauteur laissait un vide inexplique sous le pied.
	 */
	body:has(.kraalio-action-bar) {
		padding-block-end: 68px;
	}
}

/*
 * Mouvement refusé : on garde le relief et l'action, on retire le déplacement.
 * La section 1 neutralise déjà toutes les transitions ; il reste à s'assurer
 * qu'aucun contenu ne demeure invisible faute d'animation jouée.
 */
@media (prefers-reduced-motion: reduce) {
	.kraalio-reveal {
		opacity: 1;
		transform: none;
	}

	.kraalio-action-bar {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   13. Retour en haut de page
   ---------------------------------------------------------------------- */

/**
 * Sur des pages longues, remonter au menu demandait un défilement complet.
 * Le bouton n'apparaît qu'une fois la première hauteur d'écran dépassée :
 * avant, il n'aurait servi à rien tout en masquant du contenu.
 *
 * Il est créé par JavaScript : sans script, aucun bouton mort n'apparaît.
 */
.kraalio-to-top {
	position: fixed;
	inset-inline-end: 18px;
	bottom: 18px;
	z-index: 65;
	inline-size: 46px;
	block-size: 46px;
	display: grid;
	place-items: center;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 100px;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	box-shadow: var(--wp--preset--shadow--soft);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.kraalio-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.kraalio-to-top:hover {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--primary);
}

/*
 * Sous 900 px la barre d'action occupe le bas de l'écran : le bouton se pose
 * au-dessus d'elle plutôt que par-dessus le bouton d'essai.
 */
@media (max-width: 900px) {
	/* Au-dessus de la barre d'action, mais seulement si elle existe. */
	body:has(.kraalio-action-bar) .kraalio-to-top {
		bottom: 78px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kraalio-to-top {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   14. Bandeau de quatre blocs
   ---------------------------------------------------------------------- */

/**
 * La grille du cœur cree autant de pistes que la largeur en autorise
 * (`repeat(auto-fill, …)`). Avec quatre blocs et un minimum de 13 rem, elle en
 * formait cinq a 1180 px : la cinquieme restait vide et tout le bandeau
 * paraissait pousse vers la gauche. Le minimum passe a 15 rem pour tomber
 * exactement sur quatre pistes.
 *
 * Entre 600 et 1120 px, la meme formule donnerait trois pistes, donc trois
 * blocs sur une ligne et un quatrieme orphelin sur la suivante. On impose
 * deux colonnes : quatre blocs se lisent mieux en 2 x 2 qu'en 3 + 1.
 *
 * Specificite (0,2,0) : elle passe devant la regle de conteneur generee par
 * WordPress, quel que soit l'ordre de chargement des feuilles.
 */
@media (max-width: 1120px) {
	.wp-block-group.kraalio-band-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.wp-block-group.kraalio-band-4 {
		grid-template-columns: minmax(0, 1fr);
	}
}