/*
Theme Name: Réno Serein
Theme URI: https://renoserein.fr
Author: Agence La Ruche
Description: Thème bloc léger de renoserein.fr (mise en relation avec des artisans RGE en Alsace). Direction graphique A « clair et produit ».
Version: 0.2.0
Requires at least: 6.6
Requires PHP: 8.1
License: Propriétaire
Text Domain: renoserein
*/

/* Le design system vit dans theme.json ; ici seulement ce que theme.json ne sait pas exprimer. */

:where(a, button, input, select, textarea, .wp-element-button):focus-visible {
	outline: 3px solid var(--wp--preset--color--vert);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Les sections du gabarit s'enchaînent sans bande vide (le rythme vient des paddings des sections). */
.wp-site-blocks > * + * { margin-block-start: 0; }

/* ---------- En-tête ---------- */
.rs-header { position: sticky; top: 0; z-index: 20; }
/* Fond flouté sur un pseudo-élément : un backdrop-filter sur le header lui-même enfermerait le menu mobile (position fixed) dans sa hauteur. */
.rs-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(255 255 255 / .95); backdrop-filter: blur(8px); }
.admin-bar .rs-header { top: 32px; }
.rs-brand {
	display: inline-flex; align-items: center; gap: .6rem;
	text-decoration: none; color: var(--wp--preset--color--encre);
	font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; line-height: 1;
}
.rs-brand svg { width: 34px; height: 34px; flex: none; }
.rs-brand b { color: var(--wp--preset--color--vert); font-weight: 800; }
.rs-header .wp-block-navigation a { text-decoration: none; color: var(--wp--preset--color--gris); }
.rs-header .wp-block-navigation a:hover { color: var(--wp--preset--color--encre); }
.rs-header-cta { flex-wrap: nowrap; gap: .6rem; }
.rs-header-cta .wp-block-button__link { white-space: nowrap; }

/* Menu burger : en dessous de 1200 px les liens et les deux boutons ne tiennent plus sur une ligne. */
@media (max-width: 1199px) {
	.rs-header .wp-block-navigation { order: 2; }
	.rs-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.rs-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
.rs-header .wp-block-navigation__responsive-container-open,
.rs-header .wp-block-navigation__responsive-container-close { padding: .6rem; margin: -.6rem; color: var(--wp--preset--color--encre); } /* zone tactile de 44 px */
.rs-header .wp-block-navigation__responsive-container-open svg,
.rs-header .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }

/* Menu ouvert : panneau plein écran, liens en grand, les deux actions en bas */
.rs-header .wp-block-navigation__responsive-container.is-menu-open { padding: 1.1rem 1.25rem 2rem; background: #fff; color: var(--wp--preset--color--encre); }
.rs-header .is-menu-open .wp-block-navigation__responsive-dialog { margin-top: 0 !important; }
.rs-header .is-menu-open .wp-block-navigation__responsive-container-close { top: 1rem; right: 1.25rem; }
.rs-header .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 0 !important; }
.rs-header .is-menu-open .wp-block-navigation__responsive-container-content::before { content: "Menu"; display: block; margin: 1rem 0 1.5rem; line-height: 28px; font-size: .875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--wp--preset--color--gris); }
.rs-header .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content,
.rs-header .wp-block-navigation .is-menu-open .wp-block-navigation__container { align-items: stretch; gap: 0; width: 100%; }
.rs-header .is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--wp--preset--color--trait); }
.rs-header .is-menu-open .wp-block-navigation-item__content { display: block; width: 100%; padding: 1rem 0 !important; font-size: 1.3rem; font-weight: 700; color: var(--wp--preset--color--encre) !important; }
.rs-header .rs-nav-cta { display: none !important; }
.rs-header .is-menu-open .rs-nav-cta { order: 2; display: flex !important; flex-direction: column; gap: .75rem; width: 100%; margin-top: 1.75rem; border: 0; }
.rs-header .is-menu-open .rs-nav-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link { color: #fff; }
.has-modal-open .rs-sticky { display: none !important; } /* la barre du bas recouvrirait le menu ouvert */
@media (min-width: 600px) { /* tablette : panneau à droite plutôt que plein écran */
	.rs-header .wp-block-navigation__responsive-container.is-menu-open { left: auto; width: min(420px, 100%); box-shadow: -24px 0 60px rgb(0 0 0 / .12); }
}
.rs-header .is-menu-open .rs-nav-cta .wp-block-button { width: 100%; }
.rs-header .is-menu-open .rs-nav-cta .wp-block-button__link { display: block; width: 100%; box-sizing: border-box; padding: 1rem; font-size: 1.05rem; text-align: center; }
.rs-header .is-menu-open .rs-nav-cta .is-style-outline .wp-block-button__link { color: var(--wp--preset--color--vert); background: #fff; border: 2px solid currentColor; }
.rs-header-cta .is-style-outline .wp-block-button__link { color: var(--wp--preset--color--vert); background: #fff; border: 2px solid currentColor; }
.rs-header-cta .is-style-outline .wp-block-button__link:hover { color: var(--wp--preset--color--encre); }

/* ---------- Accueil ---------- */
.rs-pill {
	display: inline-block; background: var(--wp--preset--color--menthe); color: var(--wp--preset--color--vert);
	font-weight: 700; font-size: .875rem; padding: .3rem .8rem; border-radius: 99px;
}
.rs-accent { color: var(--wp--preset--color--vert); }

/* Champ code postal du haut de page (envoie vers /devis/?cp=…) */
.rs-cp {
	display: flex; gap: .5rem; max-width: 520px; padding: .375rem;
	background: #fff; border: 2px solid var(--wp--preset--color--encre); border-radius: 16px;
	box-shadow: 0 10px 30px -18px rgb(14 27 23 / .5);
}
.rs-cp label { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: .2rem .75rem; }
.rs-cp label span { font-size: .75rem; font-weight: 700; color: var(--wp--preset--color--gris); }
.rs-cp input { min-width: 0; width: 100%; border: 0; outline-offset: 6px; font: inherit; font-size: 1.15rem; font-weight: 700; padding: 0; background: none; }
.rs-cp button {
	border: 0; cursor: pointer; font: inherit; font-weight: 700; color: #fff;
	background: var(--wp--preset--color--vert); border-radius: 12px; padding: .8rem 1.3rem;
}
.rs-cp button:hover { background: var(--wp--preset--color--encre); }

.rs-micro { list-style: none; padding: 0; margin: .9rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: .875rem; font-weight: 600; color: var(--wp--preset--color--gris); }
.rs-micro li::before { content: "✓ "; color: var(--wp--preset--color--vert); font-weight: 800; }

/* Photo du haut de page avec sa légende posée dessus */
.rs-photo { position: relative; margin: 0; }
.rs-photo img { width: 100%; height: auto; aspect-ratio: 1 / 1.02; object-fit: cover; border-radius: 28px; display: block; }
.rs-photo figcaption {
	position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; margin: 0;
	background: #fff; border-radius: 14px; padding: .8rem 1rem;
	font-size: .875rem; font-weight: 500; line-height: 1.45; color: var(--wp--preset--color--encre);
	box-shadow: 0 18px 40px -20px rgb(14 27 23 / .45);
}

/* Fil d'Ariane au-dessus du titre des pages */
.rs-fil-ariane ol { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: .875rem; color: var(--wp--preset--color--gris); }
.rs-fil-ariane li + li::before { content: "›"; margin-right: .5rem; }
.rs-fil-ariane a { color: inherit; }
.rs-fil-ariane [aria-current] { color: var(--wp--preset--color--encre); }

/* Photo d'illustration sous le chapeau des pages de contenu */
.rs-illustration { margin: 1.5rem 0 2rem; }
.rs-illustration img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; display: block; }

/* Cartes (étapes, types de PAC) */
.rs-carte { border-radius: 20px; }
.rs-num {
	width: 2.25rem; height: 2.25rem; border-radius: 50%; margin: 0;
	display: grid; place-items: center;
	background: var(--wp--preset--color--encre); color: #fff; font-weight: 800; font-size: 1rem;
}
.rs-tag { display: inline-block; font-weight: 800; font-size: .8rem; padding: .2rem .6rem; border-radius: 8px; background: var(--wp--preset--color--soleil); color: var(--wp--preset--color--encre); }
.rs-tag.is-menthe { background: var(--wp--preset--color--menthe); }
.rs-lien-fort a { font-weight: 700; text-decoration: none; }

/* Bloc sombre « Qui nous paie » */
.rs-sombre { border-radius: 32px; }
.rs-sombre .rs-item { background: rgb(255 255 255 / .07); border-radius: 14px; padding: .9rem 1rem; }
.rs-sombre .rs-item strong { display: block; }

/* ---------- Listes utilitaires (pages de contenu) ---------- */
.rs-trust { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.rs-trust li { position: relative; padding-left: 1.9rem; }
.rs-trust li::before {
	content: ""; position: absolute; left: 0; top: .2rem; width: 1.25rem; height: 1.25rem; border-radius: 50%;
	background: var(--wp--preset--color--vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat;
}
.rs-steps { counter-reset: etape; list-style: none; padding: 0; display: grid; gap: 1.25rem; }
.rs-steps > li { counter-increment: etape; position: relative; padding-left: 3.25rem; }
.rs-steps > li::before {
	content: counter(etape); position: absolute; left: 0; top: -.1rem;
	width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center;
	background: var(--wp--preset--color--encre); color: #fff; font-weight: 800;
}

/* Placeholder visible pour toute donnée non encore sourcée */
.rs-a-verifier {
	background: #FFE9B8; color: var(--wp--preset--color--encre);
	border: 1px dashed #A15C00; padding: 0 .35em; border-radius: 4px; font-weight: 700;
}
.rs-source { font-size: .85em; color: var(--wp--preset--color--gris); }

/* Tableaux : bordures discrètes */
.wp-block-table :where(th, td) { border: 1px solid var(--wp--preset--color--trait); padding: .6rem .8rem; vertical-align: top; }
.wp-block-table thead { border-bottom: 2px solid var(--wp--preset--color--encre); background: var(--wp--preset--color--doux); }
.wp-block-table th { text-align: left; }

/* FAQ */
.wp-block-details summary { font-weight: 700; font-size: 1.1rem; cursor: pointer; }

/* ---------- Pied de page ---------- */
.rs-footer .wp-block-list { list-style: none; }
.rs-footer .wp-block-list li { margin-bottom: .35rem; }
.rs-footer a { color: var(--wp--preset--color--gris); }
.rs-footer a:hover { color: var(--wp--preset--color--encre); }

/* Bouton fixe en bas d'écran, mobile uniquement */
.rs-sticky { display: none; }

@media (max-width: 781px) {
	.rs-header-cta { display: none !important; }
	.rs-sticky {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
		padding: .75rem 1rem; background: #fff; border-top: 1px solid var(--wp--preset--color--trait);
	}
	.rs-sticky { display: flex; gap: .6rem; }
	.rs-sticky a {
		flex: 1; display: block; text-align: center; text-decoration: none; font-weight: 700;
		background: var(--wp--preset--color--vert); color: #fff; border-radius: 12px; padding: .85rem 1rem;
	}
	.rs-sticky .rs-sticky-sim { flex: 0 0 auto; color: var(--wp--preset--color--vert); background: #fff; border: 2px solid currentColor; padding: calc(.85rem - 2px) 1rem; }
	body { padding-bottom: 5rem; }
	.rs-photo img { aspect-ratio: 4 / 3; }
	.rs-photo figcaption { left: .75rem; right: .75rem; bottom: .75rem; font-size: .8rem; }
	.rs-sombre { border-radius: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Tableau des sources en bas de page */
.rs-sources { margin-top: var(--wp--preset--spacing--50); padding-top: 1rem; border-top: 1px solid var(--wp--preset--color--trait); font-size: .85rem; color: var(--wp--preset--color--gris); }
.rs-sources-titre { font-weight: 800; color: var(--wp--preset--color--encre); margin: 0 0 .4rem; }
.rs-sources ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; }
.rs-sources a { overflow-wrap: anywhere; }
.rs-donnee { font-weight: 700; }
.rs-cta h3 { margin-top: 0; }
.rs-encart { margin-block: var(--wp--preset--spacing--40); }
.rs-encart > :first-child { margin-top: 0; }
.rs-encart > :last-child { margin-bottom: 0; }

/* ---------- Guides & conseils : filtres et cartes ([rs_guides]), gabarit page-guides.html en pleine largeur ---------- */
.rs-chapeau { max-width: 760px; }
.rs-guides { margin-bottom: var(--wp--preset--spacing--60); }
.rs-filtre { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .75rem; }
.rs-filtre-nom { width: 4rem; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--wp--preset--color--gris); }
/* Mobile : chaque ligne de filtres défile à l'horizontale au lieu d'empiler les boutons */
@media (max-width: 600px) {
	.rs-filtre { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--wp--style--root--padding-right, 1rem)); padding: 2px 1rem 2px 2px; }
	.rs-filtre::-webkit-scrollbar { display: none; }
	.rs-filtre-nom { width: auto; flex: none; }
	.rs-filtre button { flex: none; padding: .45rem .9rem; font-size: .9rem; }
}
.rs-filtre button {
	font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer;
	padding: .55rem 1.05rem; border-radius: 999px;
	border: 2px solid var(--wp--preset--color--encre); background: #fff; color: var(--wp--preset--color--encre);
}
.rs-filtre button span { font-weight: 600; color: var(--wp--preset--color--gris); margin-left: .25rem; }
.rs-filtre button[aria-pressed="true"] { background: var(--wp--preset--color--encre); color: #fff; }
.rs-filtre button[aria-pressed="true"] span { color: rgb(255 255 255 / .75); }
.rs-filtre button:hover { border-color: var(--wp--preset--color--vert); }
.rs-guides-nb { margin: 1rem 0; font-size: .9rem; color: var(--wp--preset--color--gris); }
.rs-guides-grille { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.rs-guide[hidden] { display: none; }
.rs-guide a {
	display: flex; flex-direction: column; height: 100%; overflow: hidden; text-decoration: none; color: var(--wp--preset--color--encre);
	border: 1px solid var(--wp--preset--color--trait); border-radius: 20px; background: #fff;
	transition: box-shadow .2s, transform .2s;
}
.rs-guide a:hover { box-shadow: 0 10px 30px rgb(14 27 23 / .1); transform: translateY(-2px); }
.rs-guide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--wp--preset--color--doux); }
.rs-guide-texte { display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem 1.25rem 1.4rem; }
.rs-guide time, .rs-guide-villes { font-size: .85rem; font-weight: 600; color: var(--wp--preset--color--gris); }
.rs-guide strong { font-size: 1.2rem; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; }
.rs-guide-villes { margin-top: auto; padding-top: .4rem; color: var(--wp--preset--color--vert); }