/*
Theme Name:   Edwige Taramarcaz
Theme URI:    https://kriesi.at/themes/enfold/
Description:  Thème enfant Enfold — architecture de composants ACF Flexible Content (ACF PRO requis).
Author:       Tris Informatique
Author URI:   https://www.trisinformatique.com/
Template:     enfold
Version:      1.0.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  theme
*/

/* --------------------------------------------------------------------------
   Design tokens partagés par tous les composants ET par les feuilles du site
   (assets/css/*.css, classes tris-*) : source unique des couleurs du site.
   Toujours préfixés --component-* pour éviter toute collision avec Enfold.

   IMPORTANT : ces tokens ne définissent JAMAIS de couleur ou de police en dur.
   Ils reprennent systématiquement les variables CSS générées par Enfold
   (--enfold-main-color-*, --enfold-font-*) via var(--enfold-xxx, repli).
   Le repli (2e argument de var()) n'est qu'un filet de sécurité pour l'admin
   ACF ou un contexte sans Enfold — en front, c'est toujours la valeur Enfold
   (réglages "Colors" / "Styling" d'Enfold) qui s'applique. Voir CLAUDE.md §6.
   -------------------------------------------------------------------------- */
:root {
	/* Largeur du conteneur Enfold : Réglages du thème → Général → Disposition →
	   Dimensions → « Maximum Container Width » (option avia_options['responsive_size'],
	   réglée à 1310px sur ce site — voir .container{max-width:1310px} dans le CSS
	   dynamique généré par Enfold). Contrairement aux couleurs/polices, Enfold n'expose
	   pas cette valeur comme variable CSS réutilisable (--enfold-*) : il n'y a donc pas
	   de var(--enfold-…) possible ici. Si cette option change dans l'admin, mettre à
	   jour cette valeur en conséquence pour rester aligné avec le conteneur Enfold. */
	--component-max-width: 1310px;
	--component-gutter: 24px;

	--component-space-compact: 32px;
	--component-space-normal: 64px;
	--component-space-large: 112px;

	--component-radius: 8px;
	--component-radius-lg: 16px;

	/* Couleurs — reprises des variables de 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);

	/* Teal et encre : réglés dans Enfold sur le scheme « footer » uniquement (le scheme
	   « main » n'a pas de second ton de marque), réutilisés ici pour tout le site. */
	--component-color-accent: var(--enfold-footer-color-secondary, #48b8a7);
	--component-color-ink: var(--enfold-footer-color-bg, #10201c);

	/* Teintes dérivées : Enfold n'a pas de réglage pour ces nuances, elles sont donc
	   calculées depuis les couleurs Enfold (elles suivent si le vert ou le teal change). */
	--component-color-accent-light: color-mix(in srgb, var(--component-color-accent) 50%, var(--component-color-bg)); /* ≈ #A4DCD4 */
	--component-color-tint: color-mix(in srgb, var(--component-color-primary) 4%, var(--component-color-bg));        /* ≈ #F5F9F8, fonds clairs */
	--component-color-surface: color-mix(in srgb, var(--component-color-primary) 3%, var(--component-color-bg));     /* ≈ #F8FAFA, fond des cartes */
	--component-color-line: color-mix(in srgb, var(--component-color-primary) 15%, var(--component-color-bg));       /* ≈ #DBE6E4, filets et bordures teintés */
	--component-color-text-light: color-mix(in srgb, var(--component-color-text) 60%, var(--component-color-bg));    /* ≈ #899390, placeholders, légendes */

	/* Typographie — reprise des variables de police Enfold. */
	--component-font-family: var(--enfold-font-family-theme-body,"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif);
	--component-font-size-text: var(--enfold-font-size-theme-content, 13px);
	--component-font-size-h1: var(--enfold-font-size-theme-h1, 34px);
	--component-font-size-h2: var(--enfold-font-size-theme-h2, 28px);
	--component-font-size-h3: var(--enfold-font-size-theme-h3, 20px);
	--component-font-size-h4: var(--enfold-font-size-theme-h4, 18px);
	--component-font-size-h5: var(--enfold-font-size-theme-h5, 16px);
	--component-font-size-h6: var(--enfold-font-size-theme-h6, 14px);

	--component-transition: 0.25s ease;
	--component-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
	/* Ombre teintée vert foncé, même teinte que .tris-hero-carte
	   (enfold-child.css) mais plus marquée : réservée au survol des cartes. */
	--component-shadow-brand: 0 24px 60px rgba(10, 58, 51, 0.12);
	--component-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 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%;
	font-family: var(--component-font-family);
}

/* Boutons génériques des composants (jamais .button, réservé à Enfold). */
.component-button {
	display: inline-block;
	padding: 14px 28px;
	border-radius: var(--component-radius);
	background: var(--component-color-primary);
	color: var(--component-color-light);
	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 {
	background: var(--component-color-primary-dark);
	color: var(--component-color-light);
	transform: translateY(-1px);
}

.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;
}


/* --------------------------------------------------------------------------
   Polices du site (variables, sous-ensemble latin, WOFF2).
   Newsreader : générées depuis les TTF Google Fonts d'origine (assets/fonts/*.ttf,
   non chargés) avec l'axe wght limité à 400–700 — à régénérer depuis ces TTF
   (fonttools varLib.instancer + pyftsubset) si une autre graisse devient nécessaire.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: 'Newsreader';
	src: url('./assets/fonts/newsreader.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Newsreader';
	src: url('./assets/fonts/newsreader-italic.woff2') format('woff2');
	font-weight: 400 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Archivo';
	src: url('./assets/fonts/archivo.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}