.flexible-project-hero {
	position: relative;
	background: var(--color-navy);
	overflow: hidden;
	clip-path: inset(0 0 0 0);
}

.flexible-project-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--hero-bg);
	background-size: cover;
	background-position: center;
	opacity: 1;
	z-index: 0;
}

.flexible-project-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(10, 22, 40, 0.95) 0%, rgba(10, 22, 40, 0.80) 60%, rgba(14, 165, 233, 0.04) 100%);
	z-index: 1;
}


.project-flexible-highlight {
	position: relative;
	color: var(--color-white);
	padding: 0 12px 2px 0;
}

.project-flexible-highlight::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 58%;
	bottom: -2px;
	background: var(--color-blue);
	border-radius: 6px;
	z-index: -1;
}

/* Cotes maquette : conteneur texte 660x693, image 1085x723 (cf. wd-project/hero/cotes.txt) */
.flexible-project-hero .flexible-project-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 40px 0 16vw;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	gap: 0;
}

.flexible-project-hero__col-left {
	flex: 0 1 560px;
	max-width: 560px;
	min-height: 0;
	box-sizing: border-box;
	padding-top: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
}

.flexible-project-hero__col-right {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow: visible;
}

/* --project-hero-image-max-height (posée par project-flexible-fold.js) =
   espace réellement disponible dans le Hero (header + badges déduits) : un
   simple vh ne le sait pas et laisse l'image déborder sur les fenêtres
   basses. Le vh reste en fallback tant que le JS n'a pas tourné. */
.flexible-project-hero__col-right img {
	width: auto;
	height: auto;
	max-width: 1085px;
	max-height: var(--project-hero-image-max-height, 55vh);
}

/* Fold exact : sur desktop/13", le Hero occupe pile la hauteur restante
   sous le header une fois la hauteur des Chiffres clés déduite. La hauteur
   elle-même est posée en style inline par project-flexible-fold.js
   (priorité garantie sur toute règle CSS externe) ; ici on ne pose que la
   structure flex qui permet à ce contenu de tenir dans la hauteur imposée. */
@media (min-width: 1201px) {
	.flexible-project-hero {
		display: flex;
		flex-direction: column;
	}

	.flexible-project-hero .flexible-project-hero__inner {
		flex: 1 1 auto;
		min-height: 0;
		/* Centrage sûr : --project-hero-image-max-height (project-flexible-fold.js)
		   borne déjà l'image à l'espace réellement disponible dans le Hero, elle
		   ne peut donc plus déborder de sa boîte — le centrage n'a plus le risque
		   de remonter visuellement sous le header qui avait motivé un flex-start. */
		align-items: center;
		padding-top: var(--project-hero-header-offset, 100px);
	}

	.flexible-project-hero__col-left {
		min-height: 0;
		padding-top: 0;
	}

	.flexible-project-hero__col-right {
		align-items: center;
		overflow: hidden;
		min-height: 0;
	}

	.flexible-project-hero__badges {
		flex: 0 0 auto;
	}
}

.flexible-project-hero__title {
	font-family: 'Be Vietnam Pro', sans-serif;
	font-weight: 800;
	font-size: 50px;
	line-height: 1;
	letter-spacing: 0;
	color: var(--color-white);
	max-width: 560px;
	margin: 0;
}

/* Le champ ACF wysiwyg entoure le texte d'un <p> : forcer l'héritage
   de couleur, sinon un style global du thème (ex. .entry-content p) peut
   repasser le texte en noir. */
.flexible-project-hero__title p {
	margin: 0;
	color: inherit;
}

.flexible-project-hero__subtitle {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.35;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.8);
	max-width: 560px;
	margin: 0;
}

.flexible-project-hero__badges {
	position: relative;
	z-index: 2;
	padding: 16px 30px 28px;
	display: flex;
	justify-content: center;
}

.flexible-project-hero__badges-inner {
	display: inline-flex;
	align-items: center;
	gap: 36px;
	padding: 14px 36px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(8px);
	flex-wrap: wrap;
	justify-content: center;
}

.flexible-project-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.flexible-project-hero__badge-icon {
	width: auto;
	height: 20px;
	filter: brightness(0) invert(1);
	opacity: 0.75;
	transition: filter var(--transition-base), opacity var(--transition-base);
}

.flexible-project-hero__badge:hover .flexible-project-hero__badge-icon {
	filter: grayscale(0) brightness(1);
	opacity: 1;
}

.flexible-project-hero__badge-label {
	font-family: 'Manrope', sans-serif;
	font-size: 15px;
	font-weight: 500;
	color: var(--color-white);
	white-space: nowrap;
}

/* Grand desktop */
@media (min-width: 1367px) {
	/* Padding gauche/droite resserré et symétrique (au lieu de 10vw à
	   gauche / 40px seulement à droite) pour rapprocher texte et image.
	   Centré plutôt que calé en bas : flex-end n'alignait que les bas de
	   boîte, pas les contenus (texte plus court que l'image). Une image
	   plus grande (max-height augmenté) réduit naturellement le vide autour
	   du duo texte/image, donc le rapproche des badges sans sacrifier
	   l'alignement. */
	.flexible-project-hero .flexible-project-hero__inner {
		padding-left: 12vw;
		padding-right: 6vw;
		align-items: center;
	}

	.flexible-project-hero__col-right {
		align-items: center;
	}

	.flexible-project-hero__col-right img {
		max-width: 950px;
		max-height: var(--project-hero-image-max-height, 70vh);
	}
}

@media (max-width: 1366px) {
	.flexible-project-hero .flexible-project-hero__inner {
		padding-left: 10vw;
		padding-right: 8vw;
	}

	.flexible-project-hero__col-left {
		flex: 0 1 50%;
		max-width: 50%;
		min-height: 0;
		padding-top: 0;
	}

	.flexible-project-hero__title {
		font-size: 42px;
	}
}

/* Ecrans bas (13 pouces, fenêtre réduite en hauteur) : compresser le Hero
   pour que titre + image + badges tiennent au chargement sans scroll. */
@media (min-width: 1201px) and (min-height: 1px) and (max-height: 800px) {
	/* Texte et image centrés ensemble (align-items: center hérité de la
	   règle ≥1201px) : l'image est bornée à --project-hero-image-max-height,
	   donc jamais plus grande que sa boîte — pas besoin d'un alignement
	   spécifique pour éviter un débordement. */
	.flexible-project-hero__col-right img {
		max-width: 1200px;
		max-height: var(--project-hero-image-max-height, 65vh);
	}

	.flexible-project-hero__col-left {
		min-height: 0;
		gap: 8px;
	}

	.flexible-project-hero__title {
		font-size: 34px;
	}

	.flexible-project-hero__subtitle {
		font-size: 16px;
	}

	.flexible-project-hero__badges {
		padding: 12px 30px 20px;
	}
}

/* Le layout desktop côte à côte (texte 560px + image large) n'a de sens
   qu'à partir d'une largeur généreuse. Entre 1025 et 1200px (plage des
   tablettes réelles : iPad 1024, iPad Pro 1194...), forcer ce layout en le
   resserrant donnait un rendu bancal, ni desktop ni mobile. Le seuil de
   bascule vers le layout mobile empilé est donc relevé de 1024 à 1200px :
   les tablettes ont directement la mise en page mobile, cohérente. */
@media (max-width: 1200px) {
	/* Le header (position: absolute, flottant par-dessus le Hero) doit voir
	   sa hauteur réelle couverte par ce padding-top, sinon le titre passe
	   derrière/sous le logo et le menu — cf. --project-hero-header-offset,
	   mesurée dynamiquement par project-flexible-fold.js. */
	.flexible-project-hero .flexible-project-hero__inner {
		flex-direction: column;
		align-items: center;
		padding: var(--project-hero-header-offset, 180px) 32px 8px;
		overflow: visible;
	}

	.flexible-project-hero__col-left {
		flex: 0 0 auto;
		width: 100%;
		max-width: none;
		min-height: 0;
		padding-top: 0;
		position: relative;
		z-index: 2;
		align-items: center;
		text-align: center;
	}

	.flexible-project-hero__title,
	.flexible-project-hero__subtitle {
		max-width: 100%;
	}

	/* Le screenshot produit a sa propre chrome (barre de navigateur, UI) :
	   un object-fit: cover en plein fond le tronque de façon arbitraire et
	   paraît "mal aligné". On l'affiche donc en entier, dans un cadre net,
	   sous le texte plutôt qu'en fond flouté. */
	.flexible-project-hero__col-right {
		position: relative;
		flex: 0 0 auto;
		width: 100%;
		margin-top: 12px;
		display: flex;
		justify-content: center;
	}

	.flexible-project-hero__col-right img {
		display: block;
		width: auto;
		height: auto;
		max-width: 88%;
		max-height: none;
		margin: 0 auto;
		object-fit: contain;
	}

	.flexible-project-hero__title {
		font-size: 38px;
	}

	.flexible-project-hero__subtitle {
		font-size: 17px;
	}
}

/* Le header rétrécit sous ce seuil (cf. header.css) : la variable
   --project-hero-header-offset suit automatiquement cette hauteur réduite,
   ce padding-top n'a donc plus qu'à fournir le fallback pré-JS. */
@media (max-width: 992px) {
	.flexible-project-hero .flexible-project-hero__inner {
		padding-top: var(--project-hero-header-offset, 120px);
	}
}

@media (max-width: 640px) {
	.flexible-project-hero .flexible-project-hero__inner {
		padding: var(--project-hero-header-offset, 120px) 20px 10px;
		align-items: center;
	}

	.flexible-project-hero__col-left {
		align-items: center;
		text-align: center;
		padding-top: 0;
	}

	.flexible-project-hero__title,
	.flexible-project-hero__subtitle {
		max-width: 100%;
	}

	.flexible-project-hero__title {
		font-size: 26px;
	}

	.flexible-project-hero__subtitle {
		font-size: 16px;
	}

	.flexible-project-hero__badges {
		padding: 16px 12px 32px;
	}

	/* Les badges (3 maximum) doivent tenir sur une seule ligne même en
	   mobile, quitte à réduire taille/police, plutôt que de wrapper sur
	   plusieurs lignes. */
	.flexible-project-hero__badges-inner {
		flex-wrap: nowrap;
		gap: 10px;
		padding: 10px 14px;
		max-width: 100%;
		overflow-x: auto;
	}

	.flexible-project-hero__badge {
		gap: 6px;
		flex-shrink: 0;
	}

	.flexible-project-hero__badge-icon {
		height: 14px;
	}

	.flexible-project-hero__badge-label {
		font-size: 12px;
	}
}

@media (max-width: 380px) {
	.flexible-project-hero__badges-inner {
		gap: 8px;
		padding: 8px 10px;
	}

	.flexible-project-hero__badge-label {
		font-size: 11px;
	}
}