/*
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.
   -------------------------------------------------------------------------- */
:root {
	--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;

	--component-color-primary: #1e73be;
	--component-color-primary-dark: #17588f;
	--component-color-dark: #1a1a1a;
	--component-color-light: #ffffff;
	--component-color-text: #4e4e4e;
	--component-color-text-invert: #ffffff;
	--component-color-muted: #f4f6f8;
	--component-color-border: #e3e6ea;

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

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