/* ==========================================================================
   WOLF SÉCURITÉ — feuille de style unique.

   Aucune bibliothèque, aucune police distante : tout est ici. La page charge
   trois fichiers en tout (HTML, CSS, JS) et rien ne part vers un service tiers,
   ce qui évite au passage la question du consentement aux cookies.

   Sommaire
   1.  Jetons (couleurs, espaces, rythme typographique)
   2.  Socle
   3.  Éléments communs (boutons, titres, sections)
   4.  En-tête et navigation
   5.  Hero
   6.  Bandeau de preuves
   7.  Services
   8.  Méthode, chiffres, secteurs
   9.  Questions fréquentes
   10. Formulaire de devis
   11. Pied de page et barre d'appel mobile
   12. Apparitions au défilement
   13. Pages de texte (mentions, confidentialité)
   ========================================================================== */

/* 1. Jetons ================================================================ */

:root {
	--noir:          #08090B;
	--noir-2:        #0E1014;
	--noir-3:        #15181E;
	--ligne:         #23272F;
	--gris:          #8A9099;
	--gris-clair:    #C7CCD3;
	--blanc:         #F6F7F9;

	--rouge:         #E11D2E;
	--rouge-vif:     #FF2D3F;
	--rouge-sombre:  #8E0F1C;

	--largeur:       1200px;
	--gouttiere:     24px;
	--rayon:         14px;
	--rayon-petit:   10px;

	--ombre:         0 20px 60px rgba(0, 0, 0, .45);
	--ombre-douce:   0 8px 30px rgba(0, 0, 0, .28);

	--transition:    .28s cubic-bezier(.22, .61, .36, 1);

	--police: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto,
	          "Helvetica Neue", Arial, sans-serif;
}

/* 2. Socle ================================================================= */

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

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

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

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

a {
	color: inherit;
	text-decoration: none;
}

/* Un contour visible au clavier : c'est la seule façon de se repérer sans souris. */
:focus-visible {
	outline: 3px solid var(--rouge-vif);
	outline-offset: 3px;
	border-radius: 4px;
}

.lien-evitement {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--rouge);
	color: #fff;
	padding: 14px 22px;
	font-weight: 700;
}

.lien-evitement:focus {
	left: 12px;
	top: 12px;
}

.conteneur {
	width: 100%;
	max-width: var(--largeur);
	margin: 0 auto;
	padding: 0 var(--gouttiere);
}

.invisible {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

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

.section {
	padding: clamp(64px, 9vw, 120px) 0;
	position: relative;
}

.section--sombre {
	background: var(--noir-2);
}

.surtitre {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--rouge-vif);
	margin: 0 0 18px;
}

.surtitre::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--rouge);
}

h1, h2, h3, h4 {
	color: var(--blanc);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.02em;
	margin: 0 0 18px;
}

h1 { font-size: clamp(38px, 6.4vw, 72px); }
h2 { font-size: clamp(30px, 4.2vw, 46px); }
h3 { font-size: clamp(20px, 2.2vw, 24px); }

p { margin: 0 0 18px; }

.intro {
	font-size: clamp(17px, 1.6vw, 19px);
	color: var(--gris);
	max-width: 62ch;
}

.entete-section {
	max-width: 760px;
	margin-bottom: clamp(36px, 5vw, 56px);
}

.entete-section--centre {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 30px;
	border: 1px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: .01em;
	cursor: pointer;
	transition: transform var(--transition), background var(--transition),
	            border-color var(--transition), box-shadow var(--transition);
	will-change: transform;
}

.btn svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.btn--plein {
	background: var(--rouge);
	color: #fff;
	box-shadow: 0 10px 30px rgba(225, 29, 46, .32);
}

.btn--plein:hover {
	background: var(--rouge-vif);
	transform: translateY(-2px);
	box-shadow: 0 16px 40px rgba(225, 29, 46, .42);
}

.btn--fantome {
	background: rgba(255, 255, 255, .04);
	border-color: rgba(255, 255, 255, .16);
	color: var(--blanc);
	backdrop-filter: blur(6px);
}

.btn--fantome:hover {
	border-color: rgba(255, 255, 255, .42);
	background: rgba(255, 255, 255, .09);
	transform: translateY(-2px);
}

.btn--large {
	width: 100%;
	padding: 18px 30px;
}

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

.entete {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	transition: background var(--transition), border-color var(--transition),
	            box-shadow var(--transition);
	border-bottom: 1px solid transparent;
}

.entete--pose {
	background: rgba(8, 9, 11, .88);
	backdrop-filter: blur(14px);
	border-bottom-color: var(--ligne);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.entete__barre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 84px;
}

.marque {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	flex: none;
}

.marque img {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #fff;
}

.marque__texte {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.marque__nom {
	color: var(--blanc);
	font-weight: 800;
	font-size: 18px;
	letter-spacing: .06em;
}

.marque__baseline {
	color: var(--gris);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.nav {
	display: flex;
	align-items: center;
	gap: 6px;
}

.nav a {
	position: relative;
	padding: 10px 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--gris-clair);
	border-radius: 8px;
	transition: color var(--transition);
}

.nav a::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 4px;
	height: 2px;
	background: var(--rouge);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition);
}

.nav a:hover,
.nav a[aria-current="true"] {
	color: var(--blanc);
}

.nav a:hover::after,
.nav a[aria-current="true"]::after {
	transform: scaleX(1);
}

.entete__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: none;
}

.tel-entete {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	color: var(--blanc);
	font-size: 15px;
	padding: 10px 16px;
	border-radius: 999px;
	border: 1px solid var(--ligne);
	transition: border-color var(--transition), background var(--transition);
}

.tel-entete:hover {
	border-color: var(--rouge);
	background: rgba(225, 29, 46, .1);
}

.tel-entete svg {
	width: 16px;
	height: 16px;
	color: var(--rouge-vif);
}

.burger {
	display: none;
	width: 46px;
	height: 46px;
	border: 1px solid var(--ligne);
	border-radius: 12px;
	background: transparent;
	color: var(--blanc);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

.burger span,
.burger span::before,
.burger span::after {
	content: "";
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	transition: transform var(--transition), opacity var(--transition);
}

.burger span::before { transform: translateY(-6px); }
.burger span::after  { transform: translateY(4px); }

.menu-ouvert .burger span                { background: transparent; }
.menu-ouvert .burger span::before        { transform: rotate(45deg); }
.menu-ouvert .burger span::after         { transform: rotate(-45deg) translateY(-2px); }

/* 5. Hero ================================================================== */

.hero {
	position: relative;
	min-height: min(94vh, 880px);
	display: flex;
	align-items: center;
	padding: 140px 0 80px;
	overflow: hidden;
}

.hero__fond {
	position: absolute;
	inset: 0;
	background: url("../images/hero/hero-2.webp") center right / cover no-repeat;
	transform: scale(1.06);
	animation: respire 24s ease-in-out infinite alternate;
}

@keyframes respire {
	from { transform: scale(1.06) translateX(0); }
	to   { transform: scale(1.14) translateX(-14px); }
}

.hero__voile {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, var(--noir) 8%, rgba(8, 9, 11, .92) 42%, rgba(8, 9, 11, .45) 78%),
		linear-gradient(to top, var(--noir), transparent 45%);
}

.hero__contenu {
	position: relative;
	max-width: 760px;
}

.hero h1 .accent {
	color: var(--rouge-vif);
}

.hero__texte {
	font-size: clamp(17px, 1.8vw, 20px);
	color: var(--gris-clair);
	max-width: 56ch;
	margin-bottom: 34px;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 44px;
}

.hero__rappels {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	padding-top: 28px;
	border-top: 1px solid var(--ligne);
}

.hero__rappels li {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	color: var(--gris-clair);
}

.hero__rappels svg {
	width: 17px;
	height: 17px;
	color: var(--rouge-vif);
	flex: none;
}

.hero__rappels ul,
ul.hero__rappels {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 6. Bandeau de preuves ==================================================== */

.preuves {
	background: var(--noir-2);
	border-top: 1px solid var(--ligne);
	border-bottom: 1px solid var(--ligne);
}

.preuves__grille {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--ligne);
}

.preuve {
	background: var(--noir-2);
	padding: 34px 26px;
	text-align: center;
}

.preuve__nombre {
	display: block;
	font-size: clamp(30px, 3.6vw, 42px);
	font-weight: 800;
	color: var(--blanc);
	letter-spacing: -.03em;
	line-height: 1;
	margin-bottom: 8px;
}

.preuve__nombre .unite {
	color: var(--rouge-vif);
}

.preuve__texte {
	font-size: 14px;
	color: var(--gris);
	letter-spacing: .04em;
	text-transform: uppercase;
	margin: 0;
}

/* 7. Services ============================================================== */

.grille-services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

.carte {
	position: relative;
	background: var(--noir-2);
	border: 1px solid var(--ligne);
	border-radius: var(--rayon);
	padding: 34px 30px 30px;
	overflow: hidden;
	transition: transform var(--transition), border-color var(--transition),
	            background var(--transition);
}

.carte::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--rouge), var(--rouge-sombre));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition);
}

.carte:hover {
	transform: translateY(-6px);
	border-color: #32373F;
	background: var(--noir-3);
}

.carte:hover::before {
	transform: scaleX(1);
}

.carte__icone {
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	border-radius: 16px;
	background: rgba(225, 29, 46, .12);
	border: 1px solid rgba(225, 29, 46, .28);
	color: var(--rouge-vif);
	margin-bottom: 22px;
}

.carte__icone svg {
	width: 26px;
	height: 26px;
}

.carte h3 {
	margin-bottom: 12px;
}

.carte p {
	font-size: 15.5px;
	color: var(--gris);
	margin: 0 0 18px;
}

.carte__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.carte__liste li {
	position: relative;
	padding-left: 22px;
	font-size: 14.5px;
	color: var(--gris-clair);
}

.carte__liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--rouge);
	transform: rotate(45deg);
}

/* 8. Méthode, secteurs ===================================================== */

.deux-colonnes {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.visuel-cadre {
	position: relative;
	border-radius: var(--rayon);
	overflow: hidden;
	border: 1px solid var(--ligne);
}

.visuel-cadre img {
	width: 100%;
	filter: grayscale(.2) contrast(1.05);
}

.visuel-cadre::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, transparent 40%, rgba(225, 29, 46, .16));
}

.etapes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 26px;
	counter-reset: etape;
}

.etape {
	position: relative;
	padding-left: 74px;
	counter-increment: etape;
}

.etape::before {
	content: counter(etape, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: -2px;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	background: var(--noir-3);
	border: 1px solid var(--ligne);
	color: var(--rouge-vif);
	font-weight: 800;
	font-size: 17px;
}

.etape h3 {
	font-size: 19px;
	margin-bottom: 6px;
}

.etape p {
	margin: 0;
	font-size: 15.5px;
	color: var(--gris);
}

.grille-secteurs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 14px;
}

.secteur {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 18px 20px;
	border: 1px solid var(--ligne);
	border-radius: var(--rayon-petit);
	background: var(--noir-2);
	font-weight: 600;
	color: var(--gris-clair);
	font-size: 15.5px;
	transition: border-color var(--transition), color var(--transition),
	            transform var(--transition);
}

.secteur:hover {
	border-color: var(--rouge);
	color: var(--blanc);
	transform: translateY(-3px);
}

.secteur svg {
	width: 20px;
	height: 20px;
	color: var(--rouge-vif);
	flex: none;
}

/* 9. Questions fréquentes ================================================== */

.faq {
	display: grid;
	gap: 12px;
	max-width: 860px;
	margin: 0 auto;
}

.faq details {
	background: var(--noir-2);
	border: 1px solid var(--ligne);
	border-radius: var(--rayon-petit);
	padding: 0 24px;
	transition: border-color var(--transition);
}

.faq details[open] {
	border-color: #343A44;
}

.faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 0;
	cursor: pointer;
	font-weight: 700;
	color: var(--blanc);
	font-size: 17px;
	list-style: none;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::after {
	content: "";
	width: 12px;
	height: 12px;
	flex: none;
	border-right: 2px solid var(--rouge-vif);
	border-bottom: 2px solid var(--rouge-vif);
	transform: rotate(45deg);
	transition: transform var(--transition);
}

.faq details[open] summary::after {
	transform: rotate(-135deg);
}

.faq p {
	margin: 0 0 20px;
	color: var(--gris);
	font-size: 15.5px;
}

/* 10. Formulaire de devis ================================================== */

.devis {
	background:
		radial-gradient(900px 480px at 12% 0%, rgba(225, 29, 46, .14), transparent 62%),
		var(--noir-2);
	border-top: 1px solid var(--ligne);
}

.devis__grille {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}

.devis__promesses {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.devis__promesses li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.devis__promesses svg {
	width: 22px;
	height: 22px;
	color: var(--rouge-vif);
	flex: none;
	margin-top: 2px;
}

.devis__promesses strong {
	display: block;
	color: var(--blanc);
	font-size: 16px;
}

.devis__promesses span {
	font-size: 14.5px;
	color: var(--gris);
}

.panneau {
	background: var(--noir);
	border: 1px solid var(--ligne);
	border-radius: var(--rayon);
	padding: clamp(26px, 3.4vw, 40px);
	box-shadow: var(--ombre);
}

.champs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.champ {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.champ--pleine-largeur {
	grid-column: 1 / -1;
}

.champ label {
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--gris);
}

.champ label .obligatoire {
	color: var(--rouge-vif);
}

.champ input,
.champ textarea,
.champ select {
	width: 100%;
	padding: 14px 16px;
	background: var(--noir-2);
	border: 1px solid var(--ligne);
	border-radius: var(--rayon-petit);
	color: var(--blanc);
	font: inherit;
	font-size: 16px;
	transition: border-color var(--transition), background var(--transition),
	            box-shadow var(--transition);
}

.champ textarea {
	min-height: 140px;
	resize: vertical;
}

.champ input::placeholder,
.champ textarea::placeholder {
	color: #5C636E;
}

.champ input:focus,
.champ textarea:focus,
.champ select:focus {
	outline: none;
	border-color: var(--rouge);
	background: var(--noir-3);
	box-shadow: 0 0 0 4px rgba(225, 29, 46, .14);
}

.champ input[aria-invalid="true"],
.champ textarea[aria-invalid="true"] {
	border-color: var(--rouge-vif);
	box-shadow: 0 0 0 4px rgba(255, 45, 63, .12);
}

.champ__erreur {
	font-size: 13.5px;
	color: #FF8A93;
	min-height: 1em;
}

/* Le champ piège : invisible pour un être humain, tentant pour un robot.
   On le sort du flux sans display:none — certains robots ignorent les champs
   masqués de cette façon, et on veut justement qu'ils le remplissent. */
.piege {
	position: absolute !important;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.mention-legale {
	font-size: 13px;
	color: var(--gris);
	margin: 16px 0 0;
}

.mention-legale a {
	color: var(--gris-clair);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.reponse-formulaire {
	margin-top: 18px;
	padding: 0;
	border-radius: var(--rayon-petit);
	font-size: 15px;
	line-height: 1.55;
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--transition), padding var(--transition);
}

.reponse-formulaire[data-etat="succes"],
.reponse-formulaire[data-etat="erreur"] {
	padding: 16px 18px;
	max-height: 240px;
}

.reponse-formulaire[data-etat="succes"] {
	background: rgba(38, 166, 91, .12);
	border: 1px solid rgba(38, 166, 91, .4);
	color: #8FE3B4;
}

.reponse-formulaire[data-etat="erreur"] {
	background: rgba(225, 29, 46, .1);
	border: 1px solid rgba(225, 29, 46, .38);
	color: #FFA7AE;
}

.btn[aria-busy="true"] {
	opacity: .75;
	pointer-events: none;
}

.btn__attente {
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: tourne .7s linear infinite;
	display: none;
}

.btn[aria-busy="true"] .btn__attente {
	display: block;
}

@keyframes tourne {
	to { transform: rotate(360deg); }
}

/* 11. Pied de page ========================================================= */

.pied {
	background: var(--noir);
	border-top: 1px solid var(--ligne);
	padding: clamp(48px, 6vw, 76px) 0 0;
}

.pied__grille {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 40px;
	padding-bottom: 48px;
}

.pied h4 {
	font-size: 14px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--blanc);
	margin-bottom: 20px;
}

.pied p,
.pied li {
	font-size: 15px;
	color: var(--gris);
}

.pied ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 11px;
}

.pied a:hover {
	color: var(--blanc);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pied__contact li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
}

.pied__contact svg {
	width: 17px;
	height: 17px;
	color: var(--rouge-vif);
	flex: none;
	margin-top: 4px;
}

.pied__bas {
	border-top: 1px solid var(--ligne);
	padding: 22px 0 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	color: var(--gris);
}

.pied__bas nav {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

/* La barre d'appel du téléphone : sur ce métier, un visiteur sur deux veut
   simplement appeler. Elle ne s'affiche que sur petit écran. */
.barre-appel {
	display: none;
	position: fixed;
	inset: auto 0 0 0;
	z-index: 90;
	background: rgba(8, 9, 11, .96);
	backdrop-filter: blur(12px);
	border-top: 1px solid var(--ligne);
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	gap: 10px;
}

.barre-appel .btn {
	flex: 1;
	padding: 14px 18px;
	font-size: 15px;
}

/* 12. Apparitions au défilement ============================================ */

.apparait {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}

.apparait.vu {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	.apparait,
	.apparait.vu {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.hero__fond {
		animation: none;
	}

	* {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

/* 13. Pages de texte ======================================================= */

.page-texte {
	padding: 150px 0 90px;
}

.page-texte .conteneur {
	max-width: 820px;
}

.page-texte h2 {
	font-size: clamp(22px, 2.6vw, 28px);
	margin-top: 44px;
}

.page-texte h3 {
	font-size: 19px;
	margin-top: 28px;
}

.page-texte ul {
	margin: 0 0 20px;
	padding-left: 22px;
}

.page-texte li {
	margin-bottom: 8px;
}

.page-texte a {
	color: var(--rouge-vif);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.page-texte table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
	font-size: 15px;
}

.page-texte th,
.page-texte td {
	text-align: left;
	padding: 12px 14px;
	border: 1px solid var(--ligne);
	vertical-align: top;
}

.page-texte th {
	background: var(--noir-2);
	color: var(--blanc);
	font-weight: 700;
}

.retour {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 26px;
	font-weight: 600;
	color: var(--gris);
}

.retour:hover {
	color: var(--blanc);
}

/* Adaptations ============================================================== */

/* Entre 960 et 1140 px, le menu complet plus le téléphone plus le bouton de
   devis ne tiennent plus sur une ligne : le bouton s'efface, le lien « Devis »
   du menu le remplace. */
@media (max-width: 1140px) {
	.entete__actions .btn {
		display: none;
	}

	.nav a {
		padding: 10px 11px;
		font-size: 14.5px;
	}
}

@media (max-width: 1080px) {
	.pied__grille {
		grid-template-columns: 1fr 1fr;
		gap: 34px;
	}

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

@media (max-width: 960px) {
	.deux-colonnes,
	.devis__grille {
		grid-template-columns: 1fr;
	}

	.nav {
		position: fixed;
		inset: 84px 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: rgba(8, 9, 11, .98);
		backdrop-filter: blur(16px);
		border-bottom: 1px solid var(--ligne);
		padding: 10px 18px 26px;
		transform: translateY(-14px);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--transition), transform var(--transition),
		            visibility var(--transition);
		max-height: calc(100vh - 84px);
		overflow-y: auto;
	}

	.menu-ouvert .nav {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.nav a {
		padding: 15px 8px;
		font-size: 17px;
		border-bottom: 1px solid var(--ligne);
		border-radius: 0;
	}

	.nav a::after {
		display: none;
	}

	.burger {
		display: inline-flex;
	}

	.tel-entete span {
		display: none;
	}

	.tel-entete {
		padding: 12px;
	}

	.entete__actions .btn {
		display: none;
	}
}

@media (max-width: 720px) {
	body {
		font-size: 16px;
	}

	.hero {
		min-height: auto;
		padding: 120px 0 64px;
	}

	.hero__fond {
		background-position: 68% center;
	}

	.hero__actions .btn {
		flex: 1 1 100%;
	}

	.champs {
		grid-template-columns: 1fr;
	}

	.pied__grille {
		grid-template-columns: 1fr;
	}

	.barre-appel {
		display: flex;
	}

	body {
		padding-bottom: 76px;
	}

	.preuve {
		padding: 26px 16px;
	}
}

@media (max-width: 420px) {
	.marque__baseline {
		display: none;
	}

	.preuves__grille {
		grid-template-columns: 1fr;
	}
}

/* Impression : un devis se relit parfois sur papier. */
@media print {
	.entete, .barre-appel, .hero__fond, .hero__voile, .devis, .faq { display: none; }
	body { background: #fff; color: #000; }
	h1, h2, h3, h4 { color: #000; }
}

/* 14. Pages intérieures ====================================================
   Ajouté avec les pages de service : le hero réduit, le fil d'Ariane, le
   sous-menu des services et les listes de communes. */

.hero--page {
	min-height: auto;
	padding: 148px 0 clamp(56px, 7vw, 88px);
	background:
		radial-gradient(1100px 520px at 78% 0%, rgba(225, 29, 46, .16), transparent 60%),
		var(--noir);
	border-bottom: 1px solid var(--ligne);
}

.hero--page .hero__voile {
	background: none;
}

.hero--page h1 {
	font-size: clamp(32px, 4.8vw, 56px);
}

.hero--sobre {
	padding-bottom: clamp(36px, 4vw, 56px);
}

.hero--sobre .hero__texte {
	margin-bottom: 0;
}

/* Le fil d'Ariane : discret, mais c'est lui que Google affiche sous le titre
   dans ses résultats, et c'est lui qui dit au visiteur où il a atterri. */
.fil {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 26px;
	font-size: 14px;
	color: var(--gris);
}

.fil a {
	color: var(--gris-clair);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fil a:hover {
	color: var(--blanc);
}

.fil span[aria-current] {
	color: var(--gris);
}

/* Le sous-menu des services. Au survol sur grand écran, au clic partout :
   un menu qui ne s'ouvre qu'au survol est inutilisable au doigt. */
.nav__groupe {
	position: relative;
}

.nav__bascule {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 14px;
	background: none;
	border: 0;
	border-radius: 8px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--gris-clair);
	cursor: pointer;
	transition: color var(--transition);
}

.nav__bascule:hover,
.nav__groupe.ouvert .nav__bascule {
	color: var(--blanc);
}

.nav__bascule svg {
	transition: transform var(--transition);
}

.nav__groupe.ouvert .nav__bascule svg {
	transform: rotate(180deg);
}

.sous-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 20;
	min-width: 270px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: rgba(14, 16, 20, .98);
	backdrop-filter: blur(14px);
	border: 1px solid var(--ligne);
	border-radius: var(--rayon-petit);
	box-shadow: var(--ombre);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.nav__groupe:hover .sous-menu,
.nav__groupe.ouvert .sous-menu,
.sous-menu:focus-within {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.sous-menu a {
	display: block;
	padding: 11px 14px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--gris-clair);
	white-space: nowrap;
}

.sous-menu a::after {
	display: none;
}

.sous-menu a:hover,
.sous-menu a[aria-current="page"] {
	background: rgba(225, 29, 46, .12);
	color: var(--blanc);
}

/* Le lien au pied d'une carte de service. */
.carte__lien {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	font-size: 15px;
	font-weight: 700;
	color: var(--rouge-vif);
}

.carte__lien svg {
	transition: transform var(--transition);
}

.carte:hover .carte__lien svg {
	transform: translateX(4px);
}

.carte h3 a {
	color: inherit;
}

.carte h3 a:hover {
	color: var(--rouge-vif);
}

/* La liste des communes d'une zone. */
.liste-villes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.liste-villes li {
	padding: 6px 12px;
	border: 1px solid var(--ligne);
	border-radius: 999px;
	font-size: 13.5px;
	color: var(--gris-clair);
	background: var(--noir);
}

/* Une page de texte n'est plus un <main> mais une section : on reprend la
   mise en page, sans le rembourrage du haut que le hero fournit déjà. */
.section.page-texte {
	padding-top: clamp(40px, 5vw, 64px);
}

.section.page-texte .conteneur {
	max-width: 820px;
}

@media (max-width: 960px) {
	/* Sur petit écran le menu est une colonne : le sous-menu se déplie
	   simplement en dessous, sans se superposer à quoi que ce soit. */
	.nav__groupe {
		position: static;
	}

	.nav__bascule {
		width: 100%;
		justify-content: space-between;
		padding: 15px 8px;
		font-size: 17px;
		border-bottom: 1px solid var(--ligne);
		border-radius: 0;
	}

	.sous-menu {
		position: static;
		min-width: 0;
		margin: 0;
		padding: 0 0 0 14px;
		background: none;
		border: 0;
		box-shadow: none;
		backdrop-filter: none;
		display: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.nav__groupe.ouvert .sous-menu {
		display: block;
	}

	.nav__groupe:hover .sous-menu {
		display: none;
	}

	.nav__groupe.ouvert:hover .sous-menu {
		display: block;
	}

	.sous-menu a {
		padding: 13px 8px;
		border-bottom: 1px solid var(--ligne);
		border-radius: 0;
		white-space: normal;
	}

	.hero--page {
		padding-top: 124px;
	}
}