/**
 * core/group — styles Kraalio.
 */

/**
 * Teintes des encarts de documentation (« note » et « avertissement »).
 *
 * Elles ne figurent pas dans la palette de theme.json — ce sont des couleurs de
 * signalement, pas des couleurs de marque : les exposer dans le sélecteur de
 * l'éditeur inviterait à les appliquer n'importe où. Rassemblées ici, un thème
 * enfant peut les redéfinir en une ligne sans toucher aux règles.
 */
:root {
	--kraalio-note-bg: var(--wp--preset--color--accent);
	--kraalio-note-border: #bfe0c6;
	--kraalio-note-text: #2c5b3a;
	--kraalio-warn-bg: #fbebd8;
	--kraalio-warn-border: #f0d2a8;
	--kraalio-warn-text: #8a4c10;
}

/* --- Carte ---------------------------------------------------------------- */

.wp-block-group.is-style-kraalio-card {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	padding: var(--wp--preset--spacing--50);
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.wp-block-group.is-style-kraalio-card:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--preset--shadow--soft);
}

/* --- Carte mise en avant (formule « le plus pris ») ----------------------- */

.wp-block-group.is-style-kraalio-card-highlight {
	background-color: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--forest);
	border-radius: 20px;
	padding: var(--wp--preset--spacing--50);
	box-shadow: var(--wp--preset--shadow--raised);
}

.wp-block-group.is-style-kraalio-card-highlight :is(h1, h2, h3, h4, h5, .wp-block-heading) {
	color: inherit;
}

/* --- Panneau translucide (sur fond sombre) -------------------------------- */

.wp-block-group.is-style-kraalio-panel {
	background-color: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 22px;
	padding: var(--wp--preset--spacing--50);
}

.wp-block-group.is-style-kraalio-panel :is(h1, h2, h3, h4, h5, .wp-block-heading) {
	color: inherit;
}

/* --- Encart alerte -------------------------------------------------------- */

.wp-block-group.is-style-kraalio-alert {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-inline-start: 3px solid var(--wp--preset--color--terracotta);
	border-radius: 3px 16px 16px 3px;
	padding: var(--wp--preset--spacing--40);
}

.wp-block-group.is-style-kraalio-alert :is(h3, h4, h5, h6, .wp-block-heading) {
	color: var(--wp--preset--color--terracotta);
}

/* --- Carrousel horizontal ------------------------------------------------- */

.wp-block-group.is-style-kraalio-carousel {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--wp--preset--spacing--50);
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--border) transparent;
	padding-block-end: var(--wp--preset--spacing--20);
	/* Le débordement doit rester visible : on annule la contrainte de flux. */
	max-width: none;
}

.wp-block-group.is-style-kraalio-carousel > * {
	flex: 0 0 min(360px, 82%);
	scroll-snap-align: start;
	margin-block: 0;
}

.wp-block-group.is-style-kraalio-carousel::-webkit-scrollbar {
	height: 6px;
}

.wp-block-group.is-style-kraalio-carousel::-webkit-scrollbar-thumb {
	background-color: var(--wp--preset--color--border);
	border-radius: 100px;
}

/* --- Aperçu de formulaire (composition « Demander un devis ») -------------- */

/**
 * Ces classes habillent l'emplacement réservé au formulaire. Elles restent
 * utiles si vous gardez la mise en page et n'insérez que les champs de votre
 * extension à la place des paragraphes.
 */
.kraalio-field__label {
	margin-block-end: 0;
	color: var(--wp--preset--color--contrast);
}

.kraalio-field__box {
	margin-block: 0;
	padding: 13px 14px;
	border: 1.5px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background-color: var(--wp--preset--color--base);
}

.kraalio-form-preview__hint {
	margin-block-end: 0;
	font-style: italic;
}

.wp-block-columns.kraalio-field-row {
	margin-block: 0;
}

@media (max-width: 781px) {
	/* L'indicatif et le numéro restent côte à côte, même sur mobile. */
	.wp-block-columns.kraalio-field-row {
		flex-wrap: nowrap !important;
	}

	/*
	 * `flex: 0 0 84px` et pas seulement `flex-basis` : sans `flex-shrink: 0`,
	 * la colonne se laissait compresser sous sa base, et l'indicatif « +225 »
	 * se coupait caractère par caractère — le cœur applique en effet
	 * `word-break: break-word` à toutes les colonnes.
	 */
	.wp-block-columns.kraalio-field-row > .wp-block-column:first-child {
		flex: 0 0 84px !important;
	}
}

/* Un indicatif téléphonique ne se coupe jamais — mais lui seul : le champ
   « numéro » voisin doit pouvoir se réduire sous 320 px. */
.kraalio-field-row > .wp-block-column:first-child .kraalio-field__box {
	white-space: nowrap;
}

/* --- Badge « offre de lancement » ----------------------------------------- */

.wp-block-group.kraalio-offer {
	display: inline-flex;
	width: auto;
	max-width: 100%;
}

/* --- Encarts de documentation --------------------------------------------- */

.wp-block-group.is-style-kraalio-note,
.wp-block-group.is-style-kraalio-warning {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	border-radius: 12px;
	padding: 15px 17px;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
}

/* La pastille d'icône est dessinée en CSS : aucune image, aucun bloc en plus. */
.wp-block-group.is-style-kraalio-note::before,
.wp-block-group.is-style-kraalio-warning::before {
	content: "";
	flex-shrink: 0;
	inline-size: 17px;
	block-size: 17px;
	margin-block-start: 3px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.wp-block-group.is-style-kraalio-note {
	background-color: var(--kraalio-note-bg);
	border: 1px solid var(--kraalio-note-border);
	color: var(--kraalio-note-text);
}

/* `var()` n'est pas interprété dans `url()` : le %232C5B3A ci-dessous doit être
   ré-encodé à la main s'il faut changer la teinte. */
.wp-block-group.is-style-kraalio-note::before {
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232C5B3A" stroke-width="2.2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01"/></svg>');
}

.wp-block-group.is-style-kraalio-warning {
	background-color: var(--kraalio-warn-bg);
	border: 1px solid var(--kraalio-warn-border);
	color: var(--kraalio-warn-text);
}

/* Même contrainte : le %238A4C10 encodé ci-dessous ne suit pas
   `--kraalio-warn-text`, il faut le ré-encoder à la main. */
.wp-block-group.is-style-kraalio-warning::before {
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238A4C10" stroke-width="2.2" stroke-linecap="round"><path d="M12 9v4M12 17h.01M10.3 3.9L2.6 17a1.8 1.8 0 001.6 2.7h15.6a1.8 1.8 0 001.6-2.7L13.7 3.9a1.8 1.8 0 00-3.4 0z"/></svg>');
}

.wp-block-group.is-style-kraalio-note > *,
.wp-block-group.is-style-kraalio-warning > * {
	margin-block: 0;
	color: inherit;
}

/* --- Carte compacte (valeurs, encarts de contact) ------------------------- */

.wp-block-group.is-style-kraalio-card-compact {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	padding: 20px 22px;
}

/* --- Mise en page de la documentation ------------------------------------- */

.kraalio-doc__layout {
	gap: 0;
}

.kraalio-doc__aside {
	border-inline-end: 1px solid var(--wp--preset--color--border);
}

/* Le sommaire suit la lecture sur les écrans hauts. */
@media (min-width: 782px) {
	.kraalio-doc__aside > .kraalio-doc-nav {
		position: sticky;
		top: calc(var(--kraalio-header-height) + var(--wp--preset--spacing--30));
		max-height: calc(100vh - var(--kraalio-header-height) - var(--wp--preset--spacing--50));
		overflow-y: auto;
	}
}

@media (max-width: 781px) {
	.kraalio-doc__aside {
		border-inline-end: 0;
		border-block-end: 1px solid var(--wp--preset--color--border);
		padding-inline: 0;
	}

	.kraalio-doc__content {
		padding-inline-start: 0 !important;
	}
}

.kraalio-doc-section {
	margin-block-end: 0;
}