/*
 * FEDOLIT Typo Harmonizer
 *
 * Every value comes from the --ftypo-* variables. The defaults below are
 * overridden by the inline block printed from Réglages > Typo FEDOLIT; they
 * only matter if an optimizer strips that block (tests keep them in sync).
 * Role classes (ftypo-r-*) are added server-side to Elementor widgets, so the
 * editor content itself is never modified.
 *
 * Why @layer + !important: Elementor and the site's custom CSS set typography
 * per widget, sometimes with !important and ids, e.g.
 * `.elementor-element-2248fb01 .elementor-button { font-size: 8px !important }`.
 * An !important declaration inside a cascade layer beats every !important
 * declaration outside layers, whatever its specificity or source order.
 *
 * Never restyled (wrapped in :where() so the list adds no specificity):
 * icon fonts (i, svg, Font Awesome, eicons, dashicons, Material) and code.
 */

:root{--ftypo-font-heading:"Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--ftypo-font-text:"DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--ftypo-heading-weight:800;--ftypo-heading-ls:-0.02em;--ftypo-heading-lh:1.1;--ftypo-subheading-ls:-0.01em;--ftypo-subheading-lh:1.25;--ftypo-text-lh:1.6;--ftypo-small-lh:1.5;--ftypo-eyebrow-weight:700;--ftypo-eyebrow-ls:0.08em;--ftypo-button-weight:700;--ftypo-button-case:none;--ftypo-button-ls:normal;--ftypo-wide:92vw;--ftypo-wide-mock:min(92vw, 1324.8px);--ftypo-measure:72ch;--ftypo-h1:clamp(34px, 26.2535px + 2.0657vw, 56px);--ftypo-h2:clamp(28px, 23.7746px + 1.1268vw, 40px);--ftypo-h3:clamp(18px, 17.2958px + 0.1878vw, 20px);--ftypo-h4:clamp(17px, 16.6479px + 0.0939vw, 18px);--ftypo-intro:clamp(17px, 16.6479px + 0.0939vw, 18px);--ftypo-body:16px;--ftypo-small:14px;--ftypo-eyebrow:clamp(11px, 10.6479px + 0.0939vw, 12px);--ftypo-button:15px;--ftypo-nav:clamp(14px, 16.7042px - 0.1878vw, 16px);}

@layer ftypo {

	/* 1. Families, site-wide --------------------------------------------- */

	body,
	button,
	input,
	select,
	textarea,
	.ast-button,
	.ast-custom-button {
		font-family: var(--ftypo-font-text) !important;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	.entry-title,
	.site-title {
		font-family: var(--ftypo-font-heading) !important;
	}

	/* 2. Headings (h1 to h6 widgets) ------------------------------------- */

	:is(.ftypo-r-h1, .ftypo-r-h2, .ftypo-r-h3, .ftypo-r-h4) .elementor-heading-title {
		font-family: var(--ftypo-font-heading) !important;
		font-weight: var(--ftypo-heading-weight) !important;
		font-style: normal !important;
		text-transform: none !important;
		text-wrap: balance !important; /* even lines, no lone "?" on the last line */
	}

	:is(.ftypo-r-h1, .ftypo-r-h2) .elementor-heading-title {
		letter-spacing: var(--ftypo-heading-ls) !important;
		line-height: var(--ftypo-heading-lh) !important;
	}

	:is(.ftypo-r-h3, .ftypo-r-h4) .elementor-heading-title {
		letter-spacing: var(--ftypo-subheading-ls) !important;
		line-height: var(--ftypo-subheading-lh) !important;
	}

	.ftypo-r-h1 .elementor-heading-title { font-size: var(--ftypo-h1) !important; }
	.ftypo-r-h2 .elementor-heading-title { font-size: var(--ftypo-h2) !important; }
	.ftypo-r-h3 .elementor-heading-title { font-size: var(--ftypo-h3) !important; }
	.ftypo-r-h4 .elementor-heading-title { font-size: var(--ftypo-h4) !important; }

	/* Coloured highlights inside titles ("dans la poche") follow the title. */
	:is(.ftypo-r-h1, .ftypo-r-h2, .ftypo-r-h3, .ftypo-r-h4) .elementor-heading-title *:not(:where(i, svg, svg *, .fa, .fas, .far, .fab, [class*="fa-"], [class*="eicon"], .e-font-icon-svg, .dashicons, .material-icons, [class*="material-icons-"], [class*="material-symbols"], code, pre, kbd, samp)) {
		font-family: inherit !important;
		font-size: inherit !important;
		font-weight: inherit !important;
		font-style: inherit !important;
		letter-spacing: inherit !important;
		line-height: inherit !important;
	}

	/*
	 * 3. Running text: intro, body, small. Sub-headings, small, sup/sub and
	 * code inside a text block keep their own look (i, svg, svg *, .fa, .fas, .far, .fab, [class*="fa-"], [class*="eicon"], .e-font-icon-svg, .dashicons, .material-icons, [class*="material-icons-"], [class*="material-symbols"], code, pre, kbd, samp, h1, h2, h3, h4, h5, h6, small, sub, sup, pre *, code *).
	 */

	:is(.ftypo-r-intro, .ftypo-r-body, .ftypo-r-small),
	:is(.ftypo-r-intro, .ftypo-r-body, .ftypo-r-small) .elementor-heading-title,
	:is(.ftypo-r-intro, .ftypo-r-body, .ftypo-r-small) *:not(:where(i, svg, svg *, .fa, .fas, .far, .fab, [class*="fa-"], [class*="eicon"], .e-font-icon-svg, .dashicons, .material-icons, [class*="material-icons-"], [class*="material-symbols"], code, pre, kbd, samp, h1, h2, h3, h4, h5, h6, small, sub, sup, pre *, code *)) {
		font-family: var(--ftypo-font-text) !important;
		letter-spacing: normal !important;
		text-wrap: pretty !important; /* avoids a single word alone on the last line */
	}

	.ftypo-r-intro,
	.ftypo-r-intro .elementor-heading-title,
	.ftypo-r-intro *:not(:where(i, svg, svg *, .fa, .fas, .far, .fab, [class*="fa-"], [class*="eicon"], .e-font-icon-svg, .dashicons, .material-icons, [class*="material-icons-"], [class*="material-symbols"], code, pre, kbd, samp, h1, h2, h3, h4, h5, h6, small, sub, sup, pre *, code *)) {
		font-size: var(--ftypo-intro) !important;
		line-height: var(--ftypo-text-lh) !important;
	}

	.ftypo-r-body,
	.ftypo-r-body .elementor-heading-title,
	.ftypo-r-body *:not(:where(i, svg, svg *, .fa, .fas, .far, .fab, [class*="fa-"], [class*="eicon"], .e-font-icon-svg, .dashicons, .material-icons, [class*="material-icons-"], [class*="material-symbols"], code, pre, kbd, samp, h1, h2, h3, h4, h5, h6, small, sub, sup, pre *, code *)) {
		font-size: var(--ftypo-body) !important;
		line-height: var(--ftypo-text-lh) !important;
	}

	.ftypo-r-small,
	.ftypo-r-small .elementor-heading-title,
	.ftypo-r-small *:not(:where(i, svg, svg *, .fa, .fas, .far, .fab, [class*="fa-"], [class*="eicon"], .e-font-icon-svg, .dashicons, .material-icons, [class*="material-icons-"], [class*="material-symbols"], code, pre, kbd, samp, h1, h2, h3, h4, h5, h6, small, sub, sup, pre *, code *)) {
		font-size: var(--ftypo-small) !important;
		line-height: var(--ftypo-small-lh) !important;
	}

	/* 4. Eyebrows ("TARIFS TRANSPARENTS") -------------------------------- */

	.ftypo-r-eyebrow,
	.ftypo-r-eyebrow *:not(:where(i, svg, svg *, .fa, .fas, .far, .fab, [class*="fa-"], [class*="eicon"], .e-font-icon-svg, .dashicons, .material-icons, [class*="material-icons-"], [class*="material-symbols"], code, pre, kbd, samp)) {
		font-family: var(--ftypo-font-text) !important;
		font-size: var(--ftypo-eyebrow) !important;
		font-weight: var(--ftypo-eyebrow-weight) !important;
		font-style: normal !important;
		letter-spacing: var(--ftypo-eyebrow-ls) !important;
		line-height: 1.4 !important;
		text-transform: uppercase !important;
	}

	/* 5. Buttons and tags ------------------------------------------------ */

	.ftypo-r-button .elementor-button,
	.ftypo-r-button .elementor-button *:not(:where(i, svg, svg *, .fa, .fas, .far, .fab, [class*="fa-"], [class*="eicon"], .e-font-icon-svg, .dashicons, .material-icons, [class*="material-icons-"], [class*="material-symbols"], code, pre, kbd, samp)),
	.ast-custom-button,
	.ast-custom-button *:not(:where(i, svg, svg *, .fa, .fas, .far, .fab, [class*="fa-"], [class*="eicon"], .e-font-icon-svg, .dashicons, .material-icons, [class*="material-icons-"], [class*="material-symbols"], code, pre, kbd, samp)) {
		font-family: var(--ftypo-font-text) !important;
		font-size: var(--ftypo-button) !important;
		font-weight: var(--ftypo-button-weight) !important;
		font-style: normal !important;
		letter-spacing: var(--ftypo-button-ls) !important;
		line-height: 1.2 !important;
		text-transform: var(--ftypo-button-case) !important;
	}

	.ftypo-r-chip .elementor-button,
	.ftypo-r-chip .elementor-button *:not(:where(i, svg, svg *, .fa, .fas, .far, .fab, [class*="fa-"], [class*="eicon"], .e-font-icon-svg, .dashicons, .material-icons, [class*="material-icons-"], [class*="material-symbols"], code, pre, kbd, samp)) {
		font-family: var(--ftypo-font-text) !important;
		font-size: var(--ftypo-small) !important;
		font-weight: 500 !important;
		font-style: normal !important;
		letter-spacing: normal !important;
		line-height: 1.2 !important;
		text-transform: none !important;
	}

	/* 6. Header menu (Astra header builder and Elementor menu widgets) --- */

	:is(.main-header-menu, .ast-builder-menu, .ast-mobile-popup-content) .menu-item > .menu-link,
	.ftypo-r-nav :is(a, .menu-item) {
		font-family: var(--ftypo-font-text) !important;
		font-size: var(--ftypo-nav) !important;
		font-weight: 500 !important;
		letter-spacing: normal !important;
		text-transform: none !important;
	}

	.ast-builder-button-wrap .ast-custom-button,
	.ast-builder-button-wrap .ast-custom-button *:not(:where(i, svg, svg *, .fa, .fas, .far, .fab, [class*="fa-"], [class*="eicon"], .e-font-icon-svg, .dashicons, .material-icons, [class*="material-icons-"], [class*="material-symbols"], code, pre, kbd, samp)) {
		font-size: var(--ftypo-nav) !important;
	}

	/* 7. Accordions / FAQ and icon or image boxes ------------------------ */

	.ftypo-r-accordion :is(.elementor-tab-title, .elementor-accordion-title, .elementor-toggle-title, .e-n-accordion-item-title-text, summary),
	.ftypo-r-accordion :is(.elementor-tab-title, .elementor-accordion-title, .elementor-toggle-title, .e-n-accordion-item-title-text, summary) *:not(:where(i, svg, svg *, .fa, .fas, .far, .fab, [class*="fa-"], [class*="eicon"], .e-font-icon-svg, .dashicons, .material-icons, [class*="material-icons-"], [class*="material-symbols"], code, pre, kbd, samp)) {
		font-family: var(--ftypo-font-text) !important;
		font-size: var(--ftypo-body) !important;
		font-weight: 600 !important;
		letter-spacing: normal !important;
		line-height: 1.4 !important;
		text-transform: none !important;
	}

	.ftypo-r-accordion .elementor-tab-content,
	.ftypo-r-accordion .elementor-tab-content *:not(:where(i, svg, svg *, .fa, .fas, .far, .fab, [class*="fa-"], [class*="eicon"], .e-font-icon-svg, .dashicons, .material-icons, [class*="material-icons-"], [class*="material-symbols"], code, pre, kbd, samp, h1, h2, h3, h4, h5, h6, small, sub, sup, pre *, code *)) {
		font-family: var(--ftypo-font-text) !important;
		font-size: var(--ftypo-body) !important;
		letter-spacing: normal !important;
		line-height: var(--ftypo-text-lh) !important;
	}

	.ftypo-r-box :is(.elementor-icon-box-title, .elementor-image-box-title),
	.ftypo-r-box :is(.elementor-icon-box-title, .elementor-image-box-title) *:not(:where(i, svg, svg *, .fa, .fas, .far, .fab, [class*="fa-"], [class*="eicon"], .e-font-icon-svg, .dashicons, .material-icons, [class*="material-icons-"], [class*="material-symbols"], code, pre, kbd, samp)) {
		font-family: var(--ftypo-font-heading) !important;
		font-size: var(--ftypo-h3) !important;
		font-weight: var(--ftypo-heading-weight) !important;
		letter-spacing: var(--ftypo-subheading-ls) !important;
		line-height: var(--ftypo-subheading-lh) !important;
	}

	.ftypo-r-box :is(.elementor-icon-box-description, .elementor-image-box-description),
	.ftypo-r-box :is(.elementor-icon-box-description, .elementor-image-box-description) *:not(:where(i, svg, svg *, .fa, .fas, .far, .fab, [class*="fa-"], [class*="eicon"], .e-font-icon-svg, .dashicons, .material-icons, [class*="material-icons-"], [class*="material-symbols"], code, pre, kbd, samp, h1, h2, h3, h4, h5, h6, small, sub, sup, pre *, code *)) {
		font-family: var(--ftypo-font-text) !important;
		font-size: var(--ftypo-small) !important;
		letter-spacing: normal !important;
		line-height: var(--ftypo-small-lh) !important;
	}

	/* 8. Mockups, custom HTML, other widgets: family only, sizes untouched */

	.ftypo-mock,
	:is(.ftypo-mock, .ftypo-r-html, .ftypo-r-font) *:not(:where(i, svg, svg *, .fa, .fas, .far, .fab, [class*="fa-"], [class*="eicon"], .e-font-icon-svg, .dashicons, .material-icons, [class*="material-icons-"], [class*="material-symbols"], code, pre, kbd, samp)),
	.ftypo-r-font {
		font-family: var(--ftypo-font-text) !important;
	}

	/* One extra type selector: outranks the rule above (0,1,1 > 0,1,0). */
	:is(.ftypo-mock, .ftypo-r-html, .ftypo-r-font) :is(h1, h2, h3, h4, h5, h6),
	:is(.ftypo-mock, .ftypo-r-html, .ftypo-r-font) :is(h1, h2, h3, h4, h5, h6) *:not(:where(i, svg, svg *, .fa, .fas, .far, .fab, [class*="fa-"], [class*="eicon"], .e-font-icon-svg, .dashicons, .material-icons, [class*="material-icons-"], [class*="material-symbols"], code, pre, kbd, samp)) {
		font-family: var(--ftypo-font-heading) !important;
	}

	/*
	 * 10. Page width: one common width for every section and the header.
	 * Only containers marked server-side are touched (ftypo-wide: old page
	 * width such as 1140/1200/1240px, ftypo-wide-cap: content wrapper of a
	 * full-width section). min(..., 100%) leaves mobile layouts as they are.
	 */

	.e-con.ftypo-wide {
		--content-width: min(var(--ftypo-wide), 100%) !important; /* boxed: inner box */
	}

	.e-con-full.ftypo-wide {
		--width: min(var(--ftypo-wide), 100%) !important; /* fixed px width */
	}

	.elementor-section.ftypo-wide > .elementor-container {
		max-width: min(var(--ftypo-wide), 100%) !important;
	}

	.ftypo-wide-cap {
		max-width: min(var(--ftypo-wide), 100%) !important;
		margin-inline: auto !important;
	}

	/*
	 * Mockup sections (dashboard, pricing): aligned with the others up to a
	 * 1440px screen, then they stop growing so the drawings do not stretch.
	 * One more class than the rules above, so these win inside the layer.
	 */
	.e-con.ftypo-wide.ftypo-wide-mock {
		--content-width: min(var(--ftypo-wide-mock), 100%) !important;
	}

	.e-con-full.ftypo-wide.ftypo-wide-mock {
		--width: min(var(--ftypo-wide-mock), 100%) !important;
	}

	.elementor-section.ftypo-wide.ftypo-wide-mock > .elementor-container {
		max-width: min(var(--ftypo-wide-mock), 100%) !important;
	}

	/*
	 * The site caps .ast-builder-grid-row at 1140px in its own CSS. Desktop only:
	 * below Astra's 921px breakpoint the header layout is left as it is.
	 */
	@media (min-width: 922px) {
		#masthead :is(.ast-container, .ast-builder-grid-row) {
			max-width: min(var(--ftypo-wide), 100%) !important;
		}
	}

	/* Intro and body text keep a readable line length in wider sections. */
	.ftypo-measure {
		max-width: var(--ftypo-measure) !important;
	}

	.ftypo-measure.ftypo-align-center {
		margin-inline: auto !important;
	}

	.ftypo-measure.ftypo-align-right {
		margin-left: auto !important;
	}

	/*
	 * 11. Astra header: the one shown is the one Astra's JS picked (class on body,
	 * up to 921px, see class-header.php). The site's own CSS forces the desktop
	 * header from 600px to 1180px, and at exactly 922px Chrome reads Astra's
	 * `max-width: 921.99px` as true while the JS says mobile.
	 */
	body.ast-header-break-point #ast-desktop-header {
		display: none !important;
	}

	body.ast-header-break-point #ast-mobile-header {
		display: block !important;
	}
}

/*
 * 9. Pages written without Elementor (legal pages, blog posts). Kept outside
 * the layer on purpose: these rules are not !important, and normal declarations
 * inside a layer would lose to Astra's unlayered ones. Outside the layer they
 * win on specificity (0,2,2 and up).
 */

body:not(.elementor-page) .entry-content h1 { font-size: var(--ftypo-h1); }
body:not(.elementor-page) .entry-content h2 { font-size: var(--ftypo-h2); }
body:not(.elementor-page) .entry-content h3 { font-size: var(--ftypo-h3); }
body:not(.elementor-page) .entry-content :is(h4, h5, h6) { font-size: var(--ftypo-h4); }

body:not(.elementor-page) .entry-content :is(h1, h2) {
	font-weight: var(--ftypo-heading-weight);
	letter-spacing: var(--ftypo-heading-ls);
	line-height: var(--ftypo-heading-lh);
}

body:not(.elementor-page) .entry-content :is(h3, h4, h5, h6) {
	font-weight: var(--ftypo-heading-weight);
	letter-spacing: var(--ftypo-subheading-ls);
	line-height: var(--ftypo-subheading-lh);
}

body:not(.elementor-page) .entry-content :is(p, li, blockquote) {
	font-size: var(--ftypo-body);
	line-height: var(--ftypo-text-lh);
}