/*
Theme Name: Arsenal France
Description: Thème enfant GeneratePress d’arsenalfrance.com, maquette « Carnet de match » : le trajet de Paris à l’Emirates comme navigation, les guides en billets, les encarts partenaires en talons. Socle Fox embarqué (fox-socle/). Présentation seulement. Site de fans non officiel, sans lien avec Arsenal Football Club.
Author: Fox
Template: generatepress
Version: 1.0.1
Fox Socle: 1.1.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arsenalfrance-theme
*/

/*
 * Colours: the GeneratePress palette of inc/site.php, used through its
 * variables: --contrast ink, --contrast-2 muted, --contrast-3 night,
 * --base rule, --base-2 page, --base-3 card, --accent red, --accent-2 route
 * line, --accent-3 partner stub. The dark theme redefines them below.
 *
 * Width axis: Archivo is one variable file whose @font-face declares
 * font-stretch 62% 125% (socle 1.1.1, key « stretch » of fox_socle_fonts), so
 * plain font-stretch drives the wdth axis and inherits like any font property.
 * Never the `font` shorthand: it resets font-stretch, hence the width, on the
 * element that uses it.
 */

:root {
	--af-red-fill: #c42135;
	--af-on-red: #fff;
	--af-on-night: #fff;
	--af-r: 10px;
	--af-f: "Archivo", "Arial Narrow", system-ui, sans-serif;
	--af-gutter: max(16px, env(safe-area-inset-left, 0px));
}

@media (prefers-color-scheme: dark) {
	:root {
		--contrast: #e9edf6;
		--contrast-2: #a5afc6;
		--contrast-3: #070b16;
		--base: #2c3754;
		--base-2: #0e1424;
		--base-3: #172038;
		--accent: #ff7a88;
		--accent-2: #93a5ff;
		--accent-3: #2a2616;
		--af-on-night: #e9edf6;
		color-scheme: dark;
	}
}

/* Fox Blocks and Fox Affiliate: what the socle does not map (it maps accent,
   text and surfaces on body.fox-socle-vars, at zero specificity). Set on body,
   not :root, where Fox Blocks declares its own defaults. */
body {
	--fxb-on-accent: var(--af-on-red);
	--fxb-accent-soft: rgba(196, 33, 53, .07);
	--fxb-accent-rgb: 196, 33, 53;
	--fxb-surface-sunken: var(--base-2);
	--fxb-text-tertiary: var(--contrast-2);
	--fxb-border: var(--base);
	--fxb-border-strong: var(--contrast);
	--fxb-info: var(--accent-2);
	--fxb-font-display: var(--af-f);
	--fxb-font-body: var(--af-f);
	--fxb-radius-sm: 6px;
	--fxb-radius-md: var(--af-r);
	--fxb-radius-lg: 14px;
	--fox-surface: var(--base-3);
	--fox-border: var(--base);
	--fox-font: var(--af-f);
	background: var(--base-2);
	color: var(--contrast);
	font-family: var(--af-f);
	font-weight: 400;
	font-size: 1.0625rem;
	line-height: 1.6;
}

@media (prefers-color-scheme: dark) {
	body {
		--fxb-on-accent: #0e1424;
		--fxb-accent-soft: rgba(255, 122, 136, .1);
		--fxb-accent-rgb: 255, 122, 136;
	}
}

a {
	color: var(--accent);
	text-underline-offset: .2em;
}

a:hover,
a:focus {
	color: var(--contrast);
}

:focus-visible {
	outline: 2px solid var(--accent-2);
	outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
	font-stretch: 112%;
	font-family: var(--af-f);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.01em;
	text-wrap: balance;
	color: var(--contrast);
}

h1 {
	font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem);
}

h2 {
	font-size: clamp(1.45rem, 1.15rem + 1vw, 1.9rem);
}

h3 {
	font-size: 1.25rem;
}

.af-tag,
.af-kicker,
.billet-top {
	font-stretch: 75%;
	margin: 0;
	font-weight: 700;
	font-size: .8125rem;
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent-2);
}

.af-kicker a,
.billet-top a {
	color: inherit;
	text-decoration: none;
}

.af-kicker a:hover,
.billet-top a:hover {
	text-decoration: underline;
}

/* Buttons: core button and GeneratePress buttons become pills. */
.wp-block-button__link,
button,
.button,
input[type="submit"] {
	font-stretch: 87%;
	font-family: var(--af-f);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 18px;
	border: 2px solid var(--af-red-fill);
	border-radius: 999px;
	background: var(--af-red-fill);
	color: var(--af-on-red);
	font-weight: 700;
	font-size: .9375rem;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
}

.wp-block-button__link:hover,
button:hover,
.button:hover,
input[type="submit"]:hover {
	border-color: var(--contrast);
	background: var(--contrast);
	color: var(--base-3);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--contrast);
	background: transparent;
	color: var(--contrast);
}

/* --------------------------------------------------------------------------
 * Header: the P1 logo (ticket + wordmark), pill menu. Mobile: GeneratePress's own
 * accessible toggle (button + aria-expanded), dressed as a dark pill.
 * ------------------------------------------------------------------------ */
.site-header {
	background: var(--base-3);
	border-bottom: 1px solid var(--base);
}

.site-header .inside-header {
	gap: 16px;
	padding: 14px var(--af-gutter);
}

.site-branding {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
}

.main-title {
	margin: 0;
	line-height: 0;
}

.main-title a {
	display: inline-block;
}

.af-logo {
	display: block;
	width: 222px;
	max-width: 100%;
	height: auto;
}

/* The logo spells the name: the text stays for screen readers. */
.af-title-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.site-description {
	font-stretch: 80%;
	margin: 0;
	font-weight: 500;
	font-size: .8125rem;
	line-height: 1.2;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--contrast-2);
}

.main-navigation,
.main-navigation ul ul {
	background: transparent;
}

.main-navigation .main-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.main-navigation .main-nav ul li a {
	font-stretch: 87%;
	padding: 10px 14px;
	border-radius: 999px;
	color: var(--contrast);
	font-weight: 700;
	font-size: .9375rem;
	line-height: 1;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus-within > a {
	background: var(--base-2);
	color: var(--contrast);
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	background: var(--contrast);
	color: var(--base-3);
}

.main-navigation .menu-toggle {
	font-stretch: 87%;
	padding: 11px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--contrast);
	color: var(--base-3);
	font-weight: 700;
	font-size: .875rem;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus {
	background: var(--accent-2);
	color: var(--base-3);
}

@media (max-width: 768px) {
	.site-header .inside-header {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		text-align: left;
	}

	.site-header .main-navigation {
		margin-left: auto;
	}

	.main-navigation.toggled {
		flex-basis: 100%;
	}

	.main-navigation.toggled .main-nav > ul {
		display: grid;
		gap: 0;
		margin-top: 8px;
		padding: 6px;
		border: 1px solid var(--base);
		border-radius: var(--af-r);
		background: var(--base-3);
	}

	.main-navigation.toggled .main-nav ul li a {
		padding: 14px;
		border-radius: 6px;
	}

	.af-logo {
		width: 180px;
	}

	.site-description {
		display: none;
	}
}

/* --------------------------------------------------------------------------
 * Page frame: cards on the grey page, reading column, breadcrumb, meta.
 * ------------------------------------------------------------------------ */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation {
	background: var(--base-3);
	color: var(--contrast);
}

.separate-containers .inside-article,
.separate-containers .comments-area {
	padding: clamp(20px, 3vw, 44px);
	border: 1px solid var(--base);
	border-radius: 14px;
}

.single .site-main,
.page:not(.home) .site-main {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

.af-breadcrumb {
	font-stretch: 87%;
	margin: 0 0 14px;
	font-weight: 600;
	font-size: .875rem;
	line-height: 1.3;
	color: var(--contrast-2);
}

.af-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.af-breadcrumb li + li::before {
	content: "›";
	padding: 0 .45em;
}

.af-breadcrumb a {
	color: var(--contrast-2);
}

.entry-header .entry-title {
	margin: 10px 0 14px;
	font-stretch: 115%;
}

.entry-meta {
	font-stretch: 87%;
	font-weight: 600;
	font-size: .875rem;
	line-height: 1.4;
	color: var(--contrast-2);
}

.entry-meta a {
	color: var(--contrast-2);
}

.entry-content {
	max-width: 68ch;
}

.single .entry-content > p:first-child {
	margin-bottom: 1.4em;
	font-size: 1.1875rem;
	color: var(--contrast-2);
}

.entry-content h2 {
	margin-top: 1.9em;
	margin-bottom: .6em;
}

.entry-content h3 {
	margin-top: 1.5em;
	margin-bottom: .5em;
}

/* Station rounds in front of each section title of a post, numbered by a CSS
   counter (never typed in the HTML). Not numbered: a title with the class
   no-n, and the title right before the link cards that close a post. */
.single .entry-content {
	counter-reset: af-h2;
}

.single .entry-content > h2:not(.no-n):not(:has(+ .fxb-link-cards, + .wp-block-fox-blocks-link-cards)) {
	display: flex;
	align-items: center;
	gap: 12px;
	counter-increment: af-h2;
}

.single .entry-content > h2:not(.no-n):not(:has(+ .fxb-link-cards, + .wp-block-fox-blocks-link-cards))::before {
	font-stretch: 75%;
	content: counter(af-h2);
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 5px solid var(--accent-2);
	border-radius: 50%;
	color: var(--accent-2);
	font-weight: 800;
	font-size: .875rem;
	line-height: 1;
}

.entry-content figure,
.entry-content .wp-block-image {
	margin: 1.4em 0;
}

.entry-content img {
	border-radius: var(--af-r);
}

figcaption,
.wp-element-caption {
	margin-top: 8px;
	font-size: .875rem;
	color: var(--contrast-2);
}

.entry-content .wp-block-table {
	overflow-x: auto;
}

.entry-content table {
	border-collapse: collapse;
	font-size: .9375rem;
}

.entry-content th,
.entry-content td {
	padding: 10px 12px;
	border: 1px solid var(--base);
	text-align: left;
	vertical-align: top;
}

.entry-content thead th {
	background: var(--base-2);
	font-stretch: 87%;
}

/* Table of contents: a core Details block + list, class « parcours ». */
.parcours {
	padding: 16px 18px;
	border: 1px solid var(--base);
	border-radius: var(--af-r);
}

.parcours summary {
	font-stretch: 95%;
	cursor: pointer;
	font-weight: 800;
	font-size: 1rem;
	line-height: 1.2;
}

.parcours ol,
.parcours ul {
	margin: 12px 0 0;
	padding: 0 0 0 6px;
	list-style: none;
}

.parcours li {
	position: relative;
	margin: 0;
	padding: 6px 0 6px 26px;
	border-left: 4px solid var(--accent-2);
}

.parcours li::before {
	content: "";
	position: absolute;
	top: 12px;
	left: -10px;
	width: 16px;
	height: 16px;
	border: 4px solid var(--accent-2);
	border-radius: 50%;
	background: var(--base-3);
}

.parcours li:last-child {
	border-left-color: transparent;
}

.parcours a {
	color: var(--contrast);
	font-weight: 600;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
 * Fox Blocks skins.
 * ------------------------------------------------------------------------ */
.fxb-key-points .fxb-key-points__item {
	padding: 16px;
	border: 0;
	border-radius: var(--af-r);
	background: var(--base-2);
	box-shadow: none;
}

.fxb-key-points .fxb-key-points__number {
	font-stretch: 70%;
	background: none;
	color: var(--accent);
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1;
}

.fxb-key-points .fxb-key-points__title {
	margin: 0 0 4px;
	text-wrap: pretty;
	font-weight: 800;
	font-size: 1rem;
	line-height: 1.2;
}

.fxb-key-points .fxb-key-points__content {
	font-size: .9375rem;
	color: var(--contrast-2);
}

.fxb-expert-tip {
	padding: 18px 20px;
	border: 0;
	border-left: 6px solid var(--accent-2);
	border-radius: var(--af-r);
	background: var(--base-2);
}

.fxb-expert-tip::before,
.fxb-expert-tip .fxb-expert-tip__icon {
	display: none;
}

.fxb-expert-tip .fxb-expert-tip__title {
	font-stretch: 80%;
	display: block;
	margin-bottom: 4px;
	color: var(--accent-2);
	font-weight: 800;
	font-size: .875rem;
	line-height: 1.2;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.fxb-expert-tip--warning,
.fxb-expert-tip--critical {
	border-left-color: var(--accent);
}

.fxb-expert-tip--warning .fxb-expert-tip__title,
.fxb-expert-tip--critical .fxb-expert-tip__title {
	color: var(--accent);
}

.fxb-expert-tip__content > :last-child {
	margin-bottom: 0;
}

.fxb-faq .fxb-faq__item {
	margin: 0 0 8px;
	border: 0;
	border-radius: var(--af-r);
	background: var(--base-2);
}

.fxb-faq .fxb-faq__question {
	padding: 16px 18px;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.3;
	color: var(--contrast);
}

.fxb-faq .fxb-faq__question-text {
	margin: 0;
	font: inherit;
}

.fxb-faq .fxb-faq__icon {
	color: var(--accent);
}

.fxb-faq .fxb-faq__answer {
	padding: 0 18px 16px;
	color: var(--contrast-2);
}

.fxb-lcard {
	border: 1px solid var(--base);
	border-radius: var(--af-r);
	background: var(--base-3);
	box-shadow: none;
}

.fxb-lcard:hover {
	border-color: var(--contrast);
}

.fxb-lcard .fxb-lcard__title {
	font-weight: 800;
	font-size: 1rem;
	line-height: 1.2;
	color: var(--contrast);
}

.fxb-lcard .fxb-lcard__excerpt {
	font-size: .875rem;
	color: var(--contrast-2);
}

.fxb-author {
	border-top: 1px solid var(--base);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.fxb-author .fxb-author__name {
	font-weight: 800;
	font-size: 1rem;
	line-height: 1.2;
	color: var(--contrast);
}

.fxb-author .fxb-author__desc {
	font-size: .9375rem;
	color: var(--contrast-2);
}

/* Partner stubs: pale paper, dashed, always labelled « Partenaire ». The
   same look for an affiliate-cta card and for a Group with the class stub. */
.stubs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 16px;
}

.fxb-affiliate-cta--card,
.stub {
	width: auto;
	max-width: none;
	margin: 0;
	display: grid;
	gap: 6px;
	align-content: start;
	justify-items: start;
	padding: 16px 18px;
	border: 1.5px dashed var(--contrast-2);
	border-radius: var(--af-r);
	background: var(--accent-3);
	box-shadow: none;
	color: var(--contrast);
	text-align: left;
}

.fxb-affiliate-cta--card::before,
.stub::before {
	font-stretch: 75%;
	content: "Partenaire";
	font-weight: 700;
	font-size: .8125rem;
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--contrast-2);
}

.fxb-affiliate-cta--card .fxb-affiliate-cta__name {
	font-weight: 800;
	font-size: 1.0625rem;
	line-height: 1.2;
}

.fxb-affiliate-cta--card .fxb-cta-button,
.fxb-affiliate-cta--card .fxb-cta-button:hover,
.stub a {
	font-stretch: 87%;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--accent);
	font-weight: 700;
	font-size: .9375rem;
	line-height: 1.2;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-decoration: underline;
}

.disclose {
	margin-top: 10px;
	font-size: .875rem;
	color: var(--contrast-2);
}

/* --------------------------------------------------------------------------
 * Home page (« Accueil carnet » pattern): utility classes put on core blocks
 * through « Classe(s) CSS additionnelle(s) ».
 * ------------------------------------------------------------------------ */

/* GeneratePress has no theme.json, so WordPress wraps the inner blocks of a
   Group in .wp-block-group__inner-container: the grid utilities lay out the
   cards, not that wrapper. */
:is(.situations, .stubs, .band-head, .af-wrap, .af-band, .situation) > .wp-block-group__inner-container {
	display: contents;
}

/* GeneratePress also pads that wrapper by 40px: the utilities own the gutter. */
:is(.af-wrap, .af-band) .wp-block-group__inner-container {
	max-width: none;
	padding: 0;
}
.home.page .inside-article > .entry-header {
	display: none;
}

.home.page.separate-containers .inside-article {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.home.page .site-content,
.home.page .site-main {
	margin: 0;
	padding: 0;
}

.home.page .entry-content {
	max-width: none;
}

.af-wrap {
	max-width: var(--af-wrap, 1180px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--af-gutter);
	padding-right: var(--af-gutter);
}

.af-band > .af-wrap {
	padding-left: var(--af-gutter);
	padding-right: var(--af-gutter);
}

.af-narrow {
	--af-wrap: 820px;
}

.entry-content > .af-wrap,
.entry-content > .af-band {
	margin-top: 0;
	margin-bottom: 0;
}

.af-depart {
	padding-top: 36px;
}

.af-depart h1 {
	font-stretch: 118%;
	max-width: 18ch;
	margin: 10px 0 0;
	font-size: clamp(2.1rem, 1.2rem + 4vw, 4.25rem);
}

.af-depart h1 em {
	font-style: normal;
	color: var(--accent);
}

.af-lead {
	max-width: 58ch;
	margin: 14px 0 0;
	font-size: 1.125rem;
	color: var(--contrast-2);
}

/* The route: an ordered list, one stop per item: <strong> name (a link when
   the guide is live), then a short note. */
.trajet {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.trajet::before {
	content: "";
	position: absolute;
	top: 15px;
	left: 10%;
	right: 10%;
	height: 6px;
	border-radius: 3px;
	background: var(--accent-2);
}

.trajet li {
	font-stretch: 85%;
	position: relative;
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 8px;
	margin: 0;
	padding: 0 6px;
	text-align: center;
	font-size: .875rem;
	line-height: 1.3;
	color: var(--contrast-2);
}

.trajet li::before {
	content: "";
	position: relative;
	z-index: 1;
	width: 36px;
	height: 36px;
	border: 6px solid var(--accent-2);
	border-radius: 50%;
	background: var(--base-3);
}

.trajet li:last-child::before {
	border-color: var(--af-red-fill);
	background: var(--af-red-fill);
}

.trajet strong {
	font-stretch: 95%;
	display: block;
	font-weight: 800;
	font-size: 1rem;
	line-height: 1.15;
	color: var(--contrast);
}

.trajet a {
	text-decoration: none;
}

.trajet a:hover strong {
	color: var(--accent);
	text-decoration: underline;
}

.situations {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	padding-top: 32px;
	padding-bottom: 32px;
}

.situation {
	position: relative;
	display: grid;
	align-content: start;
	gap: 6px;
	padding: 18px;
	border: 1px solid var(--base);
	border-radius: var(--af-r);
	background: var(--base-3);
}

.situation p {
	margin: 0;
}

.situation:hover,
.situation:focus-within {
	border-color: var(--contrast);
}

.situation p {
	font-size: .9375rem;
	color: var(--contrast-2);
}

.situation .af-tag {
	color: var(--accent-2);
}

.situation .situation-title {
	font-stretch: 105%;
	font-weight: 800;
	font-size: 1.125rem;
	line-height: 1.15;
	color: var(--contrast);
}

.situation-title a {
	color: var(--contrast);
	text-decoration: none;
}

/* The whole card is the link. */
.situation-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--af-r);
}

.af-band {
	padding-top: 44px;
	padding-bottom: 44px;
}

.band-head {
	gap: 16px;
	margin-bottom: 20px;
}

.band-head h2 {
	margin: 0;
	font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem);
}

.band-head p {
	margin: 0;
}

/* Guides as perforated tickets: the Post Template of a Query Loop gets the
   class « billets ». Notches are two pseudo-elements of each item. */
.billets {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.billets > li {
	position: relative;
	display: grid;
	align-content: start;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--base);
	border-radius: var(--af-r);
	background: var(--base-3);
}

.billets > li::before,
.billets > li::after {
	content: "";
	position: absolute;
	top: 36px;
	width: 18px;
	height: 18px;
	border: 1px solid var(--base);
	border-radius: 50%;
	background: var(--base-2);
}

.billets > li::before {
	left: -10px;
}

.billets > li::after {
	right: -10px;
}

.billets .billet-top {
	padding: 18px 20px 16px;
	border-bottom: 2px dashed var(--base);
	color: var(--contrast-2);
}

.billets .wp-block-post-title {
	font-stretch: 105%;
	margin: 16px 20px 8px;
	font-size: 1.25rem;
}

.billets .wp-block-post-title a {
	color: var(--contrast);
	text-decoration: none;
}

.billets .wp-block-post-title a:hover {
	color: var(--accent);
}

.billets .wp-block-post-excerpt {
	margin: 0 20px 20px;
	font-size: .9375rem;
	color: var(--contrast-2);
}

.billets .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* Seasons, as a compact score sheet on the night band. */
.memoire {
	background: var(--contrast-3);
	color: var(--af-on-night);
}

.memoire h2,
.memoire .af-tag,
.memoire a {
	color: var(--af-on-night);
}

.saisons {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--af-r);
	background: rgba(255, 255, 255, .18);
	list-style: none;
}

.saisons li {
	display: grid;
	align-content: start;
	gap: 6px;
	margin: 0;
	padding: 16px;
	background: var(--contrast-3);
	font-size: .9375rem;
	line-height: 1.35;
}

.saisons a,
.saisons .fxb-smartlink {
	display: grid;
	gap: 6px;
	text-decoration: none;
}

.saisons a:hover {
	text-decoration: underline;
}

.saisons strong {
	font-stretch: 70%;
	display: block;
	font-weight: 800;
	font-size: 1.75rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.af-partners:empty {
	display: none;
}

.af-about {
	padding-top: 44px;
	padding-bottom: 44px;
}

.af-about h2 {
	margin-bottom: 12px;
	font-size: 1.75rem;
}

/* --------------------------------------------------------------------------
 * Archives: section header, steps of the trip (category description of
 * Fox SEO, classes « etapes » / « etape »), then the posts as cards.
 * ------------------------------------------------------------------------ */
.archive .site-main,
.blog .site-main,
.search .site-main {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: start;
}

.archive .site-main > :not(article),
.blog .site-main > :not(article),
.search .site-main > :not(article) {
	grid-column: 1 / -1;
}

.archive .site-main > article,
.blog .site-main > article,
.search .site-main > article {
	margin: 0;
}

.separate-containers .site-main > .page-header {
	margin: 0;
	padding: 32px 0 8px;
	border: 0;
	background: transparent;
}

.page-header .page-title {
	font-stretch: 125%;
	margin: 0;
	font-size: clamp(2.5rem, 1.5rem + 4.5vw, 4.75rem);
}

.page-header::before {
	content: "Rubrique";
	display: block;
	margin-bottom: 12px;
	font-stretch: 75%;
	font-weight: 700;
	font-size: .8125rem;
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent-2);
}

.search .page-header::before,
.author .page-header::before,
.date .page-header::before {
	content: none;
}

.taxonomy-description {
	margin-top: 12px;
}

.term-intro,
.taxonomy-description > p:first-child {
	max-width: 60ch;
	margin: 0;
	font-size: 1.125rem;
	color: var(--contrast-2);
}

.etapes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	padding: 28px 0 16px;
}

.etape h2 {
	font-stretch: 105%;
	counter-increment: af-etape;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 6px;
	padding-bottom: 12px;
	border-bottom: 6px solid var(--accent-2);
	font-size: 1.375rem;
}

.etapes {
	counter-reset: af-etape;
}

.etape h2::before {
	font-stretch: 70%;
	content: counter(af-etape);
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--accent-2);
	color: var(--base-3);
	font-weight: 800;
	font-size: 1rem;
	line-height: 1;
}

.etape ol {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.etape li {
	margin: 0;
}

.etape li > a,
.etape li > span {
	display: grid;
	gap: 4px;
	padding: 14px 16px;
	border: 1px solid var(--base);
	border-radius: var(--af-r);
	background: var(--base-3);
	color: var(--contrast);
	text-decoration: none;
}

.etape li > a[href]:hover {
	border-color: var(--contrast);
}

.etape strong {
	font-weight: 800;
	line-height: 1.2;
}

.etape small {
	font-size: .875rem;
	color: var(--contrast-2);
}

.archive .inside-article,
.blog .inside-article,
.search .inside-article {
	padding: 20px;
}

.archive .entry-title,
.blog .entry-title,
.search .entry-title {
	font-stretch: 105%;
	font-size: 1.25rem;
}

.archive .entry-title a,
.blog .entry-title a,
.search .entry-title a {
	color: var(--contrast);
	text-decoration: none;
}

.archive .inside-article > footer.entry-meta,
.blog .inside-article > footer.entry-meta {
	display: none;
}

.archive .entry-summary,
.blog .entry-summary,
.search .entry-summary {
	font-size: .9375rem;
	color: var(--contrast-2);
}

/* --------------------------------------------------------------------------
 * Footer: widgets (if any) on the card colour, then the night band with
 * the unofficial-site notice.
 * ------------------------------------------------------------------------ */
.site-footer .footer-widgets {
	border-top: 1px solid var(--base);
	background: var(--base-3);
	color: var(--contrast);
}

.site-footer .footer-widgets a {
	color: var(--contrast);
}

.site-info {
	background: var(--contrast-3);
	color: var(--af-on-night);
	font-size: .9375rem;
}

.site-info a {
	color: var(--af-on-night);
}

.site-info .inside-site-info {
	padding: 14px var(--af-gutter);
}

.site-info .copyright-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 24px;
	width: 100%;
	text-align: left;
}

.generate-back-to-top {
	border-radius: 999px;
	background: var(--contrast);
	color: var(--base-3);
}

/* --------------------------------------------------------------------------
 * Responsive.
 * ------------------------------------------------------------------------ */
@media (max-width: 980px) {
	.situations {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.billets,
	.archive .site-main,
	.blog .site-main,
	.search .site-main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.saisons {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.etapes {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	body {
		font-size: 1rem;
	}

	.trajet {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 20px;
	}

	.trajet::before {
		top: 18px;
		bottom: 18px;
		left: 15px;
		right: auto;
		width: 6px;
		height: auto;
	}

	.trajet li {
		grid-template-columns: 36px minmax(0, 1fr);
		justify-items: start;
		column-gap: 14px;
		row-gap: 2px;
		padding: 0 0 18px;
		text-align: left;
	}

	.trajet li::before {
		grid-row: span 2;
	}

	.situations,
	.billets,
	.stubs,
	.archive .site-main,
	.blog .site-main,
	.search .site-main {
		grid-template-columns: minmax(0, 1fr);
	}

	.saisons {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.separate-containers .inside-article {
		border-radius: var(--af-r);
	}
}