footer .logo img {
	width: 15em !important;
}
body.bg-beige footer .footer-cols {
	background-color: var(--beige);
}

@media screen and (min-width: 1001px) {
	.flex__2cols.more-gap > div {
		padding: 0 5em;
	}
	.page-intro .wrapper {
		padding: 0 calc(var(--gutter) * 2);
	}
}

.page-intro > .content > .wrapper.bg-beige {
	background-color: var(--beige);
}

.p-rel {
	position: relative;
}

.wrapper.small-padding {
	padding-left: 3em;
	padding-right: 3em;
}

.about-jpt .flex__2cols.more-gap {
	margin-bottom: 0;
}
.about-jpt .flex__2cols > div {
	margin-bottom: 0;
}

@media screen and (min-width: 801px) {
	.about-jpt.alt .flex {
		flex-direction: row-reverse
	}
	.page-intro .flex__2cols > .page-intro-heading {
		flex: 0 0 35%;
	}
	.page-intro .flex__2cols > .page-intro-content {
		flex: 0 0 65%;
	}
	.page-intro-heading {
		position: sticky;
	  top: 100px;
	  text-align: left;
	  align-self: start;
	}
  .about-jpt .flex > .ill img {
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    object-position: center top;
  }
}

.page-intro-activities {
	display: flex;
}
.page-intro-activities > .content {
	margin-top: auto;
	margin-bottom: 0;
	flex: 0 0 100%;
}
.page-intro-activities .wrapper {
	padding-bottom: calc(var(--gutter) * 1.5) !important;
}
.page-intro-activities .flex__2cols {
	margin-bottom: 0;
}
.activities-boxes .boxes {
	--g: 0.5em;
	width: calc(100% + (var(--g) * 2));
	margin-left: calc(var(--g) * -1);
	margin-top: calc(var(--g) * -1);
}
.activities-boxes .boxes > * {
	flex: 1;
	padding: var(--g);
}
.activities-boxes .boxes .box-tvi {
	height: 100%;
}
.activities-boxes .boxes .box-tvi .ill {
	height: calc(25vw - 4em);
	max-height: 360px;
	min-height: 100px;
}
.activities-boxes .boxes .box-tvi .ill::after {
	padding-bottom: 0;
}

.activities-conseil .flex {
	background-color: var(--beige);
}
.activities-conseil.alt .flex {
	background-color: #fff;
}
@media screen and (min-width: 1001px) {
	.activities-conseil.alt > .wrapper > .flex > .ill {
		order: 2 !important;
	}
}
.activities-conseil > .wrapper > .flex > .content > *:not(:last-child) {
	margin-bottom: 2rem;
}

.header-logo { flex: 0 0 14em }
.header-logo .logo-p2c {
	display: block;
	width: 100%;
	aspect-ratio: 1103 / 330;
	background: url(../../img/logo-p2c.svg) no-repeat center / contain;
	transition: 0.5s;
}
.header-light:not(.scrolled) .header-logo .logo-p2c {
	background-image: url(../../img/logo-p2c-white.svg);
}
@media screen and (max-width: 1100px) {
	.header-logo { flex: 0 0 12em; }
}
@media screen and (max-width: 900px) {
  .header-logo {
    flex: 1;
    padding: 0;
    text-align: right;
  }
  .header-logo .logo-p2c {
  	display: inline-block;
  	width: 12em;
  }
}


.home-intro .overlay { background: rgba(0,0,0,0.3); }
.title > * > .author { display:block; font-size:0.75em; }
.title.w-medium > * { font-weight: 500 !important; }
.title.ls-plus > * { letter-spacing: 0.05em !important; }
.box-tvi.bg-icon { position: relative; overflow: clip}
.box-tvi.bg-icon::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 10em;
	height: 10em;
	background-image: url(../../img/icon-p2c.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transform: translate(40%, -25%);
	opacity: 0.5;
}
.box-tvi.bg-icon > .content { z-index:2;position:relative; }
@media screen and (min-width: 801px) {
	.home-hero .content { padding-top: calc(var(--gutter) * 3); padding-bottom: calc(var(--gutter) * 3); }
}
.logos-slider {
  overflow: hidden;
}
.logos-track {
  display: flex;
  width: max-content;
  animation: logos-defile var(--logos-duree, 60s) linear infinite;
}
.logos-slider:hover .logos-track {
  animation-play-state: paused;
}
.logos-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.logos-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 2em;
}
@keyframes logos-defile {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logos-track { animation: none; }
}
.logos-slider img {
  max-height: 6em;
  width: auto;
  display: block;
  filter: grayscale(1);
  transition: 0.5s;
}
.logos-slider img:hover {
	filter: grayscale(0);
}
.box-partners > .ill {
	flex: 0 0 50%;
	position: relative;
}
.box-partners > .content {
	flex: 0 0 50%;
	padding: calc(var(--gutter) * 2) calc(var(--gutter) * 1.25);
	text-align: left;
	background-color: var(--beige);
}
.box-pcc {
	background-color: var(--color1);
	color: #fff;
	position: relative;
	text-align: left;
}
.box-pcc > .ill {
	flex: 0 0 50%;
	position: relative;
}
.box-pcc-nav-wrapper {
	padding: calc(var(--gutter) * 1.5) calc(var(--gutter) * 1.5) calc(var(--gutter) * 1.5) calc(var(--gutter) * 1.5);
}
.box-pcc-nav {
	z-index: 2;
	position: relative;
	background: transparent;
	color: var(--black);
}
.box-pcc-nav ul {
	list-style-type: none;
}
.box-pcc-nav li a {
	display: block;
	background-color: rgba(255,255,255,0.75);
	padding: 1em 2em;
	font-weight: 600;
	line-height: 1.35em;
	font-size: 1.33em;
}
.box-pcc-nav li a:hover,
.box-pcc-nav li a.active {
	background-color: rgb(238, 49, 45, 0.5);
	color: #fff;
}
.box-pcc-nav li a span {
	display: block;
	font-weight: 400;
}
.box-pcc .slick-next, .box-pcc .slick-prev { display: none !important; }
.box-pcc-ill-slider {
	position: absolute;
}
.box-pcc-ill-slider .slick-list {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.box-pcc-ill-slider .slick-track {
	height: 100%;
}
.box-pcc-ill-slider .slick-slide {
	position: relative;
}
.box-pcc > .content {
	position: relative;
	flex: 0 0 50%;
	padding: calc(var(--gutter) * 1.5) calc(var(--gutter) * 3) calc(var(--gutter) * 1.5) calc(var(--gutter) * 1.5);
}
.box-pcc-details .number {
	font-size: 2.5em;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px;
  margin-bottom: 2rem;
}
.box-pcc-details .title + .text {
	margin-top: 1rem;
}
@media screen and (max-width: 1100px) {
	.box-partners > .content {
		padding: var(--gutter);
	}
	.box-pcc .box-pcc-nav-wrapper {
		padding: calc(var(--gutter) * 1.5) var(--gutter);
	}
	.box-pcc > .content {
		padding: calc(var(--gutter) * 1.5) var(--gutter);
	}
}
@media screen and (max-width: 750px) {
	.box-partners > .content {
		flex: 0 0 100%;
	}
	.box-partners > .ill {
		flex: 0 0 100%;
		min-height: 45vw;
	}
	.box-pcc > * {
		flex: 0 0 100% !important;
	}
}

/* ---------- Vignettes des publications (Éditos, Lettre Éco, Mensuel) ---------- */
/* Le pavé de couleur pleine est devenu un encadré : fond blanc, filet d'un pixel et texte
   à la couleur de la publication. Les logos sont ceux de la charte, sans détourage. */
.box-pub {
	--pub-color: var(--color1);
	background-color: #fff;
	border: 1px solid var(--pub-color);
	color: var(--pub-color);
}
.box-pub.cercle {
	/* Bleu relevé sur le logo du Cercle de l'Épargne. */
	--pub-color: #154874;
}
.box-pub .title > *,
.box-pub .date {
	color: var(--pub-color);
}
/* Un cran plus discret que les autres titres : la vignette est petite. */
.box-pub .title.small {
	font-size: 0.765em;
}
.box-pub .title.small > * {
	font-weight: 600;
}
.box-pub > .ill {
	/* Logo en couleur, comme dans l'en-tête : aucun filtre ne doit le retoucher. */
	background-image: url(../../img/logo-p2c.svg);
	background-size: contain;
	filter: none;
}
.box-pub.cercle > .ill {
	/* Version bicolore sur fond transparent (logo-cde-alt.svg a des aplats blancs). */
	background-image: url(../../img/logo-cde-couleur.png);
	filter: none;
}

/* filigrane de marque pour les articles sans image mise en avant */
.box-news .ill .no-thumb {
	transform: scale(0.8);
	opacity: 0.35;
}

.widget-options.years ul > li:first-child {
	width: 100% !important;
}

.footer-title {
  font-family: var(--baseFont);
  font-weight: 600;
  color: var(--color1);
  margin-bottom: 2em;
}

.hero-resp {
	overflow: clip;
}
.hero-resp video,
.hero-resp img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Desktop */
.hero-resp img {
  display: none;
}

/* Mobile */
@media (max-width: 768px) {
  .hero-resp video {
    display: none;
  }

  .hero-resp img {
    display: block;
  }
}


.box-edito .title > * {
	min-height: 3.45em;
}

@media screen and (max-width: 650px) {
  body.single .page-intro.posts-intro {
    padding-top: 3em;
  }
  body.single .page-intro.posts-intro.filters-btn {
  	bottom: auto;
  	top: 0;
  }
}


@media screen and (max-width: 1100px) {
	.home-intro > .content {
		padding-top: calc(var(--gutter) * 1.75);
	}
}
@media screen and (max-width: 900px) {
	.home-intro > .content {
		padding-top: calc(var(--gutter) * 0.75);
	}
}
@media screen and (max-width: 800px) {
	.home-intro > .content {
		padding-top: calc(var(--gutter) * 0);
	}
	.home-intro .title.bigless { font-size: 0.9em; }
}
@media screen and (max-width: 550px) {
	.home-intro .title.bigless { font-size: 0.8em; }
}

/* Hero home : mots-clés agrandis (retours client 08/2026) */
.home-intro .inner .title.small > * {
	font-size: 2.35em;
}
	@media screen and (max-width: 1150px) {
		.home-intro .inner .title.small > * { font-size: 2em; }
	}
	@media screen and (max-width: 900px) {
		.home-intro .inner .title.small > * { font-size: 1.6em; }
	}
	@media screen and (max-width: 450px) {
		.home-intro .inner .title.small > * { font-size: 1.3em; }
	}

/* ---------- Accordéon (page Société, intro) ---------- */
.accordeon-line {
	border-bottom: 1px solid rgba(10, 31, 61, 0.15);
}
.accordeon-line:first-child { border-top: 1px solid rgba(10, 31, 61, 0.15); }
.accordeon-line .headline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	width: 100%;
	padding: 1em 0;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	color: inherit;
	font: inherit;
}
.accordeon-line .headline .title > * { margin: 0; }
.accordeon-line .headline:hover .title, .accordeon-line .headline:focus-visible .title { color: var(--color1); }
.accordeon-line .headline:focus-visible { outline: 2px solid var(--color1); outline-offset: 2px; }
.accordeon-icon {
	flex: 0 0 1.5em;
	width: 1.5em;
	height: 1.5em;
	position: relative;
	border-radius: 50%;
	background: var(--color2);
	transition: 0.3s;
}
.accordeon-icon::before, .accordeon-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.7em;
	height: 2px;
	background: #fff;
	transform: translate(-50%, -50%);
	transition: 0.3s;
}
.accordeon-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordeon-line.active .accordeon-icon { background: var(--color1); }
/* Ouvert : le « + » pivote pour former une croix (les deux barres tournent de 45°). */
.accordeon-line.active .accordeon-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.accordeon-line.active .accordeon-icon::after { transform: translate(-50%, -50%) rotate(135deg); }
.accordeon-line .panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}
.accordeon-line .panel > .text { overflow: hidden; }
.accordeon-line.active .panel { grid-template-rows: 1fr; }
.accordeon-line.active .panel > .text { padding-bottom: 1.25em; }

/* ---------- Éditos : sommaire de la Lettre Éco + encart abonnement ---------- */
.edito-lettre { align-items: flex-start; }
.edito-lettre.no-sommaire > div { flex: 0 0 100%; }
.edito-lettre-sommaire { padding-right: 1em; }
.edito-lettre-sommaire .sommaire h4 {
	margin: 1.25em 0 0.35em 0;
	font-size: 0.95em;
	font-weight: 600;
	color: var(--color2);
}
.edito-lettre-sommaire .sommaire ul { margin: 0; padding-left: 1.1em; }
.edito-lettre-sommaire .sommaire li { margin: 0.15em 0; }
/* L'encart ne dépend pas de la colonne qui le porte : les éditos le posent en vis-à-vis du
   sommaire de la Lettre Éco, les articles du Mensuel sur toute la largeur. */
.box-cta {
	padding: 2em;
	border-radius: 4px;
	color: #fff;
}
.bg-color1 { background-color: var(--color1); }
.bg-color2 { background-color: var(--color2); }
.box-cta .logo {
	width: 9em;
	aspect-ratio: 1103 / 330;
	margin-bottom: 1.5em;
	background: url(../../img/logo-p2c-white.svg) no-repeat left center / contain;
}
/* Sur le fond rouge tout passe en blanc : les titres et les paragraphes portent leur propre
   couleur, l'héritage depuis .box-cta ne suffit pas. */
.box-cta .title > *,
.box-cta .text,
.box-cta .text > * { color: #fff; }
.box-cta .buttons { margin-top: 1.5em; }
/* Variante du Mensuel : fond blanc, filet rouge et texte noir, comme les vignettes .box-pub.
   Le logo repasse en version couleur — celle sur fond sombre disparaîtrait. */
.box-cta-outline {
	background-color: #fff;
	border: 2px solid var(--color1);
}
.box-cta-outline .title > *,
.box-cta-outline .text,
.box-cta-outline .text > * { color: var(--textColor); }
.box-cta-outline .logo { background-image: url(../../img/logo-p2c.svg); }
/* Le Mensuel est une publication du Cercle de l'Épargne : c'est son logo qui l'annonce.
   Version bicolore sur fond transparent, plus large que celui de P2C (logo-cde-alt.svg a
   des aplats blancs, il ne convient pas ici). */
.box-cta.logo-cde .logo {
	width: 12em;
	aspect-ratio: 354 / 66;
	background-image: url(../../img/logo-cde-couleur.png);
}
/* Titre de la lettre associée : la marge n'est posée qu'ici, la règle générale
   .post-template-default .meta sert aussi à la date en tête d'article. */
.edito-lettre-sommaire .meta { margin-top: 1em; }
/* Entre 800 et 1000 px le sommaire devenait trop étroit pour ses intitulés : on empile plus tôt
   que la règle générale de .flex__2cols (800 px), d'où la redéclaration de la largeur. */
@media screen and (max-width: 1000px) {
	.edito-lettre > div { flex: 0 0 100%; }
	.edito-lettre-sommaire { padding-right: 0; margin-bottom: 1.5em; }
}

/* ---------- Page Ouvrages ---------- */
.ouvrage-featured { gap: 3em; padding: 2.5em; border-radius: 4px; }
.ouvrage-featured > .ill { flex: 0 0 30%; }
.ouvrage-featured > .ill img, .ouvrage .ill img { display: block; width: 100%; height: auto; box-shadow: 0 10px 30px rgba(10, 31, 61, 0.15); }
.ouvrage-featured > .content { flex: 1; }
.ouvrage-featured .meta, .ouvrage .meta { margin: 0.5em 0 1em 0; font-size: 0.85em; color: var(--color1); font-weight: 600; }
/* Les ouvrages précédents reprennent le bloc de l'ouvrage mis en avant, en un peu plus compact,
   l'image passant alternativement d'un côté puis de l'autre (.reverse). */
.ouvrages-list > .ouvrage-row + .ouvrage-row { margin-top: 1.5em; }
.ouvrage-row { gap: 2.5em; padding: 2em; }
.ouvrage-row > .ill { flex: 0 0 20%; }
.ouvrage-row.reverse { flex-direction: row-reverse; }
.ouvrage-nocover { aspect-ratio: 2 / 3; background: var(--beige, #f3efe9) url(../../img/logo-p2c-mono.svg) no-repeat center / 60% auto; opacity: 0.6; }
@media screen and (max-width: 800px) {
	.ouvrage-featured { flex-wrap: wrap; gap: 1.5em; padding: 1.5em; }
	.ouvrage-featured > .ill { flex: 0 0 50%; }
	/* En colonne, row-reverse remonterait le texte au-dessus de l'image : l'alternance n'a plus
	   de sens sur une seule colonne, on repasse tout le monde dans l'ordre du HTML. */
	.ouvrage-row.reverse { flex-direction: row; }
	.ouvrage-row > .ill { flex: 0 0 40%; }
}

/* ---------- Filtre par année (archives et « Production & idées ») ---------- */
.widget-options.years .filter-year {
	display: flex;
	gap: 0.5em;
}
.widget-options.years select {
	flex: 1;
	min-width: 0;
	padding: 0.7em 2.25em 0.7em 0.9em;
	font-family: inherit;
	font-size: 1em;
	line-height: 1.2em;
	color: inherit;
	/* Fond blanc : le select doit ressortir sur le gris clair de la colonne de filtres. */
	background-color: #fff;
	/* Flèche dessinée en SVG (bleu nuit, visible sur blanc). appearance:none supprime celle
	   du navigateur : c'est cette image qui la remplace, ne pas la retirer ni passer par
	   la propriété raccourcie « background » qui écraserait l'une ou l'autre. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230a1f3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9em center;
	background-size: 0.7em auto;
	border: 1px solid rgba(10, 31, 61, 0.15);
	border-radius: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
/* Edge/IE ajoutent leur propre flèche par-dessus la nôtre. */
.widget-options.years select::-ms-expand {
	display: none;
}
.widget-options.years select:hover { color: var(--color1); }
.widget-options.years select:focus-visible {
	outline: 2px solid var(--color1);
	outline-offset: 2px;
}
.widget-options.years .filter-year-submit {
	flex: 0 0 auto;
	padding: 0.7em 1em;
	border: 0;
	background-color: var(--color2);
	color: #fff;
	font: inherit;
	cursor: pointer;
}
.widget-title label { cursor: pointer; }

/* ---------- Home : blocs « Nos activités » ---------- */
/* Format horizontal : vignette à gauche, texte à droite, une carte par ligne.
   La vignette garde le format de l'image la plus étroite (--ill-ratio, calculé dans
   page-accueil.php) : la couverture d'ouvrage remplit exactement sa vignette, sans recadrage
   ni marge, et les images plus larges sont recadrées à la même hauteur.
   Remplace le carré imposé par .box-tvi .ill::after dans start.css. */
.home-activities .boxes > * {
	flex: 0 0 100%;
}
.home-activities .box-tvi > .ill {
	flex: 0 0 30%;
	aspect-ratio: var(--ill-ratio, 1);
}
.home-activities .box-tvi > .ill::after {
	display: none;
}
.home-activities .box-tvi > .content {
	flex: 1;
}
/* Le filigrane P2C est calé en haut à droite, ce qui tombait sur l'image en format vertical mais
   passe derrière le texte en horizontal : on le renvoie dans le coin bas droit, resté libre. */
.home-activities .box-tvi.bg-icon::before {
	top: auto;
	bottom: 0;
	transform: translate(35%, 30%);
}
/* Sous 550 px la colonne d'image deviendrait trop étroite : la carte repasse en vertical. */
@media screen and (max-width: 550px) {
	.home-activities .box-tvi > .ill {
		flex: 0 0 100%;
	}
	.home-activities .boxes > * > .box-tvi {
		max-width: 22em;
		margin-left: auto;
		margin-right: auto;
	}
	/* Carte de nouveau verticale : le filigrane reprend sa place d'origine au-dessus de l'image,
	   sinon il retombe sur le lien en bas de carte. */
	.home-activities .box-tvi.bg-icon::before {
		top: 0;
		bottom: auto;
		transform: translate(40%, -25%);
	}
	/* Vignette retirée bloc par bloc, via la case « Masquer l'image sur mobile » du répéteur.
	   En vertical l'image prend toute la largeur pour peu d'apport sur certains blocs. */
	.home-activities .box-tvi > .ill.hide-on-mobile {
		display: none;
	}
	/* Sans image la carte est courte : le filigrane, quelle que soit sa position, passerait
	   derrière le texte. On le retire sur ces cartes seulement. */
	.home-activities .box-tvi.bg-icon:has(> .ill.hide-on-mobile)::before {
		display: none;
	}
}

/* ---------- Home : bandeau vidéo ---------- */
/* acfButtons() n'écrit rien quand aucun bouton n'est saisi, mais le conteneur reste dans le HTML
   avec sa marge haute de 6em. :empty ne suffirait pas (le div contient des espaces),
   d'où :not(:has(> *)) qui teste l'absence d'enfant élément. */
.home-hero .content .action:not(:has(> *)) {
	display: none;
}

/* ---------- Home : bandeau des logos clients ---------- */
.logos-slider img {
	max-width: 9em;
}

/* ---------- Home : blocs « Nos productions » ---------- */
/* Fond gris dès l'état normal ; au survol il ne reste que l'ombre portée. */
.home-news .box-news {
	background-color: var(--lightGrey);
}
.home-news .box-news .meta {
	margin-top: 1em;
	font-size: 0.85em;
	opacity: 0.65;
}

/* ---------- Marge haute des pages en .posts-intro ---------- */
/* Le 5vh valait pour tout le monde (« Production & idées », Salle de presse, archives de
   catégorie et articles) : il écrasait le 35vh de page-posts.css, et le panneau blanc
   passait sous le header fixe. Les articles, eux, n'ont pas de visuel de tête et gardent
   ce réglage — d'où la restriction à body.single. */
body.single .page-intro.posts-intro > .content {
	margin-top: 5vh;
}

/* ---------- Éditos : encart d'abonnement collant ---------- */
/* En vis-à-vis du sommaire, souvent bien plus haut que lui : l'encart suit la lecture.
   Sous 1000 px les deux colonnes s'empilent (règle plus haut), le collage n'a plus de sens.
   Le top reprend celui de .page-intro-heading : la hauteur du header fixe. */
@media screen and (min-width: 1001px) {
	.edito-lettre-cta {
		position: sticky;
		top: 110px;
		align-self: flex-start;
	}
}
.box-cta {
	padding: 2.6em 2.8em;
}

/* ---------- Page Ouvrages : intro et « Romans & Essais » ---------- */
/* .wrapper-800 ne pose qu'une max-width : sans marges automatiques le bloc restait collé
   à gauche de la section 1200, et son texte centré paraissait décalé. */
.ouvrages > .text.wrapper-800 {
	margin-left: auto;
	margin-right: auto;
}
/* Liste volontairement légère : titre et date, une ligne par texte. */
.romans-list {
	margin: 0 auto;
	padding: 0;
	list-style: none;
	text-align: left;
}
.romans-list li {
	border-top: 1px solid rgba(10, 31, 61, 0.12);
}
.romans-list li:last-child {
	border-bottom: 1px solid rgba(10, 31, 61, 0.12);
}
.romans-list a {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5em 2em;
	padding: 1em 0.25em;
	transition: 0.3s;
}
.romans-list a:hover {
	padding-left: 0.75em;
	background-color: var(--lightGrey);
}
.romans-list .the-title {
	font-family: var(--titleFont);
	font-size: 1.15em;
}
.romans-list .meta {
	font-size: 0.85em;
	color: var(--color1);
	font-weight: 600;
	white-space: nowrap;
}

/* Sous 700 px les titres passent à la ligne : la date se retrouvait tantôt à droite,
   tantôt à gauche selon la longueur du titre. On l'aligne systématiquement dessous. */
@media screen and (max-width: 700px) {
	.romans-list a {
		display: block;
	}
	.romans-list .meta {
		display: block;
		margin-top: 0.3em;
	}
}

@media screen and (max-width: 1150px) and (min-width: 1001px) {
	.box-pub .title.small {
		font-size: 0.675em;
	}
}

/* ---------- Page Activités : pavés d'intro, passage sur plusieurs lignes ---------- */
/* Quatre pavés de front tiennent jusqu'à 900 px. En dessous ils passent par deux, la
   vignette suivant la largeur disponible ; sous 500 px un seul pavé par ligne, sans
   vignette : il ne reste que l'intitulé et son lien. */
@media screen and (max-width: 900px) {
	.activities-boxes .boxes > * {
		flex: 0 0 50%;
	}
	.activities-boxes .boxes .box-tvi .ill {
		height: calc(35vw - 4em);
	}
}
@media screen and (max-width: 500px) {
	.activities-boxes .boxes > * {
		flex: 0 0 100%;
	}
	.activities-boxes .boxes .box-tvi .ill {
		display: none;
	}
}

/* ---------- Page 404 ---------- */
/* Tout centré, texte resserré : la page n'a qu'un message et quelques portes de sortie. */
.page-404 {
	text-align: center;
}
.page-404 .code-404 {
	font-size: clamp(5em, 16vw, 10em);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--color1);
	margin-bottom: 0.15em;
}
.page-404 .text {
	max-width: 40em;
	margin-left: auto;
	margin-right: auto;
}
/* Les boutons mêlent l'aplat .btn-tvi et le lien fléché .btn-arrow, de hauteurs différentes. */
.page-404 .buttons {
	align-items: center;
}