/*
Theme Name: RenovPro
Theme URI: https://example.fr
Author: Studio
Description: Thème WordPress autonome pour entreprise de BTP / rénovation générale. Aucun plugin requis : CPT Réalisations et Avis, formulaire de devis multi-étapes, Schema.org GeneralContractor, durcissement sécurité, zéro dépendance externe.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: renovpro
Tags: business, custom-colors, custom-menu, translation-ready
*/

/* ==========================================================================
   1. TOKENS
   Palette « atelier » : ardoise de couverture, zinc, craie, trait de cordeau
   bleu (le fil à tracer du maçon) et brique pour les seules actions.
   ========================================================================== */

:root {
	--ardoise: #131a22;
	--ardoise-clair: #1e2833;
	--zinc: #5b6b7a;
	--zinc-clair: #93a1ad;
	--craie: #f4f2ed;
	--craie-ombre: #e6e2d9;
	--blanc: #ffffff;
	--cordeau: #1f5fd8;
	--cordeau-clair: #eaf0fd;
	--brique: #c1441e;
	--brique-fonce: #9d3617;
	--succes: #1c7a4f;

	--font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-tech: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	--pas: 8px;
	--largeur: 1180px;
	--gouttiere: clamp(20px, 5vw, 48px);
	--rayon: 4px;
	--trans: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--ardoise);
	background: var(--blanc);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--cordeau); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brique); }

:focus-visible { outline: 3px solid var(--cordeau); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.025em;
	margin: 0 0 .5em;
	text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
p { margin: 0 0 1.1em; text-wrap: pretty; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: .35em; }

.ecran-lecteur {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.lien-evitement {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--ardoise); color: #fff; padding: 12px 20px;
}
.lien-evitement:focus { left: 8px; top: 8px; }

/* ==========================================================================
   3. STRUCTURE
   ========================================================================== */

.enveloppe { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.enveloppe--etroite { max-width: 760px; }

.section { padding-block: clamp(56px, 9vw, 104px); }
.section--craie { background: var(--craie); }
.section--ardoise { background: var(--ardoise); color: var(--craie); }
.section--ardoise h2, .section--ardoise h3 { color: var(--blanc); }

/* Signature : le cartouche technique. Chaque section porte son numéro de lot
   et son intitulé, composés comme la légende d'un plan d'exécution. */
.cartouche {
	display: flex; align-items: center; gap: 14px;
	font-family: var(--font-tech); font-size: .72rem;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--zinc); margin-bottom: 20px;
}
.cartouche::before {
	content: ""; width: 34px; height: 0; border-top: 2px solid var(--cordeau); flex: none;
}
.cartouche span { color: var(--cordeau); font-weight: 700; }
.section--ardoise .cartouche { color: var(--zinc-clair); }

.entete-section { max-width: 700px; margin-bottom: clamp(32px, 5vw, 56px); }
.entete-section p { color: var(--zinc); font-size: 1.08rem; margin-bottom: 0; }
.section--ardoise .entete-section p { color: var(--zinc-clair); }

/* ==========================================================================
   4. BOUTONS
   ========================================================================== */

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	font-family: var(--font-display); font-size: 1rem; font-weight: 700;
	padding: 15px 26px; border: 2px solid transparent; border-radius: var(--rayon);
	cursor: pointer; text-decoration: none; transition: var(--trans);
	line-height: 1.2; text-align: center;
}
.btn--primaire { background: var(--brique); color: #fff; }
.btn--primaire:hover { background: var(--brique-fonce); color: #fff; transform: translateY(-2px); }
.btn--secondaire { background: transparent; color: var(--ardoise); border-color: var(--ardoise); }
.btn--secondaire:hover { background: var(--ardoise); color: #fff; }
.section--ardoise .btn--secondaire { color: var(--craie); border-color: var(--zinc); }
.section--ardoise .btn--secondaire:hover { background: var(--craie); color: var(--ardoise); }
.btn--large { width: 100%; padding-block: 18px; font-size: 1.05rem; }

/* ==========================================================================
   5. EN-TÊTE
   ========================================================================== */

.entete {
	position: sticky; top: 0; z-index: 90;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: saturate(150%) blur(8px);
	border-bottom: 1px solid var(--craie-ombre);
}
.entete__interieur { display: flex; align-items: center; gap: 24px; min-height: 72px; }

.marque { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ardoise); margin-right: auto; }
.marque__sigle {
	width: 40px; height: 40px; flex: none; background: var(--ardoise); color: #fff;
	display: grid; place-items: center; border-radius: var(--rayon);
	font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
}
.marque__nom { font-family: var(--font-display); font-weight: 800; font-size: 1.16rem; letter-spacing: -.02em; }
.marque__bl { display: block; font-family: var(--font-tech); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--zinc); font-weight: 400; }

.nav-principale ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav-principale a {
	text-decoration: none; color: var(--ardoise); font-weight: 600; font-size: .96rem;
	padding-block: 6px; border-bottom: 2px solid transparent; display: block;
}
.nav-principale a:hover, .nav-principale .current-menu-item > a { border-bottom-color: var(--brique); color: var(--ardoise); }
.nav-principale .sub-menu { display: none; }

.entete__tel {
	font-family: var(--font-tech); font-weight: 700; font-size: .95rem;
	color: var(--ardoise); text-decoration: none; white-space: nowrap;
}
.entete__tel:hover { color: var(--brique); }

.bascule-menu {
	display: none; background: none; border: 0; padding: 8px; cursor: pointer;
	color: var(--ardoise);
}
.bascule-menu svg { width: 26px; height: 26px; }

@media (max-width: 979px) {
	.bascule-menu { display: block; order: 3; }
	.entete__tel { display: none; }
	.entete .btn { display: none; }
	.nav-principale {
		position: fixed; inset: 72px 0 auto; background: var(--blanc);
		border-bottom: 1px solid var(--craie-ombre); padding: 8px var(--gouttiere) 24px;
		display: none; max-height: calc(100vh - 72px); overflow-y: auto;
	}
	.nav-principale.est-ouverte { display: block; }
	.nav-principale ul { flex-direction: column; gap: 0; }
	.nav-principale a { padding: 14px 0; border-bottom: 1px solid var(--craie); }
}

/* ==========================================================================
   6. HÉROS
   ========================================================================== */

.heros {
	background: var(--ardoise); color: var(--craie);
	position: relative; overflow: hidden;
	padding-block: clamp(56px, 9vw, 96px);
}
/* Trame de plan d'exécution en fond, dessinée en CSS (0 requête, 0 image). */
.heros::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image:
		linear-gradient(rgba(147, 161, 173, .09) 1px, transparent 1px),
		linear-gradient(90deg, rgba(147, 161, 173, .09) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse 70% 90% at 78% 40%, #000 10%, transparent 72%);
	-webkit-mask-image: radial-gradient(ellipse 70% 90% at 78% 40%, #000 10%, transparent 72%);
}
.heros__grille { position: relative; display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .heros__grille { grid-template-columns: 1.15fr .85fr; } }

.heros h1 { color: var(--blanc); margin-bottom: 20px; }
.heros h1 em { font-style: normal; color: var(--brique); }
.heros__accroche { font-size: clamp(1.05rem, 2vw, 1.22rem); color: var(--zinc-clair); max-width: 46ch; margin-bottom: 30px; }
.heros__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }

.reassurance { display: flex; flex-wrap: wrap; gap: 12px 26px; list-style: none; margin: 0; padding: 0; }
.reassurance li {
	font-family: var(--font-tech); font-size: .76rem; letter-spacing: .07em;
	text-transform: uppercase; color: var(--zinc-clair); display: flex; align-items: center; gap: 8px;
}
.reassurance li::before { content: ""; width: 7px; height: 7px; background: var(--cordeau); border-radius: 50%; flex: none; }

/* Carte devis express dans le héros */
.carte-express {
	background: var(--blanc); color: var(--ardoise);
	border-radius: var(--rayon); padding: clamp(24px, 3vw, 32px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
	border-top: 5px solid var(--brique);
}
.carte-express h2 { font-size: 1.32rem; margin-bottom: 6px; }
.carte-express > p { color: var(--zinc); font-size: .94rem; margin-bottom: 18px; }

/* ==========================================================================
   7. GRILLES & CARTES
   ========================================================================== */

.grille { display: grid; gap: 20px; }
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }

.carte-service {
	position: relative; display: flex; flex-direction: column;
	background: var(--blanc); border: 1px solid var(--craie-ombre);
	border-radius: var(--rayon); padding: 26px 24px 24px;
	text-decoration: none; color: var(--ardoise); transition: var(--trans);
	overflow: hidden;
}
.carte-service::after {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
	background: var(--cordeau); transform: scaleY(0); transform-origin: top; transition: var(--trans);
}
.carte-service:hover { border-color: var(--zinc-clair); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(19, 26, 34, .1); color: var(--ardoise); }
.carte-service:hover::after { transform: scaleY(1); }
.carte-service__lot { font-family: var(--font-tech); font-size: .7rem; letter-spacing: .14em; color: var(--zinc); margin-bottom: 12px; }
.carte-service h3 { font-size: 1.16rem; margin-bottom: 8px; }
.carte-service p { font-size: .93rem; color: var(--zinc); margin-bottom: 16px; }
.carte-service__lien { margin-top: auto; font-weight: 700; font-size: .92rem; color: var(--cordeau); }
.carte-service__lien::after { content: " →"; }

.carte-service--phare { background: var(--ardoise); border-color: var(--ardoise); color: var(--craie); }
.carte-service--phare h3 { color: var(--blanc); }
.carte-service--phare p { color: var(--zinc-clair); }
.carte-service--phare .carte-service__lot { color: var(--zinc-clair); }
.carte-service--phare:hover { color: var(--craie); }
.badge {
	position: absolute; top: 14px; right: 14px;
	background: var(--brique); color: #fff; font-family: var(--font-tech);
	font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
	padding: 4px 9px; border-radius: 2px; font-weight: 700;
}

/* Étapes du process : numérotées parce que l'ordre porte l'information */
.etapes { counter-reset: etape; display: grid; gap: 4px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.etape { position: relative; padding: 28px 20px 24px; background: var(--blanc); border-top: 3px solid var(--craie-ombre); }
.etape::before {
	counter-increment: etape; content: counter(etape, decimal-leading-zero);
	font-family: var(--font-tech); font-size: .8rem; font-weight: 700; color: var(--cordeau);
	display: block; margin-bottom: 10px;
}
.etape:hover { border-top-color: var(--cordeau); }
.etape h3 { font-size: 1.05rem; margin-bottom: 6px; }
.etape p { font-size: .9rem; color: var(--zinc); margin: 0; }

/* ==========================================================================
   8. RÉALISATIONS
   ========================================================================== */

.carte-realisation {
	display: flex; flex-direction: column; background: var(--blanc);
	border: 1px solid var(--craie-ombre); border-radius: var(--rayon);
	overflow: hidden; text-decoration: none; color: var(--ardoise); transition: var(--trans);
}
.carte-realisation:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(19, 26, 34, .12); color: var(--ardoise); }
.carte-realisation__visuel { aspect-ratio: 4 / 3; background: var(--craie-ombre); position: relative; overflow: hidden; }
.carte-realisation__visuel img { width: 100%; height: 100%; object-fit: cover; }
.carte-realisation__corps { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.carte-realisation h3 { font-size: 1.08rem; margin-bottom: 8px; }
.meta-tech {
	display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: auto; padding-top: 14px;
	border-top: 1px dashed var(--craie-ombre);
	font-family: var(--font-tech); font-size: .74rem; color: var(--zinc); letter-spacing: .04em;
}

/* Substitut de visuel : jamais d'image cassée avant l'ajout des photos */
.substitut {
	position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; text-align: center;
	background: repeating-linear-gradient(45deg, #e6e2d9 0 12px, #ddd8cd 12px 24px);
	color: var(--zinc); font-family: var(--font-tech); font-size: .7rem;
	letter-spacing: .14em; text-transform: uppercase;
}

/* Comparateur avant / après : le geste central de la page réalisation */
.comparateur { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--rayon); background: var(--craie-ombre); touch-action: none; user-select: none; }
.comparateur__volet { position: absolute; inset: 0; }
.comparateur__volet img { width: 100%; height: 100%; object-fit: cover; }
.comparateur__volet--apres { clip-path: inset(0 0 0 var(--position, 50%)); }
.comparateur__etiquette {
	position: absolute; bottom: 14px; padding: 5px 11px; background: rgba(19, 26, 34, .82); color: #fff;
	font-family: var(--font-tech); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
}
.comparateur__volet--avant .comparateur__etiquette { left: 14px; }
.comparateur__volet--apres .comparateur__etiquette { right: 14px; }
.comparateur__poignee {
	position: absolute; top: 0; bottom: 0; left: var(--position, 50%);
	width: 3px; background: var(--blanc); transform: translateX(-50%);
	cursor: ew-resize; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}
.comparateur__poignee::after {
	content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px;
	transform: translate(-50%, -50%); background: var(--blanc); border-radius: 50%;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .3);
}
.comparateur__poignee::before {
	content: "◂ ▸"; position: absolute; top: 50%; left: 50%; z-index: 2;
	transform: translate(-50%, -50%); font-size: .72rem; color: var(--ardoise); letter-spacing: 1px;
}

/* Filtres d'archive */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filtres a {
	font-family: var(--font-tech); font-size: .78rem; letter-spacing: .06em;
	padding: 8px 14px; border: 1px solid var(--craie-ombre); border-radius: 100px;
	text-decoration: none; color: var(--zinc); background: var(--blanc); transition: var(--trans);
}
.filtres a:hover, .filtres a[aria-current="page"] { background: var(--ardoise); border-color: var(--ardoise); color: #fff; }

/* ==========================================================================
   9. AVIS
   ========================================================================== */

.avis {
	background: var(--blanc); border: 1px solid var(--craie-ombre);
	border-radius: var(--rayon); padding: 26px 24px; display: flex; flex-direction: column;
}
.avis__note { color: var(--brique); letter-spacing: 3px; font-size: 1rem; margin-bottom: 12px; }
.avis blockquote { margin: 0 0 18px; font-size: 1rem; }
.avis blockquote p:last-child { margin-bottom: 0; }
.avis__signature { margin-top: auto; font-family: var(--font-tech); font-size: .75rem; color: var(--zinc); letter-spacing: .05em; }
.avis__signature strong { display: block; font-family: var(--font-display); font-size: .98rem; color: var(--ardoise); letter-spacing: 0; margin-bottom: 3px; }
.avis__verif { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; color: var(--succes); font-size: .72rem; }

.bandeau-note {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
	padding: 18px 22px; background: var(--cordeau-clair); border-left: 4px solid var(--cordeau);
	border-radius: var(--rayon); margin-bottom: 32px;
}
.bandeau-note strong { font-size: 1.7rem; font-family: var(--font-display); }

/* ==========================================================================
   10. FAQ (accordéon natif, zéro JS)
   ========================================================================== */

.faq details {
	border-bottom: 1px solid var(--craie-ombre); padding: 4px 0;
}
.faq summary {
	cursor: pointer; padding: 20px 40px 20px 0; position: relative;
	font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
	font-size: 1.5rem; font-weight: 400; color: var(--cordeau); line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding-bottom: 20px; color: var(--zinc); max-width: 68ch; }
.faq details > div p:last-child { margin-bottom: 0; }

/* ==========================================================================
   11. FORMULAIRE DE DEVIS MULTI-ÉTAPES
   ========================================================================== */

.devis { --etapes-total: 7; }
.devis__jauge { height: 4px; background: var(--craie-ombre); border-radius: 100px; overflow: hidden; margin-bottom: 10px; }
.devis__jauge span { display: block; height: 100%; background: var(--cordeau); width: 14%; transition: width 300ms ease; }
.devis__compteur { font-family: var(--font-tech); font-size: .72rem; letter-spacing: .1em; color: var(--zinc); text-transform: uppercase; margin-bottom: 20px; }

.devis__etape { display: none; }
.devis__etape.est-active { display: block; animation: apparition 260ms ease; }
@keyframes apparition { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.devis__legende { font-family: var(--font-display); font-weight: 800; font-size: 1.18rem; display: block; margin-bottom: 4px; line-height: 1.25; }
.devis__aide { font-size: .88rem; color: var(--zinc); margin-bottom: 16px; }

.choix { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 20px; }
.choix label {
	position: relative; display: block; padding: 14px 16px; cursor: pointer;
	border: 2px solid var(--craie-ombre); border-radius: var(--rayon);
	font-size: .93rem; font-weight: 600; transition: var(--trans); background: var(--blanc);
}
.choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix label:hover { border-color: var(--zinc-clair); }
.choix input:checked + span { color: var(--cordeau); }
.choix label:has(input:checked) { border-color: var(--cordeau); background: var(--cordeau-clair); }
.choix label:has(input:focus-visible) { outline: 3px solid var(--cordeau); outline-offset: 2px; }

.champ { margin-bottom: 16px; }
.champ label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.champ input, .champ select, .champ textarea {
	width: 100%; padding: 13px 14px; font-size: 1rem; font-family: inherit;
	border: 2px solid var(--craie-ombre); border-radius: var(--rayon); background: var(--blanc); color: var(--ardoise);
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--cordeau); outline: none; }
.champ textarea { min-height: 110px; resize: vertical; }
.champ--miel { position: absolute; left: -9999px; }

.devis__pilotage { display: flex; gap: 10px; margin-top: 22px; }
.devis__pilotage .btn { flex: 1; }
.devis__mention { font-size: .78rem; color: var(--zinc); margin-top: 14px; margin-bottom: 0; }

.alerte { padding: 16px 18px; border-radius: var(--rayon); margin-bottom: 20px; font-size: .94rem; }
.alerte--ok { background: #e8f5ee; border-left: 4px solid var(--succes); color: #145c3b; }
.alerte--ko { background: #fdecea; border-left: 4px solid var(--brique); color: var(--brique-fonce); }

/* ==========================================================================
   12. BARRE MOBILE COLLANTE
   ========================================================================== */

.barre-mobile {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
	display: none; background: var(--blanc);
	border-top: 1px solid var(--craie-ombre);
	padding: 10px var(--gouttiere) calc(10px + env(safe-area-inset-bottom));
	gap: 10px; box-shadow: 0 -6px 24px rgba(19, 26, 34, .12);
}
.barre-mobile .btn { flex: 1; padding: 14px 10px; font-size: .95rem; }
@media (max-width: 767px) {
	.barre-mobile { display: flex; }
	body { padding-bottom: 76px; }
}

/* ==========================================================================
   13. CONTENU ÉDITORIAL & PIED DE PAGE
   ========================================================================== */

.contenu > * { margin-bottom: 1.1em; }
.contenu h2 { margin-top: 1.9em; }
.contenu h3 { margin-top: 1.5em; }
.contenu ul li::marker { color: var(--cordeau); }
.contenu table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.contenu th, .contenu td { padding: 12px 14px; border-bottom: 1px solid var(--craie-ombre); text-align: left; }
.contenu th { font-family: var(--font-tech); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--zinc); }
.contenu blockquote { border-left: 3px solid var(--cordeau); padding-left: 20px; margin-left: 0; color: var(--zinc); font-size: 1.06rem; }

.fil-ariane { font-family: var(--font-tech); font-size: .74rem; letter-spacing: .06em; color: var(--zinc); padding-block: 16px; }
.fil-ariane a { color: var(--zinc); text-decoration: none; }
.fil-ariane a:hover { color: var(--cordeau); text-decoration: underline; }

.pied { background: var(--ardoise); color: var(--zinc-clair); padding-block: clamp(48px, 6vw, 72px) 0; font-size: .93rem; }
.pied a { color: var(--zinc-clair); text-decoration: none; }
.pied a:hover { color: var(--blanc); text-decoration: underline; }
.pied h3 { font-size: .78rem; font-family: var(--font-tech); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blanc); margin-bottom: 16px; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 9px; }
.pied__grille { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding-bottom: 44px; }
.pied__bas { border-top: 1px solid rgba(147, 161, 173, .2); padding-block: 22px; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-family: var(--font-tech); font-size: .74rem; letter-spacing: .05em; }

.pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.pagination .page-numbers {
	padding: 10px 16px; border: 1px solid var(--craie-ombre); border-radius: var(--rayon);
	text-decoration: none; color: var(--ardoise); font-family: var(--font-tech); font-size: .85rem;
}
.pagination .current, .pagination .page-numbers:hover { background: var(--ardoise); color: #fff; border-color: var(--ardoise); }

/* Bandeau d'appel final */
.appel-final { background: var(--brique); color: #fff; }
.appel-final h2 { color: #fff; }
.appel-final p { color: rgba(255, 255, 255, .9); }
.appel-final .btn--secondaire { color: #fff; border-color: rgba(255, 255, 255, .6); }
.appel-final .btn--secondaire:hover { background: #fff; color: var(--brique); }
.appel-final .btn--primaire { background: var(--blanc); color: var(--brique); }
.appel-final .btn--primaire:hover { background: var(--ardoise); color: #fff; }

.encart-cle-en-main {
	display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px;
	background: var(--ardoise); color: var(--craie); padding: clamp(24px, 4vw, 36px);
	border-radius: var(--rayon); margin-block: 40px;
}
.encart-cle-en-main div { flex: 1 1 320px; }
.encart-cle-en-main h2, .encart-cle-en-main h3 { color: var(--blanc); margin-bottom: 6px; font-size: 1.3rem; }
.encart-cle-en-main p { margin: 0; color: var(--zinc-clair); font-size: .96rem; }

/* Impression */
@media print {
	.entete, .barre-mobile, .pied, .appel-final, .devis { display: none !important; }
	body { color: #000; }
}