/*!
 * POC — Étapes
 * Version: 1.0.0
 * Thème cible : Modins (Gavias).
 *
 * Règles tenues : racine confinée, min-width: 0 sur tous les
 * descendants, aucune unité vw, aucune marge négative.
 */

/* =====================================================================
   1. VARIABLES
   ===================================================================== */
.poc-et {
	--poc-et-or: #a21a18;
	--poc-et-or-clair: #f38c8b;
	--poc-et-encre: #4e4e4c;
	--poc-et-gris: #76766f;
	--poc-et-creme: #fbf3f3;
	--poc-et-filet: #f6e1e1;
	--poc-et-blanc: #ffffff;
	--poc-et-sombre: #ffffff;

	--poc-et-pa-txt: #4e4e4c;
	--poc-et-pa-bg1: #f38c8b;
	--poc-et-pa-bg2: #a21a18;
	--poc-et-pa: 54px;
	--poc-et-pa-txt-size: 19px;

	--poc-et-fil: #a21a18;
	--poc-et-fil-bg: #f6e1e1;
	--poc-et-fil-ep: 3px;

	--poc-et-cols: 4;
	--poc-et-gap: 20px;
	--poc-et-pad: 22px;
	--poc-et-radius: 16px;
	--poc-et-img-h: 150px;
	--poc-et-align: center;

	--poc-et-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =====================================================================
   2. GARDES — thème Modins
   ===================================================================== */
.poc-et,
.poc-et * {
	box-sizing: border-box;
	min-width: 0;
}

.poc-et [hidden] {
	display: none !important;
}

.poc-et :where(h1, h2, h3, h4, h5, h6, p, ol, li) {
	margin: 0;
	padding: 0;
	letter-spacing: normal;
	list-style: none;
}

.poc-et .poc-et__titre,
.poc-et .poc-et__texte,
.poc-et .poc-et__duree {
	text-transform: none;
}

.poc-et svg {
	height: auto;
	vertical-align: middle;
}

.poc-et .poc-et__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	max-width: none;
	object-fit: cover;
}

/* =====================================================================
   3. RACINE
   ===================================================================== */
.poc-et {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
	color: var(--poc-et-encre);
}

.poc-et .poc-et__liste {
	display: grid;
	gap: var(--poc-et-gap);
	min-width: 0;
}

.poc-et .poc-et__etape {
	position: relative;
	min-width: 0;
	display: flex;
}

/* =====================================================================
   4. PASTILLE ET FIL
   ===================================================================== */
.poc-et .poc-et__marque {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
}

.poc-et .poc-et__pastille {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--poc-et-pa);
	height: var(--poc-et-pa);
	flex: 0 0 auto;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--poc-et-pa-bg1), var(--poc-et-pa-bg2));
	color: var(--poc-et-pa-txt);
	box-shadow: 0 12px 26px -14px rgba(162, 26, 24, 0.9);
}

.poc-et .poc-et__num {
	font-size: var(--poc-et-pa-txt-size);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.01em;
}

.poc-et .poc-et__pa-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: calc(var(--poc-et-pa-txt-size) * 1.05);
}

.poc-et .poc-et__pa-ico i,
.poc-et .poc-et__pa-ico svg,
.poc-et .poc-et__ico i,
.poc-et .poc-et__ico svg {
	line-height: 1 !important;
	display: block;
}

.poc-et .poc-et__pa-ico svg,
.poc-et .poc-et__ico svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/*
 * Le fil. Sa partie « à venir » est le fond ; sa partie « parcourue »
 * se déploie par-dessus quand l'étape entre dans l'écran.
 */
.poc-et .poc-et__fil {
	position: absolute;
	z-index: 1;
	display: block;
	background: var(--poc-et-fil-bg);
	border-radius: 99px;
	overflow: hidden;
}

.poc-et .poc-et__fil-plein {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(var(--poc-et-sens, 90deg), var(--poc-et-or-clair), var(--poc-et-fil));
	transform-origin: var(--poc-et-origine, left center);
	transform: scale(1);
}

/* La dernière étape n'a personne à relier. */
.poc-et .poc-et__etape:last-child .poc-et__fil {
	display: none;
}

/* =====================================================================
   5. LA CARTE
   ===================================================================== */
.poc-et .poc-et__carte {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: 100%;
	flex: 1 1 auto;
	overflow: hidden;
	border: 1.5px solid transparent;
	border-radius: var(--poc-et-radius);
	background: var(--poc-et-creme);
	transition: transform 260ms var(--poc-et-ease),
		box-shadow 260ms var(--poc-et-ease),
		background 260ms var(--poc-et-ease),
		border-color 260ms var(--poc-et-ease);
}

.poc-et--souleve .poc-et__etape:hover .poc-et__carte {
	transform: translateY(-4px);
	box-shadow: 0 22px 44px -26px rgba(78, 78, 76, 0.5);
}

.poc-et .poc-et__corps {
	padding: var(--poc-et-pad);
	min-width: 0;
	flex: 1 1 auto;
}

.poc-et .poc-et__visuel {
	width: 100%;
	height: var(--poc-et-img-h);
	flex: 0 0 auto;
	overflow: hidden;
	background: var(--poc-et-creme);
}

.poc-et .poc-et__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1em;
	height: 2.1em;
	margin-bottom: 12px;
	border-radius: 12px;
	background: var(--poc-et-blanc);
	color: var(--poc-et-or);
	font-size: 18px;
}

.poc-et .poc-et__titre {
	font-size: 17px;
	font-weight: 800;
	line-height: 1.28;
	overflow-wrap: break-word;
}

.poc-et .poc-et__duree {
	display: inline-flex;
	align-items: center;
	margin-top: 7px;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--poc-et-blanc);
	color: var(--poc-et-or);
	font-size: 12px;
	font-weight: 700;
	overflow-wrap: break-word;
}

.poc-et .poc-et__duree-point {
	display: inline-block;
	width: 5px;
	height: 5px;
	flex: 0 0 auto;
	margin-right: 7px !important;
	border-radius: 50%;
	background: currentColor;
}

.poc-et .poc-et__texte {
	margin-top: 10px;
	color: var(--poc-et-gris);
	font-size: 14px;
	line-height: 1.62;
	overflow-wrap: break-word;
	text-wrap: pretty;
}

/* =====================================================================
   6. FRISE HORIZONTALE
   ===================================================================== */
.poc-et--horizontal .poc-et__liste {
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	align-items: stretch;
}

.poc-et--horizontal .poc-et__etape {
	flex-direction: column;
	align-items: stretch;
	text-align: var(--poc-et-align);
}

.poc-et--horizontal .poc-et__marque {
	justify-content: var(--poc-et-align, center);
	margin-bottom: 18px;
}

.poc-et--horizontal[style*='left'] .poc-et__marque {
	justify-content: flex-start;
}

/* Le fil part du centre de la pastille et rejoint la suivante. */
.poc-et--horizontal.poc-et--fil .poc-et__fil {
	top: calc(var(--poc-et-pa) / 2 - var(--poc-et-fil-ep) / 2);
	left: calc(50% + var(--poc-et-pa) / 2 + 8px);
	right: calc(-50% - var(--poc-et-gap) + var(--poc-et-pa) / 2 + 8px);
	height: var(--poc-et-fil-ep);
}

.poc-et--horizontal .poc-et__fil-plein {
	--poc-et-sens: 90deg;
	--poc-et-origine: left center;
}

.poc-et--horizontal .poc-et__carte {
	height: 100%;
}

.poc-et--horizontal .poc-et__duree,
.poc-et--grille .poc-et__duree {
	background: var(--poc-et-blanc);
}

/* =====================================================================
   7. FRISE VERTICALE
   ===================================================================== */
.poc-et--vertical .poc-et__liste,
.poc-et--alterne .poc-et__liste {
	grid-template-columns: minmax(0, 1fr);
}

.poc-et--vertical .poc-et__etape,
.poc-et--alterne .poc-et__etape {
	align-items: flex-start;
}

.poc-et--vertical .poc-et__marque,
.poc-et--alterne .poc-et__marque {
	align-items: flex-start;
	margin-right: var(--poc-et-gap) !important;
}

.poc-et--vertical.poc-et--fil .poc-et__fil,
.poc-et--alterne.poc-et--fil .poc-et__fil {
	left: calc(var(--poc-et-pa) / 2 - var(--poc-et-fil-ep) / 2);
	top: calc(var(--poc-et-pa) + 8px);
	bottom: calc(var(--poc-et-gap) * -1 - 8px);
	width: var(--poc-et-fil-ep);
}

.poc-et--vertical .poc-et__fil-plein,
.poc-et--alterne .poc-et__fil-plein {
	--poc-et-sens: 180deg;
	--poc-et-origine: center top;
}

/* --- Frise verticale alternée --- */
.poc-et--alterne .poc-et__liste {
	position: relative;
}

.poc-et--alterne .poc-et__etape {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	column-gap: var(--poc-et-gap);
}

.poc-et--alterne .poc-et__marque {
	grid-column: 2;
	margin-right: 0 !important;
	align-items: center;
}

/* Une étape sur deux passe à droite du fil. */
.poc-et--alterne .poc-et__etape:nth-child(odd) .poc-et__carte {
	grid-column: 1;
	text-align: right;
}

.poc-et--alterne .poc-et__etape:nth-child(even) .poc-et__carte {
	grid-column: 3;
	text-align: left;
}

.poc-et--alterne.poc-et--fil .poc-et__fil {
	left: calc(50% - var(--poc-et-fil-ep) / 2);
	top: calc(50% + var(--poc-et-pa) / 2 + 8px);
	bottom: calc(var(--poc-et-gap) * -1 - 50% + var(--poc-et-pa) / 2 + 8px);
}

.poc-et--alterne .poc-et__etape:nth-child(odd) .poc-et__duree {
	flex-direction: row-reverse;
}

.poc-et--alterne .poc-et__etape:nth-child(odd) .poc-et__duree-point {
	margin-right: 0 !important;
	margin-left: 7px !important;
}

/* =====================================================================
   8. GRILLE
   ===================================================================== */
.poc-et--grille .poc-et__liste {
	grid-template-columns: repeat(var(--poc-et-cols), minmax(0, 1fr));
}

.poc-et--grille.poc-et--egal .poc-et__liste {
	grid-auto-rows: 1fr;
}

.poc-et--grille .poc-et__etape {
	flex-direction: column;
	text-align: var(--poc-et-align);
}

.poc-et--grille .poc-et__marque {
	justify-content: var(--poc-et-align, center);
	margin-bottom: 16px;
}

/* En grille, le fil n'a pas de trajet lisible : on ne l'affiche pas. */
.poc-et--grille .poc-et__fil {
	display: none;
}

.poc-et--grille .poc-et__carte {
	height: 100%;
}

/* =====================================================================
   9. LES HUIT DESIGNS
   ===================================================================== */
.poc-et--d-blanc .poc-et__carte {
	background: var(--poc-et-blanc);
	border-color: var(--poc-et-filet);
}

.poc-et--d-blanc .poc-et__carte:hover {
	border-color: var(--poc-et-or);
}

.poc-et--d-blanc .poc-et__duree {
	background: var(--poc-et-creme);
}

/* Ardoise : couleur du titre posée explicitement, Modins colore la
   sienne et une couleur déclarée bat toujours une couleur héritée. */
.poc-et--d-ardoise .poc-et__carte {
	background: linear-gradient(160deg, #4b4b47, #30302d);
}

.poc-et--d-ardoise .poc-et__titre {
	color: var(--poc-et-sombre);
}

.poc-et--d-ardoise .poc-et__texte {
	color: rgba(255, 255, 255, 0.76);
}

.poc-et--d-ardoise .poc-et__duree {
	background: rgba(243, 140, 139, 0.14);
	color: var(--poc-et-or-clair);
}

.poc-et--d-ardoise .poc-et__ico {
	background: rgba(243, 140, 139, 0.14);
	color: var(--poc-et-or-clair);
}

.poc-et--d-contour .poc-et__carte {
	background: transparent;
	border-color: var(--poc-et-or);
}

.poc-et--d-contour .poc-et__duree {
	background: var(--poc-et-creme);
}

.poc-et--d-medaillon .poc-et__carte {
	background: var(--poc-et-blanc);
	border-color: var(--poc-et-filet);
}

.poc-et--d-medaillon .poc-et__pastille {
	width: calc(var(--poc-et-pa) * 1.18);
	height: calc(var(--poc-et-pa) * 1.18);
	box-shadow: 0 0 0 6px var(--poc-et-creme), 0 14px 30px -14px rgba(162, 26, 24, 0.9);
}

.poc-et--d-lisere .poc-et__carte {
	background: var(--poc-et-blanc);
	border-color: var(--poc-et-filet);
}

.poc-et--d-lisere .poc-et__carte::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 3;
	background: linear-gradient(90deg, var(--poc-et-or-clair), var(--poc-et-or), var(--poc-et-or-clair));
}

.poc-et--d-minimal .poc-et__carte {
	background: transparent;
	border-color: transparent;
	overflow: visible;
}

.poc-et--d-minimal .poc-et__corps {
	padding-left: 0;
	padding-right: 0;
}

.poc-et--d-minimal.poc-et--souleve .poc-et__etape:hover .poc-et__carte {
	transform: none;
	box-shadow: none;
}

.poc-et--d-minimal .poc-et__duree {
	background: var(--poc-et-creme);
}

/* Grand numéro en filigrane */
.poc-et--d-numero .poc-et__carte {
	background: var(--poc-et-creme);
}

.poc-et--d-numero .poc-et__carte::after {
	content: attr(data-num);
	position: absolute;
	top: 2px;
	right: 14px;
	z-index: 0;
	font-size: 62px;
	font-weight: 800;
	line-height: 1;
	color: var(--poc-et-or);
	opacity: 0.12;
	pointer-events: none;
}

.poc-et--d-numero .poc-et__corps {
	position: relative;
	z-index: 1;
}

/* =====================================================================
   10. ANIMATION AU DÉFILEMENT
   Rien n'est masqué tant que le script n'a pas pris la main : sans
   JavaScript, toutes les étapes restent lisibles.
   ===================================================================== */
.poc-et.is-pret .poc-et__etape {
	opacity: 0;
	transform: translate3d(0, 20px, 0);
	transition: opacity 620ms var(--poc-et-ease), transform 620ms var(--poc-et-ease);
	transition-delay: calc(var(--i, 0) * var(--poc-et-stagger, 120ms));
}

.poc-et.is-pret.is-vu .poc-et__etape {
	opacity: 1;
	transform: none;
}

/* Le fil se déploie dans le sens de lecture. */
.poc-et.is-pret .poc-et__fil-plein {
	transform: scale(0);
	transition: transform 700ms var(--poc-et-ease);
	transition-delay: calc(var(--i, 0) * var(--poc-et-stagger, 120ms) + 260ms);
}

.poc-et--horizontal.is-pret .poc-et__fil-plein {
	transform: scaleX(0);
}

.poc-et--vertical.is-pret .poc-et__fil-plein,
.poc-et--alterne.is-pret .poc-et__fil-plein {
	transform: scaleY(0);
}

.poc-et.is-pret.is-vu .poc-et__fil-plein {
	transform: scale(1);
}

/* =====================================================================
   11. RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
	.poc-et {
		--poc-et-cols: 2;
	}

	/*
	 * Une frise horizontale à cinq étapes ne tient pas sur une tablette :
	 * elle repasse en frise verticale, qui garde le fil et la lecture.
	 */
	.poc-et--horizontal .poc-et__liste {
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: minmax(0, 1fr);
	}

	.poc-et--horizontal .poc-et__etape {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
	}

	.poc-et--horizontal .poc-et__marque {
		margin-bottom: 0;
		margin-right: var(--poc-et-gap) !important;
		align-items: flex-start;
	}

	.poc-et--horizontal.poc-et--fil .poc-et__fil {
		top: calc(var(--poc-et-pa) + 8px);
		bottom: calc(var(--poc-et-gap) * -1 - 8px);
		left: calc(var(--poc-et-pa) / 2 - var(--poc-et-fil-ep) / 2);
		right: auto;
		width: var(--poc-et-fil-ep);
		height: auto;
	}

	.poc-et--horizontal .poc-et__fil-plein {
		--poc-et-sens: 180deg;
		--poc-et-origine: center top;
	}

	.poc-et--horizontal.is-pret .poc-et__fil-plein {
		transform: scaleY(0);
	}

	/* L'alternance ne se voit plus : tout passe à droite du fil. */
	.poc-et--alterne .poc-et__etape {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: flex-start;
	}

	.poc-et--alterne .poc-et__marque {
		grid-column: 1;
		align-items: flex-start;
	}

	.poc-et--alterne .poc-et__etape:nth-child(odd) .poc-et__carte,
	.poc-et--alterne .poc-et__etape:nth-child(even) .poc-et__carte {
		grid-column: 2;
		text-align: left;
	}

	.poc-et--alterne.poc-et--fil .poc-et__fil {
		left: calc(var(--poc-et-pa) / 2 - var(--poc-et-fil-ep) / 2);
		top: calc(var(--poc-et-pa) + 8px);
		bottom: calc(var(--poc-et-gap) * -1 - 8px);
	}

	.poc-et--alterne .poc-et__etape:nth-child(odd) .poc-et__duree {
		flex-direction: row;
	}

	.poc-et--alterne .poc-et__etape:nth-child(odd) .poc-et__duree-point {
		margin-left: 0 !important;
		margin-right: 7px !important;
	}
}

@media (max-width: 767px) {
	.poc-et {
		--poc-et-cols: 1;
		--poc-et-pad: 16px;
		--poc-et-pa: 44px;
		--poc-et-pa-txt-size: 16px;
	}

	.poc-et .poc-et__titre {
		font-size: 16px;
	}

	.poc-et--grille .poc-et__etape {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
	}

	.poc-et--grille .poc-et__marque {
		margin-bottom: 0;
		margin-right: var(--poc-et-gap) !important;
	}
}

/* =====================================================================
   12. ACCESSIBILITÉ
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.poc-et *,
	.poc-et *::before,
	.poc-et *::after {
		transition-duration: 0.001ms !important;
	}

	.poc-et.is-pret .poc-et__etape,
	.poc-et.is-pret .poc-et__fil-plein {
		opacity: 1 !important;
		transform: none !important;
	}
}