/* JS – Titres Animés — v1.2.1
 * Palette par défaut : Solarva (#7bb042 / #000101 / #9fd36d).
 * Gardes anti-thème : letter-spacing négatif des titres Solarva, marges h/p,
 * text-transform, .elementor img{height:auto}. Racine confinée par overflow-x: clip.
 */

/* Police manuscrite embarquée (OFL) — auto-hébergée, aucun appel externe. */
@font-face {
	font-family: 'Dancing Script JS';
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/dancing-script-600.woff2') format('woff2');
}
@font-face {
	font-family: 'Dancing Script JS';
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/dancing-script-700.woff2') format('woff2');
}

.js-ta {
	--js-ta-eyebrow: #3e6d2c;
	--js-ta-title: #000101;
	--js-ta-accent-a: #7bb042;
	--js-ta-accent-b: #3e6d2c;
	--js-ta-subtitle: #5b6a56;
	--js-ta-decor: #7bb042;
	--js-ta-gold: #9fd36d;
	--js-ta-badge-bg: #eaf2df;
	--js-ta-align: center;
	--js-pad-x: 0px;
	--js-ta-dur: .8s;

	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	padding-left: var(--js-pad-x);
	padding-right: var(--js-pad-x);
	overflow-x: clip;
	max-width: 100%;
}
.js-ta--speed-slow { --js-ta-dur: 1.25s; }
.js-ta--speed-fast { --js-ta-dur: .5s; }

/* Alignement par défaut — le contrôle Elementor écrase text-align + align-items,
 * et les rangées en inline-flex suivent naturellement align-items. */
.js-ta { text-align: center; align-items: center; }
.js-ta__decor-row { display: inline-flex; }

/* Gardes anti-thème en :where() — (0,1,0), ne bloque pas Elementor. */
.js-ta :where(h1, h2, h3, h4, h5, h6, p) {
	margin: 0;
	padding: 0;
	letter-spacing: normal;
	text-transform: none;
	clear: none;
}
.js-ta :where(*) { min-width: 0; }
.js-ta [hidden] { display: none !important; }

/* ---------- Décor : branche JS Élagage ---------- */
.js-ta__decor {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--js-ta-decor);
	line-height: 1;
	flex: 0 0 auto;
}
.js-ta .js-ta__decor .js-ta__branch { width: 44px; height: 24px; display: block; }
.js-ta .js-ta__decor .js-ta__icon,
.js-ta .js-ta__decor i { font-size: 26px; line-height: 1 !important; vertical-align: middle; }
.js-ta .js-ta__decor svg:not(.js-ta__branch) { width: 26px; height: 26px; }
.js-ta .js-ta__decor .js-ta__img { width: 44px; height: auto; max-width: 44px; display: block; }

.js-ta--decor-both .js-ta__decor:last-child .js-ta__branch { transform: scaleX(-1); }

/* ---------- Sur-titre ---------- */
.js-ta__eyebrow-row {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	flex-wrap: wrap;
}
/* Espacement décor/texte par margin, jamais par gap (règle anti-thème). */
.js-ta__eyebrow-row .js-ta__decor { margin-right: 10px !important; }
.js-ta--decor-both .js-ta__eyebrow-row .js-ta__decor:last-child { margin-right: 0 !important; margin-left: 10px !important; }

.js-ta .js-ta__eyebrow {
	color: var(--js-ta-eyebrow);
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: break-word;
}
/* Style manuscrit — Dancing Script embarquée (demande client, 01/08/2026). */
.js-ta--eyebrow-script .js-ta__eyebrow {
	font-family: 'Dancing Script JS', 'Dancing Script', 'Segoe Script', cursive;
	font-size: 32px;
	font-weight: 600;
}
/* Pastille arrondie. */
.js-ta--eyebrow-badge .js-ta__eyebrow {
	background: var(--js-ta-badge-bg);
	border-radius: 999px;
	padding: 7px 18px;
	font-size: 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
}
/* Filets dorés latéraux. */
.js-ta--eyebrow-lines .js-ta__eyebrow {
	font-size: 15px;
	letter-spacing: .14em;
	text-transform: uppercase;
	position: relative;
	display: inline-flex;
	align-items: center;
}
.js-ta--eyebrow-lines .js-ta__eyebrow::before,
.js-ta--eyebrow-lines .js-ta__eyebrow::after {
	content: '';
	display: inline-block;
	width: 34px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--js-ta-gold), #b7dd8a);
	flex: 0 0 auto;
}
.js-ta--eyebrow-lines .js-ta__eyebrow::before { margin-right: 12px; }
.js-ta--eyebrow-lines .js-ta__eyebrow::after  { margin-left: 12px; }
/* Simple. */
.js-ta--eyebrow-plain .js-ta__eyebrow {
	font-size: 14px;
	letter-spacing: .18em;
	text-transform: uppercase;
}

/* ---------- Titre ---------- */
/* Tailles par défaut responsives (le h2 Solarva fait 54px, trop grand en mobile) ;
 * la typographie Elementor du widget reprend la main si renseignée. */
.js-ta .js-ta__title {
	color: var(--js-ta-title);
	font-weight: 700;
	font-size: 42px;
	line-height: 1.15;
	max-width: 100%;
	overflow-wrap: anywhere; /* dernier recours : un mot plus large que l'écran se coupe */
}
.js-ta .js-ta__title .js-ta__plain,
.js-ta .js-ta__title .js-ta__accent { overflow-wrap: anywhere; }
/* Les mots découpés par le JS restent des inline-block : on borne leur largeur
 * et on autorise la coupure interne en tout dernier recours. */
.js-ta .js-ta__w { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 1024px) { .js-ta .js-ta__title { font-size: 34px; } }
@media (max-width: 767px)  { .js-ta .js-ta__title { font-size: 28px; } }

/* Accent — dégradé vert. */
.js-ta--accent-gradient .js-ta__accent {
	background: linear-gradient(100deg, var(--js-ta-accent-a), var(--js-ta-accent-b));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--js-ta-accent-a); /* repli si background-clip non géré */
}
/* PIÈGE SAFARI iOS : background-clip:text ne se peint pas à travers des enfants
 * inline-block (mots/lettres découpés par le JS) — le titre accentué devenait
 * invisible sur iPhone. Quand l'accent est fragmenté (classe posée par le JS),
 * le conteneur repasse en peinture normale et CHAQUE fragment porte son propre
 * dégradé, en vertical (180deg) pour un rendu identique d'un fragment à l'autre. */
.js-ta--accent-gradient .js-ta__accent.js-ta__accent--frag {
	background: none;
	-webkit-text-fill-color: currentColor;
	color: var(--js-ta-accent-a);
}
.js-ta--accent-gradient .js-ta__accent--frag .js-ta__w,
.js-ta--accent-gradient .js-ta__accent--frag .js-ta__l {
	background-image: linear-gradient(180deg, var(--js-ta-accent-a), var(--js-ta-accent-b));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--js-ta-accent-a);
}
/* Dans la cascade de lettres, le mot enveloppe des lettres inline-block : c'est
 * la lettre qui peint, le mot reste neutre. */
.js-ta--accent-gradient .js-ta__accent--frag .js-ta__w .js-ta__l { -webkit-text-fill-color: transparent; }
/* Accent — couleur unie. */
.js-ta--accent-solid .js-ta__accent { color: var(--js-ta-accent-a); }
/* Accent — surligneur. */
.js-ta--accent-highlight .js-ta__accent {
	color: inherit;
	background: linear-gradient(0deg, var(--js-ta-badge-bg) 38%, transparent 38%);
	border-radius: 4px;
	padding: 0 .12em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
/* Accent — souligné qui se trace. */
.js-ta--accent-draw .js-ta__accent {
	color: var(--js-ta-accent-a);
	background-image: linear-gradient(90deg, var(--js-ta-accent-a), var(--js-ta-accent-b));
	background-repeat: no-repeat;
	background-size: 100% 3px;
	background-position: 0 96%;
	padding-bottom: .08em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.js-ta--accent-draw.js-ta--js .js-ta__accent { background-size: 0% 3px; transition: background-size calc(var(--js-ta-dur) * 1.2) ease .35s; }
.js-ta--accent-draw.js-ta--js.is-in .js-ta__accent { background-size: 100% 3px; }

/* ---------- Sous-titre ---------- */
.js-ta .js-ta__subtitle {
	color: var(--js-ta-subtitle);
	font-size: 17px;
	line-height: 1.65;
	overflow-wrap: break-word;
}

/* ---------- Animations (amélioration progressive : rien de masqué sans JS) ---------- */
@media (prefers-reduced-motion: reduce) {
	.js-ta * { animation: none !important; transition: none !important; }
}

/* Apparition douce du bloc. */
.js-ta--js.js-ta--anim-fade-up > * { opacity: 0; transform: translateY(18px); transition: opacity var(--js-ta-dur) ease, transform var(--js-ta-dur) ease; }
.js-ta--js.js-ta--anim-fade-up.is-in > * { opacity: 1; transform: none; }
.js-ta--js.js-ta--anim-fade-up.is-in > .js-ta__title { transition-delay: .12s; }
.js-ta--js.js-ta--anim-fade-up.is-in > .js-ta__subtitle { transition-delay: .24s; }

/* Montée mot à mot — le JS découpe en .js-ta__w. */
.js-ta .js-ta__w { display: inline-block; }
.js-ta--js.js-ta--anim-rise-words .js-ta__w {
	opacity: 0; transform: translateY(.65em);
	transition: opacity calc(var(--js-ta-dur) * .75) ease var(--js-d, 0s), transform calc(var(--js-ta-dur) * .75) cubic-bezier(.2,.7,.3,1) var(--js-d, 0s);
}
.js-ta--js.js-ta--anim-rise-words.is-in .js-ta__w { opacity: 1; transform: none; }

/* Cascade de lettres 3D — le JS découpe en .js-ta__l. */
.js-ta--anim-letters-3d .js-ta__title { perspective: 640px; }
.js-ta .js-ta__l { display: inline-block; }
.js-ta--js.js-ta--anim-letters-3d .js-ta__l {
	opacity: 0; transform: rotateX(-88deg) translateY(.3em); transform-origin: 50% 100%;
	transition: opacity .5s ease var(--js-d, 0s), transform calc(var(--js-ta-dur) * .8) cubic-bezier(.2,.7,.25,1.1) var(--js-d, 0s);
}
.js-ta--js.js-ta--anim-letters-3d.is-in .js-ta__l { opacity: 1; transform: none; }

/* Machine à écrire — curseur. */
.js-ta--js.js-ta--anim-typewriter.is-in .js-ta__title::after {
	content: '';
	display: inline-block;
	width: 2px;
	height: .9em;
	margin-left: 3px;
	background: var(--js-ta-accent-a);
	vertical-align: -.08em;
	animation: js-ta-caret 1s steps(1) infinite;
}
.js-ta--js.js-ta--anim-typewriter.is-done .js-ta__title::after { display: none; }
@keyframes js-ta-caret { 50% { opacity: 0; } }

/* Rideau vert balayant. */
.js-ta--js.js-ta--anim-curtain .js-ta__title { position: relative; }
.js-ta--js.js-ta--anim-curtain .js-ta__plain,
.js-ta--js.js-ta--anim-curtain .js-ta__accent { opacity: 0; transition: opacity .01s linear calc(var(--js-ta-dur) * .45); }
.js-ta--js.js-ta--anim-curtain.is-in .js-ta__plain,
.js-ta--js.js-ta--anim-curtain.is-in .js-ta__accent { opacity: 1; }
.js-ta--js.js-ta--anim-curtain .js-ta__title::before {
	content: '';
	position: absolute;
	inset: -4px -6px;
	background: linear-gradient(100deg, var(--js-ta-accent-a), var(--js-ta-accent-b));
	border-radius: 6px;
	transform: scaleX(0);
	transform-origin: 0 50%;
	pointer-events: none;
}
.js-ta--js.js-ta--anim-curtain.is-in .js-ta__title::before { animation: js-ta-curtain var(--js-ta-dur) cubic-bezier(.65,0,.35,1) forwards; }
@keyframes js-ta-curtain {
	0%   { transform: scaleX(0); transform-origin: 0 50%; }
	48%  { transform: scaleX(1); transform-origin: 0 50%; }
	52%  { transform: scaleX(1); transform-origin: 100% 50%; }
	100% { transform: scaleX(0); transform-origin: 100% 50%; }
}

/* Mise au point flou → net. */
.js-ta--js.js-ta--anim-blur-focus .js-ta__title { opacity: 0; filter: blur(10px); transform: scale(1.02); transition: opacity var(--js-ta-dur) ease, filter var(--js-ta-dur) ease, transform var(--js-ta-dur) ease; }
.js-ta--js.js-ta--anim-blur-focus.is-in .js-ta__title { opacity: 1; filter: blur(0); transform: none; }

/* Rotation de mots — le JS remplace le contenu du 1er accent. */
.js-ta--anim-rotate .js-ta__accent-inner { display: inline-block; }
.js-ta--js.js-ta--anim-rotate .js-ta__accent-inner.js-ta--swap-out { opacity: 0; transform: translateY(-.5em); transition: opacity .28s ease, transform .28s ease; }
.js-ta--js.js-ta--anim-rotate .js-ta__accent-inner.js-ta--swap-in  { opacity: 0; transform: translateY(.5em); transition: none; }
.js-ta--js.js-ta--anim-rotate .js-ta__accent-inner { opacity: 1; transform: none; transition: opacity .28s ease, transform .28s ease; }

/* ---------- Garde image Elementor ---------- */
.js-ta .js-ta__decor .js-ta__img { height: auto; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.js-ta { gap: 10px; }
	.js-ta--eyebrow-script .js-ta__eyebrow { font-size: 25px; }
	.js-ta .js-ta__subtitle { font-size: 15.5px; }
	.js-ta--eyebrow-lines .js-ta__eyebrow::before,
	.js-ta--eyebrow-lines .js-ta__eyebrow::after { width: 22px; }
}