/* ==========================================================================
   Macteck Timeline — style.css (alpha30-foundation)
   Conforme à la charte Macteck Divi Suite v1.0 :
   - Presets = visuels uniquement (couleurs, fonds, bordures, ombres, rayons)
   - Layouts = structurels uniquement (grille, position, flex)
   - stepCardsEnabled active les cartes indépendamment du preset
   - Glass Steps = preset visuel pur, sans override de grille
   ========================================================================== */

/* ── 1. Variables et tokens par défaut ─────────────────────────────── */
.mds-d5-timeline {
	/* Espacement */
	--mds-tl-padding-x:     32px;
	--mds-tl-padding-y:     40px;
	--mds-tl-radius:        16px;
	--mds-tl-item-gap:      32px;

	/* Marqueur */
	--mds-tl-marker-size:       44px;
	--mds-tl-marker-icon-size:  18px;
	--mds-tl-marker-num-size:   16px;
	--mds-tl-marker-gap:        20px;
	--mds-tl-marker-bw:         0px;
	--mds-tl-marker-border-color: transparent;
	--mds-tl-marker-text:       #ffffff;

	/* Ligne */
	--mds-tl-line-width:    2px;
	--mds-tl-line-style:    solid;
	--mds-tl-line-opacity:  1;

	/* Carte */
	--mds-tl-card-radius:       12px;
	--mds-tl-card-padding-x:    20px;
	--mds-tl-card-padding-y:    16px;
	--mds-tl-card-border-width: 1px;
	--mds-tl-card-border-color: rgba(0,0,0,0.08);
	--mds-tl-card-bg:           #ffffff;
	--mds-tl-card-hover-bg:     #f8fafc;

	/* Padding items quand les cartes sont activées — utilisé par la ligne */
	--mds-tl-item-pad-l:    0px;
	--mds-tl-item-pad-t:    0px;

	/* Typographie */
	--mds-tl-tl-title-size:   28px;
	--mds-tl-intro-size:      16px;
	--mds-tl-step-title-size: 18px;
	--mds-tl-step-desc-size:  15px;
	--mds-tl-step-weight:     600;
	--mds-tl-step-lh:         1.6;
	--mds-tl-step-text-gap:   6px;

	/* Couleurs */
	--mds-tl-bg:          #ffffff;
	--mds-tl-title-color: #0f172a;
	--mds-tl-body-color:  #475569;
	--mds-tl-point:       #0ea5e9;
	--mds-tl-line:        #e2e8f0;
	--mds-tl-accent:      #0ea5e9;

	/* Hover couleurs — valeur initiale transparente (override via PHP/JS) */
	--mds-tl-title-hover:  transparent;
	--mds-tl-desc-hover:   transparent;
	--mds-tl-marker-hover: transparent;

	/* Responsive */
	--mds-tl-mobile-pad-x:  16px;
	--mds-tl-mobile-pad-y:  24px;
	--mds-tl-mobile-marker: 36px;
	--mds-tl-mobile-title:  16px;
	--mds-tl-mobile-desc:   14px;
	--mds-tl-mobile-gap:    20px;

	box-sizing: border-box;
}

/* ── 2. Wrapper — neutre par défaut (styleTarget = element) ──────── */
.mds-d5-timeline {
	position:   relative;
	width:      100%;
	max-width:  100%;
}
.mds-d5-timeline--style-target-element {
	background:  transparent !important;
	box-shadow:  none !important;
	border:      none !important;
}
.mds-d5-timeline--style-target-container .mds-d5-timeline__inner,
.mds-d5-timeline--style-target-both      .mds-d5-timeline__inner {}

/* ── 3. Inner principal ──────────────────────────────────────────── */
.mds-d5-timeline__inner {
	background:    var(--mds-tl-bg);
	border-radius: var(--mds-tl-radius);
	padding:       var(--mds-tl-padding-y) var(--mds-tl-padding-x);
	box-sizing:    border-box;
	width:         100%;
}

/* ── 4. Header ───────────────────────────────────────────────────── */
.mds-d5-timeline__header {
	margin-bottom: calc(var(--mds-tl-item-gap) * 1.25);
}
.mds-d5-timeline__title {
	font-size:   var(--mds-tl-tl-title-size);
	font-weight: 700;
	color:       var(--mds-tl-title-color);
	margin:      0 0 0.5em;
	line-height: 1.2;
}
.mds-d5-timeline__intro {
	font-size:   var(--mds-tl-intro-size);
	color:       var(--mds-tl-body-color);
	margin:      0;
	line-height: 1.6;
}

/* ── 5. Liste d'étapes ───────────────────────────────────────────── */
.mds-d5-timeline__items {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        var(--mds-tl-item-gap);
}

/* ── 6. Item — structure universelle ─────────────────────────────── */
/*
 * La grille de chaque item est TOUJOURS :
 *   [marqueur] [contenu]
 * Le marqueur est fixe, le contenu prend le reste.
 * La ligne ::after est positionnée relativement au bord gauche de l'item.
 * RÈGLE CHARTE : aucun preset ne modifie cette grille.
 */
.mds-d5-timeline__item {
	position:     relative;
	display:      grid;
	grid-template-columns: var(--mds-tl-marker-size) 1fr;
	gap:          var(--mds-tl-marker-gap);
	align-items:  start;
	min-width:    0;
	box-sizing:   border-box;
}

/* ── 7. Marqueur ─────────────────────────────────────────────────── */
.mds-d5-timeline__marker {
	width:           var(--mds-tl-marker-size);
	height:          var(--mds-tl-marker-size);
	border-radius:   50%;
	background:      var(--mds-tl-point);
	color:           var(--mds-tl-marker-text);
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	position:        relative;
	z-index:         2;
	border:          var(--mds-tl-marker-bw) solid var(--mds-tl-marker-border-color);
	transition:      background 0.2s ease, box-shadow 0.2s ease;
	box-sizing:      border-box;
}
.mds-d5-timeline__number {
	font-size:   var(--mds-tl-marker-num-size);
	font-weight: 700;
	line-height: 1;
}
.mds-d5-timeline__icon {
	display:     flex;
	align-items: center;
	justify-content: center;
	font-size:   var(--mds-tl-marker-icon-size);
	line-height: 1;
}
.mds-d5-timeline__icon svg {
	width:  var(--mds-tl-marker-icon-size);
	height: var(--mds-tl-marker-icon-size);
}

/* Formes marqueur */
.mds-d5-timeline--marker-square .mds-d5-timeline__marker         { border-radius: 4px; }
.mds-d5-timeline--marker-rounded .mds-d5-timeline__marker        { border-radius: 12px; }
.mds-d5-timeline--marker-diamond .mds-d5-timeline__marker        { border-radius: 4px; transform: rotate(45deg); }
.mds-d5-timeline--marker-diamond .mds-d5-timeline__marker-inner  { display: flex; align-items: center; justify-content: center; transform: rotate(-45deg); }
.mds-d5-timeline--marker-hexagon .mds-d5-timeline__marker        { border-radius: 0; clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); }
.mds-d5-timeline--marker-hexagon .mds-d5-timeline__marker-inner  { display: flex; align-items: center; justify-content: center; }
.mds-d5-timeline--marker-star .mds-d5-timeline__marker           { border-radius: 0; clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.mds-d5-timeline--marker-star .mds-d5-timeline__marker-inner     { display: flex; align-items: center; justify-content: center; }

/* Ombres marqueur */
.mds-d5-timeline--marker-shadow-sm .mds-d5-timeline__marker  { box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.mds-d5-timeline--marker-shadow-md .mds-d5-timeline__marker  { box-shadow: 0 4px 12px rgba(0,0,0,0.16); }
.mds-d5-timeline--marker-shadow-lg .mds-d5-timeline__marker  { box-shadow: 0 8px 24px rgba(0,0,0,0.20); }
.mds-d5-timeline--marker-shadow-glow .mds-d5-timeline__marker { box-shadow: 0 0 16px var(--mds-tl-point); }

/* ── 8. Ligne de connexion ────────────────────────────────────────── */
/*
 * La ligne est un ::after sur chaque item sauf le dernier.
 * Elle est positionnée en partant du bas du marqueur.
 * left = item-pad-l + marker-size/2 - line-width/2
 * RÈGLE CHARTE : aucun preset ne repositionne la ligne.
 */
.mds-d5-timeline--layout-vertical .mds-d5-timeline__item:not(:last-child)::after,
.mds-d5-timeline--layout-compact  .mds-d5-timeline__item:not(:last-child)::after,
.mds-d5-timeline--layout-process  .mds-d5-timeline__item:not(:last-child)::after {
	content:      '';
	position:     absolute;
	left:         calc(var(--mds-tl-item-pad-l) + var(--mds-tl-marker-size) / 2 - var(--mds-tl-line-width) / 2);
	top:          calc(var(--mds-tl-item-pad-t) + var(--mds-tl-marker-size));
	width:        var(--mds-tl-line-width);
	bottom:       calc(-1 * var(--mds-tl-item-gap));
	background:   transparent;
	border-left:  var(--mds-tl-line-width) var(--mds-tl-line-style) var(--mds-tl-line);
	opacity:      var(--mds-tl-line-opacity);
	z-index:      1;
}
.mds-d5-timeline--no-line .mds-d5-timeline__item::after { display: none !important; }

/* ── 9. Contenu typographique ─────────────────────────────────────── */
.mds-d5-timeline__content {
	display:        flex;
	flex-direction: column;
	gap:            var(--mds-tl-step-text-gap);
	min-width:      0;
	padding-top:    calc((var(--mds-tl-marker-size) - var(--mds-tl-step-title-size) * 1.2) / 2);
}
.mds-d5-timeline__item-title {
	font-size:   var(--mds-tl-step-title-size);
	font-weight: var(--mds-tl-step-weight);
	color:       var(--mds-tl-title-color);
	margin:      0;
	line-height: 1.3;
	transition:  color 0.2s ease;
}
.mds-d5-timeline__item-text {
	font-size:   var(--mds-tl-step-desc-size);
	color:       var(--mds-tl-body-color);
	margin:      0;
	line-height: var(--mds-tl-step-lh);
	transition:  color 0.2s ease;
}

/* ── 10. Cartes d'étapes ─────────────────────────────────────────────
 * Activées par :
 *   .mds-d5-timeline--cards-enabled  (option stepCardsEnabled=on)
 *   OU .mds-d5-timeline--layout-cards (layout = cartes)
 *
 * PRINCIPE : on ajoute les variables de padding item pour que la ligne
 * reste alignée avec le marqueur même avec du padding sur l'item.
 * ─────────────────────────────────────────────────────────────────── */
.mds-d5-timeline--cards-enabled .mds-d5-timeline__item,
.mds-d5-timeline--layout-cards  .mds-d5-timeline__item {
	--mds-tl-item-pad-l:  var(--mds-tl-card-padding-x);
	--mds-tl-item-pad-t:  var(--mds-tl-card-padding-y);
	padding:              var(--mds-tl-card-padding-y) var(--mds-tl-card-padding-x);
	background:           var(--mds-tl-card-bg);
	border-radius:        var(--mds-tl-card-radius);
	border:               var(--mds-tl-card-border-width) solid var(--mds-tl-card-border-color);
}
.mds-d5-timeline--card-shadow-sm.mds-d5-timeline--cards-enabled .mds-d5-timeline__item,
.mds-d5-timeline--card-shadow-sm.mds-d5-timeline--layout-cards  .mds-d5-timeline__item { box-shadow: 0 2px  8px rgba(0,0,0,0.08); }
.mds-d5-timeline--card-shadow-md.mds-d5-timeline--cards-enabled .mds-d5-timeline__item,
.mds-d5-timeline--card-shadow-md.mds-d5-timeline--layout-cards  .mds-d5-timeline__item { box-shadow: 0 6px 20px rgba(0,0,0,0.10); }
.mds-d5-timeline--card-shadow-lg.mds-d5-timeline--cards-enabled .mds-d5-timeline__item,
.mds-d5-timeline--card-shadow-lg.mds-d5-timeline--layout-cards  .mds-d5-timeline__item { box-shadow: 0 12px 36px rgba(0,0,0,0.13); }

/* ── 11. Ombre globale du module ─────────────────────────────────── */
.mds-d5-timeline--shadow-sm .mds-d5-timeline__inner { box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.mds-d5-timeline--shadow-md .mds-d5-timeline__inner { box-shadow: 0 8px 24px rgba(0,0,0,0.10); }
.mds-d5-timeline--shadow-lg .mds-d5-timeline__inner { box-shadow: 0 16px 48px rgba(0,0,0,0.13); }
.mds-d5-timeline--shadow-xl .mds-d5-timeline__inner { box-shadow: 0 24px 64px rgba(0,0,0,0.16); }

/* ── 12. Alignements ─────────────────────────────────────────────── */
.mds-d5-timeline--align-center .mds-d5-timeline__header { text-align: center; }
.mds-d5-timeline--align-right  .mds-d5-timeline__header { text-align: right; }

/* ── 13. Layouts ─────────────────────────────────────────────────── */

/* --- Vertical (défaut) --- */
.mds-d5-timeline--layout-vertical .mds-d5-timeline__items { flex-direction: column; }

/* --- Horizontal --- */
.mds-d5-timeline--layout-horizontal .mds-d5-timeline__items {
	flex-direction: row;
	overflow-x:     auto;
	align-items:    flex-start;
	gap:            var(--mds-tl-item-gap);
	padding-bottom: 8px;
}
.mds-d5-timeline--layout-horizontal .mds-d5-timeline__item {
	grid-template-columns: 1fr;
	grid-template-rows:    var(--mds-tl-marker-size) 1fr;
	min-width:             160px;
	max-width:             240px;
	align-items:           start;
	justify-items:         center;
	text-align:            center;
}
.mds-d5-timeline--layout-horizontal .mds-d5-timeline__content {
	padding-top: 12px;
	text-align:  center;
}
.mds-d5-timeline--layout-horizontal .mds-d5-timeline__item:not(:last-child)::after {
	content:    '';
	position:   absolute;
	top:        calc(var(--mds-tl-marker-size) / 2 - var(--mds-tl-line-width) / 2);
	left:       calc(50% + var(--mds-tl-marker-size) / 2);
	right:      calc(-1 * var(--mds-tl-item-gap));
	height:     var(--mds-tl-line-width);
	width:      auto;
	bottom:     auto;
	border-left: none;
	border-top: var(--mds-tl-line-width) var(--mds-tl-line-style) var(--mds-tl-line);
	opacity:    var(--mds-tl-line-opacity);
}

/* --- Cards (layout) --- */
.mds-d5-timeline--layout-cards .mds-d5-timeline__items {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap:                   var(--mds-tl-item-gap);
}
.mds-d5-timeline--layout-cards .mds-d5-timeline__item::after { display: none; }

/* --- Compact --- */
.mds-d5-timeline--layout-compact {
	--mds-tl-item-gap:  16px;
}
.mds-d5-timeline--layout-compact .mds-d5-timeline__marker {
	width:  calc(var(--mds-tl-marker-size) * 0.75);
	height: calc(var(--mds-tl-marker-size) * 0.75);
}

/* --- Process --- */
.mds-d5-timeline--layout-process .mds-d5-timeline__items { flex-direction: column; }
.mds-d5-timeline--layout-process .mds-d5-timeline__item  { gap: calc(var(--mds-tl-marker-gap) * 1.5); }

/* ── 14. Masquage --- */
.mds-d5-timeline--no-marker .mds-d5-timeline__marker { display: none; }
.mds-d5-timeline--no-marker .mds-d5-timeline__item   { grid-template-columns: 1fr; }
.mds-d5-timeline--no-marker .mds-d5-timeline__item::after { display: none; }

/* ── 15. Hover items ─────────────────────────────────────────────── */
/* -- lift -- */
.mds-d5-timeline--item-hover-lift.mds-d5-timeline--intensity-low    .mds-d5-timeline__item:hover { transform: translateY(-2px); }
.mds-d5-timeline--item-hover-lift.mds-d5-timeline--intensity-medium  .mds-d5-timeline__item:hover { transform: translateY(-4px); }
.mds-d5-timeline--item-hover-lift.mds-d5-timeline--intensity-high    .mds-d5-timeline__item:hover { transform: translateY(-6px); }
.mds-d5-timeline--item-hover-lift.mds-d5-timeline--intensity-max     .mds-d5-timeline__item:hover { transform: translateY(-10px); }
/* -- glow -- */
.mds-d5-timeline--item-hover-glow .mds-d5-timeline__item:hover { box-shadow: 0 0 24px rgba(14,165,233,0.25); }
/* -- scale -- */
.mds-d5-timeline--item-hover-scale.mds-d5-timeline--intensity-low    .mds-d5-timeline__item:hover { transform: scale(1.01); }
.mds-d5-timeline--item-hover-scale.mds-d5-timeline--intensity-medium  .mds-d5-timeline__item:hover { transform: scale(1.02); }
.mds-d5-timeline--item-hover-scale.mds-d5-timeline--intensity-high    .mds-d5-timeline__item:hover { transform: scale(1.03); }
.mds-d5-timeline--item-hover-scale.mds-d5-timeline--intensity-max     .mds-d5-timeline__item:hover { transform: scale(1.05); }
/* -- border-accent -- */
.mds-d5-timeline--item-hover-border-accent .mds-d5-timeline__item {
	border-left: 3px solid transparent;
	transition:  border-color 0.2s ease;
}
.mds-d5-timeline--item-hover-border-accent .mds-d5-timeline__item:hover {
	border-left-color: var(--mds-tl-accent);
}

/* -- Hover couleurs texte -- */
/* N'applique la couleur hover que si une vraie valeur a été définie via PHP/JS inline style */
.mds-d5-timeline--has-title-hover .mds-d5-timeline__item:hover .mds-d5-timeline__item-title {
	color: var(--mds-tl-title-hover);
}
.mds-d5-timeline--has-desc-hover .mds-d5-timeline__item:hover .mds-d5-timeline__item-text {
	color: var(--mds-tl-desc-hover);
}

/* ── 16. Hover marqueur ──────────────────────────────────────────── */
.mds-d5-timeline--has-marker-hover .mds-d5-timeline__item:hover .mds-d5-timeline__marker {
	background: var(--mds-tl-marker-hover);
}
/* -- glow -- */
.mds-d5-timeline--marker-hover-glow .mds-d5-timeline__item:hover .mds-d5-timeline__marker {
	box-shadow: 0 0 20px var(--mds-tl-point);
}
/* -- scale -- */
.mds-d5-timeline--marker-hover-scale .mds-d5-timeline__item:hover .mds-d5-timeline__marker {
	transform: scale(1.15);
}
/* -- lift -- */
.mds-d5-timeline--marker-hover-lift .mds-d5-timeline__item:hover .mds-d5-timeline__marker {
	transform: translateY(-3px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
/* -- pulse -- */
.mds-d5-timeline--marker-hover-pulse .mds-d5-timeline__item:hover .mds-d5-timeline__marker {
	animation: mds-tl-pulse 0.6s ease;
}
@keyframes mds-tl-pulse {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.2); }
	80%  { transform: scale(0.95); }
	100% { transform: scale(1); }
}
/* -- color-shift -- */
.mds-d5-timeline--marker-hover-color-shift .mds-d5-timeline__item:hover .mds-d5-timeline__marker {
	background: var(--mds-tl-accent);
	color:      #ffffff;
}

/* ── 17. Tailles globales ────────────────────────────────────────── */
.mds-d5-timeline--size-small .mds-d5-timeline__inner  { padding: calc(var(--mds-tl-padding-y) * 0.6) calc(var(--mds-tl-padding-x) * 0.6); }
.mds-d5-timeline--size-large .mds-d5-timeline__inner  { padding: calc(var(--mds-tl-padding-y) * 1.3) calc(var(--mds-tl-padding-x) * 1.3); }
.mds-d5-timeline--size-xl    .mds-d5-timeline__inner  { padding: calc(var(--mds-tl-padding-y) * 1.6) calc(var(--mds-tl-padding-x) * 1.6); }

/* ── 18. styleTarget ─────────────────────────────────────────────── */
.mds-d5-timeline--style-target-container {
	background:    var(--mds-tl-bg);
	border-radius: var(--mds-tl-radius);
}
.mds-d5-timeline--style-target-container .mds-d5-timeline__inner {
	background:    transparent;
	border-radius: 0;
	box-shadow:    none;
}
.mds-d5-timeline--style-target-both .mds-d5-timeline__inner {
	background:    transparent;
	padding-top:   0;
	padding-bottom: 0;
}

/* ── 19. Presets visuels ─────────────────────────────────────────────
 * RÈGLE CHARTE : les presets ne modifient QUE :
 *   - couleurs (CSS variables ou règles color/background)
 *   - fonds, bordures, ombres, rayons
 *   - ambiance typographique (couleurs, pas tailles)
 *
 * Les presets ne modifient PAS :
 *   - display, grid-template-columns, position, left, top
 *   - margin, padding sur les items (sauf via variables)
 *   - flex-direction, gap structurel
 * ─────────────────────────────────────────────────────────────────── */

/* --- Macteck Clean --- */
.mds-d5-timeline--preset-macteck-clean {
	--mds-tl-bg:          #ffffff;
	--mds-tl-title-color: #1e293b;
	--mds-tl-body-color:  #64748b;
	--mds-tl-point:       #0ea5e9;
	--mds-tl-line:        #e2e8f0;
	--mds-tl-accent:      #0ea5e9;
	--mds-tl-card-bg:     #f8fafc;
	--mds-tl-card-border-color: rgba(226,232,240,0.8);
}
.mds-d5-timeline--preset-macteck-clean .mds-d5-timeline__inner {
	border: 1px solid #f1f5f9;
	box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

/* --- Process Premium (défaut) --- */
.mds-d5-timeline--preset-process-premium {
	--mds-tl-bg:          #f8fafc;
	--mds-tl-title-color: #0f172a;
	--mds-tl-body-color:  #475569;
	--mds-tl-point:       #0284c7;
	--mds-tl-line:        #bae6fd;
	--mds-tl-accent:      #0284c7;
	--mds-tl-card-bg:     #ffffff;
	--mds-tl-card-border-color: rgba(186,230,253,0.6);
}
.mds-d5-timeline--preset-process-premium .mds-d5-timeline__inner {
	border: 1px solid #e0f2fe;
	box-shadow: 0 8px 32px rgba(2,132,199,0.08);
}
.mds-d5-timeline--preset-process-premium .mds-d5-timeline__title {
	color: #0c4a6e;
}

/* --- Dark Roadmap --- */
.mds-d5-timeline--preset-dark-roadmap {
	--mds-tl-bg:          #0f172a;
	--mds-tl-title-color: #f1f5f9;
	--mds-tl-body-color:  #94a3b8;
	--mds-tl-point:       #818cf8;
	--mds-tl-line:        #1e293b;
	--mds-tl-accent:      #818cf8;
	--mds-tl-marker-text: #ffffff;
	--mds-tl-card-bg:     #1e293b;
	--mds-tl-card-border-color: rgba(129,140,248,0.20);
}
.mds-d5-timeline--preset-dark-roadmap .mds-d5-timeline__inner {
	border: 1px solid rgba(129,140,248,0.15);
	box-shadow: 0 16px 48px rgba(0,0,0,0.40);
}

/* --- Glass Steps — VISUEL PUR — aucun override structurel --- */
/*
 * Glass Steps change uniquement l'ambiance visuelle :
 * fond translucide, blur, bordure subtile, couleurs.
 * Il NE modifie PAS la grille, les positions, les paddings des items.
 * Si l'utilisateur veut des cartes, il active stepCardsEnabled ou layout=cards.
 */
.mds-d5-timeline--preset-glass-steps {
	--mds-tl-bg:          transparent;
	--mds-tl-title-color: #0f172a;
	--mds-tl-body-color:  #334155;
	--mds-tl-point:       #0ea5e9;
	--mds-tl-line:        rgba(14,165,233,0.25);
	--mds-tl-accent:      #0ea5e9;
	--mds-tl-marker-text: #0f172a;
	--mds-tl-card-bg:     rgba(255,255,255,0.75);
	--mds-tl-card-border-color: rgba(148,163,184,0.25);
}
.mds-d5-timeline--preset-glass-steps .mds-d5-timeline__inner {
	background:      linear-gradient(135deg, rgba(255,255,255,0.78), rgba(248,250,252,0.55));
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border:          1px solid rgba(148,163,184,0.28);
	box-shadow:      0 24px 60px rgba(15,23,42,0.10);
}
.mds-d5-timeline--preset-glass-steps .mds-d5-timeline__marker {
	background: rgba(255,255,255,0.92);
	color:      #0f172a;
	border:     1px solid rgba(14,165,233,0.28);
	box-shadow: 0 6px 18px rgba(14,165,233,0.14);
}
/* Quand les cartes sont actives en glass, elles sont glass aussi */
.mds-d5-timeline--preset-glass-steps.mds-d5-timeline--cards-enabled .mds-d5-timeline__item,
.mds-d5-timeline--preset-glass-steps.mds-d5-timeline--layout-cards  .mds-d5-timeline__item {
	background:    rgba(255,255,255,0.72);
	border-color:  rgba(148,163,184,0.22);
	box-shadow:    0 10px 28px rgba(15,23,42,0.08);
	backdrop-filter: blur(8px);
}
.mds-d5-timeline--preset-glass-steps.mds-d5-timeline--cards-enabled .mds-d5-timeline__item:hover,
.mds-d5-timeline--preset-glass-steps.mds-d5-timeline--layout-cards  .mds-d5-timeline__item:hover {
	background: rgba(255,255,255,0.90);
}

/* --- Orange Impact --- */
.mds-d5-timeline--preset-orange-impact {
	--mds-tl-bg:          #fff7ed;
	--mds-tl-title-color: #7c2d12;
	--mds-tl-body-color:  #9a3412;
	--mds-tl-point:       #ea580c;
	--mds-tl-line:        #fed7aa;
	--mds-tl-accent:      #ea580c;
	--mds-tl-marker-text: #ffffff;
	--mds-tl-card-bg:     #ffffff;
	--mds-tl-card-border-color: rgba(234,88,12,0.15);
}
.mds-d5-timeline--preset-orange-impact .mds-d5-timeline__inner {
	border: 2px solid #fdba74;
	box-shadow: 0 8px 32px rgba(234,88,12,0.12);
}

/* --- Corporate Timeline --- */
.mds-d5-timeline--preset-corporate-timeline {
	--mds-tl-bg:          #f1f5f9;
	--mds-tl-title-color: #0f172a;
	--mds-tl-body-color:  #475569;
	--mds-tl-point:       #1e40af;
	--mds-tl-line:        #cbd5e1;
	--mds-tl-accent:      #1e40af;
	--mds-tl-marker-text: #ffffff;
	--mds-tl-card-bg:     #ffffff;
	--mds-tl-card-border-color: rgba(30,64,175,0.12);
}
.mds-d5-timeline--preset-corporate-timeline .mds-d5-timeline__inner {
	border: 1px solid #e2e8f0;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.mds-d5-timeline--preset-corporate-timeline .mds-d5-timeline__title {
	color: #1e3a8a;
}

/* ── 20. Responsive ──────────────────────────────────────────────── */
@media (max-width: 768px) {
	.mds-d5-timeline__inner {
		padding: var(--mds-tl-mobile-pad-y) var(--mds-tl-mobile-pad-x);
	}
	.mds-d5-timeline__items {
		gap: var(--mds-tl-mobile-gap);
	}
	.mds-d5-timeline--layout-horizontal .mds-d5-timeline__items {
		flex-direction: column;
		overflow-x:     visible;
	}
	.mds-d5-timeline--layout-horizontal .mds-d5-timeline__item {
		grid-template-columns: var(--mds-tl-mobile-marker) 1fr;
		max-width: none;
	}
	.mds-d5-timeline--layout-cards .mds-d5-timeline__items {
		grid-template-columns: 1fr;
	}
	.mds-d5-timeline__marker {
		width:  var(--mds-tl-mobile-marker);
		height: var(--mds-tl-mobile-marker);
	}
	.mds-d5-timeline__item {
		grid-template-columns: var(--mds-tl-mobile-marker) 1fr;
	}
	.mds-d5-timeline__item-title { font-size: var(--mds-tl-mobile-title); }
	.mds-d5-timeline__item-text  { font-size: var(--mds-tl-mobile-desc);  }
	.mds-d5-timeline__title      { font-size: clamp(20px, 5vw, var(--mds-tl-tl-title-size)); }
}
.mds-d5-timeline--hide-line-mobile .mds-d5-timeline__item::after {
	display: none;
}
@media (min-width: 769px) {
	.mds-d5-timeline--hide-line-mobile .mds-d5-timeline__item::after {
		display: block;
	}
}

/* ── 21. Accessibilité ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.mds-d5-timeline__marker,
	.mds-d5-timeline__item,
	.mds-d5-timeline__item-title,
	.mds-d5-timeline__item-text {
		transition: none !important;
		animation:  none !important;
	}
}
.mds-d5-timeline:focus-visible,
.mds-d5-timeline__item:focus-visible {
	outline: 3px solid var(--mds-tl-accent);
	outline-offset: 2px;
}