/**
 * Rhône Saône — feuille de style du thème.
 *
 * Chargée après les jetons du design system (colors, typography, spacing,
 * shape, base). Elle n'utilise QUE des jetons officiels : aucune couleur,
 * taille, graisse ou durée n'est écrite en dur, à deux exceptions près,
 * documentées là où elles apparaissent (les dégradés de marque imposés par
 * CLAUDE.md, et les blancs semi-transparents posés sur ces dégradés).
 *
 * Les primitives .rs-container, .rs-section, .rs-eyebrow, .rs-display et le
 * reset viennent de tokens/base.css et ne sont pas redéfinies ici.
 */

/* =========================================================================
   1. Compléments de base
   ====================================================================== */

/* Hauteur de la barre d'en-tête qui reste collée au défilement. Les ancres,
   le sommaire collant et le tiroir s'en déduisent : la changer ici les fait
   tous suivre (C01, qui remplace sept valeurs écrites en dur). */
:root {
	--rs-header-h: 5rem;
	/* Bandeau utilitaire au-dessus de la barre (C01, option B). Il défile
	   avec la page : seule la barre reste collée. */
	--rs-topbar-h: 2.25rem;
	/* Où une ancre s'arrête : sous l'en-tête, avec une marge. */
	--rs-ancre-y: calc(var(--rs-header-h) + 1.5rem);
}

html {
	/* Une ancre ne doit pas atterrir sous l'en-tête collant. */
	scroll-padding-top: var(--rs-ancre-y);
}

/* Défilement doux pour les ancres de la page seulement (sommaire, « Votre
   devis » sur /devis/) : le clic donne le focus au lien, d'où :focus-within.
   Posé sur html sans condition, il animait aussi l'arrivée sur une ancre
   d'une AUTRE page (/devis/?…#devis, C04) ; l'animation, interrompue par la
   mise en page du chargement, laissait la page en haut. */
@media (prefers-reduced-motion: no-preference) {
	html:focus-within { scroll-behavior: smooth; }
}

body {
	/* La barre d'action mobile masque le bas de page : on lui réserve sa place. */
	padding-bottom: 0;
}

ul, ol, dl, dd, figure { margin: 0; padding: 0; }
li { list-style: none; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.rs-skip {
	position: absolute;
	top: -100%;
	left: var(--rs-space-4);
	z-index: 100;
	padding: var(--rs-space-3) var(--rs-space-4);
	background: var(--rs-action-primary);
	color: var(--rs-text-on-dark);
	border-radius: 0 0 var(--rs-radius-md) var(--rs-radius-md);
	font-family: var(--rs-font-body);
	font-weight: var(--rs-weight-semibold);
	text-decoration: none;
}

.rs-skip:focus { top: 0; }

/* =========================================================================
   2. Boutons — reprennent le composant Button du design system
   ====================================================================== */

.rs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rs-space-2);
	min-height: var(--rs-touch-min);
	padding: var(--rs-space-3) var(--rs-space-5);
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-body);
	font-weight: var(--rs-weight-semibold);
	line-height: var(--rs-leading-snug);
	text-align: center;
	text-decoration: none;
	border: var(--rs-border-width-strong) solid transparent;
	border-radius: var(--rs-radius-button);
	cursor: pointer;
	transition:
		background var(--rs-duration-fast) var(--rs-ease-standard),
		border-color var(--rs-duration-fast) var(--rs-ease-standard),
		color var(--rs-duration-fast) var(--rs-ease-standard);
}

.rs-btn:hover { text-decoration: none; }

.rs-btn--sm { padding: var(--rs-space-2) var(--rs-space-4); font-size: var(--rs-font-size-small); }
.rs-btn--lg { padding: var(--rs-space-4) var(--rs-space-6); font-size: var(--rs-font-size-body-lg); }
.rs-btn--full { width: 100%; }

.rs-btn--primary {
	background: var(--rs-action-primary);
	color: var(--rs-text-on-dark);
}
.rs-btn--primary:hover { background: var(--rs-action-primary-hover); color: var(--rs-text-on-dark); }
.rs-btn--primary:active { background: var(--rs-action-primary-active); }

.rs-btn--secondary {
	background: var(--rs-surface-card);
	border-color: var(--rs-border-control);
	color: var(--rs-text-heading);
}
.rs-btn--secondary:hover {
	border-color: var(--rs-link);
	color: var(--rs-link);
}

.rs-btn--text {
	background: transparent;
	color: var(--rs-link);
	padding-inline: 0;
}
.rs-btn--text:hover { text-decoration: underline; }

/* Une icone de bouton suit le bouton : sa couleur, et la taille de son texte.
   Sans cette regle, .rs-icon lui donnait la couleur primaire — invisible sur
   un bouton primaire — et 24 px quelle que soit la taille demandee. */
.rs-btn .rs-icon { inline-size: 1.125em; block-size: 1.125em; color: currentColor; }

/* Sur les fonds sombres : le blanc translucide est la seule valeur en dur
   admise, il n'existe pas de jeton pour une bordure posée sur un dégradé. */
.rs-on-dark .rs-btn--secondary,
.rs-btn--on-dark {
	background: transparent;
	border-color: color-mix(in srgb, var(--rs-color-white) 40%, transparent);
	color: var(--rs-text-on-dark);
}
.rs-on-dark .rs-btn--secondary:hover,
.rs-btn--on-dark:hover {
	background: color-mix(in srgb, var(--rs-color-white) 8%, transparent);
	border-color: var(--rs-text-on-dark);
	color: var(--rs-text-on-dark);
}

.rs-on-dark :focus-visible { box-shadow: var(--rs-focus-ring-on-dark); }

/* =========================================================================
   3. Éléments transverses
   ====================================================================== */

.rs-section__header {
	max-width: 40rem;
	margin-bottom: var(--rs-space-12);
}

.rs-section__header--center {
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
}

.rs-section__title {
	font-size: var(--rs-font-size-h2);
	line-height: var(--rs-leading-heading);
	letter-spacing: var(--rs-tracking-heading);
	margin-top: var(--rs-space-3);
}

.rs-section__intro {
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-body-lg);
	line-height: var(--rs-leading-body);
	color: var(--rs-text-subtle);
	margin-top: var(--rs-space-3);
}

.rs-section__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rs-space-3);
	margin-top: var(--rs-space-8);
}

.rs-section--raised { background: var(--rs-surface-raised); }
.rs-section--page { background: var(--rs-surface-page); }
.rs-section--card { background: var(--rs-surface-card); }

.rs-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--rs-space-6);
}

.rs-grid-auto {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: var(--rs-space-6);
}

@media (max-width: 960px) {
	.rs-grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.rs-grid-3 { grid-template-columns: 1fr; }
}

.rs-badge {
	display: inline-block;
	padding: var(--rs-space-1) var(--rs-space-3);
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
	font-weight: var(--rs-weight-semibold);
	background: var(--rs-surface-raised);
	color: var(--rs-link);
	border-radius: var(--rs-radius-pill);
}

.rs-chip {
	display: inline-flex;
	align-items: center;
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
	color: var(--rs-text-body);
	background: var(--rs-surface-raised);
	border: var(--rs-border-width) solid var(--rs-border-hairline);
	border-radius: var(--rs-radius-sm);
	padding: var(--rs-space-1) var(--rs-space-3);
}

.rs-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	flex: none;
	color: var(--rs-color-primary);
}

.rs-icon svg { width: 100%; height: 100%; }

/* Corps rédactionnel */
.rs-prose { max-width: var(--rs-measure); }
.rs-prose > * + * { margin-top: var(--rs-space-5); }
.rs-prose p { line-height: var(--rs-leading-body); }
.rs-prose h2 { font-size: var(--rs-font-size-h3); margin-top: var(--rs-space-12); }
.rs-prose h3 { font-size: var(--rs-font-size-body-lg); margin-top: var(--rs-space-8); }
.rs-prose ul, .rs-prose ol { padding-left: 1.3rem; display: flex; flex-direction: column; gap: var(--rs-space-2); }
.rs-prose ul li { list-style: disc; }
.rs-prose ol li { list-style: decimal; }
.rs-prose a { text-decoration: underline; text-underline-offset: 0.18em; }

/* =========================================================================
   4. En-tête
   ====================================================================== */

.rs-header {
	position: sticky;
	/* Collant décalé de la hauteur du bandeau : au défilement, le bandeau
	   sort de l'écran et la barre reste. Hauteurs fixes dès le premier rendu,
	   donc aucun décalage de mise en page. */
	top: calc(-1 * var(--rs-topbar-h));
	z-index: 50;
	background: color-mix(in srgb, var(--rs-color-white) 94%, transparent);
	backdrop-filter: saturate(140%) blur(8px);
	border-bottom: var(--rs-border-width) solid var(--rs-border-hairline);
	transition: border-color var(--rs-duration-normal) var(--rs-ease-standard);
}

.rs-header[data-scrolled="true"] { border-bottom-color: var(--rs-border-default); }

/* Bandeau utilitaire : l'ancienneté et le lieu à gauche, le téléphone et
   l'accès à droite. Une ligne, coupée par une ellipse plutôt que repliée. */
.rs-topbar {
	height: var(--rs-topbar-h);
	background: var(--rs-surface-raised);
	border-bottom: var(--rs-border-width) solid var(--rs-border-hairline);
	font-family: var(--rs-font-body);
	font-size: 0.8125rem;
	color: var(--rs-text-body);
}

.rs-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rs-space-5);
	height: 100%;
}

.rs-topbar__texte {
	min-width: 0;
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.rs-topbar__sep { margin-inline: var(--rs-space-2); color: var(--rs-text-subtle); }

.rs-topbar__actions { display: flex; align-items: center; gap: var(--rs-space-5); flex: none; }

.rs-topbar__lien {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 1.5rem;
	font-weight: var(--rs-weight-medium);
	color: var(--rs-link);
	text-decoration: none;
	white-space: nowrap;
}

.rs-topbar__lien--fort { font-weight: var(--rs-weight-semibold); color: var(--rs-text-heading); }
.rs-topbar__lien:hover { color: var(--rs-action-primary-hover); text-decoration: underline; }

.rs-header__bar {
	display: flex;
	align-items: center;
	gap: var(--rs-space-5);
	height: var(--rs-header-h);
}

.rs-logo { display: flex; align-items: center; flex: none; }
.rs-logo img { height: 3.25rem; width: auto; }
.rs-logo__text {
	font-family: var(--rs-font-heading);
	font-size: var(--rs-font-size-h3);
	font-weight: var(--rs-weight-bold);
	color: var(--rs-color-primary);
}

/* flex: 1 appartient au <nav> qui enveloppe la liste, pas a la liste. La
   liste occupe la hauteur de la barre : l'indicateur de rubrique se pose sur
   son bord bas. */
.rs-nav__wrap { display: flex; flex: 1; min-width: 0; align-self: stretch; }
.rs-nav { display: flex; align-items: stretch; gap: var(--rs-space-2); margin-left: var(--rs-space-3); flex: 1; }
.rs-nav__item { position: relative; display: flex; align-items: center; }

/* Les univers : l'élément le plus visible de l'en-tête. */
.rs-nav__link {
	font-family: var(--rs-font-body);
	font-size: 1.0625rem;
	font-weight: var(--rs-weight-semibold);
	color: var(--rs-text-heading);
	padding: var(--rs-space-2) 0 var(--rs-space-2) var(--rs-space-3);
	border-radius: var(--rs-radius-sm);
	text-decoration: none;
	white-space: nowrap;
}

.rs-nav__link:hover { color: var(--rs-link); text-decoration: none; }

.rs-nav__item.current-menu-item > .rs-nav__link,
.rs-nav__item.current-menu-ancestor > .rs-nav__link { color: var(--rs-link); }

/* Rubrique active : un filet sous l'univers, pas seulement une couleur. */
.rs-nav__item.current-menu-item::after,
.rs-nav__item.current-menu-ancestor::after {
	content: "";
	position: absolute;
	inset-inline: var(--rs-space-3) 0;
	bottom: 0;
	block-size: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--rs-color-primary);
}

/* Rubrique sans sous-menu (Nos services) : détachée des univers par un
   filet, poussée contre le devis, en style secondaire. */
.rs-nav__item--simple { margin-left: auto; }
.rs-nav__item--simple::before {
	content: "";
	inline-size: var(--rs-border-width);
	block-size: 1.5rem;
	margin-right: var(--rs-space-2);
	background: var(--rs-border-default);
}
.rs-nav__item--simple > .rs-nav__link {
	font-size: var(--rs-font-size-body);
	font-weight: var(--rs-weight-medium);
	color: var(--rs-text-body);
}
.rs-nav__item--simple.current-menu-item::after { inset-inline-start: calc(var(--rs-space-2) + var(--rs-space-3) + var(--rs-border-width)); }

.rs-nav__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.6rem;
	block-size: 1.6rem;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: var(--rs-radius-sm);
	color: var(--rs-text-subtle);
	cursor: pointer;
}

.rs-nav__chevron {
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-15%, -15%);
	transition: transform var(--rs-duration-fast) var(--rs-ease-standard);
}

.rs-nav__toggle[aria-expanded="true"] .rs-nav__chevron { transform: rotate(-135deg); }

.rs-nav__panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 70;
	min-width: 15.5rem;
	max-width: 18rem;
	padding: var(--rs-space-2);
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-md);
	box-shadow: var(--rs-shadow-md);
}

/* Pont de survol : l'interstice entre la rubrique et son panneau appartient
   au panneau, donc à la rubrique. Le pointeur qui descend, même en diagonale,
   ne quitte pas la rubrique et ne dépend plus du délai de grâce. */
.rs-nav__panel::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 100%;
	block-size: calc(var(--rs-space-2) + var(--rs-border-width));
}

.rs-nav__panel a {
	display: block;
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
	font-weight: var(--rs-weight-medium);
	color: var(--rs-text-body);
	text-decoration: none;
	padding: var(--rs-space-3);
	border-radius: var(--rs-radius-sm);
}

.rs-nav__panel a:hover {
	background: var(--rs-surface-raised);
	color: var(--rs-link);
	text-decoration: none;
}

.rs-header__actions { display: flex; align-items: center; flex: none; }

.rs-burger { display: none; margin-left: auto; }

.rs-burger button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--rs-touch-min);
	block-size: var(--rs-touch-min);
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-control);
	border-radius: var(--rs-radius-md);
	color: var(--rs-text-heading);
	cursor: pointer;
}

.rs-drawer {
	border-top: var(--rs-border-width) solid var(--rs-border-hairline);
	background: var(--rs-surface-card);
	padding: var(--rs-gutter-mobile);
	/* En haut de page, le bandeau est encore visible au-dessus de la barre. */
	max-height: calc(100dvh - var(--rs-header-h) - var(--rs-topbar-h));
	overflow-y: auto;
}

.rs-drawer__item { border-bottom: var(--rs-border-width) solid var(--rs-border-hairline); }
.rs-drawer__row { display: flex; align-items: stretch; }

.rs-drawer__link {
	flex: 1;
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-body-lg);
	font-weight: var(--rs-weight-semibold);
	color: var(--rs-text-heading);
	padding: var(--rs-space-3) var(--rs-space-1);
	text-decoration: none;
}

.rs-drawer__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--rs-touch-min);
	min-block-size: var(--rs-touch-min);
	background: transparent;
	border: none;
	color: var(--rs-text-subtle);
	cursor: pointer;
}

.rs-drawer__panel { padding: 0 0 var(--rs-space-3) var(--rs-space-1); display: flex; flex-direction: column; }

.rs-drawer__panel a {
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
	color: var(--rs-text-body);
	text-decoration: none;
	padding: var(--rs-space-2);
	min-height: var(--rs-touch-min);
	display: flex;
	align-items: center;
}

.rs-drawer__actions { display: flex; flex-direction: column; gap: var(--rs-space-2); margin-top: var(--rs-space-4); }

.rs-drawer__item--simple .rs-drawer__link {
	font-size: var(--rs-font-size-body);
	font-weight: var(--rs-weight-medium);
	color: var(--rs-text-body);
}

/* Petits portables et tablettes paysage : la même barre, resserrée. À
   1024 px sans ce resserrement, il ne restait que 8 px (C01, mesuré). */
@media (max-width: 1199px) {
	.rs-header__bar { gap: var(--rs-space-4); }
	.rs-nav { gap: var(--rs-space-1); margin-left: var(--rs-space-1); }
	.rs-nav__link { font-size: var(--rs-font-size-body); padding-left: var(--rs-space-2); }
	.rs-nav__item.current-menu-item::after,
	.rs-nav__item.current-menu-ancestor::after { inset-inline-start: var(--rs-space-2); }
	.rs-nav__item--simple.current-menu-item::after { inset-inline-start: calc(var(--rs-space-2) * 2 + var(--rs-border-width)); }
}

/* Bascule vers le menu compact avant que la navigation ne déborde. Le
   bandeau, qui porte téléphone et accès, libère la barre : elle tient les
   univers jusqu'à 1024 px (C01, mesuré). */
@media (max-width: 1023px) {
	:root { --rs-header-h: 4rem; }
	.rs-logo img { height: 2.75rem; }
	.rs-nav__wrap,
	.rs-header__actions { display: none; }
	.rs-burger { display: block; }
	/* À 768 px, le lieu était coupé de 22 px : écarts resserrés. */
	.rs-topbar__inner,
	.rs-topbar__actions { gap: var(--rs-space-3); }
	.rs-topbar__sep { margin-inline: var(--rs-space-1); }
}

/* Sur téléphone, la barre d'action du bas porte téléphone et accès : le
   bandeau s'efface. */
@media (max-width: 767px) {
	:root { --rs-topbar-h: 0px; }
	.rs-topbar { display: none; }
}

/* =========================================================================
   5. Barre d'action mobile
   ====================================================================== */

.rs-mobilebar {
	display: none;
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 60;
	background: var(--rs-surface-card);
	border-top: var(--rs-border-width) solid var(--rs-border-default);
	padding-bottom: env(safe-area-inset-bottom);
}

.rs-mobilebar__grid { display: grid; grid-template-columns: repeat(3, 1fr); }

.rs-mobilebar a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--rs-space-1);
	padding: var(--rs-space-3) 0;
	min-height: var(--rs-touch-min);
	color: var(--rs-link);
	text-decoration: none;
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
	font-weight: var(--rs-weight-semibold);
}

@media (max-width: 767px) {
	.rs-mobilebar { display: block; }
	body { padding-bottom: 4.5rem; }
}

/* =========================================================================
   6. Fil d'Ariane
   ====================================================================== */

.rs-breadcrumb {
	background: var(--rs-surface-page);
	border-bottom: var(--rs-border-width) solid var(--rs-border-hairline);
}

.rs-breadcrumb ol {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--rs-space-1);
	padding-block: var(--rs-space-3);
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
}

.rs-breadcrumb li { display: flex; align-items: center; gap: var(--rs-space-1); }
.rs-breadcrumb a { color: var(--rs-text-subtle); text-decoration: none; }
.rs-breadcrumb a:hover { color: var(--rs-link); }
.rs-breadcrumb [aria-current="page"] { color: var(--rs-text-heading); font-weight: var(--rs-weight-semibold); }

.rs-breadcrumb li + li::before {
	content: "";
	inline-size: 0.35rem;
	block-size: 0.35rem;
	border-right: 1.5px solid var(--rs-text-subtle);
	border-bottom: 1.5px solid var(--rs-text-subtle);
	transform: rotate(-45deg);
}

/* =========================================================================
   7. Bannières
   ====================================================================== */

/* Cinq variantes, une par intention de maquette : voir sections/hero.php.
   Toutes alignent le texte sur le bord gauche du conteneur large ; c'est la
   colonne de texte qui est bornée, jamais le conteneur. */
.rs-hero { position: relative; overflow: hidden; background: var(--rs-surface-page); }
.rs-hero__inner { position: relative; padding-block: var(--rs-section-y-desktop); }
.rs-hero__content { max-width: 46rem; }
.rs-hero--compact .rs-hero__inner,
.rs-hero--sobre .rs-hero__inner { padding-block: var(--rs-space-16); }

.rs-hero--sombre { background: var(--rs-gradient-dark); }

.rs-hero__media { position: absolute; inset: 0; }
.rs-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Voile de contraste : garantit la lisibilité quelle que soit la photo
   choisie en back-office. Valeurs dérivées de --rs-color-dark.
   Le dernier arrêt valait 35 % : sur une photo claire, le texte blanc n'y
   tenait que 2,09:1. Comme .rs-hero__content mesure jusqu'à 46rem, le chapô
   atteint cette zone dès que la fenêtre descend sous ~1000 px. Les arrêts
   passent à 90 / 80 / 65 %, soit 4,74:1 au pire endroit du dégradé, sur une
   photo blanche. */
.rs-hero--illustree .rs-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, color-mix(in srgb, var(--rs-color-dark) 90%, transparent) 0%, color-mix(in srgb, var(--rs-color-dark) 80%, transparent) 55%, color-mix(in srgb, var(--rs-color-dark) 65%, transparent) 100%);
}

.rs-hero__title {
	font-size: var(--rs-font-size-h1);
	line-height: var(--rs-leading-tight);
	letter-spacing: var(--rs-tracking-display);
	margin-top: var(--rs-space-4);
}

.rs-hero__lead {
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-body-lg);
	line-height: var(--rs-leading-body);
	color: var(--rs-text-subtle);
	margin-top: var(--rs-space-4);
	/* 38 à 44rem selon les maquettes ; 40rem est la valeur la plus portée. */
	max-width: 40rem;
}

.rs-hero__actions { display: flex; flex-wrap: wrap; gap: var(--rs-space-3); margin-top: var(--rs-space-8); }

.rs-hero__points {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rs-space-6);
	margin-top: var(--rs-space-8);
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
	font-weight: var(--rs-weight-medium);
}

.rs-hero__points li { display: flex; align-items: center; gap: var(--rs-space-2); }

.rs-hero.rs-on-dark .rs-hero__title { color: var(--rs-text-on-dark); }
.rs-hero.rs-on-dark .rs-hero__lead { color: var(--rs-text-on-dark-muted); }
.rs-hero.rs-on-dark .rs-hero__points { color: var(--rs-text-on-dark); }

/* Bannières à deux colonnes : CategoryHero (split) et ArticleHero (article).
   Même grille 1.1fr / 1fr ; l'article étire son visuel sur la hauteur du
   texte et le borde, la catégorie le garde au format 4:3. */
.rs-hero--split .rs-hero__inner {
	display: grid;
	gap: var(--rs-space-8);
	align-items: center;
	padding-block: var(--rs-space-12);
}

.rs-hero--split .rs-hero__content { max-width: none; }

@media (min-width: 900px) {
	.rs-hero--split .rs-hero__inner { grid-template-columns: 1.1fr 1fr; }
}

.rs-hero__figure { border-radius: var(--rs-radius-lg); overflow: hidden; }
.rs-hero__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.rs-hero--article .rs-hero__inner { align-items: stretch; }
.rs-hero--article .rs-hero__content { display: flex; flex-direction: column; justify-content: center; }
.rs-hero--article .rs-hero__figure { min-block-size: 20rem; border: var(--rs-border-width) solid var(--rs-border-default); }
.rs-hero--article .rs-hero__figure img { height: 100%; aspect-ratio: auto; }

/* =========================================================================
   8. Bandeau de réassurance
   ====================================================================== */

.rs-proof { background: var(--rs-surface-card); border-bottom: var(--rs-border-width) solid var(--rs-border-hairline); }

.rs-proof__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--rs-space-6);
	padding-block: var(--rs-space-8);
}

.rs-proof__item { display: flex; align-items: center; gap: var(--rs-space-3); }

.rs-proof__value {
	font-family: var(--rs-font-heading);
	font-size: var(--rs-font-size-h3);
	font-weight: var(--rs-weight-bold);
	color: var(--rs-text-heading);
	line-height: 1;
}

/* Une preuve qui n est pas un chiffre : le libelle prend la place de la
   valeur, et la taille d un intertitre de carte plutot que celle d un
   nombre. C est le bandeau des Professionnels. */
.rs-proof__value--texte {
	font-size: var(--rs-font-size-body-lg);
	line-height: 1.3;
}

.rs-proof__label {
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
	color: var(--rs-text-subtle);
}

.rs-proof__grid--3 { grid-template-columns: repeat(3, 1fr); }
.rs-proof__grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) { .rs-proof__grid { grid-template-columns: repeat(2, 1fr); } }
/* La maquette mobile garde ses quatre preuves en deux colonnes : elles y
   tiennent en empilant l icone au-dessus de la valeur. */
@media (max-width: 480px) {
	.rs-proof__grid { gap: var(--rs-space-4); }
	.rs-proof__item { flex-direction: column; align-items: flex-start; gap: var(--rs-space-2); }
}

/* =========================================================================
   9. Cartes
   ====================================================================== */

.rs-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
	overflow: hidden;
	transition:
		border-color var(--rs-duration-fast) var(--rs-ease-standard),
		box-shadow var(--rs-duration-fast) var(--rs-ease-standard);
}

.rs-card:hover { border-color: var(--rs-color-primary); box-shadow: var(--rs-shadow-sm); }

.rs-card__media { background: var(--rs-surface-raised); }
/* La carte de famille garde le rapport de ses attributs width / height :
   c'est lui qui donne sa largeur à l'image avant chargement. */
.rs-card:not(.rs-card--famille) .rs-card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.rs-card.rs-card--portrait .rs-card__media img { aspect-ratio: 4 / 3; }

.rs-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--rs-space-3);
	padding: var(--rs-card-pad);
	flex: 1;
}

.rs-card__title { font-size: var(--rs-font-size-h3); }
.rs-card__title a { color: inherit; text-decoration: none; }

/* La carte entière devient cliquable sans piéger le clavier : seul le lien
   reste focalisable. */
.rs-card__title a::after { content: ""; position: absolute; inset: 0; }

.rs-card__text {
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
	line-height: var(--rs-leading-body);
	color: var(--rs-text-subtle);
}

.rs-card__families { display: flex; flex-wrap: wrap; gap: var(--rs-space-2); }

.rs-card__specs { font-size: var(--rs-font-size-small); }
.rs-card__spec {
	display: flex;
	justify-content: space-between;
	gap: var(--rs-space-2);
	padding-block: var(--rs-space-1);
	border-bottom: var(--rs-border-width) solid var(--rs-border-hairline);
}
.rs-card__spec dt { color: var(--rs-text-subtle); }
.rs-card__spec dd { font-weight: var(--rs-weight-semibold); color: var(--rs-text-heading); }

.rs-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: var(--rs-space-2);
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
	font-weight: var(--rs-weight-semibold);
	color: var(--rs-link);
	text-decoration: none;
}

/* =========================================================================
   10. Listes d'éléments
   ====================================================================== */

.rs-items { display: grid; gap: var(--rs-space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }

.rs-items--compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.rs-items__item {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--rs-space-3);
	padding: var(--rs-card-pad);
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
}

.rs-items--compact .rs-items__item { border: 0; padding: 0; background: none; }

.rs-items__media { margin: calc(var(--rs-card-pad) * -1) calc(var(--rs-card-pad) * -1) 0; }
.rs-items__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.rs-items__title { font-size: var(--rs-font-size-h3); }
.rs-items__title a { color: inherit; text-decoration: none; }
.rs-items__title a::after { content: ""; position: absolute; inset: 0; }

.rs-items__text { font-family: var(--rs-font-body); font-size: var(--rs-font-size-small); color: var(--rs-text-subtle); }

/* C05, Interventions sur site : les exemples secondaires d'un métier, dans
   un volet natif (<details>) — clavier et lecteurs d'écran sans script. */
.rs-items__plus { margin-top: var(--rs-space-2); }
.rs-items__plus > summary {
	display: inline-flex;
	align-items: center;
	gap: var(--rs-space-2);
	min-height: var(--rs-touch-min);
	font-weight: var(--rs-weight-semibold);
	color: var(--rs-color-primary);
	cursor: pointer;
	list-style: none;
}
.rs-items__plus > summary::-webkit-details-marker { display: none; }
.rs-items__plus > summary::after {
	content: "";
	inline-size: 0.45rem;
	block-size: 0.45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--rs-duration-fast) var(--rs-ease-standard);
}
.rs-items__plus[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.rs-items__plus > summary:hover { text-decoration: underline; }

/* =========================================================================
   11. Comparatif
   ====================================================================== */

.rs-table__scroll {
	overflow-x: auto;
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
	background: var(--rs-surface-card);
}

.rs-table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
}

.rs-table th,
.rs-table td {
	padding: var(--rs-space-3) var(--rs-space-4);
	text-align: left;
	vertical-align: top;
	border-bottom: var(--rs-border-width) solid var(--rs-border-hairline);
}

.rs-table thead th {
	background: var(--rs-surface-raised);
	font-family: var(--rs-font-heading);
	color: var(--rs-text-heading);
	white-space: nowrap;
}

.rs-table tbody th { font-weight: var(--rs-weight-semibold); color: var(--rs-text-subtle); }
.rs-table__col--featured { background: var(--rs-surface-raised); }
.rs-table__yes { color: var(--rs-color-success); font-weight: var(--rs-weight-bold); }
.rs-table__no { color: var(--rs-text-subtle); }
.rs-table__note { margin-top: var(--rs-space-4); font-size: var(--rs-font-size-small); color: var(--rs-text-subtle); }

/* =========================================================================
   12. FAQ
   ====================================================================== */

.rs-faq {
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
	overflow: hidden;
	background: var(--rs-surface-card);
}

.rs-faq__item + .rs-faq__item { border-top: var(--rs-border-width) solid var(--rs-border-hairline); }

.rs-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rs-space-4);
	padding: var(--rs-space-4) var(--rs-card-pad);
	min-height: var(--rs-touch-min);
	font-family: var(--rs-font-heading);
	font-weight: var(--rs-weight-semibold);
	color: var(--rs-text-heading);
	cursor: pointer;
	list-style: none;
}

.rs-faq__question::-webkit-details-marker { display: none; }
.rs-faq__question:hover { background: var(--rs-surface-raised); }

.rs-faq__chevron {
	inline-size: 0.55rem;
	block-size: 0.55rem;
	flex: none;
	border-right: 2px solid var(--rs-color-primary);
	border-bottom: 2px solid var(--rs-color-primary);
	transform: rotate(45deg);
	transition: transform var(--rs-duration-fast) var(--rs-ease-standard);
}

.rs-faq__item[open] .rs-faq__chevron { transform: rotate(-135deg); }
.rs-faq__answer { padding: 0 var(--rs-card-pad) var(--rs-card-pad); color: var(--rs-text-body); }

/* =========================================================================
   13. Étapes
   ====================================================================== */

.rs-steps { display: grid; gap: var(--rs-space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.rs-steps__item { display: flex; flex-direction: column; gap: var(--rs-space-3); }

.rs-steps__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: var(--rs-radius-pill);
	background: var(--rs-action-primary);
	color: var(--rs-text-on-dark);
	font-family: var(--rs-font-heading);
	font-weight: var(--rs-weight-bold);
}

.rs-steps__title { font-size: var(--rs-font-size-body-lg); }
.rs-steps__text { font-family: var(--rs-font-body); font-size: var(--rs-font-size-small); color: var(--rs-text-subtle); }

/* =========================================================================
   14. Blocs éditoriaux et encadrés
   ====================================================================== */

.rs-block + .rs-block,
.rs-block + .rs-callout,
.rs-callout + .rs-block { margin-top: var(--rs-space-12); }

.rs-block__title { font-size: var(--rs-font-size-h3); margin-bottom: var(--rs-space-5); }

.rs-block--duo { display: grid; gap: var(--rs-space-8); align-items: center; }

@media (min-width: 768px) {
	.rs-block--duo { grid-template-columns: 1fr 1fr; }
	/* Le gabarit ecrit ses classes en francais : rs-block--image-gauche.
	   Ce selecteur disait « left » et ne matchait donc rien — le reglage
	   « Position de l image » n avait aucun effet. Vu au lot B3, ou deux
	   maquettes rangent leur visuel a gauche. */
	.rs-block--image-gauche .rs-block__text { order: 2; }
}

.rs-block__figure { border-radius: var(--rs-radius-lg); overflow: hidden; }
.rs-block__figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.rs-features { display: grid; gap: var(--rs-space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.rs-features__title { font-size: var(--rs-font-size-body-lg); margin-top: var(--rs-space-2); }
.rs-features__text { font-family: var(--rs-font-body); font-size: var(--rs-font-size-small); color: var(--rs-text-subtle); }

/* Cartes de marques d'un guide (lot B13) : PompeBassinMarques. */
.rs-features--logos { margin-block: var(--rs-space-6); }
.rs-features--logos > li {
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
	overflow: hidden;
}
.rs-features--logos .rs-features__title,
.rs-features--logos .rs-features__text { padding-inline: var(--rs-space-6); }
.rs-features--logos .rs-features__title { margin: var(--rs-space-6) 0 0.5rem; font-size: 1.0625rem; }
.rs-features--logos .rs-features__text { padding-bottom: var(--rs-space-6); font-size: 0.9rem; line-height: 1.55; color: var(--rs-text-body); }
.rs-features__logo {
	height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--rs-color-white);
	border-bottom: var(--rs-border-width) solid var(--rs-border-hairline);
}
.rs-features__logo img { max-width: 70%; max-height: 78%; width: auto; height: auto; object-fit: contain; }

.rs-figures {
	display: grid;
	gap: var(--rs-space-6);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
	padding-block: var(--rs-space-8);
	border-block: var(--rs-border-width) solid var(--rs-border-hairline);
}

.rs-figures__item { text-align: center; }
.rs-figures__value {
	font-family: var(--rs-font-heading);
	font-size: var(--rs-font-size-h2);
	font-weight: var(--rs-weight-bold);
	color: var(--rs-color-primary);
	line-height: 1;
}
.rs-figures__label { font-family: var(--rs-font-body); font-size: var(--rs-font-size-small); color: var(--rs-text-subtle); margin-top: var(--rs-space-1); }

.rs-quote {
	font-family: var(--rs-font-heading);
	font-size: var(--rs-font-size-h3);
	line-height: var(--rs-leading-heading);
	color: var(--rs-text-heading);
	border-left: 4px solid var(--rs-color-primary);
	padding-left: var(--rs-space-6);
}

.rs-quote__source {
	display: flex;
	align-items: center;
	gap: var(--rs-space-3);
	margin-top: var(--rs-space-4);
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
	color: var(--rs-text-subtle);
}

.rs-quote__portrait { inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--rs-radius-pill); object-fit: cover; }

.rs-gallery { display: grid; gap: var(--rs-space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.rs-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rs-radius-md); }
.rs-gallery--seule { grid-template-columns: 1fr; }
.rs-gallery--seule img {
	aspect-ratio: auto;
	height: clamp(12.5rem, 45vw, 18.75rem);
	border: var(--rs-border-width) solid var(--rs-border-default);
}

/* Encadrés — les trois types de la maquette */
.rs-callout {
	display: flex;
	gap: var(--rs-space-4);
	padding: var(--rs-card-pad);
	border-radius: var(--rs-radius-md);
	margin-block: var(--rs-space-8);
}

.rs-callout__title {
	display: block;
	font-family: var(--rs-font-heading);
	font-size: var(--rs-font-size-body);
	font-weight: var(--rs-weight-bold);
	color: var(--rs-text-heading);
	margin-bottom: var(--rs-space-1);
}

.rs-callout__body { font-family: var(--rs-font-body); font-size: var(--rs-font-size-small); line-height: var(--rs-leading-body); color: var(--rs-text-body); }

/* « À retenir » : teinte primaire translucide, comme KeyTakeaway. */
.rs-callout--a-retenir {
	background: color-mix(in srgb, var(--rs-color-primary) 6%, transparent);
	border: var(--rs-border-width) solid color-mix(in srgb, var(--rs-color-primary) 22%, transparent);
}
.rs-callout--a-retenir .rs-icon { color: var(--rs-color-primary); }

.rs-callout--conseil {
	background: var(--rs-surface-raised);
	border: var(--rs-border-width) solid var(--rs-border-hairline);
}
.rs-callout--conseil .rs-icon { color: var(--rs-color-logo); }

.rs-callout--avertissement {
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-left: 3px solid var(--rs-color-error);
}
.rs-callout--avertissement .rs-icon { color: var(--rs-color-error); }

/* Liste à cocher */
.rs-checklist { display: flex; flex-direction: column; gap: var(--rs-space-3); }
.rs-checklist li { display: flex; align-items: flex-start; gap: var(--rs-space-3); font-family: var(--rs-font-body); font-size: var(--rs-font-size-small); line-height: var(--rs-leading-body); }
.rs-checklist .rs-icon { inline-size: 1.6rem; block-size: 1.6rem; border-radius: var(--rs-radius-pill); background: color-mix(in srgb, var(--rs-color-primary) 10%, transparent); margin-top: 0.1rem; }

/* CTA contextuel glissé dans le texte */
.rs-inline-cta {
	display: flex;
	align-items: center;
	gap: var(--rs-space-5);
	flex-wrap: wrap;
	padding: var(--rs-card-pad);
	background: var(--rs-surface-raised);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-md);
	margin-block: var(--rs-space-12);
}

.rs-inline-cta__icon {
	inline-size: 2.6rem;
	block-size: 2.6rem;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--rs-radius-md);
	background: color-mix(in srgb, var(--rs-color-primary) 10%, transparent);
	color: var(--rs-link);
}

.rs-inline-cta__body { flex: 1; min-width: 14rem; }
.rs-inline-cta__title { display: block; font-family: var(--rs-font-body); font-weight: var(--rs-weight-bold); font-size: var(--rs-font-size-small); color: var(--rs-text-heading); }
.rs-inline-cta__text { font-family: var(--rs-font-body); font-size: var(--rs-font-size-small); color: var(--rs-text-subtle); }

/* =========================================================================
   15. Guide — corps d'article et sommaire
   ====================================================================== */

/* minmax(0, 1fr) et pas la colonne implicite : un tableau comparatif rangé
   dans l'article (Filtration piscine) élargissait sinon la colonne à sa
   largeur minimale, 34 rem, et la page débordait sur mobile. */
.rs-guide { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rs-space-12); }

/* La grille s'étire (pas d'align-items: start) : la colonne latérale prend
   la hauteur de l'article, et c'est cette course qui laisse le sommaire
   collant le suivre jusqu'à la fin du guide. Réduite à la hauteur du
   sommaire, elle le laissait partir avec le haut de page. Lot B12. */
@media (min-width: 1024px) {
	.rs-guide { grid-template-columns: minmax(0, 1fr) 17.5rem; }
}

.rs-guide__head { padding-block: var(--rs-space-4) var(--rs-space-8); border-top: var(--rs-border-width) solid var(--rs-border-hairline); }
.rs-guide__title { font-size: var(--rs-font-size-h2); line-height: var(--rs-leading-heading); margin-top: var(--rs-space-3); }
.rs-guide__lead { font-family: var(--rs-font-body); font-size: var(--rs-font-size-body-lg); line-height: var(--rs-leading-body); color: var(--rs-text-subtle); margin-top: var(--rs-space-3); }

.rs-guide__body { max-width: var(--rs-container-text); }

/* Rythme éditorial des guides (passe UI post-B13).
 *
 * Chaque bloc du guide est enveloppé dans un .rs-guide__section (ancre du
 * sommaire, lot B8). Cette enveloppe neutralisait `.rs-block + .rs-block` :
 * deux sous-parties se suivaient à 0 px, l'intertitre collé au dernier
 * paragraphe de la précédente. La maquette (ArticleSection) ne sépare pas
 * mieux : 20 px avant comme après un intertitre.
 *
 * L'échelle, prise dans les jetons, du plus lié au plus séparé :
 *   8   éléments d'une liste
 *   12  sous-intertitre → son texte ; paragraphe → liste qu'il annonce
 *   16  intertitre de sous-partie → son texte
 *   20  paragraphe → paragraphe
 *   32  encadré, visuel, cartes, dans une sous-partie ; avant un sous-intertitre
 *   48  appel à l'action contextuel
 *   64  nouvelle sous-partie titrée (48 en mobile)
 * Les marges des encadrés et des appels à l'action se fondent avec celle de
 * la sous-partie suivante : l'écart avant un intertitre reste 64 px, quoi
 * qui le précède. */
.rs-guide__body {
	--rs-flow-liste: var(--rs-space-2);
	--rs-flow-lie: var(--rs-space-3);
	--rs-flow-titre: var(--rs-space-4);
	--rs-flow-texte: var(--rs-space-5);
	--rs-flow-bloc: var(--rs-space-8);
	--rs-flow-cta: var(--rs-space-12);
	--rs-flow-partie: var(--rs-space-16);
}

.rs-guide__section { margin-top: var(--rs-flow-texte); }
.rs-guide__section[data-rs-guide-section] { margin-top: var(--rs-flow-partie); }
.rs-guide__head + .rs-guide__section,
.rs-guide__body > .rs-guide__section:first-child { margin-top: 0; }

.rs-guide__section .rs-block__title { margin-bottom: var(--rs-flow-titre); }
.rs-guide__section .rs-prose > * + * { margin-top: var(--rs-flow-texte); }
.rs-guide__section .rs-prose ul,
.rs-guide__section .rs-prose ol { gap: var(--rs-flow-liste); }
.rs-guide__section .rs-prose p + :is(ul, ol) { margin-top: var(--rs-flow-lie); }

/* Sous-intertitres saisis dans le texte (« Le goutte-à-goutte »…) : ArticleH3
   de la maquette, 18 px, plus d'air avant qu'après. */
.rs-guide__section .rs-prose :is(h3, h4) {
	font-size: 1.125rem;
	line-height: 1.3;
	margin-top: var(--rs-flow-bloc);
}
.rs-guide__section .rs-prose :is(h3, h4) + * { margin-top: var(--rs-flow-lie); }
.rs-guide__section .rs-prose > :first-child { margin-top: 0; }

/* Ce qui suit le texte dans une sous-partie : cartes, visuels, listes à
   cocher. */
.rs-guide__section .rs-prose + *,
.rs-guide__section:not([data-rs-guide-section]) > .rs-block > :first-child:not(.rs-prose) { margin-top: var(--rs-flow-bloc); }

.rs-guide__section > .rs-callout { margin-block: var(--rs-flow-bloc); }
.rs-guide__section > .rs-inline-cta { margin-block: var(--rs-flow-cta); }

@media (max-width: 767px) {
	.rs-guide__body {
		--rs-flow-partie: var(--rs-space-12);
		--rs-flow-cta: var(--rs-space-8);
		--rs-flow-bloc: var(--rs-space-6);
	}
}

/* --- Guide : les composants d'article des maquettes ------------------------
 *
 * Filtration piscine, 28 septembre 2026. FilterComparison, ProcessDiagram,
 * KitsBlock, InnovationsBlock, MaintenanceChecklist et les outils rangés dans
 * leur partie (calculateur, comparatif, aide au choix, FAQ). Même contenu,
 * même ordre, même plan que la maquette ; la présentation, elle, est reprise
 * là où la hiérarchie manquait : sous-parties signalées par un filet,
 * avantages et limites nommés, outils dans des cartes de même famille. */

/* Titre d'une liste ou d'une carte dans un guide : une étiquette, pas un
   intertitre — le plan ne compte que les parties. */
.rs-block__label {
	margin-bottom: var(--rs-space-4);
	font-family: var(--rs-font-heading);
	font-size: var(--rs-font-size-body);
	font-weight: var(--rs-weight-bold);
	color: var(--rs-text-heading);
}
p.rs-checklist-carte__titre { font-family: var(--rs-font-heading); font-weight: var(--rs-weight-bold); color: var(--rs-text-heading); }

/* Sous-partie (h4) : un filet à gauche la rattache à sa partie et sépare les
   trois filtres sans les enfermer dans des cartes. */
.rs-guide__section:has(> .rs-sous-partie) { margin-top: var(--rs-flow-bloc); }
.rs-sous-partie {
	padding-left: var(--rs-space-5);
	border-left: 2px solid color-mix(in srgb, var(--rs-color-primary) 35%, transparent);
	scroll-margin-top: var(--rs-ancre-y);
}
.rs-sous-partie__titre { margin-bottom: var(--rs-flow-lie); font-size: 1.125rem; line-height: 1.3; }
.rs-sous-partie .rs-prose + .rs-pour-contre { margin-top: var(--rs-flow-texte); }

.rs-pour-contre { display: grid; gap: var(--rs-space-3); }
@media (min-width: 640px) {
	.rs-pour-contre { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}
.rs-pour-contre__col {
	padding: var(--rs-space-4) var(--rs-space-5);
	background: var(--rs-surface-raised);
	border-radius: var(--rs-radius-md);
}
.rs-pour-contre__titre {
	margin-bottom: var(--rs-space-2);
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-eyebrow);
	font-weight: var(--rs-weight-bold);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--rs-text-subtle);
}
.rs-pour-contre__col--pour .rs-pour-contre__titre { color: var(--rs-link); }
.rs-pour-contre ul { display: flex; flex-direction: column; gap: 0.45rem; }
.rs-pour-contre li {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-family: var(--rs-font-body);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--rs-text-body);
}
.rs-pour-contre .rs-icon { flex: none; margin-top: 0.2rem; }
.rs-pour-contre__col--pour .rs-icon { color: var(--rs-color-success); }
.rs-pour-contre__col--contre .rs-icon { color: var(--rs-text-subtle); }
.rs-sous-partie__precision {
	margin-top: var(--rs-space-4);
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
	line-height: var(--rs-leading-body);
	color: var(--rs-text-subtle);
}
.rs-sous-partie__precision strong { color: var(--rs-text-heading); }

/* Schéma de circuit : cinq étapes en ligne, fléchées ; en colonne sous
   768 px, reliées par un trait. */
.rs-schema {
	margin: var(--rs-flow-bloc) 0;
	padding: var(--rs-space-8);
	background: var(--rs-color-surface);
	border: var(--rs-border-width) solid var(--rs-border-hairline);
	border-radius: var(--rs-radius-lg);
}
.rs-schema__etapes { display: grid; gap: var(--rs-space-5); list-style: none; padding: 0; }
.rs-schema__etape {
	position: relative;
	display: grid;
	grid-template-columns: 3.5rem 1fr;
	column-gap: var(--rs-space-4);
	align-items: center;
}
.rs-schema__pastille {
	grid-row: span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-pill);
	box-shadow: var(--rs-shadow-sm);
	color: var(--rs-color-primary);
}
.rs-schema__titre { align-self: end; font-family: var(--rs-font-body); font-size: 0.9375rem; color: var(--rs-text-heading); }
.rs-schema__texte { align-self: start; font-family: var(--rs-font-body); font-size: 0.8125rem; line-height: 1.45; color: var(--rs-text-subtle); }
.rs-schema__etape:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(1.75rem - 1px);
	top: 3.5rem;
	block-size: var(--rs-space-5);
	inline-size: 2px;
	background: var(--rs-border-default);
}
.rs-schema__legende {
	margin-top: var(--rs-space-6);
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
	line-height: var(--rs-leading-body);
	text-align: center;
	color: var(--rs-text-subtle);
}
@media (min-width: 768px) {
	.rs-schema__etapes { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: var(--rs-space-6); }
	.rs-schema__etape { grid-template-columns: 1fr; justify-items: center; align-content: start; row-gap: 0.4rem; text-align: center; }
	.rs-schema__pastille { grid-row: auto; margin-bottom: 0.25rem; }
	.rs-schema__titre,
	.rs-schema__texte { align-self: auto; }
	/* La flèche entre deux pastilles, au milieu de l'écart. */
	.rs-schema__etape:not(:last-child)::after {
		left: auto;
		right: calc(var(--rs-space-6) / -2 - 0.3rem);
		top: calc(1.75rem - 0.3rem);
		inline-size: 0.6rem;
		block-size: 0.6rem;
		background: none;
		border-top: 2px solid var(--rs-border-default);
		border-right: 2px solid var(--rs-border-default);
		transform: rotate(45deg);
	}
}

/* Deux listes « Carte » côte à côte : kits, entretien. */
.rs-guide__cartes { display: grid; gap: var(--rs-space-4); margin-top: var(--rs-flow-bloc); }
@media (min-width: 640px) {
	.rs-guide__cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.rs-guide__cartes .rs-checklist-carte__note { margin-top: auto; font-style: italic; }

/* Cartes d'atouts dans un guide : le bénéfice en couleur sous le texte. */
.rs-features__complement {
	font-family: var(--rs-font-body);
	font-size: 0.8125rem;
	font-weight: var(--rs-weight-semibold);
	line-height: 1.5;
	color: var(--rs-link);
}
.rs-guide__body .rs-features--cartes .rs-features__title { font-family: var(--rs-font-heading); font-weight: var(--rs-weight-bold); color: var(--rs-text-heading); }
.rs-guide__body .rs-features--cartes .rs-features__corps { padding: var(--rs-space-5); }

/* Outils de la page rendus dans leur partie. Une même famille de cartes :
   fond de carte et bordure, sauf l'aide au choix, teintée comme dans la
   maquette pour se distinguer du calculateur qui la précède de loin. */
.rs-outil {
	padding: var(--rs-space-8);
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
	box-shadow: var(--rs-shadow-sm);
}
.rs-outil__titre {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--rs-font-heading);
	font-size: var(--rs-font-size-body);
	font-weight: var(--rs-weight-bold);
	color: var(--rs-text-heading);
}
.rs-outil__titre .rs-icon { flex: none; color: var(--rs-color-primary); }
.rs-outil__intro {
	margin-top: 0.35rem;
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
	line-height: var(--rs-leading-body);
	color: var(--rs-text-subtle);
}
.rs-outil__tete + .rs-calc { margin-top: var(--rs-space-6); }
.rs-outil .rs-calc { padding: 0; background: none; border-radius: 0; }
@media (min-width: 640px) {
	.rs-outil--calcul .rs-calc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rs-space-6); align-items: stretch; }
	.rs-outil--calcul .rs-calc__output { margin-top: 0; }
}
.rs-outil--calcul .rs-calc__output {
	background: color-mix(in srgb, var(--rs-color-primary) 7%, transparent);
	border-color: transparent;
}
.rs-calc__note--calcul { font-style: italic; }

.rs-outil--reperes {
	background: var(--rs-color-surface);
	border-color: var(--rs-border-hairline);
	box-shadow: none;
}
.rs-outil--reperes .rs-calc__reperes-titre { margin-top: 0; font-size: 1.125rem; }
.rs-outil--reperes .rs-calc__reperes { margin-top: var(--rs-space-5); }
.rs-outil--reperes .rs-calc__note { margin-top: var(--rs-space-5); font-style: italic; }

.rs-outil--comparatif {
	padding: var(--rs-space-3);
	border-color: var(--rs-color-primary);
	box-shadow: var(--rs-shadow-md);
}
.rs-outil--comparatif .rs-table__scroll { border: 0; }

.rs-outil--faq { padding: 0; border: 0; box-shadow: none; background: none; }

/* Sous 640 px, le comparatif rangé dans l'article s'empile en cartes, une
   par critère, chaque valeur précédée du nom de sa colonne — comme
   ComparisonTable (« cards empilées sur mobile »). Hors article, le tableau
   garde son défilement horizontal. */
@media (max-width: 639px) {
	.rs-outil--comparatif { padding: 0; border: 0; box-shadow: none; background: none; }
	.rs-outil--comparatif .rs-table__scroll { overflow: visible; background: none; border-radius: 0; }
	.rs-outil--comparatif .rs-table { min-width: 0; }
	.rs-outil--comparatif .rs-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
	.rs-outil--comparatif .rs-table,
	.rs-outil--comparatif .rs-table tbody { display: block; }
	.rs-outil--comparatif .rs-table tr {
		display: block;
		padding: var(--rs-space-4) var(--rs-space-5);
		background: var(--rs-surface-card);
		border: var(--rs-border-width) solid var(--rs-border-default);
		border-radius: var(--rs-radius-md);
	}
	.rs-outil--comparatif .rs-table tr + tr { margin-top: var(--rs-space-3); }
	.rs-outil--comparatif .rs-table :is(th, td) { display: block; padding: 0; border: 0; }
	.rs-outil--comparatif .rs-table tbody th { margin-bottom: var(--rs-space-2); font-family: var(--rs-font-heading); font-weight: var(--rs-weight-bold); color: var(--rs-text-heading); }
	.rs-outil--comparatif .rs-table td { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--rs-space-3); padding-block: 0.3rem; color: var(--rs-text-body); }
	.rs-outil--comparatif .rs-table td::before { content: attr(data-label); font-weight: var(--rs-weight-semibold); color: var(--rs-text-subtle); }
}

/* Deux outils qui se suivent (tableau puis aide au choix) : un écart de bloc. */
.rs-guide__section:has(> .rs-block--outil) + .rs-guide__section:has(> .rs-block--outil) > .rs-block--outil > .rs-outil { margin-top: var(--rs-space-6); }

@media (max-width: 639px) {
	.rs-outil,
	.rs-schema { padding: var(--rs-space-5); }
	.rs-outil--faq { padding: 0; }
	.rs-sous-partie { padding-left: var(--rs-space-4); }
}

/* Décalage d'ancre : pas de marge ici. scroll-padding-top (section 1) arrête
   déjà l'ancre sous l'en-tête ; l'ancien décalage de 3 rem s'y ajoutait et
   posait l'intertitre à 144 px au lieu des 96 de la maquette. Lot B12. */

.rs-toc {
	position: sticky;
	top: calc(var(--rs-header-h) + 2rem);
	max-height: calc(100vh - var(--rs-header-h) - 3.5rem);
	overflow-y: auto;
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
	padding: var(--rs-card-pad);
}

.rs-toc__label {
	display: block;
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-eyebrow);
	font-weight: var(--rs-weight-bold);
	letter-spacing: var(--rs-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--rs-text-subtle);
	margin-bottom: var(--rs-space-3);
}

.rs-toc a {
	display: block;
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
	line-height: var(--rs-leading-snug);
	padding: var(--rs-space-2) 0 var(--rs-space-2) var(--rs-space-3);
	border-left: 2px solid var(--rs-border-hairline);
	color: var(--rs-text-subtle);
	font-weight: var(--rs-weight-medium);
	text-decoration: none;
	transition: color var(--rs-duration-fast) var(--rs-ease-standard), border-color var(--rs-duration-fast) var(--rs-ease-standard);
}

.rs-toc__haut {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1.1rem;
	font-family: var(--rs-font-body);
	font-size: 0.8125rem;
	font-weight: var(--rs-weight-semibold);
	color: var(--rs-text-subtle);
	text-decoration: none;
}
.rs-toc .rs-toc__haut { border-left: 0; padding: var(--rs-space-1) 0; }
.rs-toc__haut .rs-icon { color: currentColor; }

.rs-toc a[aria-current="true"] {
	border-left-color: var(--rs-color-primary);
	color: var(--rs-link);
	font-weight: var(--rs-weight-semibold);
}

.rs-toc--mobile {
	position: static;
	max-height: none;
	padding: 0;
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-md);
	overflow: hidden;
}

/* MobileToC : collant sous l'en-tête, au-dessus du texte qui défile. La
   liste ouverte défile d'elle-même si elle dépasse l'écran. */
.rs-toc-mobile { position: sticky; top: calc(var(--rs-header-h) + 0.25rem); z-index: 40; margin-bottom: var(--rs-space-8); }
.rs-toc--mobile[open] ul { max-height: calc(100dvh - var(--rs-header-h) - 5.5rem); overflow-y: auto; }
.rs-toc--mobile a[aria-current="true"] { color: var(--rs-link); font-weight: var(--rs-weight-semibold); }

.rs-toc--mobile > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rs-space-3);
	padding: var(--rs-space-3) var(--rs-space-4);
	font-family: var(--rs-font-body);
	font-weight: var(--rs-weight-semibold);
	color: var(--rs-text-heading);
	cursor: pointer;
	list-style: none;
}

.rs-toc--mobile > summary::-webkit-details-marker { display: none; }
.rs-toc--mobile > summary > span { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
/* Une seule ligne : sur deux, le bloc collant doublait de hauteur et
   recouvrait l'intertitre sur lequel l'ancre venait de s'arrêter. */
.rs-toc--mobile > summary > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-toc--mobile > summary > span > .rs-icon { flex: none; color: var(--rs-color-primary); }
.rs-toc--mobile > summary > .rs-icon { flex: none; color: var(--rs-text-subtle); transition: transform var(--rs-duration-fast) var(--rs-ease-standard); }
.rs-toc--mobile[open] > summary > .rs-icon { transform: rotate(180deg); }
.rs-toc--mobile ul { border-top: var(--rs-border-width) solid var(--rs-border-hairline); padding-bottom: var(--rs-space-2); }
.rs-toc--mobile a { border-left: 0; padding: var(--rs-space-3) var(--rs-space-4); }

@media (min-width: 1024px) { .rs-toc-mobile { display: none; } }

/* Sous 1024 px, le sommaire collant s'ajoute à l'en-tête : une ancre doit
   s'arrêter sous les deux. */
@media (max-width: 1023px) {
	html:has(.rs-toc-mobile) { scroll-padding-top: calc(var(--rs-header-h) + 4.5rem); }
}
@media (max-width: 1023px) { .rs-guide__aside { display: none; } }

/* =========================================================================
   16. Avis
   ====================================================================== */

.rs-reviews__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: var(--rs-space-4);
	margin-bottom: var(--rs-space-12);
}

/* Parité ReviewsSection (passe UI post-B13) : la colonne du titre mesure
   36 rem, ce qui renvoie « vérifiable. » à la ligne comme dans la maquette ;
   à 599 px le titre tenait sur une ligne. */
.rs-reviews__intro { max-width: 36rem; }

/* Card padded de la maquette : 0,85 × 1,1 rem, 0,85 rem entre les éléments. */
.rs-rating-badge {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.85rem 1.1rem;
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
	box-shadow: var(--rs-shadow-sm);
}

.rs-rating-badge__score { font-family: var(--rs-font-body); font-weight: var(--rs-weight-bold); font-size: 1.0625rem; color: var(--rs-text-heading); }
.rs-rating-badge__count { font-family: var(--rs-font-body); font-size: var(--rs-font-size-small); color: var(--rs-text-subtle); }

/* StarRating du design system : étoiles pleines, fond couleur de bordure,
   note orange rognée à sa largeur (4,5 → quatre étoiles et demie). */
.rs-stars { position: relative; display: inline-block; line-height: 0; flex: none; }
.rs-stars__fond,
.rs-stars__note { display: inline-flex; gap: 2px; white-space: nowrap; }
.rs-stars__fond { fill: var(--rs-color-border); }
.rs-stars__note { position: absolute; inset-block: 0; inset-inline-start: 0; overflow: hidden; fill: var(--rs-color-rating); }
.rs-stars svg { flex: none; }

/* Les cartes se superposent dans la même cellule : la hauteur reste stable
   d'un avis à l'autre, sans saut de mise en page. */
.rs-reviews__track { display: grid; grid-template-areas: "card"; margin-bottom: var(--rs-space-5); }

/* visibility, et pas seulement opacity : une diapositive à opacité nulle reste
   dans l'ordre de tabulation. Les cartes « réalisations » portent des boutons —
   poignée du comparateur, avant / après — donc le clavier traversait des
   contrôles invisibles. visibility: hidden les retire du parcours *et* de l'arbre
   d'accessibilité, ce qui lève du même coup l'aria-hidden posé sur du contenu
   focalisable. Le fondu survit : la bascule de visibility est différée de la
   durée du fondu à la fermeture, immédiate à l'ouverture. */
.rs-reviews__slide {
	grid-area: card;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		opacity var(--rs-duration-normal) var(--rs-ease-standard),
		visibility 0s linear var(--rs-duration-normal);
}

.rs-reviews__slide[data-active="true"] {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		opacity var(--rs-duration-normal) var(--rs-ease-standard),
		visibility 0s;
}

.rs-review {
	display: flex;
	flex-direction: column;
	gap: var(--rs-space-4);
	padding: var(--rs-card-pad-lg);
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
	box-shadow: var(--rs-shadow-sm);
}

/* AnonReviewCard : 17 px, interligne 1,55. Le <blockquote> gardait ses
   marges de navigateur (18 px en haut et en bas, 40 px sur les côtés). */
.rs-review__quote { margin: 0; font-family: var(--rs-font-body); font-size: 1.0625rem; line-height: 1.55; color: var(--rs-text-body); }
.rs-review__meta { font-family: var(--rs-font-body); font-size: 0.8125rem; color: var(--rs-text-subtle); }

.rs-section--avis .rs-carousel { margin-bottom: var(--rs-space-6); }

.rs-carousel__controls { display: flex; align-items: center; gap: var(--rs-space-2); }

.rs-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 36 px, comme navBtnBase ; au-dessus des 24 px de WCAG 2.5.8. */
	inline-size: 2.25rem;
	block-size: 2.25rem;
	padding: 0;
	flex: none;
	border-radius: var(--rs-radius-pill);
	border: var(--rs-border-width) solid var(--rs-border-control);
	background: var(--rs-surface-card);
	color: var(--rs-text-heading);
	cursor: pointer;
	transition: border-color var(--rs-duration-fast) var(--rs-ease-standard), background var(--rs-duration-fast) var(--rs-ease-standard);
}

.rs-carousel__btn:hover { background: var(--rs-surface-raised); border-color: var(--rs-color-primary); }

/* Pause : discrète pendant la rotation, primaire une fois en pause. */
.rs-carousel__btn[data-rs-carousel-pause] { color: var(--rs-text-subtle); }
.rs-carousel__btn[data-rs-carousel-pause][aria-pressed="true"] { color: var(--rs-link); border-color: var(--rs-color-primary); }

/* WCAG 2.5.8 porte sur la zone cliquable, pas sur ce qui se voit : le bouton
   mesure 24 px, la pastille visible garde ses 8. L'ancienne cible faisait
   8 x 8 px espacée de 8, soit 16 px de pas — sous le minimum, et sans recours
   par l'exception d'espacement. */
.rs-carousel__dot {
	position: relative;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	/* Les zones de 24 px se touchent sans se chevaucher : la maquette espace
	   ses pastilles de 8 px, la cible accessible en impose 16 entre deux
	   pastilles au lieu des 24 d'avant. */
	margin-inline: -0.25rem;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	flex: none;
	transition: inline-size var(--rs-duration-normal) var(--rs-ease-standard);
}

.rs-carousel__dot::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	translate: -50% -50%;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: var(--rs-radius-pill);
	background: var(--rs-border-control);
	transition: inline-size var(--rs-duration-normal) var(--rs-ease-standard), background var(--rs-duration-normal) var(--rs-ease-standard);
}

.rs-carousel__dot[aria-current="true"] { inline-size: 2.5rem; }
.rs-carousel__dot[aria-current="true"]::before { inline-size: 1.5rem; background: var(--rs-color-primary); }
.rs-carousel__spacer { flex: 1; }

/* =========================================================================
   17. Réalisations et comparateur avant / après
   ====================================================================== */

.rs-realisations { border-top: var(--rs-border-width) solid var(--rs-border-hairline); padding-top: var(--rs-space-12); }

.rs-realisations__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--rs-space-4);
	margin-bottom: var(--rs-space-8);
}

.rs-realisation {
	max-width: 56rem;
	margin-inline: auto;
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
	box-shadow: var(--rs-shadow-sm);
	overflow: hidden;
}

.rs-compare {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	cursor: col-resize;
	user-select: none;
	background: var(--rs-surface-raised);
	touch-action: pan-y;
}

.rs-compare__layer { position: absolute; inset: 0; }
.rs-compare__layer img { width: 100%; height: 100%; object-fit: cover; }
.rs-compare__layer--before { clip-path: inset(0 50% 0 0); }

.rs-compare__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	background: var(--rs-color-white);
	transform: translateX(-50%);
	box-shadow: var(--rs-shadow-sm);
	pointer-events: none;
	z-index: 5;
}

.rs-compare__handle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	inline-size: var(--rs-touch-min);
	block-size: var(--rs-touch-min);
	padding: 0;
	border-radius: var(--rs-radius-pill);
	background: var(--rs-color-white);
	border: var(--rs-border-width-strong) solid var(--rs-color-primary);
	color: var(--rs-link);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: col-resize;
	box-shadow: var(--rs-shadow-md);
}

.rs-compare__label {
	position: absolute;
	top: var(--rs-space-3);
	z-index: 4;
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-eyebrow);
	font-weight: var(--rs-weight-bold);
	letter-spacing: var(--rs-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--rs-text-on-dark);
	background: color-mix(in srgb, var(--rs-color-dark) 60%, transparent);
	padding: var(--rs-space-1) var(--rs-space-2);
	border-radius: var(--rs-radius-sm);
	pointer-events: none;
}

.rs-compare__label--before { left: var(--rs-space-3); }
.rs-compare__label--after { right: var(--rs-space-3); }

.rs-compare__type {
	position: absolute;
	bottom: var(--rs-space-3);
	left: var(--rs-space-3);
	z-index: 4;
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
	font-weight: var(--rs-weight-semibold);
	color: var(--rs-link);
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	padding: var(--rs-space-1) var(--rs-space-2);
	border-radius: var(--rs-radius-sm);
}

.rs-compare__quick {
	display: flex;
	gap: var(--rs-space-2);
	justify-content: center;
	padding: var(--rs-space-3) var(--rs-space-4);
	background: var(--rs-surface-card);
	border-bottom: var(--rs-border-width) solid var(--rs-border-hairline);
}

.rs-realisation__body { padding: var(--rs-card-pad); display: flex; flex-direction: column; gap: var(--rs-space-2); }
.rs-realisation__place { display: flex; align-items: center; gap: var(--rs-space-2); font-family: var(--rs-font-body); font-size: var(--rs-font-size-small); color: var(--rs-text-subtle); }
.rs-realisation__text { font-family: var(--rs-font-body); font-size: var(--rs-font-size-small); line-height: var(--rs-leading-body); color: var(--rs-text-body); }

/* =========================================================================
   18. Marques partenaires
   ====================================================================== */

.rs-brands { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rs-space-4); }

@media (max-width: 640px) { .rs-brands { grid-template-columns: repeat(2, 1fr); } }

.rs-brands__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 5.5rem;
	padding: var(--rs-space-6) var(--rs-card-pad-sm);
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-md);
	transition: border-color var(--rs-duration-fast) var(--rs-ease-standard), box-shadow var(--rs-duration-fast) var(--rs-ease-standard);
}

.rs-brands__cell:hover { border-color: var(--rs-color-primary); box-shadow: var(--rs-shadow-sm); }
.rs-brands__cell img { max-height: 3rem; max-width: 100%; width: auto; object-fit: contain; }

/* Deuxieme rendu des marques : six noms en pastilles centrees, sans logo. C'est
   « Des marques professionnelles » de Qui sommes-nous, et la maquette n'y met
   aucune image — la grille de cellules ne convient pas, une ligne qui se replie
   si. Les cellules redeviennent des pastilles, la grille un flex centre. */

.rs-brands--noms {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--rs-space-3);
}

.rs-brands--noms .rs-brands__cell {
	min-height: 0;
	padding: var(--rs-space-3) var(--rs-space-6);
	border-radius: var(--rs-radius-sm);
}

.rs-brands__name {
	font-family: var(--rs-font-heading);
	font-weight: var(--rs-weight-bold);
	color: var(--rs-text-heading);
	text-align: center;
}

/* Bandeau de logos clients de la page « Ils nous font confiance » */
.rs-clients {
	display: flex;
	justify-content: center;
	padding: clamp(2rem, 5vw, 3.5rem);
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
	box-shadow: var(--rs-shadow-sm);
}

.rs-clients img { width: 100%; max-width: 46rem; height: auto; }

/* =========================================================================
   19. Section professionnels et appel à l'action final
   ====================================================================== */

/* Dégradés imposés par CLAUDE.md, portés par les jetons de colors.css. */
.rs-pro { background: var(--rs-gradient-dark); }
.rs-final-cta { background: var(--rs-gradient-cta); }

.rs-pro,
.rs-final-cta { color: var(--rs-text-on-dark); }

.rs-pro h2,
.rs-pro h3,
.rs-final-cta h2 { color: var(--rs-text-on-dark); }

.rs-pro .rs-section__intro,
.rs-final-cta p { color: var(--rs-text-on-dark-muted); }

.rs-pro__grid { display: grid; gap: var(--rs-space-12); align-items: start; }

@media (min-width: 900px) { .rs-pro__grid { grid-template-columns: 1.15fr 1fr; } }

.rs-pro__publics { display: flex; flex-wrap: wrap; gap: var(--rs-space-2); margin-bottom: var(--rs-space-8); }

.rs-pro__public {
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
	color: var(--rs-text-on-dark);
	background: color-mix(in srgb, var(--rs-color-white) 7%, transparent);
	border: var(--rs-border-width) solid color-mix(in srgb, var(--rs-color-white) 15%, transparent);
	border-radius: var(--rs-radius-sm);
	padding: var(--rs-space-1) var(--rs-space-3);
}

.rs-pro__caps { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rs-space-3); }

@media (max-width: 560px) { .rs-pro__caps { grid-template-columns: 1fr; } }

.rs-pro__cap {
	display: flex;
	align-items: center;
	gap: var(--rs-space-3);
	padding: var(--rs-space-4);
	background: color-mix(in srgb, var(--rs-color-white) 6%, transparent);
	border: var(--rs-border-width) solid color-mix(in srgb, var(--rs-color-white) 12%, transparent);
	border-radius: var(--rs-radius-md);
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
	font-weight: var(--rs-weight-medium);
	color: var(--rs-text-on-dark);
}

.rs-pro__cap .rs-icon { color: var(--rs-color-logo); }

/* C05, Interventions sur site : trois axes sous la promesse, sur toute la
   largeur — côte à côte sur ordinateur, empilés en dessous (à 768 px, le
   troisième passait sur cinq lignes). */
.rs-pro--axes .rs-pro__grid { grid-template-columns: 1fr; }
.rs-pro--axes .rs-section__header { max-width: 46rem; }
.rs-pro--axes .rs-pro__caps { grid-template-columns: 1fr; margin-block: var(--rs-space-8); }
.rs-pro--axes .rs-pro__cap { align-items: flex-start; }
.rs-pro--axes .rs-pro__cap .rs-icon { flex: none; margin-top: 0.1rem; }

@media (min-width: 1024px) { .rs-pro--axes .rs-pro__caps { grid-template-columns: repeat(3, 1fr); } }

.rs-final-cta__inner { text-align: center; max-width: 46rem; margin-inline: auto; }
.rs-final-cta__title { font-size: var(--rs-font-size-h2); line-height: var(--rs-leading-heading); margin-top: var(--rs-space-3); }
.rs-final-cta__text { margin: var(--rs-space-4) auto 0; max-width: 34rem; font-family: var(--rs-font-body); font-size: var(--rs-font-size-body-lg); line-height: var(--rs-leading-body); }
.rs-final-cta__actions { display: flex; gap: var(--rs-space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--rs-space-8); }

/* Variante alignée à gauche, utilisée par « Ils nous font confiance ». */
/* La largeur est celle du conteneur, pas « none » : .rs-final-cta__inner EST
   le conteneur, et sans borne le texte collait au bord de l'écran (vu au lot
   post-B13, sur Service client comme sur Ils nous font confiance). */
.rs-final-cta--split .rs-final-cta__inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--rs-space-8); text-align: left; max-width: var(--rs-container-wide); }
.rs-final-cta--split .rs-final-cta__inner > div:first-child { max-width: 34rem; }
.rs-final-cta--split .rs-final-cta__text { margin-inline: 0; }
.rs-final-cta--split .rs-final-cta__actions { margin-top: 0; }

/* =========================================================================
   20. Informations pratiques
   ====================================================================== */

.rs-access { display: grid; gap: var(--rs-space-8); }

@media (min-width: 768px) { .rs-access { grid-template-columns: 1fr 1.2fr; } }

.rs-access__address { font-style: normal; font-family: var(--rs-font-body); font-size: var(--rs-font-size-body-lg); color: var(--rs-text-body); }
.rs-access__actions { display: flex; flex-wrap: wrap; gap: var(--rs-space-3); margin-top: var(--rs-space-5); }

/* La colonne de droite empile la carte des horaires et la carte Google. */
.rs-access__aside { display: grid; gap: var(--rs-space-6); align-content: start; }
.rs-access__hours .rs-card__title { display: flex; align-items: center; gap: var(--rs-space-2); }

.rs-map {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--rs-space-3);
	min-height: 20rem;
	padding: var(--rs-card-pad);
	text-align: center;
	background: var(--rs-surface-raised);
	border: var(--rs-border-width) dashed var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
}

.rs-map__note { max-width: 34ch; font-family: var(--rs-font-body); font-size: var(--rs-font-size-small); color: var(--rs-text-subtle); }
.rs-map iframe { width: 100%; min-height: 20rem; border: 0; border-radius: var(--rs-radius-lg); }

/* =========================================================================
   21. Outil d'aide au choix
   ====================================================================== */

.rs-calc { padding: var(--rs-space-8); background: var(--rs-surface-raised); border-radius: var(--rs-radius-lg); }
.rs-calc__fields { display: grid; gap: var(--rs-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }

.rs-calc__output {
	display: block;
	margin-top: var(--rs-space-8);
	padding: var(--rs-card-pad);
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-md);
}

.rs-calc__value { font-family: var(--rs-font-heading); font-size: var(--rs-font-size-h2); font-weight: var(--rs-weight-bold); color: var(--rs-link); line-height: 1; }
.rs-calc__title { font-size: var(--rs-font-size-body-lg); margin-top: var(--rs-space-3); }
.rs-calc__waiting { font-family: var(--rs-font-body); color: var(--rs-text-subtle); }
.rs-calc__note { margin-top: var(--rs-space-4); font-family: var(--rs-font-body); font-size: var(--rs-font-size-small); color: var(--rs-text-subtle); }

/* Reperes « un besoin, une recommandation » : rendus par le serveur, donc
   presents et lisibles sans JavaScript. */
.rs-calc__reperes-titre { margin-top: var(--rs-space-8); font-size: var(--rs-font-size-body-lg); }
.rs-calc__reperes { display: flex; flex-direction: column; gap: var(--rs-space-3); margin-top: var(--rs-space-6); list-style: none; padding: 0; }

.rs-calc__repere {
	padding: var(--rs-card-pad-sm);
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-md);
}

.rs-calc__repere-besoin { display: flex; align-items: flex-start; gap: var(--rs-space-2); color: var(--rs-text-heading); }
.rs-calc__repere-besoin .rs-icon { flex: none; margin-top: 0.15em; color: var(--rs-link); }
.rs-calc__repere-reponse { margin-top: var(--rs-space-2); padding-left: calc(15px + var(--rs-space-2)); font-family: var(--rs-font-body); color: var(--rs-text-body); }
.rs-calc__actions { display: flex; flex-wrap: wrap; gap: var(--rs-space-3); margin-top: var(--rs-space-6); }

/* =========================================================================
   22. Formulaires
   ====================================================================== */

.rs-field { display: flex; flex-direction: column; gap: var(--rs-space-2); }

.rs-field__label { font-family: var(--rs-font-body); font-size: var(--rs-font-size-small); font-weight: var(--rs-weight-semibold); color: var(--rs-text-heading); }
.rs-field__hint,
.rs-field__unit { font-family: var(--rs-font-body); font-size: var(--rs-font-size-eyebrow); font-weight: var(--rs-weight-regular); color: var(--rs-text-subtle); }
.rs-field__required { color: var(--rs-color-error); }

.rs-field input,
.rs-field select,
.rs-field textarea,
.rs-search input {
	width: 100%;
	min-height: var(--rs-touch-min);
	padding: var(--rs-space-3);
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-body);
	color: var(--rs-text-body);
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-control);
	border-radius: var(--rs-radius-md);
}

.rs-field textarea { min-height: 9rem; resize: vertical; }
.rs-field [aria-invalid="true"] { border-color: var(--rs-color-error); }

.rs-field__error {
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
	font-weight: var(--rs-weight-semibold);
	color: var(--rs-color-error);
}

.rs-field--consent label { display: flex; align-items: flex-start; gap: var(--rs-space-3); font-family: var(--rs-font-body); font-size: var(--rs-font-size-small); }
.rs-field--consent input { inline-size: 1.15rem; block-size: 1.15rem; min-height: 0; flex: none; margin-top: 0.25em; }

/* Choix particulier / professionnel : deux boutons-etiquettes, pas deux ronds
   perdus dans une ligne de texte. Le bouton radio reste dans le flux, c'est lui
   que le clavier atteint et que le lecteur d'ecran annonce. */
.rs-field__choices { display: flex; flex-wrap: wrap; gap: var(--rs-space-3); margin-top: var(--rs-space-2); }
.rs-field__choice {
	display: inline-flex;
	align-items: center;
	gap: var(--rs-space-2);
	padding: var(--rs-space-2) var(--rs-space-4);
	border: 1px solid var(--rs-border-control);
	border-radius: var(--rs-radius-pill);
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
	cursor: pointer;
}
.rs-field__choice input { inline-size: 1.05rem; block-size: 1.05rem; min-height: 0; flex: none; margin: 0; }
.rs-field__choice:has( input:checked ) { border-color: var(--rs-color-primary); background: var(--rs-surface-raised); }
.rs-field__choice:has( input:focus-visible ) { outline: 2px solid var(--rs-color-interactive); outline-offset: 2px; }

.rs-form__grid { display: grid; gap: var(--rs-space-4); grid-template-columns: 1fr; }

@media (min-width: 640px) {
	.rs-form__grid { grid-template-columns: 1fr 1fr; }
	.rs-field--full { grid-column: 1 / -1; }
}

/* Pot de miel : hors écran, hors parcours clavier, mais dans le flux. */
.rs-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rs-form__actions { margin-top: var(--rs-space-8); }
.rs-form__mention { font-family: var(--rs-font-body); font-size: var(--rs-font-size-small); color: var(--rs-text-subtle); margin-top: var(--rs-space-3); }

/* --- Contact Form 7 ----------------------------------------------------------
   Sa feuille de style est coupée (rhone-saone-core, inc/forms/cf7.php) : le
   formulaire est écrit avec les classes ci-dessus, et il ne reste ici que ce
   que CF7 ajoute de lui-même autour des champs — enveloppes, listes de choix,
   bulles d'erreur, zone de réponse, région pour lecteur d'écran. La mise en
   page de la maquette de devis (carte, sélecteur de profil, zone de dépôt) est
   en section 25. */

.rs-field__optional { font-weight: var(--rs-weight-regular); color: var(--rs-text-subtle); }

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

.wpcf7 .hidden-fields-container { display: contents; border: 0; margin: 0; padding: 0; }


/* Les groupes de Conditional Fields s'effacent de la grille : leurs champs
   en sont des cellules comme les autres. Le script les masque par un style en
   ligne, qui l'emporte sur cette règle. Sans script, tout reste visible. */
.rs-form__grid > [data-class="wpcf7cf_group"] { display: contents; }

.rs-field .wpcf7-radio,
.rs-field .wpcf7-checkbox,
.rs-field .wpcf7-acceptance { display: flex; flex-wrap: wrap; gap: var(--rs-space-3); }
.rs-field .wpcf7-list-item { margin: 0; }
.rs-field .wpcf7-list-item label { display: inline-flex; align-items: flex-start; gap: var(--rs-space-2); font-family: var(--rs-font-body); font-size: var(--rs-font-size-small); cursor: pointer; }
.rs-field .wpcf7-list-item input { inline-size: 1.05rem; block-size: 1.05rem; min-height: 0; flex: none; margin: 0.2em 0 0; padding: 0; }

.wpcf7-not-valid-tip {
	display: block;
	margin-top: var(--rs-space-1);
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
	font-weight: var(--rs-weight-semibold);
	color: var(--rs-color-error);
}
.rs-field .wpcf7-not-valid { border-color: var(--rs-color-error); }

.wpcf7 .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.wpcf7-response-output {
	margin-top: var(--rs-space-6);
	padding: var(--rs-space-4) var(--rs-space-5);
	border-left: 4px solid var(--rs-color-error);
	border-radius: var(--rs-radius-md);
	background: var(--rs-color-error-surface);
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
}
.wpcf7-response-output:empty,
.wpcf7-form.init .wpcf7-response-output,
.wpcf7-form.resetting .wpcf7-response-output,
.wpcf7-form.submitting .wpcf7-response-output { display: none; }
.wpcf7-form.sent .wpcf7-response-output { border-left-color: var(--rs-color-success); background: var(--rs-color-success-surface); }

.wpcf7-spinner { display: none; }
.wpcf7-form.submitting .wpcf7-spinner {
	display: inline-block;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	margin-left: var(--rs-space-3);
	vertical-align: middle;
	border: 2px solid var(--rs-border-default);
	border-top-color: var(--rs-color-primary);
	border-radius: 50%;
	animation: rs-tourne 0.8s linear infinite;
}
@keyframes rs-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wpcf7-form.submitting .wpcf7-spinner { animation: none; } }

.rs-envoi__actions { display: flex; flex-wrap: wrap; gap: var(--rs-space-3); margin-top: var(--rs-space-5); }

.rs-message { padding: var(--rs-card-pad); border-radius: var(--rs-radius-lg); margin-bottom: var(--rs-space-6); }
.rs-message--success { background: var(--rs-color-success-surface); border-left: 4px solid var(--rs-color-success); }
.rs-message--error { background: var(--rs-color-error-surface); border-left: 4px solid var(--rs-color-error); }
.rs-message__title { font-size: var(--rs-font-size-h3); margin-bottom: var(--rs-space-2); }
/* Le resume d'erreur nomme les champs et renvoie a chacun. Souligne d'emblee :
   dans un bloc deja rouge, la couleur ne distingue plus le lien du texte. */
.rs-message__list { margin: var(--rs-space-3) 0 0; padding-left: var(--rs-space-5); display: flex; flex-direction: column; gap: var(--rs-space-1); }
.rs-message__list a { color: var(--rs-color-error); text-decoration: underline; }

.rs-search { display: flex; gap: var(--rs-space-2); margin-block: var(--rs-space-6); }

/* Fenêtre <dialog> — base des fiches de famille (la modale de devis est
   retirée depuis C04). */
.rs-dialog {
	width: min(46rem, calc(100vw - 2rem));
	max-height: calc(100dvh - 4rem);
	padding: 0;
	border: none;
	border-radius: var(--rs-radius-lg);
	background: var(--rs-surface-card);
	box-shadow: var(--rs-shadow-md);
	overflow: hidden;
}

.rs-dialog::backdrop { background: color-mix(in srgb, var(--rs-color-dark) 55%, transparent); }

.rs-dialog__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--rs-space-4);
	padding: var(--rs-card-pad);
	border-bottom: var(--rs-border-width) solid var(--rs-border-hairline);
}

.rs-dialog__body { padding: var(--rs-card-pad); overflow-y: auto; max-height: calc(100dvh - 12rem); }

.rs-dialog__close {
	inline-size: var(--rs-touch-min);
	block-size: var(--rs-touch-min);
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: var(--rs-border-width) solid var(--rs-border-control);
	border-radius: var(--rs-radius-md);
	color: var(--rs-text-heading);
	cursor: pointer;
}

/* Fiche de famille — FamilyPopup des *Products.jsx (lot B12). La base
   .rs-dialog, plus étroite, sans filet sous l'en-tête. */
.rs-dialog--fiche { width: min(38rem, calc(100vw - 2.5rem)); border-radius: var(--rs-radius-xl); }
.rs-dialog--fiche .rs-dialog__head { padding: var(--rs-card-pad-lg) var(--rs-card-pad-lg) 0; border-bottom: 0; }
.rs-dialog--fiche .rs-dialog__body { padding: var(--rs-card-pad-lg); max-height: calc(100dvh - 10rem); }
.rs-dialog__title {
	font-size: 1.5rem;
	letter-spacing: -0.015em;
	line-height: var(--rs-leading-heading);
	margin-top: var(--rs-space-2);
}
.rs-fiche__media {
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--rs-color-white);
	border-radius: var(--rs-radius-md);
}
/* Même principe que la carte de famille : la boîte suit le produit. */
.rs-fiche__media img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }
.rs-fiche__text { font-family: var(--rs-font-body); font-size: 0.9688rem; line-height: 1.65; color: var(--rs-text-body); margin-top: var(--rs-space-6); }
.rs-fiche__note {
	display: flex;
	gap: var(--rs-space-3);
	align-items: flex-start;
	margin-top: var(--rs-space-6);
	padding: var(--rs-space-5);
	background: var(--rs-color-surface);
	border: var(--rs-border-width) solid var(--rs-border-hairline);
	border-radius: var(--rs-radius-md);
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
	line-height: 1.5;
	color: var(--rs-text-subtle);
}
.rs-fiche__note > .rs-icon { flex: none; margin-top: 0.15rem; color: var(--rs-text-subtle); }
.rs-fiche__note strong { display: block; font-weight: var(--rs-weight-bold); color: var(--rs-text-heading); margin-bottom: 0.2rem; }
.rs-fiche__actions { display: flex; flex-wrap: wrap; gap: var(--rs-space-3); margin-top: var(--rs-space-8); }

/* Le bouton « Voir les produits » se cale en bas de carte, à gauche. */
.rs-card__action { margin-top: auto; align-self: flex-start; }

/* La carte de famille, FamilyCard des *Products.jsx (lot B13). Le produit est
   détouré sur fond blanc : on le montre entier, jamais recadré en 16/9. Onze
   maquettes sur seize l'encadrent à 78 % × 84 % d'une zone de 168 px ; les
   cinq autres le posent bord à bord — une seule règle, la majoritaire. */
.rs-card--famille .rs-card__media {
	height: 168px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--rs-color-white);
	border-bottom: var(--rs-border-width) solid var(--rs-border-hairline);
}
.rs-card--famille .rs-card__media img {
	/* Hauteur fixée, largeur déduite du rapport : la boîte de l'image est
	   celle du produit, et sizes="auto" choisit le fichier sur elle. Avec
	   max-width et max-height seuls, la boîte gardait 78 % de la carte et le
	   navigateur prenait le 768 px pour un produit affiché à 140. */
	width: auto;
	height: 84%;
	max-width: 78%;
	object-fit: contain;
}
.rs-card--famille .rs-card__body { gap: 0.6rem; }
.rs-card--famille .rs-card__title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
}
.rs-card__pastille {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: color-mix(in srgb, var(--rs-color-primary) 8%, transparent);
	color: var(--rs-color-primary);
}
.rs-card--famille .rs-card__text {
	font-size: 0.9rem;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Pendant qu'une fiche est ouverte, la page ne défile pas derrière. */
html:has(.rs-dialog--fiche[open]) { overflow: hidden; }

/* =========================================================================
   23. Pied de page
   ====================================================================== */

/* Footer.jsx, valeur par valeur. Les liens sont des éléments de liste, pas
   des mots dans une phrase : l'exception « inline » de WCAG 2.5.8 ne les
   couvre pas, d'où un padding vertical qui porte la cible à 24 px. */
.rs-footer { background: var(--rs-surface-dark); color: var(--rs-text-on-dark-muted); font-family: var(--rs-font-body); font-size: var(--rs-font-size-small); }
.rs-footer a { color: var(--rs-text-on-dark-soft); text-decoration: none; transition: color var(--rs-duration-fast) var(--rs-ease-standard); }
.rs-footer a:hover { color: var(--rs-text-on-dark); }

.rs-footer__inner { padding-block: var(--rs-space-20) var(--rs-space-8); }

.rs-footer__grid { display: grid; gap: var(--rs-space-6); grid-template-columns: 1fr; }

@media (min-width: 461px) { .rs-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .rs-footer__grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--rs-space-8); } }
@media (min-width: 1024px) { .rs-footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.15fr; } }

.rs-footer__brand { max-width: 20rem; }
.rs-footer__logo img { height: 2.1rem; width: auto; }
.rs-footer__text { margin-top: var(--rs-space-4); font-size: var(--rs-font-size-ui); line-height: var(--rs-leading-body); color: var(--rs-text-on-dark-muted); }

.rs-footer address { font-style: normal; }
.rs-footer__contact { display: flex; flex-direction: column; gap: var(--rs-space-2); margin-top: var(--rs-space-5); font-size: var(--rs-font-size-ui); color: var(--rs-text-on-dark); }
.rs-footer__contact li,
.rs-footer__contact a { display: inline-flex; align-items: center; gap: var(--rs-space-2); }
.rs-footer__contact a { color: var(--rs-text-on-dark); min-block-size: 1.5rem; }
.rs-footer__contact svg { flex: none; color: var(--rs-color-logo); }

.rs-footer__title {
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-eyebrow);
	font-weight: var(--rs-weight-bold);
	letter-spacing: var(--rs-tracking-label);
	text-transform: uppercase;
	color: var(--rs-color-logo);
	margin-bottom: var(--rs-space-4);
}
.rs-footer__title + * { margin-top: 0; }

.rs-footer__links { display: flex; flex-direction: column; gap: var(--rs-space-1); font-size: var(--rs-font-size-ui); }
.rs-footer__links a { display: block; padding-block: var(--rs-space-1); min-block-size: 1.5rem; }

/* Horaires : une ligne par groupe de jours, « libellé : plages », comme la
   maquette ; la grille à deux colonnes de .rs-hours reste celle de Contact. */
.rs-footer__hours .rs-hours { gap: 0; color: var(--rs-text-on-dark-soft); line-height: var(--rs-leading-body); }
.rs-footer__hours .rs-hours__row { display: block; }
.rs-footer__hours .rs-hours__row > * { display: inline; }
.rs-footer__hours dt::after { content: "\00a0:\00a0"; }
.rs-footer__hours .rs-hours__note { margin-top: var(--rs-space-1); font-size: var(--rs-font-size-eyebrow); color: var(--rs-text-on-dark-muted); opacity: 1; }

.rs-hours { display: flex; flex-direction: column; gap: var(--rs-space-1); }
.rs-hours__row { display: flex; justify-content: space-between; gap: var(--rs-space-4); }
.rs-hours__note { display: block; font-size: var(--rs-font-size-eyebrow); opacity: 0.8; }

.rs-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--rs-space-3);
	margin-top: var(--rs-space-12);
	padding-top: var(--rs-space-6);
	border-top: var(--rs-border-width) solid color-mix(in srgb, var(--rs-color-white) 10%, transparent);
	font-size: var(--rs-font-size-eyebrow);
	color: var(--rs-text-on-dark-muted);
}
.rs-footer__legal { display: flex; flex-wrap: wrap; gap: var(--rs-space-5); }
.rs-footer__legal a { display: inline-block; padding-block: var(--rs-space-1); min-block-size: 1.5rem; color: var(--rs-text-on-dark-muted); }

/* =========================================================================
   24. Pages simples
   ====================================================================== */

.rs-page__title,
.rs-legal__title,
.rs-list__title,
.rs-404__title { font-size: var(--rs-font-size-h1); line-height: var(--rs-leading-tight); }

.rs-legal__lead { font-family: var(--rs-font-body); font-size: var(--rs-font-size-body-lg); line-height: 1.6; color: var(--rs-text-subtle); max-width: var(--rs-measure); margin-top: var(--rs-space-4); }
.rs-legal__updated { font-family: var(--rs-font-body); font-size: var(--rs-font-size-small); color: var(--rs-text-subtle); margin-top: var(--rs-space-2); }

/* Pages légales : conteneur principal, puis la grille des guides (colonne
   de lecture, sommaire collant de 17,5 rem). Rythme vertical de la maquette
   MentionsLegalesApp : 80 px au-dessus du titre, 32 px sous l'en-tête, filet
   puis 48 px avant le premier intertitre. */
.rs-legal { padding-block: var(--rs-space-20); }
.rs-legal__header { max-width: var(--rs-container-text); padding-bottom: var(--rs-space-8); }
.rs-legal__layout { display: grid; gap: var(--rs-space-8); }
.rs-legal__content { max-width: var(--rs-container-text); border-top: var(--rs-border-width) solid var(--rs-border-default); padding-top: var(--rs-space-12); }
.rs-legal__content > h2:first-child { margin-top: 0; }
.rs-legal__toc ol { display: flex; flex-direction: column; }
.rs-legal__toc li { list-style: none; }
.rs-legal__toc .rs-toc__label { line-height: var(--rs-leading-snug); }

@media (min-width: 1024px) {
	/* Le sommaire passe à droite, comme sur les guides ; la grille s'étire
	   pour qu'il reste collé jusqu'au bas du texte. */
	.rs-legal__layout--toc { grid-template-columns: minmax(0, 1fr) 17.5rem; gap: var(--rs-space-12); }
	.rs-legal__layout--toc .rs-legal__toc { grid-column: 2; grid-row: 1; align-self: start; }
	.rs-legal__layout--toc .rs-legal__content { grid-column: 1; grid-row: 1; }
}

@media (max-width: 1023px) {
	.rs-legal { padding-block: var(--rs-space-12) var(--rs-space-16); }
	.rs-legal__toc { position: static; max-height: none; }
}

.rs-sitemap__group + .rs-sitemap__group { margin-top: var(--rs-space-12); }
.rs-sitemap__title { font-size: var(--rs-font-size-h3); padding-bottom: var(--rs-space-2); border-bottom: var(--rs-border-width) solid var(--rs-border-hairline); }
.rs-sitemap__subtitle { font-size: var(--rs-font-size-body-lg); margin-top: var(--rs-space-6); }
.rs-sitemap__list { columns: 2; column-gap: var(--rs-space-8); margin-top: var(--rs-space-4); }
.rs-sitemap__list li { break-inside: avoid; padding-block: var(--rs-space-1); }

@media (max-width: 640px) { .rs-sitemap__list { columns: 1; } }

.rs-list__item { padding-block: var(--rs-space-6); border-bottom: var(--rs-border-width) solid var(--rs-border-hairline); }
.rs-list__item-title { font-size: var(--rs-font-size-h3); }
.rs-list__item-excerpt { font-family: var(--rs-font-body); color: var(--rs-text-subtle); margin-top: var(--rs-space-2); }

.rs-404__links { display: flex; flex-wrap: wrap; gap: var(--rs-space-3); margin-top: var(--rs-space-6); }
.rs-pagination { display: flex; flex-wrap: wrap; gap: var(--rs-space-2); margin-top: var(--rs-space-8); }

/* =========================================================================
   24 bis. Encart
   ====================================================================== */

/* Un bloc encadre et discret : la mention legale des garanties, l alternative
   au formulaire de devis. Reprend la carte du design system, sans son survol —
   un encart ne se clique pas. */

.rs-encart {
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
	padding: var(--rs-space-8);
}

.rs-encart__title {
	font-family: var(--rs-font-heading);
	font-size: var(--rs-font-size-h3);
	line-height: var(--rs-leading-tight);
	color: var(--rs-text-heading);
	margin: 0;
}

.rs-encart__text {
	font-family: var(--rs-font-body);
	color: var(--rs-text-body);
	margin-top: var(--rs-space-3);
}

.rs-encart__text > :last-child { margin-bottom: 0; }

.rs-encart__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rs-space-3);
	margin: var(--rs-space-6) 0 0;
}

/* En pleine largeur, l encart range ses boutons a droite du texte plutot que
   dessous : c est la figure de l alternative au formulaire de devis. Sur
   telephone il reste empile, et la mention legale des garanties, qui garde la
   colonne de lecture, n est pas concernee. */

@media (min-width: 768px) {
	.rs-encart--large {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--rs-space-8);
	}

	.rs-encart--large .rs-encart__corps { max-width: 36rem; }
	.rs-encart--large .rs-encart__actions { margin-top: 0; }
}

/* La mention legale ne doit pas peser autant qu un appel a l action : fond de
   page, texte en retrait, titre au corps du texte. */

.rs-encart--discret {
	background: var(--rs-surface-page);
	padding: var(--rs-space-6);
}

.rs-encart--discret .rs-encart__title {
	font-size: var(--rs-font-size-body);
	font-family: var(--rs-font-body);
	font-weight: 700;
}

.rs-encart--discret .rs-encart__text {
	font-size: var(--rs-font-size-small);
	color: var(--rs-text-subtle);
}

/* =========================================================================
   25. Demande de devis et Nous trouver — DevisPage.jsx, ContactPage.jsx
   ====================================================================== */

/* Icônes posées par la feuille de style, là où le balisage ne peut pas porter
   de SVG : les libellés des boutons radio de Contact Form 7 sont échappés, et
   la liste des fichiers déposés est construite par le script. Mêmes tracés
   Lucide que rs_icon(), en masque : l'icône prend la couleur du texte. */
:root {
	--rs-masque-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
	--rs-masque-briefcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect width='20' height='14' x='2' y='6' rx='2'/%3E%3C/svg%3E");
	--rs-masque-paperclip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l8.57-8.57A4 4 0 1 1 18 8.84l-8.59 8.57a2 2 0 0 1-2.83-2.83l8.49-8.48'/%3E%3C/svg%3E");
	--rs-masque-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E");
	--rs-masque-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
	--rs-masque-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

/* --- Bannière : le lien discret de ContactHero ------------------------------ */

.rs-hero__actions { align-items: center; }

.rs-hero__lien {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.6rem 0.2rem;
	font-family: var(--rs-font-body);
	font-size: 0.9375rem;
	font-weight: var(--rs-weight-medium);
	white-space: nowrap;
	text-decoration: none;
	color: var(--rs-link);
	border-bottom: 1px solid var(--rs-border-default);
	transition: color var(--rs-duration-fast) var(--rs-ease-standard), border-color var(--rs-duration-fast) var(--rs-ease-standard);
}
.rs-hero__lien .rs-icon { inline-size: 1rem; block-size: 1rem; color: currentColor; }
.rs-on-dark .rs-hero__lien { color: var(--rs-text-on-dark-soft); border-bottom-color: color-mix(in srgb, var(--rs-color-white) 25%, transparent); }
.rs-on-dark .rs-hero__lien:hover { color: var(--rs-text-on-dark); border-bottom-color: color-mix(in srgb, var(--rs-color-white) 70%, transparent); text-decoration: none; }

/* --- Demande de devis : les deux cartes ------------------------------------
   Grille 1.5fr / 1fr de .dv-layout, une colonne sous 1024 px — les étapes
   passent alors SOUS le formulaire, l'ordre du DOM est déjà le bon. L'écart
   en tablette vaut 2,5 rem : la maquette écrit var(--rs-space-10), jeton qui
   n'existe pas dans le design system, et son écart y tombe à zéro. */

.rs-formulaire { display: grid; gap: 2.5rem; align-items: start; }

@media (min-width: 1024px) {
	.rs-formulaire { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--rs-space-12); }
}

.rs-formulaire__corps,
.rs-formulaire__aside {
	min-width: 0;
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	box-shadow: var(--rs-shadow-sm);
}

.rs-formulaire__corps { border-radius: var(--rs-radius-xl); padding: clamp(1.5rem, 3vw, 2.5rem); }
.rs-formulaire__aside { border-radius: var(--rs-radius-lg); padding: clamp(1.5rem, 2.5vw, 2rem); }

/* Sélecteur de profil : deux boutons pleins, l'actif en primaire. Le bouton
   radio reste dans le flux — c'est lui que le clavier atteint et que le
   lecteur d'écran annonce — mais il ne se voit plus : le libellé est le
   bouton. Sans JavaScript, rien ne change, un radio n'en a pas besoin. */

.rs-form__profil { border: 0; margin: 0 0 var(--rs-space-6); padding: 0; min-inline-size: 0; }
.rs-form__profil .wpcf7-form-control-wrap { display: block; }
.rs-form__profil .wpcf7-radio { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.rs-form__profil .wpcf7-list-item { margin: 0; }

.rs-form__profil .wpcf7-list-item label {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 3rem;
	block-size: 100%;
	padding: 0.85rem 1rem;
	font-family: var(--rs-font-body);
	font-size: 0.9375rem;
	font-weight: var(--rs-weight-semibold);
	line-height: var(--rs-leading-snug);
	text-align: center;
	color: var(--rs-text-heading);
	background: var(--rs-color-surface);
	border: 1px solid var(--rs-border-default);
	border-radius: var(--rs-radius-md);
	cursor: pointer;
	transition: background var(--rs-duration-fast) var(--rs-ease-standard), border-color var(--rs-duration-fast) var(--rs-ease-standard);
}

.rs-form__profil .wpcf7-list-item label::before {
	content: "";
	flex: none;
	inline-size: 17px;
	block-size: 17px;
	background: var(--rs-color-primary);
	-webkit-mask: var(--rs-masque-user) center / contain no-repeat;
	mask: var(--rs-masque-user) center / contain no-repeat;
}
.rs-form__profil .wpcf7-list-item.last label::before {
	-webkit-mask-image: var(--rs-masque-briefcase);
	mask-image: var(--rs-masque-briefcase);
}

.rs-form__profil .wpcf7-list-item input {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.rs-form__profil .wpcf7-list-item label:has( input:checked ) {
	color: var(--rs-text-on-dark);
	background: var(--rs-color-primary);
	border-color: var(--rs-color-primary);
}
.rs-form__profil .wpcf7-list-item label:has( input:checked )::before { background: currentColor; }
.rs-form__profil .wpcf7-list-item label:has( input:focus-visible ) { outline: 2px solid var(--rs-color-interactive); outline-offset: 2px; }

/* Surtitre et titre de la carte, qui suivent le sélecteur. */
.rs-form__titre {
	font-size: var(--rs-font-size-h3);
	letter-spacing: -0.01em;
	margin: 0.6rem 0 var(--rs-space-6);
}

.rs-formulaire .rs-form__grid { gap: var(--rs-space-5); }

@media (max-width: 767px) {
	.rs-formulaire .rs-form__grid { grid-template-columns: 1fr; }
}

/* L'astérisque de la maquette est turquoise, comme sa mention sous le bouton. */
.rs-formulaire .rs-field__required { color: var(--rs-color-primary); }

/* Accompagnement recherché : deux colonnes de cases, une sur petit écran. */
.rs-form__cases { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.rs-form__cases > legend { padding: 0; margin-bottom: 0.65rem; }
.rs-form__cases .wpcf7-checkbox { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem var(--rs-space-4); }

@media (max-width: 420px) {
	.rs-form__profil .wpcf7-radio,
	.rs-form__cases .wpcf7-checkbox { grid-template-columns: 1fr; }
}

/* Bouton d'envoi et mention, sur une ligne. */
.rs-formulaire .rs-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rs-space-4);
	margin-top: var(--rs-space-5);
}
.rs-formulaire .rs-form__mention { margin: 0; font-size: 0.8125rem; }

/* Zone de dépôt : le libellé EST la zone, en pointillé, trombone à gauche.
   Le champ fichier natif ne disparaît que lorsque le script a pris la main
   (data-rs-depot-actif) et affiche la liste des fichiers retenus : sans lui,
   le visiteur garde le retour du navigateur, « 3 fichiers ». */

.rs-depot__zone {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	column-gap: 0.75rem;
	padding: 0.9rem 1rem;
	font-family: var(--rs-font-body);
	color: var(--rs-text-body);
	background: var(--rs-color-surface);
	border: 1px dashed var(--rs-border-default);
	border-radius: var(--rs-radius-md);
	cursor: pointer;
	transition: border-color var(--rs-duration-fast) var(--rs-ease-standard);
}
.rs-depot__zone::before {
	content: "";
	grid-row: span 2;
	inline-size: 18px;
	block-size: 18px;
	background: var(--rs-color-primary);
	-webkit-mask: var(--rs-masque-paperclip) center / contain no-repeat;
	mask: var(--rs-masque-paperclip) center / contain no-repeat;
}
.rs-depot__zone:hover { border-color: var(--rs-color-primary); }
.rs-depot:has( input:focus-visible ) .rs-depot__zone { border-color: var(--rs-color-primary); outline: 2px solid var(--rs-color-interactive); outline-offset: 2px; }
.rs-depot:has( .wpcf7-not-valid ) .rs-depot__zone { border-color: var(--rs-color-error); }

.rs-depot__titre { font-size: 0.9375rem; font-weight: var(--rs-weight-semibold); }
.rs-depot__aide { font-size: 0.8125rem; color: var(--rs-text-subtle); }

.rs-depot[data-rs-depot-actif] input[type="file"] {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	opacity: 0;
}

.rs-depot__liste { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }

.rs-depot__fichier {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	max-width: 100%;
	padding: 0.3rem 0.4rem 0.3rem 0.65rem;
	font-family: var(--rs-font-body);
	font-size: 0.8125rem;
	color: var(--rs-text-body);
	background: var(--rs-surface-card);
	border: 1px solid var(--rs-border-default);
	border-radius: var(--rs-radius-sm);
}
.rs-depot__fichier::before {
	content: "";
	flex: none;
	inline-size: 14px;
	block-size: 14px;
	background: var(--rs-text-subtle);
	-webkit-mask: var(--rs-masque-file) center / contain no-repeat;
	mask: var(--rs-masque-file) center / contain no-repeat;
}
.rs-depot__nom { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 24 px de cible au moins (WCAG 2.2, 2.5.8), là où la maquette en a 18. */
.rs-depot__retirer {
	display: inline-grid;
	place-items: center;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	padding: 0;
	color: var(--rs-text-subtle);
	background: transparent;
	border: 0;
	border-radius: var(--rs-radius-pill);
	cursor: pointer;
}
.rs-depot__retirer::before {
	content: "";
	inline-size: 14px;
	block-size: 14px;
	background: currentColor;
	-webkit-mask: var(--rs-masque-x) center / contain no-repeat;
	mask: var(--rs-masque-x) center / contain no-repeat;
}
.rs-depot__retirer:hover { color: var(--rs-text-heading); background: var(--rs-color-surface); }

/* Écran « Demande envoyée » de la page : centré, une coche dans un rond. */
.rs-envoi__succes--page {
	margin: 0;
	padding: var(--rs-space-4) 0 var(--rs-space-2);
	text-align: center;
	background: none;
	border: 0;
}
.rs-envoi__coche {
	display: grid;
	place-items: center;
	inline-size: 3.75rem;
	block-size: 3.75rem;
	margin: 0 auto;
	border-radius: var(--rs-radius-pill);
	background: var(--rs-color-success-surface);
}
.rs-envoi__coche .rs-icon { inline-size: 30px; block-size: 30px; color: var(--rs-color-success); }
.rs-envoi__succes--page .rs-message__title { font-size: 1.5rem; letter-spacing: -0.015em; margin: var(--rs-space-5) 0 0; }
.rs-envoi__succes--page .rs-prose { max-width: 30rem; margin: 0.65rem auto 0; color: var(--rs-text-subtle); }
.rs-envoi__succes--page .rs-envoi__actions { justify-content: center; margin-top: 1.75rem; }

/* La colonne des étapes : numéro cerclé à gauche du texte, et non pastille
   pleine au-dessus. */
.rs-formulaire__aside .rs-section__header { margin-bottom: var(--rs-space-6); max-width: none; }
.rs-formulaire__aside .rs-section__title { font-size: var(--rs-font-size-h3); letter-spacing: -0.01em; }
.rs-formulaire__aside .rs-steps { display: flex; flex-direction: column; gap: var(--rs-space-5); }
.rs-formulaire__aside .rs-steps__item { flex-direction: row; align-items: flex-start; gap: 0.9rem; }
.rs-formulaire__aside .rs-steps__number {
	flex: none;
	inline-size: 2rem;
	block-size: 2rem;
	font-size: 0.9375rem;
	color: var(--rs-color-primary);
	background: var(--rs-color-surface);
	border: 1px solid var(--rs-border-default);
}
.rs-formulaire__aside .rs-steps__title { font-family: var(--rs-font-body); font-size: 0.9375rem; font-weight: var(--rs-weight-semibold); }
.rs-formulaire__aside .rs-steps__text { font-size: 0.875rem; line-height: 1.5; margin-top: 0.25rem; }

/* Bandeau de réassurance : quatre tuiles, l'icône à gauche. 4, 2 puis 1. */
.rs-items--tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rs-space-5); }

@media (max-width: 1023px) { .rs-items--tuiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .rs-items--tuiles { grid-template-columns: 1fr; } }

.rs-items--tuiles .rs-items__item {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 1.1rem 1.2rem;
	border-radius: var(--rs-radius-md);
}
.rs-items--tuiles .rs-items__item > .rs-icon { margin-top: 0.1rem; }
.rs-items--tuiles .rs-items__title { font-family: var(--rs-font-body); font-size: 0.9375rem; font-weight: var(--rs-weight-bold); color: var(--rs-text-heading); }
.rs-items--tuiles .rs-items__text { font-size: 0.8125rem; line-height: 1.45; margin-top: 0.2rem; }
.rs-items--tuiles .rs-items__text > * { margin: 0; }

/* « Vous préférez échanger directement ? » : un encart teinté, qui colle au
   bandeau de réassurance — la maquette le décale de 45 px sous lui. */
.rs-section--alternative { padding-top: var(--rs-space-12); }
.rs-section--alternative .rs-encart { background: var(--rs-surface-raised); padding: clamp(1.75rem, 3vw, 2.5rem); }
.rs-section--alternative .rs-encart__text { font-size: var(--rs-font-size-body-lg); color: var(--rs-text-subtle); margin-top: 0.6rem; }

/* --- Nous trouver : les deux cartes ------------------------------------------ */

.rs-coordonnees { display: grid; gap: var(--rs-space-8); align-items: start; }

@media (min-width: 768px) { .rs-coordonnees { grid-template-columns: 1fr 1fr; } }

.rs-coordonnees__carte {
	padding: clamp(1.5rem, 2.5vw, 2rem);
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
	box-shadow: var(--rs-shadow-sm);
}
.rs-coordonnees__carte .rs-section__header { max-width: none; margin-bottom: var(--rs-space-6); }
.rs-coordonnees__carte .rs-section__title { font-size: var(--rs-font-size-h3); letter-spacing: -0.01em; }
.rs-coordonnees__carte .rs-section__intro { font-size: 0.9375rem; line-height: 1.6; }

.rs-coordonnees__lignes { display: flex; flex-direction: column; gap: var(--rs-space-5); }
.rs-coordonnees__ligne { display: flex; align-items: flex-start; gap: 0.75rem; }

.rs-coordonnees__icone {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 2rem;
	block-size: 2rem;
	background: var(--rs-color-surface);
	border: 1px solid var(--rs-border-default);
	border-radius: var(--rs-radius-pill);
}
.rs-coordonnees__icone .rs-icon { inline-size: 15px; block-size: 15px; }

.rs-coordonnees__etiquette {
	margin: 0;
	padding-top: 0.2rem;
	font-family: var(--rs-font-body);
	font-size: 0.8125rem;
	font-weight: var(--rs-weight-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rs-text-subtle);
}
.rs-coordonnees__valeur { margin: 0.25rem 0 0; font-family: var(--rs-font-body); font-size: 0.9375rem; font-style: normal; line-height: 1.5; color: var(--rs-text-body); }
.rs-coordonnees__lien { color: var(--rs-text-body); text-decoration: none; }
.rs-coordonnees__lien--fort { font-weight: var(--rs-weight-semibold); }
.rs-coordonnees__lien:hover { color: var(--rs-link); }

.rs-coordonnees__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.75rem 0 0;
	padding-top: var(--rs-space-6);
	border-top: 1px solid var(--rs-border-hairline);
}

/* Les horaires en tableau : une ligne par plage, filet entre les lignes. */
.rs-coordonnees .rs-hours { gap: 0; font-family: var(--rs-font-body); font-size: 0.9375rem; }
.rs-coordonnees .rs-hours__row { padding: 0.65rem 0; border-bottom: 1px solid var(--rs-border-hairline); }
.rs-coordonnees .rs-hours__row:last-child { border-bottom: 0; }
.rs-coordonnees .rs-hours dt { font-weight: var(--rs-weight-medium); color: var(--rs-text-heading); }
.rs-coordonnees .rs-hours dd { text-align: right; color: var(--rs-text-body); }
.rs-coordonnees .rs-hours ~ .rs-hours__note { margin-top: var(--rs-space-3); font-family: var(--rs-font-body); font-size: var(--rs-font-size-small); color: var(--rs-text-subtle); opacity: 1; }

/* --- Nous trouver : le plan ----------------------------------------------------
   Le cadre a sa hauteur avant le clic : l'iframe prend la place du bouton
   sans rien déplacer, la carte différée ne décale pas la page. */

.rs-plan__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--rs-space-4);
	margin-bottom: var(--rs-space-8);
}
.rs-plan__entete .rs-section__header { margin-bottom: 0; }
.rs-plan__entete .rs-section__title { font-size: var(--rs-font-size-h3); letter-spacing: -0.01em; }

.rs-plan__cadre {
	position: relative;
	block-size: 25rem;
	overflow: hidden;
	background: var(--rs-surface-card);
	border: 1px solid var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
}
.rs-map--plan { block-size: 100%; min-height: 0; border: 0; border-radius: 0; }
.rs-map--plan:has( iframe ) { padding: 0; }
.rs-map--plan iframe { display: block; block-size: 100%; min-height: 0; border-radius: 0; }
.rs-plan__ouvrir { position: absolute; top: 0.9rem; left: 0.9rem; }

.rs-plan__legende {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rs-space-5);
	margin-top: 0.9rem;
	font-family: var(--rs-font-body);
	font-size: 0.9375rem;
	color: var(--rs-text-body);
}
.rs-plan__legende li { display: inline-flex; align-items: center; gap: 0.4rem; }
.rs-plan__legende .rs-icon { inline-size: 16px; block-size: 16px; }
.rs-plan__acces { font-size: 0.875rem; color: var(--rs-text-subtle); }
.rs-plan__acces .rs-icon { color: var(--rs-text-subtle); }

.rs-plan__note { margin-top: var(--rs-space-3); font-family: var(--rs-font-body); font-size: 0.8125rem; font-style: italic; color: var(--rs-text-subtle); }

.rs-plan__suite {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--rs-space-4);
	margin-top: var(--rs-space-12);
	padding-top: var(--rs-space-8);
	border-top: 1px solid var(--rs-border-hairline);
}
.rs-plan__suite p { margin: 0; font-family: var(--rs-font-body); font-size: var(--rs-font-size-body-lg); color: var(--rs-text-body); }

.rs-plan__lien {
	display: inline-flex;
	align-items: center;
	gap: var(--rs-space-2);
	padding: var(--rs-space-2) 0;
	font-family: var(--rs-font-body);
	font-size: 0.9375rem;
	font-weight: var(--rs-weight-semibold);
	color: var(--rs-link);
	text-decoration: none;
}
.rs-plan__lien::after {
	content: "";
	inline-size: 16px;
	block-size: 16px;
	background: currentColor;
	-webkit-mask: var(--rs-masque-fleche) center / contain no-repeat;
	mask: var(--rs-masque-fleche) center / contain no-repeat;
}
.rs-plan__lien:hover { color: var(--rs-action-primary-hover); }

/* =========================================================================
   25 bis. Écrans, cartes et frises — lot post-B13
   -------------------------------------------------------------------------
   La revue desktop des pages services et entreprise : des contenus présents,
   rendus en texte nu là où les maquettes posent des cartes, des colonnes, des
   frises. Des composants et leurs variantes, jamais une page : chaque
   variante se choisit dans les données (bloc éditorial) ou dans la
   composition de la page (inc/compositions.php).
   ====================================================================== */

/* Pastille d'icône : 36 px, fond turquoise translucide. Cartes d'atouts,
   listes « Carte », pastilles des Professionnels. */
.rs-pastille {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	border-radius: 0.5rem;
	background: color-mix(in srgb, var(--rs-color-primary) 10%, transparent);
}
.rs-pastille .rs-icon { inline-size: 1.125rem; block-size: 1.125rem; }

/* --- L'écran : une bande par bloc titre (sections/editorial.php) ---------- */

.rs-section--ecran .rs-section__header { margin-bottom: var(--rs-space-12); }
.rs-section--ecran .rs-section__header:last-child { margin-bottom: 0; }
.rs-ecran__texte { margin-top: var(--rs-space-5); max-width: none; }
.rs-ecran__texte p { font-size: var(--rs-font-size-body-lg); line-height: 1.65; color: var(--rs-text-body); }
.rs-ecran__actions { margin-top: var(--rs-space-6); }

/* Deux colonnes : texte et photo, texte et encart, deux en-têtes. */
.rs-ecran__duo { display: grid; gap: var(--rs-space-8); align-items: start; }
.rs-ecran__duo .rs-section__header { max-width: none; margin-bottom: 0; }
.rs-ecran__principal > * + * { margin-top: var(--rs-space-6); }
.rs-ecran__principal > .rs-callout { margin-block: var(--rs-space-6) 0; }
.rs-ecran__principal > .rs-block { margin-top: var(--rs-space-6); }
.rs-ecran__suite { margin-top: var(--rs-space-12); }

.rs-ecran__figure img {
	display: block;
	width: 100%;
	height: clamp(15rem, 24vw, 20rem);
	object-fit: cover;
	border-radius: var(--rs-radius-md);
	border: var(--rs-border-width) solid var(--rs-border-default);
}

@media (min-width: 1024px) {
	.rs-ecran__duo { grid-template-columns: 1.4fr 1fr; gap: var(--rs-space-16); }
	.rs-ecran__duo--paire { grid-template-columns: 1fr 1fr; }
	.rs-ecran__duo--photo-gauche { grid-template-columns: 1fr 1.2fr; align-items: center; }
	.rs-ecran__duo--photo-gauche .rs-ecran__figure { order: -1; }
}

/* Écran mis en avant : texte et badge dans une grande carte, filet à gauche. */
.rs-ecran__duo--carte {
	padding: clamp(1.75rem, 4vw, 3rem);
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-left: 3px solid var(--rs-color-primary);
	border-radius: var(--rs-radius-lg);
	box-shadow: var(--rs-shadow-sm);
}
@media (min-width: 1024px) {
	.rs-ecran__duo--carte { grid-template-columns: 1fr auto; gap: var(--rs-space-12); align-items: center; }
}

/* Des listes « Carte » qui se suivent : une grille. */
.rs-ecran__grille { display: grid; gap: var(--rs-space-6); }
@media (min-width: 768px) { .rs-ecran__grille { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rs-ecran__grille--3 { grid-template-columns: repeat(3, 1fr); } }

.rs-checklist-carte {
	display: flex;
	flex-direction: column;
	gap: var(--rs-space-4);
	padding: var(--rs-space-6);
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-md);
}
.rs-checklist-carte__tete { display: flex; align-items: center; gap: 0.6rem; }
.rs-checklist-carte__titre { font-size: 1.0625rem; line-height: 1.25; }
.rs-checklist--compacte { gap: 0.45rem; }
.rs-checklist--compacte li { gap: 0.55rem; font-size: 0.9375rem; color: var(--rs-text-body); }
.rs-checklist--compacte .rs-icon { inline-size: 0.9375rem; block-size: 0.9375rem; background: none; margin-top: 0.3rem; }
.rs-checklist-carte__note {
	padding-top: var(--rs-space-3);
	border-top: var(--rs-border-width) solid var(--rs-border-hairline);
	font-family: var(--rs-font-body);
	font-size: var(--rs-font-size-small);
	line-height: var(--rs-leading-body);
	color: var(--rs-text-subtle);
}

/* Encart « Information » : la phrase et le filet turquoise des pages services. */
.rs-callout--information {
	gap: 0.75rem;
	padding: var(--rs-space-6);
	background: var(--rs-color-surface);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-left: 3px solid var(--rs-color-primary);
}
.rs-callout--information .rs-callout__body { font-size: 0.9375rem; }
.rs-callout--information .rs-callout__body strong { color: var(--rs-text-heading); }
.rs-ecran__duo--cote > .rs-ecran__aside > .rs-callout { margin-block: 0; }

/* --- Atouts : les variantes de template-parts/features.php ---------------- */

.rs-features--cartes,
.rs-features--pastilles,
.rs-features--frise { grid-template-columns: 1fr; }

@media (min-width: 768px) {
	.rs-features--cartes:not(.rs-features--cols-1),
	.rs-features--pastilles { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.rs-features.rs-features--cols-3 { grid-template-columns: repeat(3, 1fr); }
	.rs-features.rs-features--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.rs-features--cartes .rs-features__item {
	display: flex;
	flex-direction: column;
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-md);
	overflow: hidden;
}
.rs-features--cartes .rs-features__corps { display: flex; flex-direction: column; gap: 0.6rem; padding: var(--rs-space-6); }
.rs-features--cartes .rs-features__tete { display: flex; flex-direction: column; gap: 0.6rem; }
.rs-features--cartes .rs-features__title { margin: 0; font-size: 1.0625rem; line-height: 1.25; }
.rs-features--cartes .rs-features__text { line-height: 1.55; }

/* Deux cartes par ligne ont la place d'aligner pastille et titre. */
.rs-features--cols-2 .rs-features__tete { flex-direction: row; align-items: center; }
.rs-features--cols-2 .rs-features__text { font-size: 0.9375rem; line-height: 1.6; color: var(--rs-text-body); }

/* Carte à photo : l'image coiffe la carte, l'icône passe en ligne. */
.rs-features__photo img { display: block; width: 100%; height: 11.25rem; object-fit: cover; }
.rs-features__item--photo .rs-features__corps { padding: var(--rs-space-5); gap: 0.5rem; }
.rs-features__item--photo .rs-features__tete { flex-direction: row; align-items: center; gap: 0.5rem; }
.rs-features__item--photo .rs-pastille { inline-size: auto; block-size: auto; background: none; }
.rs-features__item--photo .rs-features__title { font-family: var(--rs-font-body); font-size: 0.9375rem; font-weight: var(--rs-weight-semibold); line-height: 1.3; }

/* Cartes centrées : Fabrication sur mesure. */
.rs-features--cartes-centrees { max-width: 58rem; margin-inline: auto; }
.rs-features--cartes-centrees .rs-features__corps,
.rs-features--cartes-centrees .rs-features__tete { align-items: center; text-align: center; }
.rs-features--cartes-centrees .rs-features__corps { padding: 1.75rem var(--rs-space-6); }
.rs-features--cartes-centrees .rs-pastille {
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: 0.625rem;
	background: color-mix(in srgb, var(--rs-color-primary) 8%, transparent);
	border: var(--rs-border-width) solid color-mix(in srgb, var(--rs-color-primary) 20%, transparent);
}
.rs-features--cartes-centrees .rs-pastille .rs-icon { inline-size: 1.3rem; block-size: 1.3rem; }

/* Pastilles : un intitulé bordé, l'icône nue en ligne. */
.rs-features--pastilles { gap: 0.75rem; }
.rs-features--pastilles .rs-features__item {
	display: flex;
	align-items: center;
	padding: 0.75rem 1rem;
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-sm);
}
.rs-features--pastilles .rs-features__tete { display: flex; align-items: center; gap: 0.55rem; }
.rs-features--pastilles .rs-pastille { inline-size: auto; block-size: auto; background: none; }
.rs-features--pastilles .rs-features__title { font-family: var(--rs-font-body); font-size: 0.9375rem; color: var(--rs-text-body); }

/* Cellules : une seule carte, découpée en trois. */
.rs-features--cellules {
	gap: 0;
	grid-template-columns: 1fr;
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-md);
	box-shadow: var(--rs-shadow-sm);
	overflow: hidden;
}
.rs-features--cellules .rs-features__item { padding: var(--rs-space-6); }
.rs-features--cellules .rs-features__item + .rs-features__item { border-top: var(--rs-border-width) solid var(--rs-border-hairline); }
.rs-features--cellules .rs-features__tete { display: flex; align-items: center; gap: 0.65rem; }
.rs-features--cellules .rs-pastille { inline-size: auto; block-size: auto; background: none; }
.rs-features--cellules .rs-pastille .rs-icon { inline-size: 1.375rem; block-size: 1.375rem; }
.rs-features--cellules .rs-features__title { font-family: var(--rs-font-body); font-size: 0.9375rem; font-weight: var(--rs-weight-semibold); color: var(--rs-text-heading); }
@media (min-width: 901px) {
	.rs-features--cellules.rs-features--cols-3 { grid-template-columns: repeat(3, 1fr); }
	.rs-features--cellules .rs-features__item + .rs-features__item { border-top: 0; border-left: var(--rs-border-width) solid var(--rs-border-hairline); }
}

/* Frise : repère dans un rond, filet continu derrière. Le rond porte un
   anneau de la couleur du fond, qui coupe le filet. */
.rs-features--frise { position: relative; gap: var(--rs-space-8); --rs-frise-fond: var(--rs-surface-page); }
.rs-section--raised .rs-features--frise { --rs-frise-fond: var(--rs-surface-raised); }
.rs-features--frise .rs-features__item { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--rs-space-4); text-align: center; }
.rs-features__repere {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 3.75rem;
	block-size: 3.75rem;
	border-radius: 50%;
	/* Le repère porte un chiffre : fond d'action, pas de marque (4,07:1 sinon). */
	background: var(--rs-action-primary);
	color: var(--rs-text-on-dark);
	font-family: var(--rs-font-heading);
	font-weight: var(--rs-weight-bold);
	box-shadow: 0 0 0 5px var(--rs-frise-fond);
}
.rs-features--frise .rs-features__corps { display: flex; flex-direction: column; gap: var(--rs-space-4); align-items: center; }
.rs-features--frise .rs-features__title { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
.rs-features--frise .rs-features__text { max-width: 18rem; line-height: 1.6; }
@media (min-width: 768px) { .rs-features--frise { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
	.rs-features--frise.rs-features--cols-4 { grid-template-columns: repeat(4, 1fr); }
	.rs-features--frise::before {
		content: "";
		position: absolute;
		inset: 1.8125rem 0 auto;
		height: 2px;
		background: var(--rs-border-default);
	}
}

/* Badge : un élément, carré, à droite d'un écran mis en avant. */
.rs-features--badge { display: block; }
.rs-features--badge .rs-features__item {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 9.25rem;
	block-size: 9.25rem;
	border-radius: var(--rs-radius-md);
	background: color-mix(in srgb, var(--rs-color-primary) 6%, transparent);
	border: var(--rs-border-width) solid var(--rs-border-hairline);
	text-align: center;
}
.rs-features--badge .rs-features__tete { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.rs-features--badge .rs-pastille { inline-size: auto; block-size: auto; background: none; }
.rs-features--badge .rs-pastille .rs-icon { inline-size: 1.875rem; block-size: 1.875rem; }
.rs-features--badge .rs-features__title { max-width: 6rem; font-family: var(--rs-font-heading); font-weight: var(--rs-weight-bold); font-size: 0.9375rem; line-height: 1.25; color: var(--rs-text-heading); }

/* --- Étapes : frise et cartes (template-parts/steps.php) ------------------ */

.rs-steps--frise,
.rs-steps--cartes { grid-template-columns: 1fr; }
.rs-steps--frise { position: relative; gap: var(--rs-space-8); --rs-frise-fond: var(--rs-surface-page); }
.rs-section--raised .rs-steps--frise { --rs-frise-fond: var(--rs-surface-raised); }
.rs-steps--frise .rs-steps__item,
.rs-steps--cartes .rs-steps__item { position: relative; z-index: 1; align-items: center; gap: var(--rs-space-4); text-align: center; }
.rs-steps--frise .rs-steps__number,
.rs-steps--cartes .rs-steps__number { inline-size: 3rem; block-size: 3rem; font-size: 1.125rem; }
.rs-steps--frise .rs-steps__number { box-shadow: 0 0 0 5px var(--rs-frise-fond); }
.rs-steps--frise .rs-steps__title { font-family: var(--rs-font-body); font-size: 0.9375rem; font-weight: var(--rs-weight-regular, 400); line-height: 1.6; color: var(--rs-text-body); }

.rs-steps--cartes .rs-steps__item {
	padding: 1.75rem var(--rs-space-6);
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-md);
}
.rs-steps--cartes .rs-steps__corps { display: flex; flex-direction: column; gap: var(--rs-space-4); }
.rs-steps--cartes .rs-steps__title { font-size: 1.0625rem; line-height: 1.3; }
.rs-steps--cartes .rs-steps__text { font-size: 0.9375rem; line-height: 1.6; }

@media (min-width: 768px) {
	.rs-steps--frise,
	.rs-steps--cartes { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.rs-steps--frise,
	.rs-steps--cartes { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
	.rs-steps--frise::before {
		content: "";
		position: absolute;
		inset: 1.4375rem 0 auto;
		height: 2px;
		background: var(--rs-border-default);
	}
}

/* --- Panneau de preuves à cheval sur la bannière (AtelierProofBand) ------- */

.rs-section--panneau {
	padding-block: 0;
	background: linear-gradient(180deg, var(--rs-color-dark) 50%, var(--rs-surface-page) 50%);
}
.rs-panneau {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-md);
	box-shadow: var(--rs-shadow-sm);
	overflow: hidden;
}
.rs-panneau__item { padding: var(--rs-space-6); border-top: var(--rs-border-width) solid var(--rs-border-hairline); }
.rs-panneau__item:nth-child(-n + 2) { border-top: 0; }
.rs-panneau__item:nth-child(even) { border-left: var(--rs-border-width) solid var(--rs-border-hairline); }
.rs-panneau__valeur {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.35rem;
	font-family: var(--rs-font-heading);
	font-size: 1.0625rem;
	font-weight: var(--rs-weight-bold);
	line-height: 1.2;
	color: var(--rs-text-heading);
}
.rs-panneau__valeur::before { content: ""; flex: none; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--rs-color-logo); }
.rs-panneau__libelle { padding-left: 1.25rem; font-family: var(--rs-font-body); font-size: var(--rs-font-size-small); line-height: 1.5; color: var(--rs-text-subtle); }
@media (min-width: 901px) {
	.rs-panneau { grid-template-columns: repeat(4, 1fr); }
	.rs-panneau__item { border-top: 0; }
	.rs-panneau__item + .rs-panneau__item { border-left: var(--rs-border-width) solid var(--rs-border-hairline); }
	.rs-panneau__valeur { white-space: nowrap; }
}

/* --- Chapeau : surtitre et en-tête centré (sections/intro.php) ------------ */

.rs-section--intro .rs-block + .rs-container { margin-top: var(--rs-space-12); }
.rs-block--centre .rs-block__text { max-width: 44rem; margin-inline: auto; text-align: center; }
.rs-section--intro .rs-block__text > .rs-eyebrow + .rs-section__title { margin-top: var(--rs-space-3); }
/* Le texte du chapeau est l'intro d'un en-tête de section (SectionHeader) :
   grand corps, gris, détaché du titre. */
.rs-section--intro .rs-section__title + .rs-prose { margin-top: 0.85rem; }
.rs-section--intro .rs-section__title + .rs-prose p { font-size: var(--rs-font-size-body-lg); line-height: 1.6; color: var(--rs-text-subtle); }

/* --- Cartes d'information : prolongements de .rs-coordonnees (lot B11) ---- */

.rs-coordonnees__titre { margin: 0 0 1.1rem; font-size: 1.0625rem; line-height: 1.3; }
.rs-coordonnees__entete { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.rs-coordonnees__entete .rs-coordonnees__titre { margin: 0; }
.rs-coordonnees__ligne--centree { align-items: center; }
.rs-coordonnees__ligne--centree .rs-coordonnees__valeur { margin: 0; }
.rs-coordonnees--contact .rs-coordonnees__lignes { gap: 1rem; }
.rs-coordonnees--contact .rs-coordonnees__icone { inline-size: 2.25rem; block-size: 2.25rem; }
.rs-coordonnees__icone--nue { inline-size: auto; block-size: auto; background: none; border: 0; }
.rs-coordonnees__icone--nue .rs-icon { inline-size: 1.2rem; block-size: 1.2rem; }

.rs-coordonnees__carte--sombre { background: var(--rs-color-dark); border: 0; }
.rs-coordonnees__carte--sombre .rs-coordonnees__titre { color: var(--rs-text-on-dark); }
.rs-coordonnees__carte--sombre .rs-coordonnees__icone { background: color-mix(in srgb, var(--rs-color-white) 8%, transparent); border: 0; }
.rs-coordonnees__carte--sombre .rs-coordonnees__icone .rs-icon { color: var(--rs-color-logo); }
.rs-coordonnees__carte--sombre .rs-coordonnees__lien,
.rs-coordonnees__carte--sombre .rs-coordonnees__valeur { font-family: var(--rs-font-body); font-size: 0.9375rem; color: var(--rs-text-on-dark); }
.rs-coordonnees__carte--sombre .rs-coordonnees__lien:hover { color: var(--rs-color-logo); }
.rs-coordonnees__carte--sombre .rs-coordonnees__actions { margin-top: 1.5rem; padding-top: 1.25rem; border-top-color: color-mix(in srgb, var(--rs-color-white) 12%, transparent); }

.rs-coordonnees__libre .rs-coordonnees__valeur { margin: 0; line-height: 1.6; }
.rs-coordonnees__acces { font-family: var(--rs-font-body); font-size: 0.9375rem; line-height: 1.6; color: var(--rs-text-body); }
.rs-coordonnees__actions--nues { margin-top: var(--rs-space-6); padding-top: 0; border-top: 0; }

/* L'atelier : la liste à gauche, la carte « Notre atelier » à droite. */
.rs-coordonnees--preparation { max-width: 62rem; margin-inline: auto; align-items: stretch; gap: var(--rs-space-12); }
.rs-coordonnees__colonne { display: flex; flex-direction: column; gap: var(--rs-space-5); }
.rs-coordonnees__titre-colonne,
.rs-preparation h3 { margin: 0; font-size: 1.0625rem; }
.rs-preparation ul { flex: 1; display: flex; flex-direction: column; gap: 0.75rem; }
.rs-preparation li {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	padding: var(--rs-space-4) var(--rs-space-5);
	background: var(--rs-color-surface);
	border: var(--rs-border-width) solid var(--rs-border-hairline);
	border-radius: var(--rs-radius-md);
	font-family: var(--rs-font-body);
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--rs-text-body);
}
.rs-preparation li::before {
	content: "";
	flex: none;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	margin-top: 0.1rem;
	background: var(--rs-color-primary);
	-webkit-mask: var(--rs-masque-cercle-coche) center / contain no-repeat;
	mask: var(--rs-masque-cercle-coche) center / contain no-repeat;
}
.rs-coordonnees__carte--teinte {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--rs-space-5);
	padding: var(--rs-space-8);
	background: var(--rs-color-surface);
	box-shadow: none;
}
.rs-coordonnees__valeur--fort { margin: 0; font-weight: var(--rs-weight-semibold); color: var(--rs-text-heading); }
.rs-coordonnees__liens { display: flex; flex-direction: column; gap: 0.5rem; }
.rs-coordonnees__liens a { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--rs-font-body); font-size: 0.9375rem; }
.rs-coordonnees__liens .rs-coordonnees__lien--fort { color: var(--rs-link); }
.rs-coordonnees__carte--teinte .rs-hours { font-family: var(--rs-font-body); font-size: var(--rs-font-size-small); color: var(--rs-text-subtle); }

:root {
	--rs-masque-cercle-coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* --- Devis et étude : la carte d'appel à droite (sections/expertise.php) -- */

.rs-expertise__carte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.9rem;
	padding: var(--rs-space-8);
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
	box-shadow: var(--rs-shadow-sm);
}
.rs-expertise__titre { font-size: var(--rs-font-size-h3); line-height: 1.25; }
.rs-expertise__texte { font-family: var(--rs-font-body); line-height: 1.6; color: var(--rs-text-subtle); }
.rs-expertise__actions { margin-top: 0.35rem; }

/* --- Références en bandeau : ProTrustBand (sections/clients-logos.php) ---- */

.rs-section--bandeau { padding-top: 0; }
.rs-bandeau {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.75rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--rs-surface-card);
	border: var(--rs-border-width) solid var(--rs-border-default);
	border-radius: var(--rs-radius-lg);
	box-shadow: var(--rs-shadow-sm);
}
.rs-bandeau__logos { flex: 1 1 22rem; max-width: 24rem; }
.rs-bandeau__logos img { display: block; width: 100%; height: auto; border-radius: var(--rs-radius-md); }
.rs-bandeau__corps { flex: 1 1 16rem; }
.rs-bandeau__titre { font-size: var(--rs-font-size-h3); line-height: 1.25; }
.rs-bandeau__texte { margin: 0.6rem 0 1.25rem; font-family: var(--rs-font-body); line-height: 1.6; color: var(--rs-text-subtle); }

/* --- Étiquettes et pastilles des Professionnels (sections/items.php) ------ */

.rs-items--etiquettes,
.rs-items--pastilles { gap: 1rem; grid-template-columns: 1fr; }
.rs-items--etiquettes { max-width: 54rem; margin-inline: auto; }
.rs-items--etiquettes .rs-items__item,
.rs-items--pastilles .rs-items__item {
	flex-direction: row;
	align-items: center;
	gap: 0.7rem;
	padding: 1rem 1.15rem;
	border-radius: var(--rs-radius-md);
	text-align: left;
}
.rs-items--pastilles .rs-items__item { gap: 0.85rem; padding: 1.1rem 1.25rem; }
.rs-items--etiquettes .rs-pastille { inline-size: auto; block-size: auto; background: none; }
.rs-items--pastilles .rs-pastille { inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; }
.rs-items--etiquettes .rs-items__title,
.rs-items--pastilles .rs-items__title { font-family: var(--rs-font-body); font-size: 0.9375rem; font-weight: var(--rs-weight-semibold); line-height: 1.35; }
@media (min-width: 768px) {
	.rs-items--etiquettes,
	.rs-items--pastilles { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.rs-items--etiquettes { grid-template-columns: repeat(4, 1fr); }
	.rs-items--pastilles { grid-template-columns: repeat(3, 1fr); }
}

/* --- Mention sous une frise : note, pas encart (sections/encart.php) ------ */

.rs-section--note { padding-block: var(--rs-space-6); }
.rs-encart--note { padding: 0; background: none; border: 0; text-align: center; }
.rs-encart--note .rs-encart__corps { max-width: 54rem; margin-inline: auto; }
.rs-encart--note .rs-encart__text { font-size: 0.8125rem; line-height: 1.6; color: var(--rs-text-subtle); }

/* C05, Interventions sur site : une section « enchaînée » se prolonge dans la
   suivante — les besoins dans les métiers, le déroulé dans sa note — sans le
   double espacement de deux sections. */
.rs-section--enchainee { padding-bottom: 0; }
.rs-section--enchainee + .rs-section--metiers { padding-top: var(--rs-space-12); }

/* =========================================================================
   26. Impression
   ====================================================================== */

@media print {
	.rs-header,
	.rs-footer,
	.rs-mobilebar,
	.rs-final-cta,
	.rs-inline-cta,
	.rs-skip,
	.rs-search,
	.rs-toc,
	.rs-carousel__controls { display: none !important; }

	body { background: var(--rs-color-white); color: var(--rs-color-text-strong); padding-bottom: 0; }
	.rs-faq__item { break-inside: avoid; }
	.rs-faq__answer { display: block !important; }
	.rs-guide { grid-template-columns: 1fr; }
}