/* ==========================================================================
   Design tokens — spécifications Adobe XD « FormationSIG.com V1.1 » (maquette 1920px).
   https://xd.adobe.com/view/092a9370-4941-4c44-9767-f30c839cd5c4-5c79/
   Les tailles utilisent clamp() : valeur XD atteinte à 1920px.
   Breakpoints (pas de maquettes, validés avec le client) :
     desktop > 1140px  |  tablette <= 1140px  |  mobile <= 768px
   ========================================================================== */

/*
 * Police : Century Gothic, fichiers fournis par arx iT (assets/fonts/, WOFF).
 * Une seule famille en deux graisses, pour que font-weight fonctionne partout :
 * 100-500 = Regular (le « Medium » du XD tombe dessus), 600-900 = Bold.
 * Pas de fichier italique (le site n'en utilise plus : l'accroche du pied de page est passée en romain).
 * Le nom « Century Gothic » prend le pas sur la police éventuellement installée sur le poste.
 */
@font-face {
	font-family: "Century Gothic";
	font-style: normal;
	font-weight: 100 500;
	font-display: swap;
	src: url("../fonts/century-gothic-400.woff") format("woff");
}
@font-face {
	font-family: "Century Gothic";
	font-style: normal;
	font-weight: 600 900;
	font-display: swap;
	src: url("../fonts/century-gothic-700.woff") format("woff");
}

:root {
	/* Couleurs (palette XD) */
	--c-green: #95cb43;          /* sur-titres, icônes */
	--c-green-bright: #97d700;   /* logo */
	--c-green-soft: #a0c859;     /* indicateurs, titre « Nous contacter » */
	--c-text: #7b7b7b;           /* texte courant et titres */
	--c-text-muted: #707070;
	--c-text-strong: #5f5f5f;
	--c-heading: #333333;        /* onglet actif */
	--c-tab: #989595;            /* onglet inactif */
	--c-bg: #ffffff;
	--c-bg-alt: #f4f4f4;
	--c-bg-footer: #edf0e7;
	--c-header-bg: rgb(255 255 255 / 0.8);
	--c-border: #d9d9d9;
	--c-logo: #000000;
	--c-shadow: rgb(0 0 0 / 0.16); /* #00000029 */

	/* Typo */
	--font: "Century Gothic", CenturyGothic, "URW Gothic", AppleGothic, "Avenir Next", Avenir, system-ui, sans-serif;
	--fs-13: clamp(12px, 0.68vw, 13px);
	--fs-15: clamp(14px, 0.79vw, 15px);
	--fs-16: clamp(14px, 0.84vw, 16px);
	--fs-18: clamp(15px, 0.94vw, 18px);
	--fs-20: clamp(16px, 1.05vw, 20px);
	--fs-22: clamp(16px, 1.15vw, 22px);
	--fs-24: clamp(17px, 1.25vw, 24px);
	--fs-30: clamp(18px, 1.56vw, 30px);   /* texte d'intro (Entreprise) : 30px / 40px */
	--fs-48: clamp(26px, 2.5vw, 48px);    /* titre de bloc secondaire */
	--fs-eyebrow: 22px;             /* retour client : sur-titres (.eyebrow) à 22px partout (XD : 28px) */
	--fs-h2: 40px;                  /* retour client : titres (.title-h2 et titres de bloc) à 40px, 32px ≤ 1399px, 28px ≤ 768px (XD : 58px) */
	--fs-h1: clamp(36px, 4.06vw, 78px);   /* 78px / 107px */

	/* Espacements / mise en page */
	--gutter: 40px;                 /* retour client : marge latérale des conteneurs (XD : 111px) */
	--container: 1920px;
	--section-y: clamp(56px, 5.2vw, 100px);
	--header-h: 146px;               /* retour client : hauteur fixe sur ordinateur */
	--radius: 0px;               /* cartes à angles droits sur XD */
	--radius-pill: 999px;
	--shadow: 0 3px 6px var(--c-shadow);
	--ease: cubic-bezier(.2, .7, .2, 1);
}

/* Header proportionnel seulement avec le menu burger (≤ 1024px, 90px à 1024px, 72px minimum en mobile).
   Entre 1024 et 1140px, il garde la hauteur ordinateur de 146px (retour client du 20/10/2026). */
/* Titres : 32px dès 1399px (retour client du 20/10/2026) */
@media (max-width: 1399px) {
	:root { --fs-h2: 32px; }
}

@media (max-width: 1024px) {
	:root { --header-h: clamp(72px, 8.8vw, 100px); }
}

/* Mobile : marge latérale réduite, 40px laisseraient trop peu de place au contenu */
@media (max-width: 768px) {
	:root { --gutter: 20px; --fs-h2: 28px; --fs-eyebrow: 18px; /* titres 28px, sur-titres verts 18px (retours client du 20/10/2026) */ }
}

/* Mode sombre (toggle du header). Palette à valider avec le client : non maquettée. */
:root[data-theme="dark"] {
	--c-text: #b8b8b8;
	--c-text-muted: #9a9a9a;
	--c-text-strong: #d6d6d6;
	--c-heading: #f2f2f2;
	--c-tab: #8a8a8a;
	--c-bg: #151714;
	--c-bg-alt: #1d201b;
	--c-bg-footer: #1f241a;
	--c-header-bg: rgb(21 23 20 / 0.9);
	--c-border: #33372f;
	--c-logo: #ffffff;
	--c-shadow: rgb(0 0 0 / 0.5);
	color-scheme: dark;
}