/**
 * Wobi — Accueil v2 : design system de la maquette.
 *
 * Tout est limite a la page 140 (« Accueil v2 ») par le selecteur
 * body : le site actuel n'est pas affecte. Quand la v2 sera
 * validee et publiee en page d'accueil, il suffira de remplacer ce
 * selecteur par body.home pour l'appliquer.
 *
 * Sommaire :
 *   1. Jetons (couleurs, typo, rayons)
 *   2. Typographie
 *   3. Boutons
 *   4. Conteneurs
 */

/* ---------- 1. Jetons ---------- */

body {
	--v2-orange: #F26A1B;
	--v2-orange-dark: #D9560C;
	--v2-orange-soft: #FFF1E7;
	--v2-ink: #111111;
	--v2-text: #2B2B2B;
	--v2-muted: #6B6B6B;
	--v2-grey-bg: #F4F4F5;
	--v2-line: #ECECEC;
	--v2-white: #FFFFFF;
	--v2-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	--v2-hand: 'Permanent Marker', 'Comic Sans MS', cursive;
	--v2-radius: 14px;
	--v2-shadow: 0 10px 30px rgba(20, 20, 20, .08);
	--v2-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- 2. Typographie ---------- */

body,
body .elementor-widget,
body input,
body select,
body textarea,
body button {
	font-family: var(--v2-font);
	color: var(--v2-text);
}

body h1,
body h2,
body h3,
body h4 {
	font-family: var(--v2-font);
	color: var(--v2-ink);
	letter-spacing: -.02em;
	line-height: 1.12;
	margin: 0;
}

body h1 { font-size: clamp(38px, 4.8vw, 62px); font-weight: 800; }
body h2 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; }
body h3 { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: -.01em; }
body p { font-size: 16px; line-height: 1.7; color: var(--v2-muted); margin: 0; }

/* Mot mis en avant dans un titre : <span class="accent">mot</span> */
body .accent { color: var(--v2-orange); }

/* Surtitre orange */
body .v2-eyebrow .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--v2-orange);
}
body .v2-eyebrow .elementor-heading-title::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: var(--v2-orange);
}

/* Mots manuscrits */
body .v2-hand .elementor-heading-title {
	font-family: var(--v2-hand);
	font-weight: 400;
	letter-spacing: .01em;
	line-height: 1.25;
	color: var(--v2-orange);
}

/* ---------- 3. Boutons ---------- */

body .v2-btn .elementor-button {
	font-family: var(--v2-font);
	font-size: 15px;
	font-weight: 600;
	padding: 15px 28px;
	border-radius: 8px;
	transition: transform .25s var(--v2-ease), background-color .25s ease, box-shadow .25s ease;
}
body .v2-btn--primaire .elementor-button {
	background: var(--v2-orange);
	color: #fff;
	box-shadow: 0 8px 20px -8px rgba(242, 106, 27, .55);
}
body .v2-btn--primaire .elementor-button:hover {
	background: var(--v2-orange-dark);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -10px rgba(242, 106, 27, .6);
}
body .v2-btn--secondaire .elementor-button {
	background: transparent;
	color: var(--v2-ink);
	box-shadow: inset 0 0 0 1.5px var(--v2-line);
}
body .v2-btn--secondaire .elementor-button:hover {
	color: var(--v2-ink);
	box-shadow: inset 0 0 0 1.5px var(--v2-ink);
	transform: translateY(-2px);
}
/* Version claire, sur fond sombre */
body .v2-btn--clair .elementor-button {
	background: rgba(255, 255, 255, .1);
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5);
}
body .v2-btn--clair .elementor-button:hover { background: #fff; color: var(--v2-ink); }
/* Version pilule, pour « Nous contacter » */
body .v2-btn--pilule .elementor-button { border-radius: 30px; padding: 13px 26px; }

body .v2-btn .elementor-button-icon { transition: transform .25s var(--v2-ease); }
body .v2-btn .elementor-button:hover .elementor-button-icon { transform: translateX(4px); }

/* ---------- 4. Conteneurs ---------- */

body .e-con.e-con-boxed > .e-con-inner { max-width: 1200px; }
body .v2-sec { padding: 96px 0; }
body .v2-sec--gris { background: var(--v2-grey-bg); }
body .v2-sec--soft { background: var(--v2-orange-soft); }
body .v2-carte {
	background: var(--v2-white);
	border-radius: var(--v2-radius);
	box-shadow: var(--v2-shadow);
}

@media (max-width: 1024px) { body .v2-sec { padding: 72px 0; } }
@media (max-width: 767px) { body .v2-sec { padding: 56px 0; } }

@media (prefers-reduced-motion: reduce) {
	body .v2-btn .elementor-button,
	body .v2-btn .elementor-button-icon { transition: none !important; transform: none !important; }
}