/* ==================================================================
   SYSTÈME DE DESIGN AMES — jetons de couleur, échelle typographique,
   états d'interaction.

   Extrait et distillé depuis la maquette "NexusPro" (sélecteur de pôle)
   et les couleurs réellement en place sur le site (cf7-corporate.css,
   cf7-consulting.css, cf7-distribution.css). Les 3 thèmes de couleur
   sont donc ceux déjà utilisés sur le site, pas des valeurs génériques.

   AUCUNE font-family ici : les polices locales du site restent seules
   responsables de la typographie. Ce fichier ne gère que tailles,
   graisses, interlignages, couleurs et transitions.
   ================================================================== */

/* ------------------------------------------------------------------
   1. ARCHITECTURE DES COULEURS

   Activation par classe sur <body> : .pole-corporate, .pole-consulting,
   .pole-distribution (Distribution et Boutique partagent le même thème
   vert émeraude — décision confirmée). :root porte les valeurs du thème
   Corporate par défaut, pour qu'aucune page (blog, recherche, 404) ne se
   retrouve sans variables définies si elle n'appartient à aucun pôle.
   ------------------------------------------------------------------ */

:root,
body.pole-corporate {
	--color-bg: #0b0b12;
	--color-surface: #12121c;
	--color-text: #ffffff;
	--color-text-muted: #9ca3af;
	--color-accent: #2563eb;
	--color-accent-hover: #1d4ed8;
}

body.pole-consulting {
	--color-bg: #ffffff;
	--color-surface: #f0f9ff;
	--color-text: #111827;
	--color-text-muted: #6b7280;
	--color-accent: #0ea5e9;
	--color-accent-hover: #0284c7;
}

body.pole-distribution {
	--color-bg: #f9fafb;
	--color-surface: #ffffff;
	--color-text: #111827;
	--color-text-muted: #6b7280;
	--color-accent: #059669;
	--color-accent-hover: #047857;
}

/* ------------------------------------------------------------------
   2. HIÉRARCHIE TYPOGRAPHIQUE

   H1/H2 en clamp() : ça reste dans la fourchette demandée (48–56px pour
   H1, ~36px pour H2) sur desktop, mais se réduit en douceur sur mobile
   au lieu de déborder ou de forcer un défilement horizontal.
   ------------------------------------------------------------------ */

h1 {
	font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); /* 40px → 56px */
	font-weight: 800;
	line-height: 1.1;
}

h2 {
	font-size: clamp(1.75rem, 1.55rem + 1vw, 2.25rem); /* 28px → 36px */
	font-weight: 700;
	line-height: 1.2;
}

h3 {
	font-size: 1.5rem; /* 24px */
	font-weight: 600;
	line-height: 1.3;
}

h4 {
	font-size: 1.25rem; /* 20px */
	font-weight: 600;
	line-height: 1.35;
}

h5 {
	font-size: 1.125rem; /* 18px */
	font-weight: 500;
	line-height: 1.4;
}

/* Sur-titre / badge de catégorie (ex. "Performance", "Analytics"). */
h6 {
	font-size: 0.875rem; /* 14px */
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

body,
p {
	font-size: 1rem; /* 16px — seuil de lisibilité mobile, ne pas descendre en dessous */
	font-weight: 400;
	line-height: 1.6;
}

/* ------------------------------------------------------------------
   3. ÉTATS D'INTERACTION

   Transition de base sur tout élément interactif natif, pour que les
   changements de couleur/fond/opacité soient toujours fluides, jamais
   instantanés — quel que soit le composant qui les déclenche.
   ------------------------------------------------------------------ */

a,
button,
input,
select,
textarea {
	transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Survol générique boutons/liens : léger effet d'estompage plutôt qu'un
   changement de couleur brutal. Les composants qui définissent déjà leur
   propre :hover (boutons de formulaire, etc.) restent prioritaires grâce
   à leur spécificité plus élevée — cette règle ne sert que de filet par
   défaut pour tout le reste. */
a:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	opacity: 0.9;
}

/* Logos partenaires / réassurance en défilement : gris et atténués au
   repos, pleine couleur au survol. À poser sur chaque image de logo
   (classe .logo-partenaire) à l'intérieur d'un conteneur défilant.
   Exemple d'utilisation : <img class="logo-partenaire" ...>. */
.logo-partenaire {
	filter: grayscale(1);
	opacity: 0.5;
	transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.logo-partenaire:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* Piste de défilement (marquee) de logos : se fige au survol pour laisser
   le temps de regarder, plutôt que de continuer à défiler sous le curseur.
   À poser sur le conteneur qui porte l'animation de défilement. */
.logos-defilement:hover {
	animation-play-state: paused;
}