/* ==========================================================================
   Timeline histoire — [timeline_histoire]
   Emplacement : wp-content/themes/hestia-child/assets/css/timeline-histoire.css

   Desktop : dates à gauche de la ligne, blocs à droite.
             La date + la pastille restent fixées (sticky) pendant le scroll
             jusqu'à l'arrivée de la date suivante.
   Mobile  : ligne à gauche, date au-dessus des blocs (sans sticky).
   ========================================================================== */

.timeline-histoire {
	/* Réglages généraux */
	--th-accent: #D1013C;        /* rouge : dates, pastilles, mots en gras */
	--th-line: #f3b5c6;          /* ligne verticale (rose clair) */
	--th-line-width: 3px;
	--th-dot-size: 18px;         /* pastille pleine (hors anneau) */
	--th-bg: #fff;               /* fond de la page (anneau autour des pastilles) */
	--th-title: #1F204F;
	--th-text: #1F204F;
	--th-font-title: Montserrat, sans-serif; /* police des titres du site */
	--th-date-col: 100px;        /* largeur de la colonne des dates ("2024-2026" ≈ 92px) */
	--th-gap: 60px;              /* espace date <-> blocs (la ligne est au milieu) */
	--th-spacing: 14px;          /* espace entre deux années */
	--th-card-gap: 14px;         /* espace entre deux blocs d'une même année */
	--th-date-offset: 20px;      /* décalage vertical de la date / pastille dans le bloc */
	--th-sticky-top: 190px;      /* entête fixe réduite au scroll (171px) + marge */

	/* Couleur de chaque thématique (fond dégradé, bordure, puce du surtitre) */
	--th-mission: #eb6e24;
	--th-suivi: #f8b40a;
	--th-evolution: #760b3f;
	--th-default: #9aa0b4;

	/* Intensité du fond dégradé : gauche -> droite */
	--th-card-tint-start: 14%;
	--th-card-tint-end: 5%;

	position: relative;
	list-style: none;
	max-width: 1000px;
	margin: 50px auto;
	padding: 0;
	color: var(--th-text);
}

/* Hestia : .wrapper est en overflow:hidden, ce qui bloque position:sticky.
   overflow:clip donne le même rendu sans casser le sticky.
   (Ce fichier n'est chargé que sur les pages contenant la timeline.) */
.wrapper,
.wrapper.default {
	overflow: clip;
}

/* Ligne verticale, entre la colonne des dates et les blocs */
.timeline-histoire::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--th-date-col) + var(--th-gap) / 2 - var(--th-line-width) / 2);
	width: var(--th-line-width);
	border-radius: var(--th-line-width);
	background: var(--th-line);
}

/* Une année = une ligne de grille : [date] [blocs] */
.timeline-histoire__item {
	position: relative;
	display: grid;
	grid-template-columns: var(--th-date-col) minmax(0, 1fr);
	column-gap: var(--th-gap);
	margin: 0;
	padding: 0 0 var(--th-spacing); /* padding (et non margin) : la date reste fixe jusqu'à la suivante */
}

.timeline-histoire__item:last-child {
	padding-bottom: 0;
}

/* Date : à gauche, collante pendant le scroll de son groupe */
.timeline-histoire__date {
	grid-column: 1;
	align-self: start;
	position: sticky;
	top: var(--th-sticky-top);
	z-index: 2;
	margin: var(--th-date-offset) 0 0;
	min-height: var(--th-dot-size);
	font-family: var(--th-font-title);
	font-size: 17px;
	font-weight: 700;
	line-height: var(--th-dot-size);
	text-align: left;
	white-space: nowrap;
	color: var(--th-accent);
}

/* Pastille : rond plein + anneau blanc + cercle rouge fin */
.timeline-histoire__date::after {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(var(--th-date-col) + var(--th-gap) / 2 - var(--th-dot-size) / 2);
	width: var(--th-dot-size);
	height: var(--th-dot-size);
	border-radius: 50%;
	background: var(--th-accent);
	box-shadow:
		0 0 0 3px var(--th-bg),
		0 0 0 4.5px var(--th-accent),
		0 0 0 8px var(--th-bg); /* coupe la ligne autour de la pastille */
	transform: translateY(-50%);
}

/* Colonne des blocs */
.timeline-histoire__cards {
	grid-column: 2;
	min-width: 0;
}

/* Thématiques */
.timeline-histoire__card--mission   { --th-card-color: var(--th-mission); }
.timeline-histoire__card--suivi     { --th-card-color: var(--th-suivi); }
.timeline-histoire__card--evolution { --th-card-color: var(--th-evolution); }
.timeline-histoire__card--default   { --th-card-color: var(--th-default); }

/* Bloc : fond dégradé léger + bordure teintée */
.timeline-histoire__card {
	--th-c: var(--th-card-color, var(--th-default));
	padding: 20px 22px 22px;
	border-radius: 8px;
	border: 1px solid color-mix(in srgb, var(--th-c) 22%, transparent);
	background: #f8f8fa; /* repli navigateurs anciens */
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--th-c) var(--th-card-tint-start), #fff),
		color-mix(in srgb, var(--th-c) var(--th-card-tint-end), #fff)
	);
	color: var(--th-text);
}

/* Plusieurs blocs pour une même année : empilés */
.timeline-histoire__card + .timeline-histoire__card {
	margin-top: var(--th-card-gap);
}

/* Surtitre : pastille blanche, puce de couleur, majuscules */
.timeline-histoire .timeline-histoire__surtitre {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--th-title);
}

.timeline-histoire__surtitre span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 12px 4px 10px;
	border-radius: 999px;
	background-color: #fff;
}

.timeline-histoire__surtitre span::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--th-c);
}

/* Spécificité renforcée pour passer devant les styles h3 / p / a de Hestia */
.timeline-histoire .timeline-histoire__titre {
	margin: 0 0 12px;
	font-family: var(--th-font-title);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--th-title);
}

.timeline-histoire .timeline-histoire__contenu,
.timeline-histoire .timeline-histoire__contenu p,
.timeline-histoire .timeline-histoire__contenu li {
	font-size: 14px;
	line-height: 1.6;
	color: var(--th-text);
}

/* Mots mis en gras dans l'éditeur : en rouge */
.timeline-histoire .timeline-histoire__contenu strong,
.timeline-histoire .timeline-histoire__contenu b {
	font-weight: 700;
	color: var(--th-accent);
}

.timeline-histoire .timeline-histoire__contenu a {
	color: var(--th-accent);
	text-decoration: underline;
}

.timeline-histoire__contenu > *:first-child { margin-top: 0; }
.timeline-histoire__contenu > *:last-child  { margin-bottom: 0; }

/* Barre d'admin WordPress (connecté) : décale le sticky */
.admin-bar .timeline-histoire {
	--th-sticky-top: 222px;
}

/* --------------------------------------------------------------------------
   Mobile : ligne à gauche, date au-dessus des blocs, sans sticky
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.timeline-histoire {
		--th-gap: 36px;
		--th-dot-size: 14px;
		padding-left: var(--th-gap);
	}

	.timeline-histoire::before {
		left: calc(var(--th-dot-size) / 2 - var(--th-line-width) / 2);
	}

	.timeline-histoire__item {
		display: block;
		padding-bottom: 28px;
	}

	.timeline-histoire__date {
		position: relative;
		top: auto;
		margin: 0 0 10px;
	}

	.timeline-histoire__date::after {
		left: calc(-1 * var(--th-gap));
	}

	.timeline-histoire__card {
		padding: 18px;
	}

	.timeline-histoire .timeline-histoire__titre {
		font-size: 18px;
	}
}