/*
 * Blocs « sections » Slicom (pages intérieures) : chaque section est une carte arrondie.
 * Chargé uniquement si un bloc Slicom est présent (block.json « style »), et sur les offres d'emploi (formulaires).
 * Variables (couleurs, rayons) : style.css.
 */

/* Pile de sections ----------------------------------------------------- */

.sections {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: var(--max);
	margin-inline: auto;
	padding: 12px var(--gutter) var(--section);
}

.slicom-section {
	padding: clamp(28px, 5vw, 72px);
	border-radius: var(--radius);
	background: var(--white);
}

.slicom-section--grege {
	background: var(--mint);
}

.slicom-section__inner {
	max-width: 1040px;
	margin-inline: auto;
}

.slicom-section__title {
	margin-bottom: 28px;
	font-size: clamp(32px, 3.6vw, 52px);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -.04em;
	color: var(--ink);
}

.slicom-section__title--center {
	text-align: center;
}

.slicom-section__title--left {
	text-align: left;
}

.slicom-section__title--right {
	text-align: right;
}

/* Alignement du texte (bloc « Section texte ») : prime sur l'alignement hérité de la mise en page */
.slicom-prose--left {
	text-align: left;
}

.slicom-prose--center {
	text-align: center;
}

.slicom-prose--right {
	text-align: right;
}

/* Listes centrées / à droite : puces collées au texte */
.slicom-prose.slicom-prose--center :is(ul, ol),
.slicom-prose.slicom-prose--right :is(ul, ol) {
	padding-left: 0;
	list-style-position: inside;
}

.slicom-texte--center .slicom-section__inner {
	max-width: 820px;
}

.slicom-block-placeholder {
	padding: 24px;
	border: 2px dashed var(--line-2);
	border-radius: 16px;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--text-2);
	text-align: center;
}

/* Texte + image -------------------------------------------------------- */

.slicom-texte-image {
	display: grid;
	padding: 0;
	overflow: hidden;
}

.slicom-texte-image__text {
	padding: clamp(28px, 5vw, 64px);
}

.slicom-texte-image__media {
	position: relative;
	min-height: 18rem;
	margin: 8px;
	overflow: hidden;
	border-radius: var(--radius-sm);
}

.slicom-texte-image__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Image complète : proportions d'origine, centrée verticalement à côté du texte */
.slicom-texte-image--complete .slicom-texte-image__media {
	display: flex;
	align-items: center;
	min-height: 0;
	background: none;
}

.slicom-texte-image--complete .slicom-texte-image__img {
	position: static;
	height: auto;
	border-radius: var(--radius-sm);
}

/* Section texte : image latérale à ratio fixe (paysage 4:3 / portrait 4:5), centrée face au texte */
.slicom-texte-image--ratio .slicom-texte-image__media {
	align-self: center;
	min-height: 0;
	aspect-ratio: 4 / 3;
}

.slicom-texte-image--portrait .slicom-texte-image__media {
	aspect-ratio: 4 / 5;
}

.slicom-texte-image--ratio .slicom-texte-image__text {
	align-self: center;
}

@media (max-width: 47.99rem) {
	/* Mobile : portrait limité en hauteur pour ne pas occuper tout l'écran */
	.slicom-texte-image--portrait .slicom-texte-image__media {
		aspect-ratio: auto;
		height: min(125vw, 70vh);
	}
}

/* Vidéo (oEmbed) 16/9 */
.slicom-texte-image__media--video {
	display: flex;
	align-items: center;
	min-height: 0;
	background: var(--ink);
}

.slicom-texte-image__video {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.slicom-texte-image__video iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Centrée : texte centré, média pleine largeur dessous */
.slicom-texte-image--centre .slicom-texte-image__text {
	width: 100%;
	max-width: 56rem;
	margin-inline: auto;
	text-align: center;
}

.slicom-texte-image--centre .slicom-texte-image__media {
	min-height: 0;
}

.slicom-texte-image--centre .slicom-texte-image__img {
	position: static;
	height: auto;
}

@media (min-width: 48rem) {
	.slicom-texte-image {
		grid-template-columns: 7fr 5fr;
	}

	.slicom-texte-image--gauche {
		grid-template-columns: 5fr 7fr;
	}

	.slicom-texte-image--gauche .slicom-texte-image__media {
		order: -1;
	}

	.slicom-texte-image.slicom-texte-image--centre {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 64rem) {
	.slicom-texte-image {
		grid-template-columns: 3fr 2fr;
	}

	.slicom-texte-image--gauche {
		grid-template-columns: 2fr 3fr;
	}

	.slicom-texte-image.slicom-texte-image--centre {
		grid-template-columns: 1fr;
	}
}

/* Chiffres clés -------------------------------------------------------- */

.slicom-chiffres__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 12px;
	margin: 0;
}

.slicom-chiffres__item {
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
	gap: 20px;
	min-height: 180px;
	padding: 28px;
	border-radius: var(--radius-sm);
	background: var(--bg);
}

.slicom-section--grege .slicom-chiffres__item {
	background: var(--white);
}

.slicom-chiffres__item:nth-child(2) {
	background: var(--accent);
}

.slicom-chiffres__label {
	font-size: 15px;
	color: var(--text);
}

.slicom-chiffres__item:nth-child(2) .slicom-chiffres__label {
	color: var(--ink);
}

.slicom-chiffres__value {
	margin: 0;
	font-size: clamp(40px, 4.5vw, 64px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.05em;
	color: var(--ink);
	overflow-wrap: anywhere;
}

/* Citation ------------------------------------------------------------- */

.slicom-citation__wrap {
	display: grid;
	gap: 28px;
}

.slicom-citation__photo {
	width: 160px;
	height: 160px;
	border-radius: var(--radius-sm);
	object-fit: cover;
}

.slicom-citation__quote {
	font-family: var(--font-serif);
	font-size: clamp(26px, 3vw, 40px);
	font-style: italic;
	line-height: 1.2;
	color: var(--ink);
}

.slicom-citation__quote p + p {
	margin-top: .6em;
}

.slicom-citation__author {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 24px;
	font-size: 15px;
	color: var(--text);
}

.slicom-citation__author strong {
	font-size: 17px;
	font-weight: 600;
	color: var(--ink);
}

@media (min-width: 48rem) {
	.slicom-citation__wrap.has-photo {
		grid-template-columns: 160px 1fr;
		align-items: start;
		gap: 40px;
	}
}

/* Frise chronologique -------------------------------------------------- */
/*
 * Ligne du temps verticale : rail fin (rempli en orange au défilement, js/site.js),
 * grandes années collantes à gauche (bureau), étapes en cartes avec pastille sur le rail.
 * --rail : position du rail ; --gap-list : distance rail → cartes.
 */

.slicom-frise {
	--rail: 7px;
	--gap-list: 32px;
	--rail-color: var(--line);
	--card: var(--bg);
}

.slicom-section--grege.slicom-frise {
	--rail-color: #bcd3ce;
	--card: var(--white);
}

.slicom-frise .slicom-section__inner {
	max-width: 1120px;
}

.slicom-frise__head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 12px 32px;
	margin-bottom: clamp(40px, 5vw, 72px);
	padding-bottom: 24px;
	border-bottom: 1px solid var(--rail-color);
}

.slicom-frise__head .slicom-section__title {
	margin: 0;
}

.slicom-frise__summary {
	margin: 0;
}

.slicom-frise__line {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(40px, 5vw, 72px);
}

/* Rail + remplissage */
.slicom-frise__rail {
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: calc(var(--rail) - 1px);
	width: 2px;
	border-radius: 2px;
	background: var(--rail-color);
}

.slicom-frise__progress {
	position: absolute;
	inset: 0 0 auto;
	height: var(--frise-progress, 0%);
	border-radius: inherit;
	background: linear-gradient(180deg, var(--accent), #ffa25c);
	box-shadow: 0 0 12px rgb(255 122 26 / .45);
	transition: height .15s linear;
}

/* Année */
.slicom-frise__year {
	position: relative;
	padding-left: calc(var(--rail) + var(--gap-list));
}

.slicom-frise__year-label {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 20px;
}

.slicom-frise__year-num {
	font-size: clamp(48px, 7vw, 104px);
	font-weight: 600;
	line-height: .85;
	letter-spacing: -.06em;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	transition: color .5s, opacity .5s;
}

.slicom-frise__year-count {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-2);
}

/* Années hors lecture estompées (avec JS) */
.slicom-frise__line.is-js .slicom-frise__year:not(.is-active) .slicom-frise__year-num {
	opacity: .28;
}

/* Étapes */
.slicom-frise__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.slicom-frise__item {
	position: relative;
}

.slicom-frise__dot {
	position: absolute;
	top: 26px;
	left: calc(-1 * var(--gap-list) - 6px);
	width: 12px;
	height: 12px;
	border: 2px solid var(--rail-color);
	border-radius: 999px;
	background: var(--card);
	transition: border-color .4s, background-color .4s, box-shadow .4s;
}

.slicom-frise__year.is-active .slicom-frise__dot,
.slicom-frise__line:not(.is-js) .slicom-frise__item:first-child .slicom-frise__dot {
	border-color: var(--accent);
	background: var(--accent);
	box-shadow: 0 0 0 5px rgb(255 122 26 / .18);
}

.slicom-frise__card {
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	background: var(--card);
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s;
}

.slicom-frise__card:hover {
	border-color: var(--rail-color);
	box-shadow: 0 18px 40px -18px rgb(14 31 34 / .25);
	transform: translateY(-2px);
}

.slicom-frise__image {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.slicom-frise__body {
	padding: 22px 26px 24px;
}

.slicom-frise__title {
	font-size: clamp(19px, 1.8vw, 23px);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.02em;
	color: var(--ink);
}

.slicom-frise__text {
	margin-top: 8px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--text);
}

.slicom-frise__text p + p {
	margin-top: .6em;
}

.slicom-frise__text a {
	font-weight: 500;
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-underline-offset: 3px;
}

.slicom-frise__pdf {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding: 10px 14px 10px 18px;
	border-radius: 999px;
	background: var(--ink);
	font-size: 14px;
	font-weight: 600;
	color: var(--white);
	transition: background-color .2s;
}

.slicom-frise__pdf:hover {
	background: var(--ink-2);
}

.slicom-frise__pdf-meta {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 400;
	color: var(--on-dark-2);
}

.slicom-frise__pdf .arrow {
	width: 14px;
	height: 14px;
}

/* Bureau : années collantes dans une colonne à gauche du rail */
@media (min-width: 64rem) {
	.slicom-frise {
		--rail: 248px;
		--gap-list: 40px;
	}

	.slicom-frise__year {
		display: grid;
		grid-template-columns: calc(var(--rail) - 32px) 1fr;
		column-gap: calc(32px + var(--gap-list));
		padding-left: 0;
	}

	.slicom-frise__year-label {
		position: sticky;
		top: 120px;
		flex-direction: column;
		align-items: flex-end;
		align-self: start;
		gap: 10px;
		margin: 0;
		text-align: right;
	}

	.slicom-frise__list {
		grid-column: 2;
	}

	.slicom-frise__card:has(.slicom-frise__image) {
		display: grid;
		grid-template-columns: 2fr 3fr;
	}

	.slicom-frise__card:has(.slicom-frise__image) .slicom-frise__image {
		height: 100%;
		aspect-ratio: auto;
	}
}

/* Vidéo ---------------------------------------------------------------- */

.slicom-video__frame {
	max-width: 1040px;
	margin-inline: auto;
	overflow: hidden;
	border-radius: var(--radius-sm);
	aspect-ratio: 16 / 9;
	background: var(--ink);
}

.slicom-video__frame iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Coordonnées ---------------------------------------------------------- */

.slicom-coordonnees__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 12px;
}

.slicom-coordonnees__item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px;
	border-radius: var(--radius-sm);
	background: var(--bg);
	font-style: normal;
	color: var(--text);
}

.slicom-section--grege .slicom-coordonnees__item {
	background: var(--white);
}

.slicom-coordonnees__name {
	font-size: 20px;
	font-weight: 600;
	color: var(--ink);
}

.slicom-coordonnees__item a {
	font-weight: 500;
	color: var(--ink);
}

.slicom-coordonnees__item a:hover {
	color: var(--accent);
}

/* Carte ---------------------------------------------------------------- */

.slicom-carte {
	overflow: hidden;
	border-radius: var(--radius);
	line-height: 0;
}

.slicom-carte__map {
	width: 100%;
	height: min(var(--slicom-carte-h, 500px), 70vh);
	border: 0;
	filter: grayscale(.4);
}

/* Formulaire (Contact Form 7) ----------------------------------------- */

.slicom-formulaire__inner {
	max-width: 760px;
}

.slicom-formulaire__intro {
	margin-bottom: 28px;
	color: var(--text);
	text-align: center;
}

.slicom-form {
	display: grid;
	gap: 16px;
}

.slicom-form__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.slicom-form .wpcf7-form-control-wrap {
	display: block;
}

.slicom-form :is(input:not([type="submit"], [type="checkbox"], [type="radio"], [type="hidden"]), textarea, select) {
	width: 100%;
	min-height: 52px;
	padding: 12px 20px;
	border: 1px solid var(--line-2);
	border-radius: 16px;
	background: var(--white);
	font: inherit;
	color: var(--ink);
	transition: border-color .2s, box-shadow .2s;
}

.slicom-section--blanc .slicom-form :is(input:not([type="submit"], [type="checkbox"], [type="radio"], [type="hidden"]), textarea, select) {
	background: var(--bg);
	border-color: transparent;
}

.slicom-form textarea {
	min-height: 14rem;
	resize: vertical;
}

.slicom-form :is(input, textarea, select):focus {
	border-color: var(--ink);
	outline: none;
	box-shadow: 0 0 0 3px rgb(255 122 26 / .35);
}

.slicom-form ::placeholder {
	color: var(--soft);
}

.slicom-form .wpcf7-not-valid {
	border-color: var(--error) !important;
}

.slicom-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 14px;
	color: var(--error);
}

.slicom-form .wpcf7-submit {
	min-height: 52px;
	padding: 0 28px;
	border: 0;
	border-radius: 999px;
	background: var(--accent);
	font: 600 16px var(--font);
	color: var(--ink);
	transition: background-color .2s;
}

.slicom-form .wpcf7-submit:hover,
.slicom-form .wpcf7-submit:focus-visible {
	background: #ff8c3a;
}

.slicom-formulaire .wpcf7-response-output {
	margin: 20px 0 0 !important;
	padding: 14px 20px !important;
	border-radius: 16px;
}

@media (min-width: 48rem) {
	.slicom-form {
		grid-template-columns: 1fr 1fr;
	}

	.slicom-form__field:not(.slicom-form__field--half) {
		grid-column: 1 / -1;
	}
}

/* Candidature (offres d'emploi) --------------------------------------- */

.slicom-candidature-box {
	padding: clamp(28px, 5vw, 48px);
	background: var(--white);
}

.slicom-candidature__title {
	padding-right: 48px;
	font-size: clamp(30px, 3.4vw, 44px);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -.04em;
	color: var(--ink);
}

.slicom-candidature__intro {
	margin: 8px 0 28px;
	color: var(--text);
}

.slicom-candidature label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}

.slicom-candidature :is(input:not([type="file"], [type="hidden"])) {
	background: var(--bg) !important;
	border-color: transparent !important;
}

.slicom-candidature input[type="file"] {
	padding: 10px 14px;
	border: 1px dashed var(--line-2);
	background: var(--bg);
}

.slicom-candidature input[type="file"]::file-selector-button {
	margin-right: 14px;
	padding: 8px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--ink);
	font: 600 14px var(--font);
	color: var(--white);
}

.slicom-candidature__hint {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--text-2);
}

.slicom-candidature__hint a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.slicom-candidature__hp {
	position: absolute;
	left: -9999px;
}

.slicom-candidature__message {
	margin-bottom: 24px;
	padding: 14px 20px;
	border-radius: 16px;
	font-weight: 600;
}

.slicom-candidature__message.is-success {
	background: #dff3e8;
	color: #1d6b43;
}

.slicom-candidature__message.is-error {
	background: #fde5e5;
	color: var(--error);
}

/* Pop-up de candidature ------------------------------------------------- */

.slicom-dialog {
	position: fixed;
	inset: 0;
	width: min(46rem, calc(100% - 24px));
	height: fit-content;
	max-height: calc(100dvh - 24px);
	margin: auto;
	padding: 0;
	overflow: auto;
	border: 0;
	border-radius: var(--radius);
	background: var(--white);
	box-shadow: 0 30px 80px rgb(14 31 34 / .35);
}

.slicom-dialog::backdrop {
	background: rgb(8 22 25 / .7);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.slicom-dialog__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--bg);
	color: var(--ink);
	transition: background-color .2s;
}

.slicom-dialog__close:hover {
	background: var(--accent);
}

.slicom-dialog__close svg {
	width: 20px;
	height: 20px;
}

/* Média au-dessus du texte (blocs « Texte + image » et « Section texte ») */
.slicom-texte-image--dessus .slicom-texte-image__media {
	order: -1;
}