/* ==========================================================================
   Base
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mode transition différée / administration Drupal
   -------------------------------------------------------------------------- */

.delay-transition * {
	transition: none !important;
}

.delay-transition .contextual {
	display: none;
}


/* --------------------------------------------------------------------------
   Reset global
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   Structure document
   -------------------------------------------------------------------------- */

html {
	font-size: 16px;
	line-height: 1.5;
	--drupal-displace-offset-top: 0px;
	--drupal-local-tasks-offset-top: 0px;
	scroll-behavior: smooth;
	scroll-padding-top: calc(
		var(--drupal-displace-offset-top) + var(--drupal-local-tasks-offset-top) + 100px
	) !important;
	overflow-x: hidden;
}

body {
	font-family: "Inter", sans-serif;
	font-weight: 400;
	color: var(--text-color);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	scrollbar-gutter: stable;
	padding-top: calc(
		var(--drupal-displace-offset-top) + var(--drupal-local-tasks-offset-top)
	) !important;
	text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   Typographie
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "BricolageGrotesque", sans-serif;
	font-weight: 600;
	font-stretch: 100%;
	color: var(--pf-color-medium);
}

h1 {
	font-variation-settings: "opsz" 48;
	font-size: 2.875rem;
	font-weight: 400;
	line-height: 0.85em;
}

h2 {
	font-weight: 700;
	font-stretch: 110%;
	font-variation-settings: "opsz" 32;
}

h3 {
	font-size: 1.75rem;
	font-weight: 500;
}

h4 {
	font-size: 1.125rem;
	font-weight: 700;
}


/* --------------------------------------------------------------------------
   Médias
   -------------------------------------------------------------------------- */

img {
	border-radius: 10px;
}

video {
	display: block;
	width: 800px;
	max-width: 100%;
	height: auto;
	margin: auto;
}
figure {
	/* text-align: center; */
}

/* --------------------------------------------------------------------------
   Blocs et espacements génériques
   -------------------------------------------------------------------------- */

body:not(.path-frontpage) section.header-nav + main,
body:not(.path-frontpage) section.header-nav + div {
	margin-block-start: calc(180px + var(--sp2));
}
main .block {
	padding-block: var(--sp3);
}

.field--name-body > :not(:last-child),
.views-field-body > .field-content > :not(:last-child) {
	margin-block-end: var(--sp0-5);
}

:is(.pfc-wrapper-m, .pfc-wrapper-l) h2:not(.wp-block-heading) {
	margin-block-start: 0;
}


/* --------------------------------------------------------------------------
   Helpers flex
   -------------------------------------------------------------------------- */

.flexbox {
	display: flex;
	gap: var(--sp2);
}

.flexbox-wrap {
	flex-wrap: wrap;
}

.no-gap {
	gap: 0 !important;
}


/* --------------------------------------------------------------------------
   Listes inline
   -------------------------------------------------------------------------- */

.flat-list,
.flat-list-item,
.flat-list-btns > * {
	display: inline;
}

.flat-list-item:not(:last-child)::after {
	content: ",";
}


/* --------------------------------------------------------------------------
   Navigation / liens génériques
   -------------------------------------------------------------------------- */

nav li {
	font-family: "BricolageGrotesque", sans-serif;
	list-style: none;
}

.more-link a {
	color: var(--lighter-black);
	text-decoration: none;
}

.more-link a::after {
	content: " →";
}


/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */

a.btn-contour,
.btn-contour a {
	display: inline-block;
	margin-block: var(--sp0-5);
	padding: var(--sp1);
	border: 1px solid var(--pf-color-medium);
	border-radius: 50px;
	background-color: var(--pf-color-light-alpha) !important;
	color: var(--pf-color-medium) !important;
	text-decoration: none;
}

a.btn-contour:hover,
.btn-contour a:hover,
a.btn-contour.is-active,
.btn-contour.is-active a {
	background-color: var(--pf-color-medium) !important;
	color: #fff !important;
}

a.btn-plein,
.btn-plein a {
	display: inline-block;
	margin-block: var(--sp0-5);
	padding: var(--sp1);
	border-radius: 50px;
	background-color: var(--pf-color-medium) !important;
	color: #fff !important;
	text-decoration: none;
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

a.btn-plein:hover,
.btn-plein a:hover,
a.btn-plein.is-active,
.btn-plein.is-active a {
	background-color: var(--pf-color-dark) !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

a.cta,
.cta a {
	margin-block: var(--sp1);
	padding: var(--sp1-5);
	font-weight: 600;
}

a.cta::after,
.cta a::after {
	content: " →";
	display: inline-block;
	margin-inline-start: var(--sp0-5);
	transition: transform 0.2s ease;
}

a.cta:hover::after,
.cta a:hover::after {
	transform: translateX(3px);
}

a.btn-retour,
.btn-retour a {
	display: inline-block;
	margin-block: var(--sp0-5);
	padding: var(--sp1);
	border: 1px solid var(--pf-color-medium);
	border-radius: 50px;
	background-color: var(--pf-color-light-alpha) !important;
	color: var(--pf-color-medium) !important;
	text-decoration: none;
}

a.btn-retour::before,
.btn-retour a::before {
	content: "← ";
}

a.btn-mini,
.btn-mini a {
	padding-block: var(--sp0-25);
	font-size: 0.875rem;
	font-weight: 600;
}


/* --------------------------------------------------------------------------
   Messages Drupal
   -------------------------------------------------------------------------- */

div[data-drupal-messages] {
	padding: var(--sp0-75);
	border: 1px solid var(--pf-color-light);
	border-radius: 10px;
	background-color: var(--pf-color-medium);
	color: #fff;
}