/* ── Smooth scroll global ─────────────────────────────────────── */
html {
	scroll-behavior: smooth;
}
/* Désactiver sur les sections sticky pour éviter les conflits */
.yolo-ss-wrapper ~ * {
	scroll-behavior: auto;
}
/* GPU hints — will-change uniquement, pas de contain (risque de collapse) */
.yolo-ss-card {
	-webkit-font-smoothing: antialiased;
}

/* =============================================================================
   MAIN CSS — chargé en async via LoadCSS pattern. Tout le below-the-fold.
   ============================================================================= */

/* --- ARTICLE (single.php) — détail d'article, PHP pur ------------------ */
/* Couleurs / typo branchées sur les variables globales Elementor du site
   (avec repli si la CSS globale Elementor n'est pas chargée sur la page). */
.ya { display: block; }
body.single-post { background: #fff; }
body.single-post .site-header:not(.is-scrolled) { background: var(--c-bg); }

/* En-tête : bandeau crème centré */
.ya__head {
	background: var(--c-bg);
	border-radius: 0 0 clamp(40px, 6vw, 100px) clamp(40px, 6vw, 100px);
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 2rem) clamp(5rem, 8vw, 7rem);
}
.ya__head-inner { max-width: 900px; margin: 0 auto; text-align: center; }

.ya__cat {
	display: inline-block;
	background: #6D5EFF;
	color: var(--e-global-color-8342aa0, #FAF3EB);
	font-family: "Open Sans", sans-serif; font-size: 14px; font-weight: 400;
	text-transform: uppercase; line-height: 1; letter-spacing: .04em;
	padding: 9px 18px; border-radius: 999px; text-decoration: none;
	margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

.ya__title {
	font-family: "Syne", sans-serif;
	font-size: clamp(2.5rem, 6.5vw, 80px); font-weight: 400; line-height: 1.05;
	color: #000;
	margin: 0 0 clamp(1.25rem, 3vw, 1.75rem); text-wrap: balance;
}
.ya__title em { font-family: "Fraunces", serif; font-style: italic; font-weight: 400; color: var(--c-accent, #FF5A2D); }

.ya__standfirst {
	font-family: "Open Sans", sans-serif; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	line-height: 1.55; color: #000; opacity: .82;
	max-width: 46ch; margin: 0 auto clamp(1.5rem, 3vw, 2rem);
}

.ya__meta {
	display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(.75rem, 2vw, 1.25rem);
	font-family: "Open Sans", sans-serif; font-size: 15px; font-weight: 600;
	color: #000;
}
.ya__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .4; }
.ya__share { display: inline-flex; align-items: center; gap: 12px; }
.ya__share-label { font-family: "Open Sans", sans-serif; font-size: 15px; font-weight: 600; color: #000; }
.ya__share a { display: inline-flex; align-items: center; justify-content: center; color: #000; transition: color var(--dur, .2s) var(--ease, ease); }
.ya__share a:hover { color: var(--c-accent, #FF5A2D); }
.ya__share svg { width: 22px; height: 22px; }

/* Image héro (léger débord sur le bandeau) */
.ya__hero {
	max-width: 1200px; margin: clamp(-3.25rem, -4vw, -2.5rem) auto 0;
	padding: 0 clamp(1.25rem, 4vw, 2rem); position: relative; z-index: 2;
}
.ya__hero img {
	width: 100%; height: clamp(240px, 40vw, 540px); object-fit: cover;
	border-radius: clamp(20px, 2vw, 28px); box-shadow: var(--shadow-lg); display: block;
}
.ya__cap {
	margin: clamp(.75rem, 2vw, 1rem) 0 0; text-align: center; font-style: italic;
	font-family: "Open Sans", sans-serif; font-size: 14px; color: var(--c-text-muted, #5C5C5C);
}

/* Corps éditorial */
.ya__body {
	max-width: 720px; margin: 0 auto;
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 2rem) 0;
	font-family: var(--e-global-typography-3b64492-font-family, "Open Sans"), sans-serif;
	font-size: var(--e-global-typography-3b64492-font-size, 1.125rem);
	font-weight: var(--e-global-typography-3b64492-font-weight, 400);
	line-height: var(--e-global-typography-3b64492-line-height, 1.75);
	color: #000;
}
.ya__body > * { margin: 0 0 1.5em; }
.ya__body > *:last-child { margin-bottom: 0; }
.ya__body h2 {
	font-family: var(--e-global-typography-9fcef58-font-family, "Syne"), sans-serif;
	font-size: var(--e-global-typography-9fcef58-font-size, 2.25rem);
	font-weight: var(--e-global-typography-9fcef58-font-weight, 700);
	line-height: var(--e-global-typography-9fcef58-line-height, 1.15);
	color: #000;
	margin: 2em 0 .6em;
}
.ya__body h3 {
	font-family: var(--e-global-typography-fc9404f-font-family, "Open Sans"), sans-serif;
	font-size: var(--e-global-typography-fc9404f-font-size, 1.5rem);
	font-weight: var(--e-global-typography-fc9404f-font-weight, 700);
	line-height: var(--e-global-typography-fc9404f-line-height, 1.3);
	color: #000;
	margin: 1.6em 0 .5em;
}
.ya__body a { color: var(--c-accent, #FF5A2D); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ya__body img, .ya__body figure { max-width: 100%; height: auto; border-radius: var(--r-md, 1rem); margin: 2em 0; }
.ya__body figure img { margin: 0; }
.ya__body ul, .ya__body ol { padding-left: 1.4em; }
.ya__body li { margin-bottom: .5em; }
.ya__body blockquote {
	margin: 2em 0; padding: .2em 0 .2em 1.2em; border-left: 5px solid var(--c-accent, #FF5A2D);
	font-family: "Fraunces", serif; font-style: italic; font-weight: 400;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.3; color: #000;
}
.ya__body blockquote cite { display: block; margin-top: .6em; font-family: "Open Sans", sans-serif; font-style: normal; font-size: 15px; font-weight: 600; color: var(--c-text-muted, #5C5C5C); }
.ya__body pre { background: var(--c-navy, #1A0B4D); color: #fff; padding: 1.25rem; border-radius: var(--r-md, 1rem); overflow-x: auto; font-size: 14px; }
.ya__body code { background: var(--c-border, #E8DECE); padding: .1em .4em; border-radius: 4px; font-size: .9em; }
.ya__body pre code { background: transparent; padding: 0; }

/* Tags */
.ya__tags { max-width: 720px; margin: clamp(2rem, 4vw, 3rem) auto 0; padding: 0 clamp(1.25rem, 4vw, 2rem); display: flex; flex-wrap: wrap; gap: 10px; }
.ya__tag { background: #fff; border: 1px solid var(--c-border, #E8DECE); padding: 6px 16px; border-radius: 999px; text-decoration: none; font-size: 14px; color: var(--c-text-muted, #5C5C5C); }
.ya__tag:hover { color: var(--c-accent, #FF5A2D); border-color: var(--c-accent, #FF5A2D); }

/* Sur le même thème (articles liés) */
.ya__related { max-width: 1200px; margin: clamp(4rem, 8vw, 7rem) auto clamp(4rem, 8vw, 7rem); padding: 0 clamp(1.25rem, 4vw, 2rem); }
.ya__related h3 {
	font-family: "Syne", sans-serif; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 700;
	line-height: 1.1; color: #000; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
}
.ya__rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem); }
.ya__rel-card { display: flex; flex-direction: column; text-decoration: none; }
.ya__rel-cover { height: 200px; border-radius: clamp(16px, 2vw, 22px); overflow: hidden; margin-bottom: 1rem; }
.ya__rel-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ya__rel-cover.is-c0 { background: var(--c-accent, #FF5A2D); }
.ya__rel-cover.is-c1 { background: var(--c-yellow, #F4B547); }
.ya__rel-cover.is-c2 { background: var(--c-navy, #1A0B4D); }
.ya__rel-tag {
	align-self: flex-start;
	background: #6D5EFF; color: var(--e-global-color-8342aa0, #FAF3EB);
	font-family: "Open Sans", sans-serif; font-size: 13px; font-weight: 400; letter-spacing: .04em;
	text-transform: uppercase; line-height: 1; padding: 7px 14px; border-radius: 999px; margin-bottom: 12px;
}
.ya__rel-card h4 { font-family: "Syne", sans-serif; font-weight: 600; font-size: 1.25rem; line-height: 1.25; color: #000; margin: 0; }
.ya__rel-card:hover h4 { color: var(--c-accent, #FF5A2D); }

@media (max-width: 820px) {
	.ya__rel-grid { grid-template-columns: 1fr; }
}

/* --- ARCHIVE / SEARCH --------------------------------------------------- */
.archive-wrap,
.search-wrap {
	padding-block: var(--space-xl);
}
.archive-header {
	text-align: center;
	margin-bottom: var(--space-xl);
}
.archive-title {
	font-size: var(--fs-3xl);
	margin-bottom: var(--space-sm);
}
.archive-description,
.archive-count {
	color: var(--c-text-muted);
	max-width: 600px;
	margin-inline: auto;
}

.posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--space-lg);
}

.card {
	background: var(--c-surface);
	border-radius: var(--r-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card__media {
	display: block;
	aspect-ratio: 3/2;
	overflow: hidden;
}
.card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--ease);
}
.card:hover .card__media img { transform: scale(1.05); }
.card__body {
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	flex: 1;
}
.card__category {
	font-size: var(--fs-xs);
	color: var(--c-primary);
	text-decoration: none;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	align-self: flex-start;
}
.card__title {
	font-size: var(--fs-lg);
}
.card__title a {
	text-decoration: none;
	transition: color var(--dur) var(--ease);
}
.card__title a:hover { color: var(--c-primary); }
.card__excerpt {
	color: var(--c-text-muted);
	font-size: var(--fs-sm);
}
.card__meta {
	margin-top: auto;
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
}

/* --- PAGINATION --------------------------------------------------------- */
.pagination,
.nav-links {
	display: flex;
	justify-content: center;
	gap: var(--space-2xs);
	margin-top: var(--space-xl);
}
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px; height: 44px;
	padding: 0 var(--space-xs);
	border-radius: var(--r-pill);
	background: var(--c-surface);
	text-decoration: none;
	font-weight: 600;
	transition: background-color var(--dur) var(--ease);
}
.page-numbers.current { background: var(--c-primary); color: #fff; }
.page-numbers:not(.current):hover { background: var(--c-border); }

/* --- 404 ---------------------------------------------------------------- */
.error-404 {
	text-align: center;
	padding-block: var(--space-2xl);
}
.error-404__code {
	font-size: var(--fs-4xl);
	font-family: var(--ff-display);
	color: var(--c-primary);
	line-height: 1;
}
.error-404__title {
	font-size: var(--fs-2xl);
	font-weight: 600;
	margin-block: var(--space-sm);
}
.error-404__text {
	color: var(--c-text-muted);
	margin-bottom: var(--space-lg);
}

/* --- FOOTER ------------------------------------------------------------- */
/* =============================================================
   FOOTER — design Yolo (bloc orange arrondi)
   ============================================================= */
.site-footer {
	background: var(--c-accent, #FF5A2D);
	color: #fff;
	border-radius: 40px 40px 0 0;
	padding: clamp(48px, 6vw, 80px) clamp(24px, 5vw, 72px) 32px;
	margin-top: var(--space-2xl);
}
.site-footer__inner {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: clamp(32px, 5vw, 80px);
	margin-bottom: clamp(40px, 5vw, 64px);
	max-width: 1280px;
	margin-inline: auto;
}
@media (max-width: 900px) {
	.site-footer__inner { grid-template-columns: 1fr 1fr; }
	.site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.site-footer__inner { grid-template-columns: 1fr; }
	.site-footer { border-radius: 28px 28px 0 0; }
}

/* Marque */
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.site-footer__logo img { max-width: 180px; height: auto; filter: brightness(0) invert(1); }
.site-footer__logo--text { font-family: var(--ff-display, 'Syne'), sans-serif; font-size: 2rem; font-weight: 700; color: #fff; text-decoration: none; }

/* Bouton « Nous contacter » (pill violet + cercle blanc — style bouton type Yolo) */
.site-footer__contact {
	display: inline-flex; align-items: center; gap: var(--btn-gap, 16px);
	background: var(--c-primary, #5A4DFF); color: #fff;
	padding: var(--btn-pad, 5px 10px 5px 20px); border-radius: 999px;
	text-decoration: none; font-weight: 600; font-size: 0.95rem;
	transition: transform 0.25s ease;
}
.site-footer__contact:hover { transform: translateY(-1px); }
.site-footer__contact-icon {
	width: var(--btn-icon, 40px); height: var(--btn-icon, 40px);
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer__contact-icon svg { width: var(--btn-icon, 40px); height: var(--btn-icon, 40px); display: block; }
.site-footer__contact:hover .site-footer__contact-icon { transform: rotate(-45deg); }
.site-footer__partner { color: rgba(255,255,255,.85); font-size: 0.95rem; margin: 0; max-width: 340px; }

/* Colonnes de liens */
.site-footer__col-title { font-family: var(--ff-display, 'Syne'), sans-serif; font-size: 32px !important; font-weight: 600; margin: 0 0 24px; color: #fff; }
.site-footer__list { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; }
.site-footer__list a { text-decoration: none; color: rgba(255,255,255,.92); font-size: 1rem; transition: opacity 0.2s ease; }
.site-footer__list a:hover { opacity: 0.7; }

/* Bas de footer */
.site-footer__bottom {
	display: flex; flex-wrap: wrap; align-items: center;
	justify-content: space-between; gap: 20px;
	padding-top: 28px;
	border-top: 1px solid rgba(255,255,255,.35);
	max-width: 1280px; margin-inline: auto;
}
.site-footer__copy { font-size: 0.9rem; color: rgba(255,255,255,.85); margin: 0; }
.site-footer__social { display: inline-flex; align-items: center; gap: 14px; }
.site-footer__social-label { font-size: 0.95rem; color: #fff; }
.site-footer__social-link {
	width: 38px; height: 38px; border-radius: 50%;
	border: 1.5px solid rgba(255,255,255,.85); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.site-footer__social-link:hover { background: #fff; color: var(--c-accent, #FF5A2D); }

/* --- PAGE (page.php) ---------------------------------------------------- */
.page-header {
	padding-block: var(--space-xl);
	text-align: center;
}
.page-title {
	font-size: var(--fs-3xl);
}
.page-content {
	max-width: 760px;
	padding-bottom: var(--space-2xl);
}

/* --- FORMES (search) ---------------------------------------------------- */
.search-form {
	display: flex;
	gap: var(--space-2xs);
	max-width: 500px;
	margin: var(--space-md) auto;
}
.search-form input[type="search"] {
	flex: 1;
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--r-pill);
	border: 1px solid var(--c-border);
	background: var(--c-surface);
}

/* --- NO RESULTS / PAGE STATES ------------------------------------------- */
.no-results {
	text-align: center;
	padding-block: var(--space-xl);
	color: var(--c-text-muted);
}

/* --- ELEMENTOR OVERRIDES ------------------------------------------------ */
/* On hérite des design tokens dans les widgets Elementor pour la cohérence visuelle. */
.elementor-button {
	border-radius: var(--r-pill) !important;
	font-weight: 600;
}

.nos_offres_prix b {
	font-size: 50px !important;
	font-weight: 500;
}


/* =============================================================================
   REVEAL SYSTEM — apparitions smooth via classes CSS
   
   Presets (champ "Classes CSS" dans Elementor > Avancé) :
   ┌──────────────────────────────────────────────────────────────────┐
   │  .reveal          → scale + fade       (défaut, universel)       │
   │  .reveal-up       → monte + fade       (cards, blocs de texte)   │
   │  .reveal-clip     → rideau du bas      (grandes photos, heroes)  │
   │  .reveal-blur     → flou → net         (covers, ambiances)       │
   ├──────────────────────────────────────────────────────────────────┤
   │  Délais : .delay-100  .delay-200  .delay-300  .delay-400  .delay-500
   │  Stagger : .reveal-group sur le parent → enfants en cascade      │
   └──────────────────────────────────────────────────────────────────┘
   ============================================================================= */

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
	--rv-dur:      0.85s;
	--rv-ease:     cubic-bezier(0.22, 1, 0.36, 1);
	--rv-distance: 30px;
	--rv-scale:    0.94;
	--rv-blur:     10px;
}

/* =============================================================
   Texte italique d'accent (span dans les titres) — Fraunces
   ============================================================= */
h1 span:not(.na-char):not(.na-char-inner),
h2 span:not(.na-char):not(.na-char-inner),
.elementor-heading-title span:not(.na-char):not(.na-char-inner) {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-weight: 350;
	line-height: 0.9;
	letter-spacing: -0.01em;
}

/* ── États initiaux ─────────────────────────────────────────── */
.reveal,
.reveal-up,
.reveal-blur,
.reveal-group > * {
	opacity: 0;
	will-change: transform, opacity, filter;
}

.reveal,
.reveal-group > *              { transform: scale(var(--rv-scale)); }
.reveal-up,
.reveal-group.reveal-up > *   { transform: translateY(var(--rv-distance)); }
.reveal-blur,
.reveal-group.reveal-blur > * { transform: scale(0.97); filter: blur(var(--rv-blur)); }

.reveal-clip,
.reveal-group.reveal-clip > * {
	opacity: 1;
	transform: none;
	clip-path: inset(0 0 100% 0 round 8px);
}

/* ── État révélé (classe .is-revealed ajoutée par JS) ───────── */
.reveal.is-revealed,
.reveal-up.is-revealed,
.reveal-blur.is-revealed,
.reveal-group > *.is-revealed {
	opacity: 1;
	transform: none;
	filter: none;
	transition:
		opacity   var(--rv-dur) var(--rv-ease),
		transform var(--rv-dur) var(--rv-ease),
		filter    var(--rv-dur) var(--rv-ease);
}

.reveal-clip.is-revealed,
.reveal-group.reveal-clip > *.is-revealed {
	clip-path: inset(0 0 0% 0 round 8px);
	transition: clip-path var(--rv-dur) var(--rv-ease);
}

/* ── Délais utilitaires ─────────────────────────────────────── */
.delay-100.is-revealed { transition-delay: 100ms; }
.delay-150.is-revealed { transition-delay: 150ms; }
.delay-200.is-revealed { transition-delay: 200ms; }
.delay-300.is-revealed { transition-delay: 300ms; }
.delay-400.is-revealed { transition-delay: 400ms; }
.delay-500.is-revealed { transition-delay: 500ms; }

/* ── Stagger auto dans .reveal-group ────────────────────────── */
/* Les délais sont injectés par JS, pas besoin de CSS manuel     */

/* ── Zoom hover — classe .zoom sur le parent ────────────────── */
.zoom {
	overflow: hidden;
	border-radius: inherit;
}
.zoom img {
	transform: scale(1);
	transition: transform 0.6s var(--rv-ease);
}
.zoom:hover img { transform: scale(1.05); }

/* ── Respect prefers-reduced-motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.reveal, .reveal-up, .reveal-clip, .reveal-blur,
	.reveal-group > * {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
		transition: none !important;
	}
}

/* =============================================================
   number_anim — révélation caractère par caractère (masque + cascade)
   Chaque caractère monte depuis le bas derrière un masque, avec un délai
   progressif. Le JS découpe le texte en .na-char > .na-char-inner.
   Usage : Elementor > Avancé > Classes CSS → number_anim
   ============================================================= */
.number_anim { opacity: 0; }
.number_anim.na-ready,
.number_anim.is-revealed { opacity: 1; }

/* Masque + caractère */
.number_anim .na-char {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	line-height: 1;
	/* italique Fraunces explicite (les .na-char sont exclus de la règle générique des spans) */
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-weight: 300;
	letter-spacing: -0.01em;
	/* line-height:1 + padding-bas 0 → le bas de la boîte = ligne de base du glyphe,
	   ce qui aligne le grand chiffre et le suffixe (« 1 mois »). marges compensées. */
	padding: 0 0.14em 0 0.04em;
	margin: 0 -0.14em -0.08em -0.04em;
}
.number_anim .na-char-inner {
	display: inline-block;
	transform: translateY(125%);
	transition: transform 0.7s var(--rv-ease);
	transition-delay: calc(var(--ci, 0) * 45ms);
	will-change: transform;
}
.number_anim.is-revealed .na-char-inner {
	transform: translateY(0);
}

/* Span sémantiques (ex. « mois », « % ») — exclut les caractères générés. */
.number_anim span:not(.na-char):not(.na-char-inner) {
	font-size: var(--na-span-size, 0.55em);
	line-height: 1.1 !important;
	letter-spacing: -0.015em;
	margin: 0 !important;
}
.number_anim .elementor-heading-title {
	line-height: 1.1 !important;
	margin: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	.number_anim { opacity: 1 !important; }
	.number_anim .na-char-inner { transform: none !important; transition: none !important; }
}



/* =============================================================
   CTA_hero — gros bouton avec cercle fléché
   Usage : Elementor > Avancé > Classes CSS → CTA_hero
   Comportement : 16px au repos → pill (999px) au hover
   ============================================================= */

.CTA_hero,
.CTA_hero .elementor-widget-container,
.CTA_hero .elementor-button-wrapper { width: 100%; }

.CTA_hero .elementor-button {
	display: flex !important;
	align-items: center;
	width: 100% !important;
	min-height: 80px;
	padding: 12px 12px 12px 36px;
	border-radius: 18px !important;
	box-sizing: border-box;
	transition: border-radius 0.55s cubic-bezier(0.65, 0, 0.35, 1),
	            transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* 44px = pill complète pour un bouton de 80px de haut :
   toute la durée sert à la transition visible (plus de "snap"). */
.CTA_hero .elementor-button:hover {
	border-radius: 44px !important;
	transform: translateY(-2px);
}

/* Layout interne : texte gauche / cercle droite */
.CTA_hero .elementor-button-content-wrapper {
	display: flex !important;
	flex-direction: row-reverse !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	gap: 16px;
}

/* Texte : font/size contrôlés par Elementor Style > Typographie */
.CTA_hero .elementor-button-text {
	color: #ffffff !important;
	flex: 1;
}

/* Cercle SVG */
.CTA_hero .elementor-button-icon {
	flex-shrink: 0;
	line-height: 0;
	display: flex;
	align-items: center;
}

.CTA_hero .elementor-button-icon svg {
	width: 54px !important;
	height: 54px !important;
	display: block;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.CTA_hero .elementor-button:hover .elementor-button-icon svg {
	transform: rotate(-45deg) scale(1.05);
}


/* =============================================================
   btn_yolo — classe utilitaire pour les boutons Elementor (Button)
   Usage : Elementor > Avancé > Classes CSS → btn_yolo
   Donne la forme pill + le layout cercle-flèche. Les COULEURS restent
   pilotables depuis Elementor > Style (fallback orange si non réglé).
   ============================================================= */

.btn_yolo .elementor-button {
	display: inline-flex !important;
	align-items: center;
	padding: var(--btn-pad, 5px 10px 5px 20px);
	border-radius: 999px !important;  /* pill fixe, pas de changement au hover */
	gap: var(--btn-gap, 16px);
	/* Couleurs par défaut (fallback) — surchargées si réglées dans Elementor Style */
	background-color: var(--c-accent, #FF5A2D);
	color: #ffffff;
	transition: transform 0.25s ease !important;
}

.btn_yolo .elementor-button:hover {
	transform: translateY(-1px);
	transition: transform 0.25s ease !important;
}

/* Layout : texte gauche / cercle droite */
.btn_yolo .elementor-button-content-wrapper {
	display: flex !important;
	flex-direction: row-reverse !important;
	align-items: center !important;
	gap: var(--btn-gap, 16px);
}

.btn_yolo .elementor-button-text {
	white-space: nowrap;
}

/* Cercle SVG */
.btn_yolo .elementor-button-icon {
	flex-shrink: 0;
	line-height: 0;
	display: flex;
	align-items: center;
}

.btn_yolo .elementor-button-icon svg {
	width: var(--btn-icon, 40px) !important;
	height: var(--btn-icon, 40px) !important;
	display: block;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn_yolo .elementor-button:hover .elementor-button-icon svg {
	transform: rotate(-45deg);
}


/* ── Utilitaires — graisses fines (polices variables : Fraunces, Open Sans, Syne) ──
   À mettre dans Elementor → Avancé → Classes CSS. La classe se pose sur le conteneur
   du widget : on cible donc aussi les balises de texte enfants (sinon leur propre
   font-weight l'emporte et rien ne change). Le !important surcharge la Typographie. */
.font-weight_325,
.font-weight_325 h1, .font-weight_325 h2, .font-weight_325 h3,
.font-weight_325 h4, .font-weight_325 h5, .font-weight_325 h6,
.font-weight_325 p,  .font-weight_325 span, .font-weight_325 a,
.font-weight_325 li, .font-weight_325 em,   .font-weight_325 i,
.font-weight_325 strong, .font-weight_325 .elementor-heading-title {
	font-weight: 325 !important;
}

.font-weight_350,
.font-weight_350 h1, .font-weight_350 h2, .font-weight_350 h3,
.font-weight_350 h4, .font-weight_350 h5, .font-weight_350 h6,
.font-weight_350 p,  .font-weight_350 span, .font-weight_350 a,
.font-weight_350 li, .font-weight_350 em,   .font-weight_350 i,
.font-weight_350 strong, .font-weight_350 .elementor-heading-title {
	font-weight: 350 !important;
}