/*========================
*
*               VARIABLES
*
* ======================*/
:root {

	/* Logo */
	--logo: url("https://innn.fr/fr/wp-content/uploads/2026/05/Logo-INNN.svg");
	/* COULEURS */
	--blanc: #fff;
	--blanc-rgb: 255, 255, 255;
	--noir: #000;
	--couleur-principale: #d9003f;
	--couleur-principale-rgb: 240, 38, 74;

	--couleur-secondaire: #303041;
	--couleur-secondaire-rgb: 48, 48, 65;

	--couleur-3: #244A73;
	--couleur-3-rgb: 36, 74, 115;

	--couleur-4: #2D6CDF;
	--couleur-4-rgb: 36, 74, 115;
	--couleur-5: #E8EEF7;
	--couleur-bg: #FAFAFA;

	/* FONT_WEIGHT */
	--thin: 100;
	--extra-light: 200;
	--light: 300;
	--regular: 400;
	--medium: 500;
	--semi-bold: 600;
	--bold: 600;
	--extra-bold: 700;
	--black: 800;

	/* TYPO */
	--typo-principale: "Host Grotesk", sans-serif; /* Titre */
	--typo-secondaire: "Inter", sans-serif; /* Texte */
	--typo-icon: "innnOff" !important;

	/* SIZE DESKTOP */
	--size-titre-0: 92px;
	--size-titre-1: 72px;
	--size-titre-2: 44px;
	--size-titre-3: 32px;
	--size-titre-4: 24px;
	--size-titre-5: 18px;

	--size-contenu-oversize-1: 24px;
	--size-contenu-oversize-2: 24px;

	--size-intertitre: 16px;

	--size-contenu-1: 16px;
	--size-contenu-2: 16px;
	--size-contenu-3: 14px;

	--size-legende: 12px;
	--size-hyperlien: 14px;
	
	--size-legende-2: 10px;



	/* VALEURS MARGIN OU PADDING */
	--space-xxs: 8px;
	--space-xs: 16px;
	--space-s: 32px;
	--space-m: 48px;
	--space-l: 64px;
	--space-xl: 80px;
	--space-xxl: 96px;
	--space-xxxl: 128px;

	/* RADIUS PAR DEFAUT SUR TOUS LES CTAS */
	--radius-cta-principal: 4px;

	/* BORDURES ARRONDIS */
	--radius-none: 0;
	--radius-xxs: 4px;
	--radius-xs: 8px;
	--radius-s: 16px;
	--radius-m: 32px;
	--radius-l: 48px;
	--radius-xl: 64px;
}

body.site-innn {
	--size-titre-1: 72px;
	--size-titre-2: 44px;
	--couleur-bg: #FAFAFA;
		--size-contenu-oversize-1: 24px;
	--size-contenu-oversize-2: 24px;
}

body.site-manifest {
	--size-titre-1: 48px;
	--size-titre-2: 38px;
	--couleur-bg: #F8f8f8;
		--size-contenu-oversize-1: 20px;
	--size-contenu-oversize-2: 20px;
}
/* Mobile (≤768px) */
@media all and (max-width: 800px) {
	:root {
		--size-titre-0: 64px;
		--size-titre-1: 48px;
		--size-titre-2: 32px;
		--size-titre-3: 28px;
		--size-titre-4: 20px;
		--size-titre-5: 18px;

		--size-contenu-oversize-1: 20px;
		--size-contenu-oversize-2: 20px;

		--size-intertitre: 16px;

		--size-contenu-1: 16px;
		--size-contenu-2: 16px;
		--size-contenu-3: 14px;
		--size-legende: 12px;
		--size-legende-2: 10px;
	}

	body.site-innn {
		--size-titre-1: 48px;
	}

	body.site-manifest {
		--size-titre-1: 30px;
	}
}