/*
 * Offre – nouveau format (single-offre-v2.php)
 * Chargé uniquement sur les offres détectées par yr_is_offre_v2().
 * Bloc identique dans yvesrocher-ba et yvesrocher-franchise (hors variables de ton).
 */

.offre-v2 {
	--ov2-sage: #8aa797;
	--ov2-sage-soft: #e3ebe5;
	--ov2-sage-ink: #5a7d6a; /* sauge assombri : ≥ 3:1 sur papier pour les grands titres */
	--ov2-green: #375339;
	--ov2-green-deep: #1e3021;
	--ov2-paper: #f5f4f0;
	--ov2-ink: #212529;
	--ov2-ink-soft: #4a524d;
	--ov2-line: #d9ddd6;
	--ov2-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

	--ov2-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";

	color: var(--ov2-ink);
	font-family: "Arimo", sans-serif, var(--ov2-emoji);
	font-size: 1rem;
	line-height: 1.5;
}

.offre-v2 ::selection {
	background: var(--ov2-sage-soft);
	color: var(--ov2-green-deep);
}

.offre-v2 a {
	color: var(--ov2-green);
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.offre-v2 :focus-visible {
	outline: 2px solid var(--ov2-green);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---- En-tête de l'offre ------------------------------------------------ */

.ov2 {
	padding-bottom: 4rem;
}

.ov2-head {
	padding-block: 1.75rem 1.5rem;
}

.ov2-title {
	font-family: "Montserrat", sans-serif, var(--ov2-emoji);
	font-weight: 700;
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--ov2-green);
	text-wrap: pretty;
	margin: 0 0 1rem;
}

.ov2-date {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: var(--ov2-sage-soft);
	color: var(--ov2-green);
	font-size: 0.8125rem;
	font-weight: 700;
}

.ov2-date::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: currentColor;
}

/* ---- Données clés ------------------------------------------------------ */

.ov2-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
	margin: 0 0 2rem;
	padding: 1.25rem 0;
	border-block: 1px solid var(--ov2-line);
}

.ov2-facts {
	gap: 1.75rem 1.5rem;
}

.ov2-fact {
	/* Libellés et valeurs alignés d'une colonne à l'autre, même si un libellé passe sur 2 lignes */
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 2;
	align-content: start;
	row-gap: 0; /* l'écart entre lignes de la grille parente ne s'applique pas entre libellé et valeur */
}

@media (min-width: 992px) {
	/* Filets verticaux entre colonnes, quel que soit le nombre d'infos (6 ou 7) et le retour à la ligne :
	   chaque info a son filet à gauche, la liste déborde de 1.5rem de chaque côté et
	   clip-path masque le débord, donc le filet de la première info de chaque ligne. */
	.ov2-facts {
		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
		gap: 1.5rem 0;
		margin-inline: -1.5rem;
		padding-inline: 0;
		clip-path: inset(0 1.5rem);
	}
	.ov2-fact {
		padding: 0.25rem 1.5rem;
		border-left: 1px solid var(--ov2-line);
	}
}

/* Lignes équilibrées plutôt qu'une info seule en bas : 6 → 3 + 3, 7-8 → 4 + 3/4 */
@media (min-width: 768px) and (max-width: 1199px) {
	.ov2-facts:has(> :nth-child(6)) {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 768px) and (max-width: 1399px) {
	.ov2-facts:has(> :nth-child(7)) {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Grand écran : toutes les infos sur une ligne */
@media (min-width: 1200px) {
	.ov2-facts {
		grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	}
}

.ov2-fact dt {
	/* Pastille alignée en haut, libellé collé à la valeur */
	display: grid;
	grid-template-rows: auto 1fr;
	justify-items: start;
	gap: 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ov2-ink-soft);
	margin-bottom: 0.3rem;
	align-self: stretch;
}

.ov2-fact-label {
	align-self: end;
}

.ov2-fact-icon {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--ov2-sage-soft);
	color: var(--ov2-green);
}

.ov2-fact dd {
	margin: 0;
	font-family: "Montserrat", sans-serif, var(--ov2-emoji);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.35;
	color: var(--ov2-green-deep);
	text-wrap: pretty;
}

.ov2-fact-sub {
	display: block;
	margin-top: 0.25rem;
	font-family: "Arimo", sans-serif;
	font-weight: 400;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--ov2-ink-soft);
}

@media (max-width: 767px) {
	.ov2-facts {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 0.25rem 0;
	}
	.ov2-fact {
		display: block;
		position: relative;
		min-height: 2.5rem;
		padding: 0.875rem 0 0.875rem 3.375rem;
	}
	.ov2-fact + .ov2-fact {
		border-top: 1px solid var(--ov2-line);
	}
	.ov2-fact dt {
		display: block;
		margin-bottom: 0.15rem;
	}
	.ov2-fact-icon {
		position: absolute;
		left: 0;
		top: 0.875rem;
	}
}

/* ---- Corps : texte + colonne de candidature ------------------------------ */

.ov2-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 3rem;
	background: var(--ov2-paper) url("../img/conseilleres/paper-fibers.webp") repeat;
	background-size: 40%;
	padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
}

.ov2-main > * + * {
	margin-top: 2.25rem;
}

/* Titres de section : repris du contenu de l'offre */
.ov2-h2 {
	font-family: "Montserrat", sans-serif, var(--ov2-emoji);
	font-weight: 700;
	font-size: clamp(1.3rem, 1.05rem + 1vw, 1.85rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ov2-green);
	text-wrap: pretty;
	margin: 0 0 0.6rem;
}

.ov2-h2 + .ov2-h2 {
	margin-top: -0.15rem;
	font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
	color: var(--ov2-sage-ink);
}

/* Feuille devant « Rejoins l'aventure… » et « Au quotidien… », 💚 devant « Pourquoi nous rejoindre » */
.ov2-h2--emoji,
.ov2-h2--leaf {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.ov2-h2--leaf::before {
	content: "";
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	background: url("../img/single/emoji-entreprise.webp") no-repeat center / contain;
}

.ov2-h2-emoji {
	flex: none;
	width: 1.75rem;
	font-size: 1.4rem;
	line-height: 1;
	text-align: center;
}

/* Texte importé */
.ov2-prose p {
	margin: 0 0 0.5rem;
}

.ov2-prose > :last-child {
	margin-bottom: 0;
}

.ov2-prose strong {
	font-weight: 700;
	color: var(--ov2-green-deep);
}

.ov2-prose ul {
	list-style: none;
	margin: 0 0 0.5rem;
	padding: 0;
}

.ov2-prose li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: 0.3rem;
}

.ov2-prose li::before {
	content: "";
	position: absolute;
	left: 0.2rem;
	top: 0.62em;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50% 0;
	background: var(--ov2-sage);
	transform: rotate(-45deg);
}

/* « Et après ta candidature ? » : étapes numérotées reliées par un filet */
.ov2-steps {
	list-style: none;
	counter-reset: ov2-step;
	margin: 0.75rem 0 0;
	padding: 0;
}

.ov2-step {
	counter-increment: ov2-step;
	position: relative;
	padding: 0 0 0.9rem 2.75rem;
}

.ov2-step:last-child {
	padding-bottom: 0;
}

.ov2-step::before {
	content: counter(ov2-step);
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--ov2-green);
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.ov2-step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(0.875rem - 0.5px);
	top: 2.1rem;
	bottom: 0.35rem;
	width: 1px;
	background: var(--ov2-sage);
}

.ov2-step-title {
	margin: 0;
	padding-top: 0.15rem;
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	color: var(--ov2-green-deep);
}

.ov2-step-text p {
	margin: 0.15rem 0 0;
	color: var(--ov2-ink-soft);
}

/* Bouton */
.ov2-btn {
	display: block;
	text-align: center;
	font-family: "Montserrat", sans-serif, var(--ov2-emoji);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff !important;
	background: var(--ov2-green);
	border-radius: 999px;
	padding: 0.9rem 1.5rem;
	transition: background-color 200ms ease, transform 160ms var(--ov2-ease-out);
}

.ov2-btn:active {
	transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
	.ov2-btn:hover {
		background: var(--ov2-green-deep);
	}
}

.ov2-btn--lg {
	display: inline-block;
	min-width: 16rem;
	padding: 1.05rem 2.5rem;
	font-size: 1rem;
}

/* Conclusion */
.ov2-closing {
	text-align: center;
	padding: 2.5rem 1rem 0;
}

.ov2-closing-title {
	display: block;
	font-family: "Montserrat", sans-serif, var(--ov2-emoji);
	font-weight: 700;
	font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.25rem);
	line-height: 1.25;
	color: var(--ov2-green);
	text-wrap: pretty;
	margin: 0 auto 1.5rem;
}

.ov2-diversity {
	max-width: 60ch;
	margin: 1.75rem auto 0;
	font-size: 0.875rem;
	font-style: italic;
	color: var(--ov2-ink-soft);
}

.ov2-diversity p {
	margin: 0 0 0.5rem;
}

.ov2-diversity em {
	font-style: inherit;
}

@media (prefers-reduced-motion: reduce) {
	.ov2-btn {
		transition: background-color 200ms ease;
	}
	.ov2-btn:active {
		transform: none;
	}
}