/*!
 * POC — Hero Slider & Titres animés
 * Version: 1.0.0
 * Thème cible : Modins (Gavias) — gardes CSS incluses.
 */

/* =====================================================================
   1. VARIABLES
   ===================================================================== */
.poc-hero {
	--poc-hero-h: 82vh;
	--poc-hero-pad-x: 64px;
	--poc-hero-pad-y: 56px;
	--poc-hero-cw: 780px;
	--poc-hero-align: left;
	--poc-hero-valign: center;
	--poc-hero-radius: 0px;

	--poc-hero-ov-color: #2d2d2a;
	--poc-hero-ov-op: 0.72;

	--poc-hero-st-color: #f38c8b;
	--poc-hero-st-bg: rgba(93, 147, 214, 0.12);
	--poc-hero-st-bd: rgba(93, 147, 214, 0.38);

	--poc-hero-ti-color: #ffffff;
	--poc-hero-ti-accent: #db5a58;
	--poc-hero-sst-color: rgba(255, 255, 255, 0.88);

	--poc-hero-btn-px: 30px;
	--poc-hero-btn-py: 17px;
	--poc-hero-btn-radius: 10px;
	--poc-hero-btn-gap: 16px;

	--poc-hero-c-or1: #f38c8b;
	--poc-hero-c-or2: #a21a18;
	--poc-hero-c-or-text: #4e4e4c;
	--poc-hero-c-ard1: #4b4b47;
	--poc-hero-c-ard2: #30302d;
	--poc-hero-c-ard-text: #db5a58;
	--poc-hero-c-urg1: #e23a2e;
	--poc-hero-c-urg2: #db3b38;
	--poc-hero-c-cui1: #e07b7a;
	--poc-hero-c-cui2: #941715;

	--poc-hero-nav-color: #ffffff;
	--poc-hero-nav-bg: rgba(255, 255, 255, 0.1);
	--poc-hero-nav-bg-h: #db5a58;
	--poc-hero-nav-color-h: #4e4e4c;
	--poc-hero-nav-size: 54px;

	--poc-hero-dot: rgba(255, 255, 255, 0.38);
	--poc-hero-dot-on: #db5a58;

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

/* =====================================================================
   2. GARDES — neutralisation du thème Modins
   Modins stylise la balise <button> brute et impose des marges aux
   titres. Tout est ramené à zéro DANS le périmètre du hero uniquement.
   Aucun !important sur les propriétés pilotées par Elementor
   (typographie, couleurs) afin de ne pas bloquer ses contrôles.
   ===================================================================== */
.poc-hero,
.poc-hero * {
	box-sizing: border-box;
}

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

.poc-hero button {
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	line-height: inherit;
	border-radius: 0;
	position: static;
	z-index: auto;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.poc-hero button:hover,
.poc-hero button:focus,
.poc-hero button:active {
	opacity: 1;
	box-shadow: none;
	color: inherit;
	background: none;
}

/*
 * `:where()` ne compte pas dans la spécificité : la garde pèse (0,1,0)
 * au lieu de (0,1,1). Elle écrase bien Modins — `h1..h6 { margin-top:15px;
 * letter-spacing:-.4px }` en (0,0,1) — sans écraser les marges et
 * l'interlettrage des composants du plugin, ce qu'elle faisait avant et
 * qui tassait tout le bloc.
 */
.poc-hero :where(h1, h2, h3, h4, h5, h6, p) {
	margin: 0;
	padding: 0;
	letter-spacing: normal;
}

/* Le thème peut forcer une casse : les textes saisis restent tels quels. */
.poc-hero .poc-hero__surtitre,
.poc-hero .poc-hero__titre,
.poc-hero .poc-hero__soustitre,
.poc-hero .poc-hero__btn-txt {
	text-transform: none;
}

/* Modins : svg { height: auto } casse l'alignement des icônes. */
.poc-hero svg {
	height: auto;
	vertical-align: middle;
}

.poc-hero a {
	text-decoration: none;
}

.poc-hero img {
	max-width: 100%;
	border: 0;
}

/* =====================================================================
   3. STRUCTURE
   ===================================================================== */
.poc-hero {
	position: relative;
	width: 100%;
	min-height: var(--poc-hero-h);
	overflow: hidden;
	border-radius: var(--poc-hero-radius);
	isolation: isolate;
	background-color: #272725;
}

.poc-hero__track {
	position: relative;
	width: 100%;
	min-height: var(--poc-hero-h);
	display: grid;
}

.poc-hero__slide {
	grid-area: 1 / 1;
	position: relative;
	min-height: var(--poc-hero-h);
	display: flex;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--poc-hero-speed, 900ms) var(--poc-hero-ease),
		visibility 0s linear var(--poc-hero-speed, 900ms),
		transform var(--poc-hero-speed, 900ms) var(--poc-hero-ease);
}

.poc-hero__slide[data-active='true'] {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
	transition-delay: 0s;
}

/* Effet glissement */
.poc-hero--fx-slide .poc-hero__slide {
	transform: translate3d(6%, 0, 0);
}
.poc-hero--fx-slide .poc-hero__slide[data-active='true'] {
	transform: none;
}
.poc-hero--fx-slide .poc-hero__slide[data-leaving='true'] {
	transform: translate3d(-6%, 0, 0);
}

/* Effet fondu + zoom */
.poc-hero--fx-zoom .poc-hero__slide {
	transform: scale(1.06);
}
.poc-hero--fx-zoom .poc-hero__slide[data-active='true'] {
	transform: scale(1);
}

/* --- Visuel --- */
.poc-hero__visual {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}

/*
 * Spécificité volontairement portée à (0,2,0).
 * Elementor pose `.elementor img { height: auto }` en (0,1,1), ce qui
 * écrasait un simple `.poc-hero__media` (0,1,0) : l'image reprenait sa
 * hauteur naturelle et laissait une bande de fond sous le hero.
 * Modins ajoute `img { height: auto }` en (0,0,1), également couvert ici.
 */
.poc-hero .poc-hero__media {
	width: 100%;
	height: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	max-width: none;
}

.poc-hero--kb .poc-hero__slide[data-active='true'] .poc-hero__media {
	animation: poc-hero-kb 16s var(--poc-hero-ease) forwards;
}

@keyframes poc-hero-kb {
	from {
		transform: scale(1.001);
	}
	to {
		transform: scale(1.09);
	}
}

/*
 * Diapositive sans image : chaque rang reçoit une teinte différente, pour
 * qu'on voie immédiatement que le diaporama tourne même avant d'avoir
 * choisi les photos. Dès qu'une image est posée, ce fond disparaît.
 */
.poc-hero__slide--noimg {
	background-image: linear-gradient(135deg, #4b4b47 0%, #30302d 100%);
}

.poc-hero__slide--noimg:nth-child(2) {
	background-image: linear-gradient(135deg, #54544f 0%, #333330 100%);
}

.poc-hero__slide--noimg:nth-child(3) {
	background-image: linear-gradient(135deg, #4f4f4a 0%, #272725 100%);
}

.poc-hero__slide--noimg:nth-child(4) {
	background-image: linear-gradient(135deg, #54544f 0%, #343431 100%);
}

.poc-hero__slide--noimg:nth-child(5) {
	background-image: linear-gradient(135deg, #4a4a46 0%, #2f2f2c 100%);
}

/* --- Voile --- */
.poc-hero__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.poc-hero--ov-solid .poc-hero__veil {
	background: var(--poc-hero-ov-color);
	opacity: var(--poc-hero-ov-op);
}

.poc-hero--ov-gradient .poc-hero__veil {
	background: linear-gradient(
		100deg,
		rgb(from var(--poc-hero-ov-color) r g b / var(--poc-hero-ov-op)) 0%,
		rgb(from var(--poc-hero-ov-color) r g b / calc(var(--poc-hero-ov-op) * 0.82)) 46%,
		rgb(from var(--poc-hero-ov-color) r g b / calc(var(--poc-hero-ov-op) * 0.18)) 100%
	);
}

.poc-hero--ov-bottom .poc-hero__veil {
	background: linear-gradient(
		to top,
		rgb(from var(--poc-hero-ov-color) r g b / var(--poc-hero-ov-op)) 0%,
		rgb(from var(--poc-hero-ov-color) r g b / calc(var(--poc-hero-ov-op) * 0.55)) 55%,
		rgb(from var(--poc-hero-ov-color) r g b / 0.05) 100%
	);
}

/* Repli pour les navigateurs sans rgb(from …) : voile uni équivalent. */
@supports not (color: rgb(from #000 r g b / 50%)) {
	.poc-hero--ov-gradient .poc-hero__veil,
	.poc-hero--ov-bottom .poc-hero__veil {
		background: var(--poc-hero-ov-color);
		opacity: var(--poc-hero-ov-op);
	}
}

/* Grain : texture SVG légère, purement décorative. */
.poc-hero--grain .poc-hero__veil::after {
	content: '';
	position: absolute;
	inset: 0;
	opacity: 0.16;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* --- Contenu --- */
.poc-hero__inner {
	position: relative;
	z-index: 3;
	width: 100%;
	display: flex;
	align-items: var(--poc-hero-valign);
	/* left | center | right sont des valeurs valides ici : le bloc suit
	   l'alignement choisi sans avoir à deviner une classe. */
	justify-content: var(--poc-hero-align);
	padding: var(--poc-hero-pad-y) var(--poc-hero-pad-x);
	/* Réserve la bande basse occupée par les puces, les flèches
	   et la barre de progression. */
	padding-bottom: calc(var(--poc-hero-pad-y) + var(--poc-hero-nav-size) + 26px);
	min-height: var(--poc-hero-h);
}

.poc-hero--single .poc-hero__inner {
	padding-bottom: var(--poc-hero-pad-y);
}

.poc-hero__content {
	width: 100%;
	max-width: var(--poc-hero-cw);
	text-align: var(--poc-hero-align);
}

/* =====================================================================
   4. SUR-TITRE
   ===================================================================== */
.poc-hero .poc-hero__surtitre {
	display: inline-flex;
	align-items: center;
	gap: 0;
	margin-bottom: var(--poc-hero-st-mb, 26px);
	padding: var(--poc-hero-st-py, 11px) var(--poc-hero-st-px, 26px)
		var(--poc-hero-st-py, 11px) var(--poc-hero-st-pl, 13px);
	border: 1px solid var(--poc-hero-st-bd);
	border-radius: 999px;
	background: var(--poc-hero-st-bg);
	color: var(--poc-hero-st-color);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.07em;
	line-height: 1.45;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* Sans icône, la pastille reprend une marge gauche symétrique. */
.poc-hero .poc-hero__surtitre:not(:has(.poc-hero__st-ico)) {
	padding-left: var(--poc-hero-st-px, 26px);
}

/*
 * L'icône reçoit sa propre pastille ronde : elle respire au lieu d'être
 * collée au filet, et le regard sépare nettement le pictogramme du texte.
 */
.poc-hero .poc-hero__st-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.95em;
	height: 1.95em;
	margin-right: var(--poc-hero-st-gap, 13px) !important;
	flex: 0 0 auto;
	font-size: 1em;
	border-radius: 50%;
	background: var(--poc-hero-st-ico-bg, rgba(93, 147, 214, 0.16));
	box-shadow: inset 0 0 0 1px var(--poc-hero-st-ico-bd, rgba(93, 147, 214, 0.22));
}

.poc-hero .poc-hero__st-ico i,
.poc-hero .poc-hero__st-ico i::before,
.poc-hero .poc-hero__st-ico svg {
	line-height: 1 !important;
	vertical-align: middle;
	display: block;
}

.poc-hero .poc-hero__st-ico svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.poc-hero .poc-hero__st-txt {
	display: inline-block;
	padding-block: 1px;
}

/* =====================================================================
   5. TITRE
   ===================================================================== */
.poc-hero .poc-hero__titre {
	color: var(--poc-hero-ti-color);
	font-size: clamp(2rem, 1.15rem + 3.4vw, 4.15rem);
	line-height: 1.06;
	font-weight: 800;
	margin-bottom: 20px;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.poc-hero__accent,
.poc-hero__word--accent .poc-hero__word-in {
	color: var(--poc-hero-ti-accent);
	position: relative;
}

/* Signature : le trait sous les mots en valeur, tracé de gauche à droite. */
.poc-hero--ul .poc-hero__word--accent .poc-hero__word-in::after,
.poc-hero--ul .poc-hero__accent::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.06em;
	height: 0.075em;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		var(--poc-hero-c-or1) 0%,
		var(--poc-hero-c-or2) 100%
	);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 900ms var(--poc-hero-ease) 650ms;
}

.poc-hero__slide[data-active='true'] .poc-hero__word--accent .poc-hero__word-in::after,
.poc-hero__slide[data-active='true'] .poc-hero__accent::after {
	transform: scaleX(1);
}

/* Découpe mot à mot */
.poc-hero__word {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}

.poc-hero__word-in {
	display: inline-block;
	will-change: transform, opacity;
}

/* =====================================================================
   6. SOUS-TITRE
   ===================================================================== */
.poc-hero .poc-hero__soustitre {
	color: var(--poc-hero-sst-color);
	font-size: clamp(1rem, 0.94rem + 0.28vw, 1.16rem);
	line-height: 1.65;
	margin-bottom: 34px;
	text-wrap: pretty;
}

/* =====================================================================
   7. BOUTONS — 6 designs
   ===================================================================== */
.poc-hero .poc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--poc-hero-btn-gap);
}

.poc-hero .poc-hero__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--poc-hero-btn-py) var(--poc-hero-btn-px);
	border-radius: var(--poc-hero-btn-radius);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.01em;
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	transition: transform 260ms var(--poc-hero-ease),
		box-shadow 260ms var(--poc-hero-ease),
		background 260ms var(--poc-hero-ease),
		color 260ms var(--poc-hero-ease),
		border-color 260ms var(--poc-hero-ease);
}

.poc-hero .poc-hero__btn-in {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.poc-hero .poc-hero__btn-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.1em;
	height: 1.1em;
	flex: 0 0 auto;
	font-size: 1.02em;
}

.poc-hero .poc-hero__btn-ico i,
.poc-hero .poc-hero__btn-ico i::before,
.poc-hero .poc-hero__btn-ico svg {
	line-height: 1 !important;
	vertical-align: middle;
	display: block;
}

.poc-hero .poc-hero__btn-ico svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Modins écrase le gap en flex : marges explicites sur l'icône. */
.poc-hero .poc-hero__btn-ico + .poc-hero__btn-txt {
	margin-left: 10px !important;
}

.poc-hero .poc-hero__btn-txt + .poc-hero__btn-ico {
	margin-left: 10px !important;
}

.poc-hero .poc-hero__btn:hover,
.poc-hero .poc-hero__btn:focus-visible {
	transform: translateY(-2px);
}

.poc-hero .poc-hero__btn:active {
	transform: translateY(0);
}

.poc-hero .poc-hero__btn:focus-visible {
	outline: 2px solid var(--poc-hero-c-or1);
	outline-offset: 3px;
}

/* Balayage lumineux */
.poc-hero__btn-sheen {
	position: absolute;
	top: -60%;
	left: -80%;
	width: 45%;
	height: 220%;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transform: rotate(18deg);
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.45) 50%,
		rgba(255, 255, 255, 0) 100%
	);
}

.poc-hero--sheen .poc-hero__btn:hover .poc-hero__btn-sheen {
	animation: poc-hero-sheen 760ms var(--poc-hero-ease);
}

@keyframes poc-hero-sheen {
	0% {
		left: -80%;
		opacity: 0;
	}
	18% {
		opacity: 1;
	}
	100% {
		left: 130%;
		opacity: 0;
	}
}

/* --- 01 Or massif --- */
.poc-hero .poc-hero__btn--or {
	background: linear-gradient(135deg, var(--poc-hero-c-or1) 0%, var(--poc-hero-c-or2) 100%);
	color: var(--poc-hero-c-or-text);
	box-shadow: 0 10px 26px -10px rgba(162, 26, 24, 0.75),
		inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.poc-hero .poc-hero__btn--or:hover,
.poc-hero .poc-hero__btn--or:focus-visible {
	box-shadow: 0 18px 34px -12px rgba(162, 26, 24, 0.9),
		inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* --- 02 Ardoise --- */
.poc-hero .poc-hero__btn--ardoise {
	background: linear-gradient(160deg, var(--poc-hero-c-ard1) 0%, var(--poc-hero-c-ard2) 100%);
	color: var(--poc-hero-c-ard-text);
	box-shadow: inset 0 0 0 1px rgba(93, 147, 214, 0.32),
		0 12px 26px -14px rgba(0, 0, 0, 0.9);
}

.poc-hero .poc-hero__btn--ardoise:hover,
.poc-hero .poc-hero__btn--ardoise:focus-visible {
	color: var(--poc-hero-c-or1);
	box-shadow: inset 0 0 0 1px rgba(93, 147, 214, 0.72),
		0 18px 30px -14px rgba(0, 0, 0, 1);
}

/* --- 03 Contour or : bordure dégradée, remplissage au survol --- */
.poc-hero .poc-hero__btn--contour {
	background: transparent;
	color: var(--poc-hero-c-or1);
	box-shadow: inset 0 0 0 1.5px var(--poc-hero-c-or1);
}

.poc-hero .poc-hero__btn--contour::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(135deg, var(--poc-hero-c-or1) 0%, var(--poc-hero-c-or2) 100%);
	transform: scaleY(0);
	transform-origin: bottom center;
	transition: transform 320ms var(--poc-hero-ease);
}

.poc-hero .poc-hero__btn--contour:hover::before,
.poc-hero .poc-hero__btn--contour:focus-visible::before {
	transform: scaleY(1);
}

.poc-hero .poc-hero__btn--contour:hover,
.poc-hero .poc-hero__btn--contour:focus-visible {
	color: var(--poc-hero-c-or-text);
}

/* --- 04 Verre --- */
.poc-hero .poc-hero__btn--verre {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35),
		0 10px 30px -16px rgba(0, 0, 0, 0.8);
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	backdrop-filter: blur(10px) saturate(1.2);
}

.poc-hero .poc-hero__btn--verre:hover,
.poc-hero .poc-hero__btn--verre:focus-visible {
	background: rgba(255, 255, 255, 0.2);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6),
		0 16px 32px -16px rgba(0, 0, 0, 0.9);
}

/* --- 05 Urgence : pastille qui bat --- */
.poc-hero .poc-hero__btn--urgence {
	background: linear-gradient(120deg, var(--poc-hero-c-urg1) 0%, var(--poc-hero-c-urg2) 100%);
	color: #ffffff;
	padding-left: calc(var(--poc-hero-btn-px) + 18px);
	box-shadow: 0 12px 28px -12px rgba(226, 58, 46, 0.85),
		inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.poc-hero .poc-hero__btn--urgence::before {
	content: '';
	position: absolute;
	left: calc(var(--poc-hero-btn-px) - 6px);
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: #ffffff;
	z-index: 2;
	box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.75);
	animation: poc-hero-pulse 2s ease-out infinite;
}

@keyframes poc-hero-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
	}
	70% {
		box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

.poc-hero .poc-hero__btn--urgence:hover,
.poc-hero .poc-hero__btn--urgence:focus-visible {
	box-shadow: 0 20px 36px -14px rgba(226, 58, 46, 0.95),
		inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* --- 06 Azur --- */
.poc-hero .poc-hero__btn--cuivre {
	background: linear-gradient(
		135deg,
		var(--poc-hero-c-cui1) 0%,
		var(--poc-hero-c-cui2) 55%,
		var(--poc-hero-c-cui1) 100%
	);
	background-size: 180% 180%;
	background-position: 0% 50%;
	color: #ffffff;
	box-shadow: 0 12px 26px -12px rgba(26, 75, 143, 0.8),
		inset 0 1px 0 rgba(255, 255, 255, 0.4);
	transition: background-position 620ms var(--poc-hero-ease),
		transform 260ms var(--poc-hero-ease),
		box-shadow 260ms var(--poc-hero-ease);
}

.poc-hero .poc-hero__btn--cuivre:hover,
.poc-hero .poc-hero__btn--cuivre:focus-visible {
	background-position: 100% 50%;
	box-shadow: 0 18px 32px -12px rgba(26, 75, 143, 0.95),
		inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* =====================================================================
   8. ANIMATIONS D'ENTRÉE
   ===================================================================== */
.poc-hero [data-reveal] {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition: opacity 720ms var(--poc-hero-ease),
		transform 720ms var(--poc-hero-ease);
}

.poc-hero__slide[data-active='true'] [data-reveal] {
	opacity: 1;
	transform: none;
}

.poc-hero__slide[data-active='true'] .poc-hero__surtitre[data-reveal] {
	transition-delay: 120ms;
}
.poc-hero__slide[data-active='true'] .poc-hero__soustitre[data-reveal] {
	transition-delay: 380ms;
}
.poc-hero__slide[data-active='true'] .poc-hero__actions[data-reveal] {
	transition-delay: 520ms;
}

/* Le titre géré mot à mot ne bouge pas en bloc. */
.poc-hero--anim-words .poc-hero__titre[data-reveal] {
	opacity: 1;
	transform: none;
	transition: none;
}

.poc-hero--anim-words .poc-hero__word-in {
	opacity: 0;
	transform: translate3d(0, 108%, 0);
	transition: transform 780ms var(--poc-hero-ease), opacity 500ms linear;
	transition-delay: calc(var(--i, 0) * var(--poc-hero-stagger, 55ms) + 180ms);
}

.poc-hero__slide[data-active='true'] .poc-hero__word-in {
	opacity: 1;
	transform: none;
}

.poc-hero--anim-fade [data-reveal] {
	transform: none;
}

.poc-hero--anim-none [data-reveal],
.poc-hero--anim-none .poc-hero__word-in {
	opacity: 1;
	transform: none;
	transition: none;
}

/* =====================================================================
   9. NAVIGATION
   ===================================================================== */
/*
 * Flèches groupées en bas à droite, puces en bas à gauche : aucune
 * superposition possible avec le titre, quelle que soit la largeur.
 */
.poc-hero .poc-hero__nav {
	position: absolute;
	bottom: 26px;
	z-index: 6;
	width: var(--poc-hero-nav-size);
	height: var(--poc-hero-nav-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--poc-hero-nav-color);
	background: var(--poc-hero-nav-bg);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: background 260ms var(--poc-hero-ease),
		color 260ms var(--poc-hero-ease),
		box-shadow 260ms var(--poc-hero-ease),
		transform 260ms var(--poc-hero-ease);
}

.poc-hero .poc-hero__nav svg {
	width: 42%;
	height: 42%;
	display: block;
}

.poc-hero .poc-hero__nav--prev {
	right: calc(var(--poc-hero-pad-x) + var(--poc-hero-nav-size) + 10px);
}

.poc-hero .poc-hero__nav--next {
	right: var(--poc-hero-pad-x);
}

.poc-hero .poc-hero__nav:hover,
.poc-hero .poc-hero__nav:focus-visible {
	background: var(--poc-hero-nav-bg-h);
	color: var(--poc-hero-nav-color-h);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
	transform: scale(1.06);
	opacity: 1;
}

.poc-hero .poc-hero__nav:focus-visible {
	outline: 2px solid var(--poc-hero-c-or1);
	outline-offset: 3px;
}

/* --- Puces --- */
.poc-hero__dots {
	position: absolute;
	z-index: 6;
	/* Centrées sur la hauteur des flèches, pas collées au bas du bloc. */
	bottom: calc(26px + (var(--poc-hero-nav-size) - 4px) / 2);
	left: var(--poc-hero-pad-x);
	display: flex;
	align-items: center;
	gap: 10px;
}

.poc-hero .poc-hero__dot {
	width: 26px;
	height: 4px;
	border-radius: 999px;
	background: var(--poc-hero-dot);
	overflow: hidden;
	transition: width 380ms var(--poc-hero-ease), background 260ms var(--poc-hero-ease);
	display: block;
	position: relative;
}

.poc-hero .poc-hero__dot[aria-selected='true'] {
	width: 52px;
	background: rgba(255, 255, 255, 0.22);
}

.poc-hero .poc-hero__dot-fill {
	position: absolute;
	inset: 0;
	background: var(--poc-hero-dot-on);
	transform: scaleX(0);
	transform-origin: left center;
	display: block;
}

.poc-hero .poc-hero__dot[aria-selected='true'] .poc-hero__dot-fill {
	transform: scaleX(1);
	transition: transform 420ms var(--poc-hero-ease);
}

.poc-hero .poc-hero__dot:focus-visible {
	outline: 2px solid var(--poc-hero-c-or1);
	outline-offset: 4px;
}

/* --- Barre de progression --- */
.poc-hero__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	z-index: 6;
	background: rgba(255, 255, 255, 0.12);
	pointer-events: none;
}

.poc-hero__progress > span {
	display: block;
	height: 100%;
	width: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	background: linear-gradient(90deg, var(--poc-hero-c-or1), var(--poc-hero-c-or2));
}

.poc-hero__progress.is-running > span {
	transform: scaleX(1);
	transition: transform linear var(--poc-hero-progress-dur, 6500ms);
}

.poc-hero--single .poc-hero__progress,
.poc-hero--single .poc-hero__dots,
.poc-hero--single .poc-hero__nav {
	display: none;
}

/* =====================================================================
   10. RESPONSIVE
   ===================================================================== */
/*
 * Replis de sécurité : si un réglage responsive n'a jamais été touché
 * dans Elementor, le hero reste correct malgré tout. Dès que le client
 * règle la valeur, la CSS générée par Elementor reprend la main.
 */
@media (max-width: 1024px) {
	.poc-hero {
		--poc-hero-pad-x: 40px;
	}
	.poc-hero__titre {
		line-height: 1.1;
	}
}

@media (max-width: 767px) {
	.poc-hero {
		--poc-hero-pad-x: 22px;
		--poc-hero-nav-size: 42px;
	}
	.poc-hero__titre {
		line-height: 1.14;
	}
	.poc-hero__surtitre {
		font-size: 12px;
		padding: 8px 14px 8px 11px;
	}
	.poc-hero .poc-hero__dot {
		width: 20px;
	}
	.poc-hero .poc-hero__dot[aria-selected='true'] {
		width: 38px;
	}

	/* Boutons pleine largeur : lisibles au pouce, alignés proprement. */
	.poc-hero--btn-full .poc-hero__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
	.poc-hero--btn-full .poc-hero__btn {
		width: 100%;
	}
	.poc-hero--btn-full .poc-hero__btn--urgence {
		padding-left: var(--poc-hero-btn-px);
	}
	.poc-hero--btn-full .poc-hero__btn--urgence::before {
		display: none;
	}
}

@media (max-width: 380px) {
	.poc-hero__titre {
		font-size: clamp(1.7rem, 1.3rem + 3vw, 2.2rem);
	}
}

/* =====================================================================
   11. ACCESSIBILITÉ
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.poc-hero *,
	.poc-hero *::before,
	.poc-hero *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.poc-hero__word-in,
	.poc-hero [data-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}
	.poc-hero--kb .poc-hero__slide[data-active='true'] .poc-hero__media {
		animation: none;
	}
}