/* =========================================================
   Frise Chronologique (widget Elementor)
   ========================================================= */

/* NB : aucune valeur par défaut n'est déclarée ici pour --tlw-h,
   --tlw-stack-gap, --tlw-line-color, --tlw-line-width, --tlw-line-style,
   --tlw-connector-w. Elementor les définit sur l'élément wrapper du widget
   ({{WRAPPER}}, un ancêtre de .tlw-timeline) ; les déclarer aussi ici, sur
   .tlw-timeline lui-même, empêcherait l'héritage de cette valeur (une
   déclaration directe sur un élément prime toujours sur une valeur héritée
   d'un ancêtre, quelle que soit la spécificité) et figerait les réglages
   Elementor sans effet. Les valeurs par défaut sont donc fournies uniquement
   en 2e argument de var(...) à chaque utilisation ci-dessous. */
.tlw-timeline {
	position: relative;
	width: 100%;
}

.tlw-swiper {
	width: 100%;
	overflow: hidden;
}

.tlw-swiper-wrapper {
	align-items: stretch;
}

/* --- Slide / groupe ---
   La largeur de chaque slide est calculée par Swiper lui-même
   (place disponible / nombre de groupes visibles, réglé dans l'onglet
   Contenu) : on ne fixe donc aucune largeur ici, Swiper pose sa propre
   largeur en ligne sur .tlw-slide. À l'intérieur, le connecteur garde une
   largeur fixe (--tlw-connector-w) et la cellule occupe tout le reste de
   la place disponible (flex: 1). Aucun espace entre slides (spaceBetween
   à 0, réglé en PHP) : le trait de jonction reste toujours collé aux
   cellules. */

.tlw-slide {
	display: flex;
	align-items: stretch;
}

.tlw-group {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	height: var(--tlw-h, 300px);
}

.tlw-cells {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--tlw-stack-gap, 24px);
}

/* Une cellule seule doit garder la même hauteur qu'une cellule au sein
   d'une paire empilée (H - gap) / 2, et rester centrée verticalement dans
   la hauteur totale du groupe — plutôt que de s'étirer sur toute la
   hauteur disponible. */
.tlw-cells--single {
	justify-content: center;
}

/* --- Cellule ---
   Dans une paire empilée, flex:1 répartit la hauteur du groupe
   équitablement entre les 2 cellules. Seule, la cellule garde exactement
   la même hauteur calculée qu'une cellule de paire, sans s'étirer. */

.tlw-cell {
	position: relative;
	width: 100%;
	min-height: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: #0B4A42;
	border-radius: 16px;
	padding: 20px 24px;
	overflow: hidden;
	transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* Icône à gauche, titre + texte empilés à droite, l'ensemble centré
   verticalement l'un par rapport à l'autre. */
.tlw-cell-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	flex: 1 1 auto;
}

.tlw-cells--double .tlw-cell {
	flex: 1 1 0%;
}

.tlw-cells--single .tlw-cell {
	flex: 0 0 auto;
	height: calc((var(--tlw-h, 300px) - var(--tlw-stack-gap, 24px)) / 2);
}

.tlw-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.15);
	color: #0B4A42;
	margin-right: 16px;
	flex-shrink: 0;
}

.tlw-icon svg,
.tlw-icon i {
	width: 24px;
	height: 24px;
	font-size: 24px;
	line-height: 1;
}

.tlw-title {
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 8px;
	line-height: 1.3;
	overflow-wrap: break-word;
	word-break: break-word;
}

.tlw-text {
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* --- Connecteur / trait de jonction ---
   Le connecteur occupe l'espace ENTRE ce groupe et le suivant, toujours
   collé aux deux (pas d'espace entre groupes). Sa hauteur suit celle,
   fixe, du groupe (--tlw-h). Les positions verticales sont exprimées en %
   de cette hauteur, avec --tlw-stack-gap comme seul ajustement en valeur
   absolue : sur une hauteur totale H, chaque cellule empilée occupe
   (H - gap) / 2, donc son centre est à (H - gap) / 4 (haut) ou
   H - (H - gap) / 4 (bas). */

.tlw-connector {
	position: relative;
	width: var(--tlw-connector-w, 64px);
	flex: 0 0 var(--tlw-connector-w, 64px);
	height: var(--tlw-h, 300px);
	/* Le connecteur est collé (sans espace) à la cellule du groupe suivant ;
	   un z-index le fait toujours peindre AU-DESSUS de cette cellule, pour
	   qu'un léger chevauchement d'arrondi de pixel (dû à l'arrondi de la
	   largeur de slide calculée par Swiper) ne "morde" jamais visuellement
	   sur le trait. */
	z-index: 1;
	/* Position (en %) de la barre verticale de jonction entre les traits
	   entrants (côté cellules) et le trait sortant (côté groupe suivant). */
	--tlw-bracket-x: 50%;
	--tlw-cell-center-top: calc((100% - var(--tlw-stack-gap, 24px)) / 4);
}

/* Les segments d'un connecteur sont calculés en PHP (render_connector_segments)
   en fonction du nombre de cellules du groupe courant ET du groupe suivant,
   puis rendus ici avec un simple "top" (et éventuellement "height") en ligne :
   - .tlw-connector__seg--full  : trait droit sur toute la largeur (les 2
     côtés se rejoignent à la même hauteur, aucun coude nécessaire).
   - .tlw-connector__seg--left  : trait partant de la cellule (ou du centre
     du groupe) côté gauche jusqu'à la barre verticale.
   - .tlw-connector__seg--right : trait partant de la barre verticale
     jusqu'à la cellule (ou au centre du groupe) côté droit.
   - .tlw-connector__seg--vert  : barre verticale reliant les différentes
     hauteurs utilisées d'un côté ou de l'autre (jonction en coude ou en
     équerre à 1, 2, 3 ou 4 points selon les cas).
   Les traits sont dessinés avec une bordure (et non un fond) afin de
   profiter nativement des styles continu / tirets / pointillés de
   border-style. */

.tlw-connector__seg {
	position: absolute;
}

.tlw-connector__seg--full,
.tlw-connector__seg--left,
.tlw-connector__seg--right {
	height: 0;
	border-top: var(--tlw-line-width, 3px) var(--tlw-line-style, solid) var(--tlw-line-color, #D9A441);
	/* Un "border-top" sur une boîte de hauteur 0 est toujours dessiné SOUS
	   la coordonnée "top" (la boîte va de top à top + épaisseur du trait),
	   jamais centré dessus. La barre verticale (.tlw-connector__seg--vert),
	   elle, va exactement de Ytop à Ybot (bord à bord, sans dépassement).
	   Sans centrage : à l'angle du BAS, le trait horizontal ne recouvre que
	   la zone SOUS Ybot, en dehors de la barre verticale — d'où l'espace
	   blanc sur l'angle bas.
	   Le centrage se fait ici via calc() directement sur "top" (à partir
	   d'une position logique posée en PHP dans la variable --tlw-seg-y),
	   PAS via "transform: translate()". Un transform crée son propre calque
	   de composition, dont les bords peuvent être arrondis au pixel de façon
	   légèrement différente des éléments voisins positionnés normalement
	   (d'où un fin décalage résiduel observé après un premier essai avec
	   transform) : calc() reste dans le calcul de mise en page standard, au
	   même titre que le top/bottom de la barre verticale, pour un alignement
	   pixel-perfect garanti. */
	top: calc(var(--tlw-seg-y) - (var(--tlw-line-width, 3px) / 2));
}

.tlw-connector__seg--full {
	left: 0;
	right: 0;
}

.tlw-connector__seg--left {
	/* "width" plutôt que "right: calc(100% - var(--tlw-bracket-x))" :
	   les 2 expressions sont mathématiquement égales, mais le navigateur les
	   résout par 2 chemins de calcul distincts (une soustraction vs une
	   valeur directe), qui peuvent arrondir au pixel physique différemment
	   l'un de l'autre. Cette bordure droite doit se raccorder exactement à
	   la barre verticale (.tlw-connector__seg--vert, positionnée avec le
	   même "var(--tlw-bracket-x)" brut, sans arithmétique) : utiliser ici
	   aussi la valeur brute (comme largeur, pas comme soustraction) élimine
	   tout risque de décalage d'1px entre les deux — même famille de bug que
	   le "top"+"height" de la barre verticale (voir plus bas), cette fois
	   sur l'axe horizontal. */
	left: 0;
	width: var(--tlw-bracket-x);
}

.tlw-connector__seg--right {
	left: var(--tlw-bracket-x);
	right: 0;
}

.tlw-connector__seg--vert {
	/* Volontairement PAS de centrage ici (ni calc(), ni transform) : cette
	   barre grandit uniquement vers la DROITE de --tlw-bracket-x (comportement
	   par défaut d'un "border-left" sur une boîte de largeur 0). C'est
	   voulu : .tlw-connector__seg--right démarre pile à var(--tlw-bracket-x)
	   (aucune arithmétique), donc la barre verticale le recouvre entièrement
	   sur toute son épaisseur, sans risque d'écart d'arrondi. Côté gauche,
	   .tlw-connector__seg--left se termine aussi pile à var(--tlw-bracket-x)
	   (même valeur brute, voir "width" ci-dessus) : les deux bords se
	   touchent exactement, sans jamais passer par 2 expressions calc()
	   différentes qui pourraient arrondir chacune à un pixel différent.
	   Un essai précédent avait ajouté un centrage (calc() PUIS, par erreur,
	   un transform: translateX(-50%) en plus, jamais retiré) : la boîte se
	   retrouvait décalée d'une pleine épaisseur de trait vers la gauche,
	   ouvrant un vrai espace blanc avec .tlw-connector__seg--right — c'est
	   le bug signalé par l'utilisateur ("petit décalage sur la jonction du
	   bas"), confirmé pixel par pixel sur sa capture d'écran. NE PAS
	   réintroduire de centrage sur cet axe : ce n'est ni nécessaire, ni sûr. */
	left: var(--tlw-bracket-x);
	width: 0;
	border-left: var(--tlw-line-width, 3px) var(--tlw-line-style, solid) var(--tlw-line-color, #D9A441);
}

/* --- Contrôles : flèches + puces --- */

.tlw-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 28px;
}

.tlw-nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: #fff;
	color: #0B4A42;
	/* Pas de "border: none;" ici volontairement : la valeur initiale de
	   border-style est déjà "none" (donc invisible tant qu'aucune bordure
	   n'est définie), et une déclaration explicite forcerait un ordre de
	   cascade fragile face au contrôle de style "Bordure" (Group_Control_Border)
	   ajouté sur .tlw-nav-btn — même principe que pour les variables CSS
	   {{WRAPPER}} documentées plus haut : ne jamais imposer de valeur par
	   défaut ici quand un contrôle Elementor est censé la piloter. */
	cursor: pointer;
	padding: 0;
	line-height: 1;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	/* L'ombre par défaut est appliquée par le contrôle de style "Ombre"
	   (flèches, onglet Normal / Survol) dans l'éditeur Elementor. */
}

.tlw-nav-btn:hover {
	background-color: #D9A441;
	color: #fff;
}

.tlw-nav-btn:active {
	transform: scale(0.94);
}

.tlw-nav-btn svg {
	width: 16px;
	height: 16px;
	display: block;
}

.tlw-nav-btn i {
	font-size: 16px;
	display: block;
}

.tlw-pagination.swiper-pagination {
	position: static;
	display: inline-flex;
	align-items: center;
	width: auto;
}

.tlw-bullet {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin: 0 6px;
	border-radius: 50%;
	background-color: rgba(11, 74, 66, 0.25);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.tlw-bullet.tlw-bullet-active {
	background-color: #D9A441;
	transform: scale(1.15);
}

/* --- Responsive : en dessous de 480px, empile légèrement le padding --- */
@media (max-width: 480px) {
	.tlw-cell {
		padding: 16px 18px;
	}
}