/*
 * pages-b.css — RI17, écrans 5 (Atelier), 6 (Actualités), 7 (Contact),
 * 8 (FAQ) de la planche de maquette validée.
 *
 * PÉRIMÈTRE DE CE FICHIER (mission « écrans 5 à 8 ») :
 *   template-atelier.php · template-contact.php · template-faq.php
 *   index.php · single.php · archive.php
 *
 * RÈGLE : aucune classe partagée n'est redéfinie ici. style.css (jetons,
 * .ri17-section, .ri17-contenant, .ri17-carte, .ri17-grille, .ri17-bouton,
 * .ri17-fil, .ri17-oeil, .ri17-plomb, .ri17-form, .ri17-champ, .ri17-encart,
 * .ri17-cta-bloc, .ri17-liste-lignes/.ri17-ligne…) et assets/pages.css
 * (.ri17-page-actu*, .ri17-page-atelier*, .ri17-page-contact*…) appartiennent
 * à d'autres agents et ne sont ni copiées ni surchargées. Tout ce qui est
 * propre à cette mission est préfixé .ri17-pageb-.
 *
 * SEULE EXCEPTION, imposée par la spécification (docs/09-maquette-
 * specification.md, § « Contenus de réserve ») : la classe de marquage
 * .ri17-reserve. Elle n'existe ni dans style.css ni dans pages.css au moment
 * d'écrire ce fichier ; elle est donc définie ici, une seule fois, avec la
 * seule apparence dont elle a besoin (cadre pointillé + libellé « à
 * compléter »). Si un autre lot venait à la définir aussi, les deux
 * déclarations poursuivent le même but et restent compatibles.
 *
 * Chargée après 'ri17' et 'ri17-pages' (voir l'enregistrement guardé
 * ri17_pageb_assets() en tête de chaque gabarit de ce lot).
 */

/* =========================================================================
   0. MARQUAGE DES ZONES DE RÉSERVE (spécification § Contenus de réserve)
   -------------------------------------------------------------------------
   Une zone de réserve rend la STRUCTURE de la maquette sans jamais présenter
   une donnée inventée comme vraie : ni avis nominatif, ni note, ni
   statistique, ni article, ni adresse e-mail. Elle est visuellement
   distincte (hachure pointillée, texte atténué, mention explicite) pour que
   le propriétaire repère d'un coup d'œil ce qui reste à fournir.
   ========================================================================= */
.ri17-reserve {
	border: 1px dashed var(--ri17-bleu-300);
	background:
		repeating-linear-gradient(
			135deg,
			var(--ri17-bleu-50) 0 10px,
			#fff 10px 20px
		);
	border-radius: var(--ri17-rayon-carte);
	color: var(--ri17-encre-doux);
}

/* Étiquette « à compléter ». Toujours accompagnée d'un texte visible qui dit
   ce qui manque : jamais un pictogramme seul. */
.ri17-reserve__marque {
	display: inline-block;
	margin: 0 0 var(--ri17-pas-2);
	padding: .15rem .5rem;
	border-radius: 999px;
	background: var(--ri17-bleu-900);
	color: #fff;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	line-height: 1.6;
}

.ri17-reserve__texte {
	margin: 0;
	font-size: .9rem;
	color: var(--ri17-encre-doux);
}

/* =========================================================================
   1. ATELIER — template-atelier.php (écran 5)
   ========================================================================= */

/* 1.1 Intro : texte + coches à gauche, grande photo réelle à droite. */
.ri17-pageb-atelier__duo {
	display: grid;
	gap: var(--ri17-pas-6);
	align-items: center;
}
@media (min-width: 56em) {
	.ri17-pageb-atelier__duo {
		grid-template-columns: 1fr 1fr;
		gap: var(--ri17-pas-8);
	}
}
/* La seule photo d'atelier disponible mesure 280 × 194 px : on borne sa
   largeur d'affichage pour ne pas l'agrandir jusqu'au flou. La maquette la
   montre plus grande — un fichier haute résolution la remplacera sans
   toucher au CSS. */
.ri17-pageb-atelier__photo {
	margin: 0;
	max-width: 30rem;
	margin-inline: auto;
}
.ri17-pageb-atelier__photo img {
	width: 100%;
	height: auto;
	border-radius: var(--ri17-rayon-carte);
	border: 1px solid var(--ri17-bord);
	box-shadow: var(--ri17-ombre);
}

/* Coches de la liste : le pictogramme est décoratif, le texte porte le sens. */
.ri17-pageb-coche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: none;
	border-radius: 50%;
	background: var(--ri17-bleu-50);
	margin-top: .05rem;
}
.ri17-pageb-coche svg {
	width: 15px;
	height: 15px;
	stroke: var(--ri17-bleu-700);
	stroke-width: 2.4;
	fill: none;
}

/* 1.2 Galerie de 4 vignettes (une seule photo réelle existe). */
.ri17-pageb-galerie {
	display: grid;
	gap: var(--ri17-pas-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 48em) {
	.ri17-pageb-galerie {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.ri17-pageb-galerie li {
	margin: 0;
}
.ri17-pageb-vignette {
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--ri17-rayon-carte);
	border: 1px solid var(--ri17-bord);
	background: var(--ri17-fond);
}
.ri17-pageb-vignette img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Emplacement de photo non fournie : même gabarit, contenu de réserve. */
.ri17-pageb-vignette--reserve {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	padding: var(--ri17-pas-3);
	text-align: center;
}
.ri17-pageb-vignette--reserve svg {
	width: 26px;
	height: 26px;
	stroke: var(--ri17-bleu-300);
	stroke-width: 1.8;
	fill: none;
}
.ri17-pageb-vignette--reserve .ri17-reserve__texte {
	font-size: .78rem;
	line-height: 1.35;
}

/* 1.3 Bandeau de statistiques, 4 colonnes sur fond marine. */
.ri17-pageb-bandeau-stats {
	background: var(--ri17-bleu-900);
	color: #dbe7ee;
	padding-block: clamp(2.25rem, 1.6rem + 3.5vw, 3.5rem);
}
.ri17-pageb-stats {
	display: grid;
	gap: var(--ri17-pas-5);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	text-align: center;
}
@media (min-width: 48em) {
	.ri17-pageb-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
.ri17-pageb-stats > div {
	display: flex;
	flex-direction: column;
	padding: var(--ri17-pas-3);
}
.ri17-pageb-stats dt {
	order: 2;
	font-size: .84rem;
	color: #b9cfe2;
	letter-spacing: .04em;
}
.ri17-pageb-stats dd {
	order: 1;
	margin: 0 0 .3rem;
	font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2.1rem);
	font-weight: 800;
	color: #fff;
	line-height: 1.15;
}

/* Réserve sur fond sombre : le motif clair du .ri17-reserve générique y
   serait illisible, on garde le cadre pointillé mais en valeurs inversées. */
.ri17-pageb-stats .ri17-reserve {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .38);
	color: #dbe7ee;
}
.ri17-pageb-stats .ri17-reserve dd {
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
}
.ri17-pageb-stats .ri17-reserve dt {
	color: #b9cfe2;
}
.ri17-pageb-stats .ri17-reserve .ri17-reserve__marque {
	background: #fff;
	color: var(--ri17-bleu-900);
	margin-bottom: .35rem;
}

/* =========================================================================
   2. ACTUALITÉS — index.php, archive.php, single.php (écran 6)
   ========================================================================= */

/* Carte de réserve : même boîte que .ri17-carte/.ri17-page-actu (pages.css)
   pour que la grille 3 × 2 de la maquette conserve exactement sa mise en
   page, mais sans titre, extrait ni date fabriqués. */
.ri17-pageb-actu-reserve {
	display: flex;
	flex-direction: column;
	gap: var(--ri17-pas-2);
	padding: 0;
	overflow: hidden;
	min-height: 15rem;
}
.ri17-pageb-actu-reserve__image {
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ri17-bleu-50);
	border-bottom: 1px dashed var(--ri17-bleu-300);
}
.ri17-pageb-actu-reserve__image svg {
	width: 30px;
	height: 30px;
	stroke: var(--ri17-bleu-300);
	stroke-width: 1.8;
	fill: none;
}
.ri17-pageb-actu-reserve__corps {
	padding: var(--ri17-pas-5);
	display: flex;
	flex-direction: column;
	gap: var(--ri17-pas-2);
	align-items: flex-start;
}
.ri17-pageb-actu-reserve__corps h3 {
	margin: 0;
	font-size: 1rem;
	color: var(--ri17-bleu-900);
}

/* Pied de grille : bouton centré « Voir tous les articles ». */
.ri17-pageb-actus__pied {
	margin-top: var(--ri17-pas-6);
	text-align: center;
}

/* 2.1 Article seul (single.php). La largeur de lecture vient de .ri17-article
   (style.css) : rien n'est redéfini ici, seulement l'image de couverture et
   la ligne de métadonnées. */
.ri17-pageb-article__couverture {
	margin: 0 0 var(--ri17-pas-6);
}
.ri17-pageb-article__couverture img {
	width: 100%;
	height: auto;
	border-radius: var(--ri17-rayon-carte);
}
.ri17-pageb-article__meta {
	margin: 0 0 var(--ri17-pas-5);
	color: var(--ri17-encre-doux);
	font-size: .9rem;
}

/* =========================================================================
   3. CONTACT — template-contact.php (écran 7)
   ========================================================================= */
.ri17-pageb-contact {
	display: grid;
	gap: var(--ri17-pas-6);
	align-items: start;
}
@media (min-width: 56em) {
	.ri17-pageb-contact {
		grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
		gap: var(--ri17-pas-7);
	}
}
.ri17-pageb-carte {
	background: #fff;
	border: 1px solid var(--ri17-bord);
	border-radius: var(--ri17-rayon-carte);
	padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
}
.ri17-pageb-carte > h2 {
	margin-top: 0;
}

/* Une coordonnée = pictogramme rond + libellé + valeur. */
.ri17-pageb-coord {
	list-style: none;
	margin: 0 0 var(--ri17-pas-5);
	padding: 0;
	display: grid;
	gap: var(--ri17-pas-5);
}
.ri17-pageb-coord > li {
	display: flex;
	align-items: flex-start;
	gap: var(--ri17-pas-3);
	margin: 0;
}
.ri17-pageb-coord__pict {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 11px;
	background: var(--ri17-bleu-50);
}
.ri17-pageb-coord__pict svg {
	width: 20px;
	height: 20px;
	stroke: var(--ri17-bleu-700);
	stroke-width: 1.9;
	fill: none;
}
.ri17-pageb-coord__corps {
	min-width: 0;
}
.ri17-pageb-coord__libelle {
	display: block;
	margin: 0 0 .15rem;
	font-weight: 700;
	color: var(--ri17-bleu-900);
	font-size: .95rem;
}
.ri17-pageb-coord__valeur {
	margin: 0;
	color: var(--ri17-encre-doux);
	font-size: .95rem;
	line-height: 1.55;
}
.ri17-pageb-coord__valeur a {
	font-weight: 600;
}
/* Cible tactile d'au moins 44 px de haut, comme tous les liens d'action. */
.ri17-pageb-coord__lien {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: .1rem;
	font-size: .88rem;
	font-weight: 600;
}

/* Ligne « Email » : aucune adresse n'existe → réserve, dans le même gabarit. */
.ri17-pageb-coord .ri17-reserve {
	padding: var(--ri17-pas-3);
}

/* Formulaire : Nom et Email côte à côte à partir de 34em, comme la maquette. */
.ri17-pageb-form {
	max-width: none;
}
.ri17-pageb-form__duo {
	display: grid;
	gap: 0 var(--ri17-pas-4);
	grid-template-columns: 1fr;
}
@media (min-width: 34em) {
	.ri17-pageb-form__duo {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.ri17-pageb-form textarea {
	min-height: 9.5rem;
	resize: vertical;
}
.ri17-pageb-form__envoi {
	margin-top: var(--ri17-pas-2);
}
.ri17-pageb-form__mention {
	margin: var(--ri17-pas-4) 0 0;
	font-size: .85rem;
	color: var(--ri17-encre-doux);
}

/* Formulaire de sav17.com/contact/ (2026-10-29), aux couleurs de RI17 : tuiles de choix,
   réponse e-mail / SMS, pièces jointes, consentement. Champs conditionnels : assets/contact.js. */
.ri17-fc [hidden] { display: none !important; } /* la classe ne doit jamais rendre visible un champ masqué */
.ri17-fc > h2 { margin-bottom: .35rem; }
.ri17-fc__intro { margin: 0 0 var(--ri17-pas-5); color: var(--ri17-encre-doux); font-size: .92rem; text-wrap: wrap; } /* pas d’équilibrage : il coupait la phrase au milieu */
.ri17-fc__form { display: grid; gap: 18px; }
.ri17-fc__form .ri17-champ { margin: 0; }
.ri17-fc__form input[type=text], .ri17-fc__form input[type=email], .ri17-fc__form input[type=tel], .ri17-fc__form textarea { width: 100%; max-width: none; } /* le style de base plafonne à 32rem */
.ri17-fc__groupe { border: 0; padding: 0; margin: 0; min-width: 0; }
.ri17-fc__groupe legend { padding: 0; margin-bottom: 8px; font-weight: 600; color: var(--ri17-bleu-900); }
.ri17-fc__tuiles { display: flex; gap: 8px; }
.ri17-fc__tuiles--trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ri17-fc__tuile {
	display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0;
	min-width: 6.5rem; min-height: 46px; padding: 9px 10px;
	border: 1px solid var(--ri17-bord); border-radius: var(--ri17-rayon); background: #fff;
	font-weight: 600; color: var(--ri17-encre); text-align: center; cursor: pointer;
}
.ri17-fc__tuile input, .ri17-fc__choix input, .ri17-fc__consentement input {
	accent-color: var(--ri17-bleu-700); margin: 0; width: 16px; height: 16px; flex-shrink: 0;
}
.ri17-fc__tuile:has(input:checked) { border-color: var(--ri17-bleu-700); background: var(--ri17-bleu-50); color: var(--ri17-bleu-700); }
.ri17-fc__tuile:has(input:focus-visible) { outline: 3px solid var(--ri17-bleu-100); outline-offset: 1px; }
.ri17-fc__duo { display: grid; gap: 18px var(--ri17-pas-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.ri17-fc__duo--cp { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); margin-top: 14px; }
.ri17-fc__choix { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.ri17-fc__choix label { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; font-weight: 400; color: var(--ri17-encre); cursor: pointer; }
.ri17-fc__form textarea { min-height: 9.5rem; resize: vertical; }
.ri17-fc__note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; margin: .35rem 0 0; font-size: .82rem; color: var(--ri17-encre-doux); }
.ri17-fc__pj {
	display: flex; align-items: flex-start; gap: 12px; padding: 14px;
	border: 1px dashed #c4d3df; border-radius: 10px; background: var(--ri17-fond);
}
.ri17-fc__pj > svg { width: 22px; height: 22px; flex: none; margin-top: 2px; fill: none; stroke: var(--ri17-bleu-700); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ri17-fc__pj > div { min-width: 0; }
.ri17-fc__pj p { margin: .15rem 0 0; font-size: .82rem; color: var(--ri17-encre-doux); }
.ri17-fc__pj-libelle { margin: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ri17-fc__pj-champ { display: block; width: 100%; margin-top: 10px; font-size: .85rem; }
.ri17-fc__pj-champ::file-selector-button {
	min-height: 44px; margin-right: 8px; padding: 7px 12px; cursor: pointer;
	border: 1px solid var(--ri17-bord); border-radius: var(--ri17-rayon); background: #fff; color: var(--ri17-encre); font: inherit;
}
.ri17-fc__consentement { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-weight: 400; font-size: .88rem; color: var(--ri17-encre-doux); cursor: pointer; }
.ri17-fc__consentement input { margin-top: 3px; }
.ri17-fc__consentement a { text-decoration: underline; text-underline-offset: 2px; }
.ri17-fc__envoi { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; }
.ri17-fc__envoi svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ri17-fc__envoi:disabled { opacity: .7; cursor: progress; }
.ri17-fc__erreur { color: var(--ri17-statut-erreur); }
.ri17-fc .ri17-bandeau-formulaire ul { margin: 0 0 .4rem; padding-left: 1.1rem; }
.ri17-fc .ri17-bandeau-formulaire p { margin: .25rem 0 0; }
@media (max-width: 38em) {
	.ri17-fc__tuiles--trois { grid-template-columns: 1fr; }
	.ri17-fc__tuiles--trois .ri17-fc__tuile { justify-content: flex-start; padding: 12px 15px; min-height: 50px; }
	.ri17-fc__tuiles .ri17-fc__tuile { flex: 1 1 0; }
	.ri17-fc__form input[type=text], .ri17-fc__form input[type=email], .ri17-fc__form input[type=tel], .ri17-fc__form textarea { font-size: 16px; } /* pas de zoom iOS */
}

/* =========================================================================
   4. FAQ — template-faq.php (écran 8)
   -------------------------------------------------------------------------
   Accordéon natif <details>/<summary> : zéro JavaScript. Classe distincte de
   .ri17-faq (style.css) pour ne rien surcharger — la maquette demande ici un
   pictogramme rond bleu et un chevron, pas le « + / – » de .ri17-faq.
   ========================================================================= */
.ri17-pageb-faq {
	display: grid;
	gap: var(--ri17-pas-3);
	margin-block: var(--ri17-pas-6);
	max-width: 52rem;
}
.ri17-pageb-faq__item {
	background: #fff;
	border: 1px solid var(--ri17-bord);
	border-radius: var(--ri17-rayon-carte);
	overflow: hidden;
}
.ri17-pageb-faq__item[open] {
	border-color: var(--ri17-bleu-300);
	box-shadow: var(--ri17-ombre);
}
.ri17-pageb-faq__q {
	display: flex;
	align-items: center;
	gap: var(--ri17-pas-3);
	padding: var(--ri17-pas-4) var(--ri17-pas-5);
	min-height: 56px;
	cursor: pointer;
	font-weight: 700;
	color: var(--ri17-bleu-900);
	list-style: none;
}
.ri17-pageb-faq__q::-webkit-details-marker {
	display: none;
}
.ri17-pageb-faq__q:hover {
	background: var(--ri17-bleu-50);
}
.ri17-pageb-faq__pict {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	background: var(--ri17-bleu-500);
}
.ri17-pageb-faq__pict svg {
	width: 18px;
	height: 18px;
	stroke: #fff;
	stroke-width: 2.1;
	fill: none;
}
.ri17-pageb-faq__texte {
	flex: 1;
	min-width: 0;
}
.ri17-pageb-faq__chevron {
	flex: none;
	width: 18px;
	height: 18px;
	stroke: var(--ri17-bleu-700);
	stroke-width: 2.2;
	fill: none;
	transition: transform .15s ease;
}
.ri17-pageb-faq__item[open] .ri17-pageb-faq__chevron {
	transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
	.ri17-pageb-faq__chevron {
		transition: none;
	}
}
.ri17-pageb-faq__r {
	padding: 0 var(--ri17-pas-5) var(--ri17-pas-5);
	margin: 0;
}
.ri17-pageb-faq__r > :last-child {
	margin-bottom: 0;
}
.ri17-pageb-faq__r p {
	margin: 0 0 var(--ri17-pas-3);
	color: var(--ri17-encre-doux);
}
.ri17-pageb-faq__r .ri17-reserve {
	padding: var(--ri17-pas-4);
}

/* =========================================================================
   5. GARDE-FOUS COMMUNS
   ========================================================================= */
/* Aucun débordement horizontal à 375 px : les mots longs (adresse, e-mail
   d'exemple, URL collée par un visiteur dans le message) coupent au lieu
   d'élargir la page. */
.ri17-pageb-coord__valeur,
.ri17-pageb-faq__texte,
.ri17-pageb-actu-reserve__corps {
	overflow-wrap: anywhere;
}

/* Fermetures exceptionnelles saisies dans SAV17 (2026-10-29) — carte « Nos coordonnées ». */
.ri17-pageb-fermetures { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .45rem; }
.ri17-pageb-fermetures li { margin: 0; font-size: .92rem; line-height: 1.45; color: var(--ri17-encre-doux); }
.ri17-pageb-fermetures strong { display: block; color: var(--ri17-encre); font-weight: 600; }

/* Blog : articles lus dans SAV17 (home.php, 2026-10-30). Les images viennent de sav17.com, de formats variés. */
.ri17-blog-carte { padding: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0; }
.ri17-blog-carte__image { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--ri17-fond); }
.ri17-blog-carte__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ri17-blog-carte__corps { display: grid; gap: .45rem; padding: 1.1rem 1.2rem 1.3rem; }
.ri17-carte .ri17-blog-carte__date { font-size: .85rem; }
.ri17-blog-carte h2 { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.ri17-blog-carte h2 a { text-decoration: none; }
.ri17-blog-carte h2 a::after { content: ""; position: absolute; inset: 0; }
.ri17-plomb + .ri17-blog, .ri17-plomb + .ri17-blog-message { margin-top: var(--ri17-pas-6); }
.ri17-blog-message { margin: 0; font-size: 1.05rem; }
.ri17-blog-message a { display: block; margin-top: .5rem; }
.ri17-blog-article__image { margin: 0 0 var(--ri17-pas-5); }
.ri17-blog-article__image img { display: block; max-height: 22rem; width: auto; max-width: 100%; border-radius: var(--ri17-rayon-carte); }
.ri17-blog-article__texte img { max-width: 100%; height: auto; }
.ri17-blog-article__texte figure { margin: 0 0 1rem; }
.ri17-blog-article__texte table { display: block; max-width: 100%; overflow-x: auto; }
.ri17-blog-article__pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin-top: var(--ri17-pas-6); padding-top: var(--ri17-pas-4); border-top: 1px solid var(--ri17-bord); font-size: .95rem; }