/*
Theme Name:   Enfold Child
Theme URI:    https://kriesi.at/themes/enfold/
Description:  Thème enfant Enfold — architecture de composants ACF Flexible Content (ACF PRO requis).
Author:       Agence
Author URI:   https://example.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.
   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 à 1560px sur ce site — voir .container{max-width:1560px} 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: 1560px;
	--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);

	/* Typographie — reprise des variables de police Enfold. */
	--component-font-family: var(--enfold-font-family-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);
}

/* 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;
}