/* ============================================================
   CD — Timeline (frise chronologique)
   ------------------------------------------------------------
   Deux modes :
   - Horizontal « pinned » : la section se fige (position:sticky,
     100vh) et le scroll vertical est mappé sur un translateX du
     track par cd-timeline.js. Défaut charte : accent corail.
   - Vertical : frise classique, aucun JS.
   ============================================================ */

.ck-tl {
	/* Défauts (charte Cercledesign) — surchargeables via Elementor. */
	--ck-tl-accent:      #d85a36;
	--ck-tl-line:        #e4e4e7;
	--ck-tl-line-w:      2px;
	--ck-tl-visible:     3;       /* cartes visibles à l'écran (horizontal) — réglable/responsive */
	--ck-tl-step:        50;      /* scroll (% hauteur d'écran) pour avancer d'une carte — lu par le JS */
	--ck-tl-snap:        1;       /* 1 = aligne sur les cartes au repos, 0 = libre (fluide) — lu par le JS */
	--ck-tl-endpad:      40;      /* palier de fin (% hauteur d'écran) : la frise tient avant que la page reparte — lu par le JS */
	--ck-tl-item-w:      360px;   /* largeur d'une carte : recalculée en JS = largeur visible / N */
	--ck-tl-gap:         64px;
	--ck-tl-card-bg:     #ffffff;
	--ck-tl-card-border: #e4e4e7;
	--ck-tl-card-radius: 10px;
	--ck-tl-img-h:       200px;
	--ck-tl-img-fit:     cover;
	--ck-tl-title:       #18181b;
	--ck-tl-text:        #52525b;
	--ck-tl-date:        #ffffff;
	--ck-tl-date-bg:     #d85a36;

	/* Offset vertical de l'axe (aligné sur le centre des nœuds). */
	--ck-tl-axis-top:    58px;
	--ck-tl-edge:        8vw;   /* position de la barre de progression */
	--ck-tl-pad:         0px;   /* respiration gauche/droite de la frise (réglable) */

	/* Nœud & tige (réglables dans Elementor). */
	--ck-tl-dot-size:    16px;
	--ck-tl-dot-ring:    #fff;
	--ck-tl-dot-ring-w:  3px;
	--ck-tl-stem-h:      28px;

	/* Apparition des cartes (réglable dans Elementor). */
	--ck-tl-appear-dur:     600ms;
	--ck-tl-appear-stagger: 120;  /* ms entre deux cartes d'une même fournée — lu par le JS */
	--ck-tl-tilt:           3deg; /* inclinaison au repos (effet pop), alternée ±  */
}

/* ---- Titre de la section (dans la zone figée, au-dessus des cartes) ----
   .ck-tl__head porte le calage sur la boîte Elementor (bleed + marges) ;
   le titre lui-même est réglable en largeur et positionnable (marges auto).
   Doubles classes : résiste aux kits Elementor qui stylent h1-h6. */
.ck-tl .ck-tl__head {
	padding: 0
		calc(var(--ck-tl-bleed-r, 0px) + var(--ck-tl-pad))
		0
		calc(var(--ck-tl-bleed-l, 0px) + var(--ck-tl-pad));
}
.ck-tl .ck-tl__heading {
	margin: 0 0 var(--ck-tl-heading-mb, 40px);
	max-width: 100%;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ck-tl-heading, var(--ck-tl-title));
}

/* ---- Carte (commune aux deux modes) ---- */
.ck-tl__card {
	width: 100%;
	background: var(--ck-tl-card-bg);
	border: 1px solid var(--ck-tl-card-border);
	border-radius: var(--ck-tl-card-radius);
	overflow: hidden;
	text-align: left;
}
.ck-tl__media {
	width: 100%;
	height: var(--ck-tl-img-h);
	overflow: hidden;
	background: var(--ck-tl-line);
}
.ck-tl__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--ck-tl-img-fit);
}
.ck-tl__body { padding: 18px 20px 22px; }
/* Doubles classes : un kit/thème Elementor qui style h1-h6 ou p
   (`.elementor-kit-X h3` = 0,1,1) battrait nos simples classes (0,1,0)
   → « la couleur du titre ne marche pas » côté client. */
.ck-tl .ck-tl__title {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ck-tl-title);
}
.ck-tl .ck-tl__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--ck-tl-text);
}
.ck-tl__text > :first-child { margin-top: 0; }
.ck-tl__text > :last-child { margin-bottom: 0; }

/* ---- Date (pastille) ---- */
.ck-tl__date {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 15px;
	border-radius: 999px;
	background: var(--ck-tl-date-bg);
	color: var(--ck-tl-date);
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	white-space: nowrap;
}

/* ---- Nœud ---- */
.ck-tl__dot {
	width: var(--ck-tl-dot-size);
	height: var(--ck-tl-dot-size);
	border-radius: 50%;
	background: var(--ck-tl-accent);
	border: var(--ck-tl-dot-ring-w) solid var(--ck-tl-dot-ring);
	box-shadow: 0 0 0 var(--ck-tl-line-w) var(--ck-tl-line);
	flex: 0 0 auto;
	position: relative;
	z-index: 1;
}

/* ---- Masquages (réglables) ---- */
.ck-tl--no-line .ck-tl__track::before { display: none; }
.ck-tl--no-line .ck-tl__dot { box-shadow: none; }
.ck-tl--no-dot .ck-tl__dot { visibility: hidden; }
.ck-tl--no-dot.ck-tl--no-stem .ck-tl__dot { display: none; }
.ck-tl--no-stem .ck-tl__dot::after { display: none !important; }

/* ---- Date dans la carte (date_pos = card-top / card-bottom) ---- */
.ck-tl .ck-tl__body .ck-tl__date { margin: 0 0 12px; }
.ck-tl--date-card-bottom .ck-tl__body .ck-tl__date { margin: 14px 0 0; }

/* ============================================================
   MODE HORIZONTAL
   ============================================================ */
.ck-tl--horizontal .ck-tl__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Couper horizontalement seulement : une grosse typo de date ne doit
	   pas être décapitée en haut (les vieux navigateurs retombent sur hidden). */
	overflow: hidden;
	overflow-x: clip;
	overflow-y: visible;
}
.ck-tl--horizontal .ck-tl__viewport {
	width: 100%;
	overflow: hidden;
	overflow-x: clip;
	overflow-y: visible;
}
.ck-tl--horizontal .ck-tl__track {
	display: flex;
	align-items: flex-start;
	gap: var(--ck-tl-gap);
	/* --ck-tl-bleed-l/r (posées en JS, pin actif) = distance écran → boîte du
	   widget : au repos les cartes s'alignent sur l'encadrement Elementor, la
	   découpe se fait aux bords de l'écran. */
	padding: var(--ck-tl-track-pt, 0px)
		calc(var(--ck-tl-bleed-r, 0px) + var(--ck-tl-pad))
		var(--ck-tl-track-pb, 0px)
		calc(var(--ck-tl-bleed-l, 0px) + var(--ck-tl-pad));
	position: relative;
	will-change: transform;
}
/* Ligne d'axe horizontale, alignée sur le centre des nœuds.
   --ck-tl-axis-top est recalée en JS sur le centre réel du nœud
   (dépend de la typo de la date, de la taille du nœud…). */
.ck-tl--horizontal .ck-tl__track::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: var(--ck-tl-axis-top);
	height: var(--ck-tl-line-w);
	background: var(--ck-tl-line);
	transform: translateY(-50%);
}
/* Sans date sur l'axe, le nœud est en tête d'item : repli sans JS. */
.ck-tl--horizontal.ck-tl--date-card-top,
.ck-tl--horizontal.ck-tl--date-card-bottom,
.ck-tl--horizontal.ck-tl--date-none { --ck-tl-axis-top: calc(var(--ck-tl-dot-size) / 2); }

/* ---- Écran figé à hauteur réglable (< 100vh) : la zone figée devient un
   bandeau de --ck-tl-pin-h (vh) calé au milieu de l'écran pendant le pin
   (--ck-tl-sticky-top posée en JS = (écran − bandeau) / 2). ---- */
.ck-tl--horizontal.ck-tl--pin-band .ck-tl__sticky {
	height: calc(var(--ck-tl-pin-h, 100) * 1vh);
	top: var(--ck-tl-sticky-top, 0px);
}
/* La barre de progression suit la frise au lieu d'être ancrée en bas d'écran. */
.ck-tl--pin-band .ck-tl__progress {
	position: static;
	margin: 28px var(--ck-tl-pad) 0;
}
.ck-tl--horizontal .ck-tl__item {
	flex: 0 0 var(--ck-tl-item-w);
	max-width: var(--ck-tl-item-w);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.ck-tl--horizontal .ck-tl__date { margin-bottom: var(--ck-tl-date-gap, 18px); }
/* Tige verticale du nœud vers la carte. */
.ck-tl--horizontal .ck-tl__dot::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: var(--ck-tl-line-w);
	height: var(--ck-tl-stem-h);
	background: var(--ck-tl-line);
}
.ck-tl--horizontal .ck-tl__card { margin-top: var(--ck-tl-stem-h); }

/* Barre de progression. */
.ck-tl__progress {
	position: absolute;
	left: var(--ck-tl-edge);
	right: var(--ck-tl-edge);
	bottom: 6vh;
	height: 3px;
	border-radius: 999px;
	background: var(--ck-tl-line);
	overflow: hidden;
}
.ck-tl__progress-bar {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--ck-tl-accent);
	transform: scaleX(0);
	transform-origin: left center;
}

/* Repli statique : pas d'overflow horizontal exploitable, éditeur Elementor,
   ou mouvement réduit → défilement horizontal natif (scrollable), pas de figé. */
.ck-tl--horizontal.ck-tl--static .ck-tl__sticky {
	position: relative;
	height: auto;
	overflow: visible;
	padding: 8px 0;
}
.ck-tl--horizontal.ck-tl--static .ck-tl__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}
.ck-tl--horizontal.ck-tl--static .ck-tl__track {
	transform: none !important;
}
.ck-tl--horizontal.ck-tl--static .ck-tl__item { scroll-snap-align: start; }
.ck-tl--horizontal.ck-tl--static .ck-tl__progress { display: none; }

/* ============================================================
   APPARITION DES CARTES
   ------------------------------------------------------------
   L'état masqué n'existe QUE sous .ck-tl--appear-armed, posée
   par le JS en front (jamais en éditeur, ni en mouvement réduit,
   ni sans IntersectionObserver) → sans JS, tout reste visible.
   La cascade passe par --ck-tl-d (transition-delay), posée en
   inline sur chaque carte par le JS et héritée par ses enfants.
   ============================================================ */
.ck-tl--appear-armed .ck-tl__item {
	transition:
		opacity   var(--ck-tl-appear-dur) ease,
		transform var(--ck-tl-appear-dur) cubic-bezier(.22, .8, .3, 1),
		filter    var(--ck-tl-appear-dur) ease;
	transition-delay: var(--ck-tl-d, 0ms);
}

/* Fondu */
.ck-tl--appear-fade.ck-tl--appear-armed .ck-tl__item { opacity: 0; }

/* Montée */
.ck-tl--appear-up.ck-tl--appear-armed .ck-tl__item { opacity: 0; transform: translateY(28px); }

/* Zoom doux */
.ck-tl--appear-zoom.ck-tl--appear-armed .ck-tl__item { opacity: 0; transform: scale(.92); }

/* Flou */
.ck-tl--appear-blur.ck-tl--appear-armed .ck-tl__item { opacity: 0; filter: blur(10px); }

/* Dévoilement : volet sur la carte seule (le nœud déborde de la
   boîte de l'item en vertical, un clip sur l'item le couperait) ;
   date + nœud suivent en fondu. */
.ck-tl--appear-reveal.ck-tl--appear-armed .ck-tl__card {
	clip-path: inset(0 0 100% 0);
	transition: clip-path var(--ck-tl-appear-dur) cubic-bezier(.22, .8, .3, 1);
	transition-delay: var(--ck-tl-d, 0ms);
}
.ck-tl--appear-reveal.ck-tl--appear-armed .ck-tl__date,
.ck-tl--appear-reveal.ck-tl--appear-armed .ck-tl__dot {
	opacity: 0;
	transition: opacity var(--ck-tl-appear-dur) ease;
	transition-delay: var(--ck-tl-d, 0ms);
}

/* Pop (cartes penchées) — inspiration novelty.fr : les cartes reposent
   inclinées en alterné (±--ck-tl-tilt) et surgissent du bas (montée +
   scale .8 + contre-rotation + fondu) avec un léger rebond, avant de se
   poser sur leur inclinaison. L'inclinaison est portée par la CARTE
   seule (le nœud reste sur l'axe, la date reste droite) et existe même
   sans JS ni animation. */
.ck-tl--appear-pop .ck-tl__item:nth-child(odd)  .ck-tl__card { --ck-tl-rot: var(--ck-tl-tilt); }
.ck-tl--appear-pop .ck-tl__item:nth-child(even) .ck-tl__card { --ck-tl-rot: calc(var(--ck-tl-tilt) * -1); }
.ck-tl--appear-pop .ck-tl__card { transform: rotate(var(--ck-tl-rot)); }

.ck-tl--appear-pop.ck-tl--appear-armed .ck-tl__card {
	opacity: 0;
	transform: translateY(50px) rotate(calc(var(--ck-tl-rot) * -1)) scale(.8);
	transition:
		transform var(--ck-tl-appear-dur) cubic-bezier(.34, 1.4, .5, 1),
		opacity   calc(var(--ck-tl-appear-dur) * .7) ease;
	transition-delay: var(--ck-tl-d, 0ms);
}
.ck-tl--appear-pop.ck-tl--appear-armed .ck-tl__date,
.ck-tl--appear-pop.ck-tl--appear-armed .ck-tl__dot {
	opacity: 0;
	transition: opacity var(--ck-tl-appear-dur) ease;
	transition-delay: var(--ck-tl-d, 0ms);
}

/* État atteint : visible (une seule fois, le JS n'enlève jamais is-in). */
.ck-tl--appear-armed .ck-tl__item.is-in { opacity: 1; transform: none; filter: none; }
.ck-tl--appear-reveal.ck-tl--appear-armed .ck-tl__item.is-in .ck-tl__card { clip-path: inset(0 0 0 0); }
.ck-tl--appear-pop.ck-tl--appear-armed .ck-tl__item.is-in .ck-tl__card {
	opacity: 1;
	transform: rotate(var(--ck-tl-rot));
}
.ck-tl--appear-reveal.ck-tl--appear-armed .ck-tl__item.is-in .ck-tl__date,
.ck-tl--appear-reveal.ck-tl--appear-armed .ck-tl__item.is-in .ck-tl__dot,
.ck-tl--appear-pop.ck-tl--appear-armed .ck-tl__item.is-in .ck-tl__date,
.ck-tl--appear-pop.ck-tl--appear-armed .ck-tl__item.is-in .ck-tl__dot { opacity: 1; }

/* ============================================================
   MODE VERTICAL
   ============================================================ */
.ck-tl--vertical .ck-tl__track {
	display: flex;
	flex-direction: column;
	gap: var(--ck-tl-gap);
	position: relative;
	padding-left: 40px;
}
.ck-tl--vertical .ck-tl__track::before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: calc(var(--ck-tl-dot-size) / 2);
	width: var(--ck-tl-line-w);
	background: var(--ck-tl-line);
	transform: translateX(-50%);
}
.ck-tl--vertical .ck-tl__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}
.ck-tl--vertical .ck-tl__dot {
	position: absolute;
	left: -40px;
	top: 4px;
}
.ck-tl--vertical .ck-tl__dot::after { display: none; }
.ck-tl--vertical .ck-tl__date { margin-bottom: 14px; }
.ck-tl--vertical .ck-tl__card { max-width: 640px; }
/* Vertical (y compris forcé par « Désactiver le défilement horizontal ») :
   pas de barre de progression, sticky neutre. */
.ck-tl--vertical .ck-tl__progress { display: none; }
.ck-tl--vertical .ck-tl__sticky {
	position: static;
	height: auto;
	overflow: visible;
	width: auto !important;
	max-width: none !important;
	margin-left: 0 !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Replis responsive du nombre de cartes visibles (surchargés par le contrôle
   Elementor « Cartes visibles » dès qu'il est réglé — defaults 3/2/1). */
@media (max-width: 1024px) {
	.ck-tl--horizontal { --ck-tl-visible: 2; }
}
@media (max-width: 600px) {
	.ck-tl--horizontal { --ck-tl-visible: 1; --ck-tl-gap: 24px; }
}

/* ============================================================
   ÉDITEUR ELEMENTOR — jamais de figé dans l'aperçu éditeur
   ============================================================ */
.elementor-editor-active .ck-tl--horizontal .ck-tl__sticky {
	position: relative;
	height: auto;
	overflow: visible;
}