/* ==========================================================================
   Tris Component Engine — design tokens et classes de base des composants.

   SEUL fichier où une couleur, une police ou une taille de texte est écrite : tous les
   composants (components/<nom>/style.css) consomment exclusivement ces tokens.

   - Les couleurs et polices reprennent les variables qu'Enfold publie selon ses réglages
     (Réglages du thème → Couleurs / Styling) : changer une couleur ou une police dans Enfold
     met à jour tous les composants. La valeur après la virgule n'est qu'un repli (contexte
     sans Enfold).
   - Les polices Enfold (--enfold-font-family-body / -heading) n'existent que si une police est
     choisie dans Enfold ; sinon les composants utilisent la police par défaut d'Enfold, comme
     le reste du site.
   - Les tailles de texte forment une échelle propre aux composants : Enfold ne publie pas ses
     tailles réglées en variables (seulement des constantes).

   Déclarés avec :where(:root) (spécificité nulle) : un thème surcharge n'importe quel token
   par un simple :root { --component-… } dans son style.css, quel que soit l'ordre de chargement.
   ========================================================================== */

:where(:root) {
	/* Mise en page */
	--component-max-width: var(--tce-enfold-container-width, 1310px); /* option Enfold, voir inc/helpers.php */
	--component-gutter: 24px;
	--component-space-compact: 32px;
	--component-space-normal: 64px;
	--component-space-large: 112px;
	--component-radius: 8px;
	--component-radius-lg: 16px;
	--component-transition: 0.25s ease;

	/* Couleurs — scheme Enfold « main » (zone de contenu) */
	--component-color-bg: var(--enfold-main-color-bg, #ffffff);
	--component-color-bg2: var(--enfold-main-color-bg2, #f8f8f8);
	--component-color-primary: var(--enfold-main-color-primary, #1e73be);
	--component-color-primary-dark: var(--enfold-main-color-button-border, #17588f);
	--component-color-secondary: var(--enfold-main-color-secondary, #8bba34);
	--component-color-dark: var(--enfold-main-color-heading, #1a1a1a);
	--component-color-light: var(--enfold-main-color-bg, #ffffff);
	--component-color-text: var(--enfold-main-color-color, #4e4e4e);
	--component-color-text-invert: var(--enfold-main-color-constant-font, #ffffff);
	--component-color-meta: var(--enfold-main-color-meta, #969696);
	--component-color-muted: var(--enfold-main-color-bg2, #f4f6f8);
	--component-color-border: var(--enfold-main-color-border, #e3e6ea);
	--component-color-button-font: var(--enfold-main-color-button-font, #ffffff);

	/* Couleurs sémantiques, indépendantes de l'identité visuelle */
	--component-color-overlay: #000000; /* voiles sur images, lightbox, ombres */
	--component-color-rating: #f0a202;  /* étoiles de notation */
	--component-shadow: 0 6px 24px color-mix(in srgb, var(--component-color-overlay) 8%, transparent);

	/* Typographie — polices */
	--component-font-family: var(--enfold-font-family-body, var(--enfold-font-family-theme-body, Arial, Helvetica, sans-serif));
	--component-font-family-heading: var(--enfold-font-family-heading, var(--component-font-family));

	/* Typographie — échelle des tailles */
	--component-font-size-xs: 0.8rem;                            /* eyebrow, mentions */
	--component-font-size-sm: 0.875rem;                          /* légendes, méta */
	--component-font-size-md: 1rem;                              /* texte courant */
	--component-font-size-lg: 1.125rem;                          /* titres de cartes / questions */
	--component-font-size-lead: clamp(1rem, 2vw, 1.35rem);       /* chapô, sous-titre */
	--component-font-size-title-sm: clamp(1.25rem, 2.8vw, 2.1rem); /* titre de bandeau / slide */
	--component-font-size-title: clamp(1.5rem, 3vw, 2.25rem);   /* titre de section */
	--component-font-size-number: clamp(2rem, 4vw, 2.8rem);     /* chiffres clés */
	--component-font-size-display: clamp(2rem, 5vw, 3.4rem);    /* titre de hero */
	--component-font-size-affix: 0.4em;                          /* préfixe / suffixe d'un chiffre */
	--component-icon-size: 1.5rem;

	/* Swiper : couleur par défaut (puces, flèches non stylées par un composant) */
	--swiper-theme-color: var(--component-color-primary);
}

/* Conteneur interne commun (aligné sur la largeur de contenu Enfold). */
.component-inner {
	width: 100%;
	max-width: var(--component-max-width);
	margin: 0 auto;
	padding-left: var(--component-gutter);
	padding-right: var(--component-gutter);
	box-sizing: border-box;
}

/* Wrapper principal du template flexible. */
.component-main {
	display: block;
	width: 100%;
	color: var(--component-color-text);
}

/* Polices des composants, dans le flexible ACF (.component-main) comme dans l'ALB (.tce-avia). */
.component-main,
.tce-avia {
	font-family: var(--component-font-family);
	font-size: var(--component-font-size-md);
}

.component-main :is(h1, h2, h3, h4, h5, h6),
.tce-avia :is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--component-font-family-heading);
}

/* Boutons génériques des composants (jamais .button, réservé à Enfold).
   .tce-avia : conteneur des composants placés dans l'ALB, où `.main_color a` d'Enfold
   l'emporterait sinon sur la couleur du bouton. */
.component-button,
.tce-avia .component-button {
	display: inline-block;
	padding: 14px 28px;
	border-radius: var(--component-radius);
	background: var(--component-color-primary);
	color: var(--component-color-button-font);
	font-family: var(--component-font-family);
	font-size: var(--component-font-size-md);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background var(--component-transition), transform var(--component-transition);
}

.component-button:hover,
.component-button:focus,
.tce-avia .component-button:hover,
.tce-avia .component-button:focus {
	background: var(--component-color-primary-dark);
	color: var(--component-color-button-font);
	transform: translateY(-1px);
}

.component-button:focus-visible,
.tce-avia .component-button:focus-visible {
	outline: 3px solid var(--component-color-primary);
	outline-offset: 3px;
}

.component-image {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Utilitaire d'accessibilité (texte réservé aux lecteurs d'écran). */
.component-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}