/* ============================================================
   Chambrier — Services au scroll  v2.2
   Responsive : desktop ≥ 960px | tablet 640–959px | mobile < 640px
   ============================================================ */

/* ── Variables ── */
.chx-svc {
	--chx-accent:      #D87A3A;
	--chx-active:      #1F2A24;
	--chx-inactive:    #8A8F87;
	--chx-line:        #E6E1D2;
	--chx-bp-layout:   960px;   /* breakpoint bascule 2col → 1col          */
	--chx-bp-sm:       640px;   /* breakpoint compact mobile                */
	/* Colonnes de la ligne — contrôlées via le back-office Elementor */
	--chx-col-num:     64px;
	--chx-col-arrow:   44px;
}
.chx-svc * { box-sizing: border-box; }

/* ── Section wrapper ── */
.chx-svc {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
   EN-TÊTE
   ============================================================ */
.chx-svc__head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 56px);
	align-items: end;
	margin-bottom: clamp(36px, 5vw, 64px);
}

/* Variantes layout */
.chx-svc__head--one_col  { grid-template-columns: 1fr; }
.chx-svc__head--centered { grid-template-columns: 1fr; text-align: center; }
.chx-svc__head--centered .chx-svc__head-left  { align-items: center; }
.chx-svc__head--centered .chx-svc__lede       { max-width: 56ch; margin: 0 auto; }

/* Colonne gauche : eyebrow + titre */
.chx-svc__head-left { display: flex; flex-direction: column; }
.chx-svc__head-left .chx-svc__eyebrow { margin-bottom: 14px; }

/* Lede : colonne droite alignée en bas */
.chx-svc__lede { align-self: end; }

/* Typographie en-tête fluide */
.chx-svc__eyebrow {
	font-family: ui-monospace, "JetBrains Mono", monospace;
	font-size: clamp(10px, 0.75vw, 12px);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--chx-inactive);
}
.chx-svc__h {
	margin: 0;
	font-size: clamp(28px, 3.6vw, 58px);
	line-height: 1.05;
	letter-spacing: -.02em;
	font-weight: 500;
	color: var(--chx-active);
	white-space: pre-line;
}
.chx-svc__lede {
	margin: 0;
	font-size: clamp(14px, 1.05vw, 17px);
	line-height: 1.6;
	color: var(--chx-inactive);
	max-width: 54ch;
}

/* Tablette : en-tête 1 colonne */
@media (max-width: 820px) {
	.chx-svc__head                           { grid-template-columns: 1fr; gap: 20px; }
	.chx-svc__head--two_cols .chx-svc__lede  { max-width: 56ch; }
}

/* ============================================================
   LAYOUT 2 COLONNES (desktop)
   ============================================================ */
.chx-svc__layout {
	display: grid;
	gap: clamp(24px, 3vw, 48px);
	align-items: start;
}

/* ============================================================
   LIGNES DE SERVICES
   ============================================================ */
.chx-svc__rows { border-top: 1px solid var(--chx-line); }

.chx-row {
	display: grid;
	/*
	 * Les variables --chx-col-num et --chx-col-arrow sont définies sur .chx-svc
	 * et mises à jour par le sélecteur Elementor de l'option "Taille flèche".
	 * Ainsi les media queries mobiles n'ont PAS à lutter contre un sélecteur
	 * inline Elementor de forte spécificité.
	 */
	grid-template-columns: var(--chx-col-num, 64px) 1fr var(--chx-col-arrow, 44px);
	align-items: center;
	gap: clamp(12px, 2vw, 24px);
	padding: clamp(20px, 2.2vw, 32px) 0;
	border: 0;
	border-bottom: 1px solid var(--chx-line);
	background: transparent;
	width: 100%;
	text-align: left;
	cursor: pointer;
	position: relative;
	font: inherit;
	color: inherit;
	transition: background 250ms;
	/* Élimine le délai 300ms sur iOS Safari et Android Chrome */
	touch-action: manipulation;
}

/* Dot indicateur actif */
.chx-row::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--chx-accent);
	transform: translateY(-50%) scale(0);
	transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.chx-row.is-active::before { transform: translateY(-50%) scale(1); }

/* Numéro */
.chx-row__num {
	padding-left: 20px;
	font-family: ui-monospace, "JetBrains Mono", monospace;
	font-size: clamp(11px, 0.85vw, 13px);
	color: var(--chx-inactive);
	letter-spacing: .08em;
	white-space: nowrap;
}

/* Corps */
.chx-row__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.chx-row__title {
	font-size: clamp(17px, 1.9vw, 30px);
	font-weight: 500;
	letter-spacing: -.02em;
	line-height: 1.15;
	color: var(--chx-inactive);
	transition: color 250ms, transform 300ms cubic-bezier(.2,.7,.2,1);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Tablette et en-dessous : titre sur plusieurs lignes si besoin */
@media (max-width: 959px) {
	.chx-row__title { white-space: normal; }
}

.chx-row.is-active .chx-row__title,
.chx-row:hover      .chx-row__title { color: var(--chx-active); }
.chx-row:hover      .chx-row__title { transform: translateX(8px); }

.chx-row__sub {
	font-size: clamp(12px, 0.9vw, 14px);
	color: var(--chx-inactive);
	line-height: 1.45;
	transition: color 250ms;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Bouton flèche */
.chx-row__arrow {
	width: var(--chx-col-arrow, 44px);
	height: var(--chx-col-arrow, 44px);
	border-radius: 50%;
	border: 1px solid var(--chx-line);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--chx-inactive);
	background: transparent;
	transition: all 250ms cubic-bezier(.2,.7,.2,1);
	flex-shrink: 0;
}
.chx-row.is-active .chx-row__arrow,
.chx-row:hover     .chx-row__arrow {
	background: var(--chx-accent);
	color: #fff;
	border-color: var(--chx-accent);
}

/* ============================================================
   PANNEAU DROIT — desktop : colonne sticky
   ============================================================ */
.chx-svc__panels { position: relative; align-self: flex-start; }
.chx-svc__panels.is-sticky { position: sticky; }

/* Panels — desktop : fade-in */
.chx-panel { display: none; }
.chx-panel.is-active {
	display: block;
	animation: chx-fade .35s ease both;
}
@keyframes chx-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* ============================================================
   PANNEAU — contenu
   ============================================================ */
.chx-panel__media {
	aspect-ratio: 3/4;
	border-radius: 20px;
	overflow: hidden;
	background: var(--chx-line);
	margin-bottom: 20px;
	width: 100%;
}
.chx-panel__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.chx-panel__tag {
	font-family: ui-monospace, "JetBrains Mono", monospace;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--chx-accent);
}
.chx-panel__title {
	margin: 8px 0 0;
	font-size: clamp(17px, 1.5vw, 24px);
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.2;
	color: var(--chx-active);
}
.chx-panel__body {
	margin: 10px 0 0;
	color: var(--chx-inactive);
	font-size: clamp(13px, 0.9vw, 15px);
	line-height: 1.6;
}
.chx-panel__bullets {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7px 14px;
}
.chx-panel__bullets li {
	font-size: clamp(12px, 0.85vw, 14px);
	color: var(--chx-inactive);
	position: relative;
	padding-left: 18px;
	line-height: 1.4;
}
.chx-panel__bullets li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--chx-accent);
	font-size: 11px;
	top: 1px;
}

.chx-panel__ctas {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* ── Boutons CTA ── */
.chx-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 999px;
	font-size: clamp(12px, 0.85vw, 14px);
	font-weight: 500;
	transition: transform .2s, background .2s, color .2s, border-color .2s, filter .2s;
	text-decoration: none;
	white-space: nowrap;
}
.chx-btn--primary       { background: var(--chx-accent); color: #fff; border: 1px solid transparent; }
.chx-btn--primary:hover { transform: translateY(-2px); filter: brightness(1.08); }
.chx-btn--link          { color: var(--chx-active); border-bottom: 1px solid currentColor; padding: 2px 0; border-radius: 0; font-size: clamp(12px, 0.85vw, 14px); }
.chx-btn--link:hover    { color: var(--chx-accent); }

/* ============================================================
   RESPONSIVE — Tablette 640–959px
   Deux colonnes s'effacent, panel passe en accordéon sous chaque ligne
   ============================================================ */
@media (max-width: 959px) {

	/* Layout mono-colonne — !important pour l'emporter sur le style inline PHP */
	.chx-svc__layout { grid-template-columns: 1fr !important; gap: 0; }

	/* On cache le bloc panels "flottant" : le JS injecte les panels inline */
	.chx-svc__panels { display: none !important; }
	.chx-svc__panels.is-sticky { position: static; }

	/*
	 * NB : on ne touche PAS au display de .chx-row ici.
	 * La grille 3-colonnes reste (num | body | arrow) — correcte sur tablette.
	 * Sur mobile (< 640px) on passe à 2 colonnes ci-dessous.
	 */

	/* Panel accordéon injecté par le JS */
	.chx-panel-inline {
		width: 100%;
		overflow: hidden;
		max-height: 0;
		transition: max-height .4s cubic-bezier(.4,0,.2,1), opacity .3s;
		opacity: 0;
		padding: 0;
	}
	.chx-panel-inline.is-open {
		max-height: 1400px;   /* agrandi : image 16/9 + texte + bullets */
		opacity: 1;
		padding-bottom: 20px;
	}
	.chx-panel-inline .chx-panel__media {
		aspect-ratio: 16/9;
		border-radius: 12px;
		margin-bottom: 14px;
		margin-top: 12px;
	}
	.chx-panel-inline .chx-panel__bullets { grid-template-columns: 1fr 1fr; }
	.chx-panel-inline .chx-panel__ctas    { flex-wrap: wrap; }
}

/* ============================================================
   RESPONSIVE — Mobile < 640px
   ============================================================ */
@media (max-width: 639px) {

	/* Section padding horizontal */
	.chx-svc { padding-left: 16px !important; padding-right: 16px !important; }

	/* En-tête : titre plus petit, une seule colonne */
	.chx-svc__head { gap: 16px; }

	/*
	 * Lignes : passage en 2 colonnes (body | arrow).
	 * On n'a plus besoin de lutter contre un sélecteur Elementor ici
	 * puisque arrow_size utilise désormais une CSS variable (--chx-col-arrow)
	 * et ne touche plus à grid-template-columns directement.
	 */
	.chx-row {
		grid-template-columns: 1fr 36px;
		gap: 10px;
		padding: 18px 0;
	}

	/* Numéro caché sur mobile */
	.chx-row__num { display: none; }

	/* Point indicateur caché sur mobile */
	.chx-row::before { display: none; }

	/* Sous-titre : 1 seule ligne max */
	.chx-row__sub { -webkit-line-clamp: 1; }

	/* Bouton flèche plus petit */
	.chx-row__arrow { width: 36px; height: 36px; }
	.chx-row__arrow svg { width: 15px; height: 15px; }

	/* Panel inline mobile : ratio 4/3 au lieu de 16/9 */
	.chx-panel-inline .chx-panel__media   { aspect-ratio: 4/3; }
	.chx-panel-inline .chx-panel__bullets { grid-template-columns: 1fr; }

	/* Boutons CTA pleine largeur */
	.chx-panel__ctas  { flex-direction: column; align-items: stretch; }
	.chx-btn--primary { justify-content: center; }
	.chx-btn--link    { justify-content: center; }
}

/* ============================================================
   ACCESSIBILITÉ
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.chx-panel.is-active  { animation: none; }
	.chx-panel-inline     { transition: opacity .15s; }
	.chx-row__title,
	.chx-row__arrow,
	.chx-row              { transition-duration: 0ms !important; }
}

.chx-row:focus-visible {
	outline: 2px solid var(--chx-accent);
	outline-offset: 2px;
}