/* ==========================================================================
   ACS38 Nuisibles — Alp' Conseils et Services 38
   Feuille de style unique. Mobile-first, sans framework.
   ========================================================================== */

/* --- Jetons de design ---------------------------------------------------- */
:root {
  --or: #e9a800;
  --or-clair: #ffc93c;
  --or-sombre: #b98400;
  --anthracite: #241f1c;
  --anthracite-clair: #3b332e;
  --brique: #a32e1c;
  --brique-sombre: #7d2214;
  --creme: #fbf8f3;
  --creme-fonce: #f2ece1;
  --gris: #6b635c;
  --gris-clair: #d8d1c7;
  --blanc: #fff;
  --vert: #2f7d32;

  --pad: clamp(1rem, 4vw, 2rem);
  --section-y: clamp(3rem, 8vw, 5.5rem);
  --radius: 14px;
  --radius-sm: 8px;
  --ombre: 0 2px 4px rgba(36, 31, 28, .06), 0 8px 24px rgba(36, 31, 28, .08);
  --ombre-forte: 0 4px 8px rgba(36, 31, 28, .1), 0 16px 40px rgba(36, 31, 28, .14);
  --trans: 160ms ease;

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

/* --- Reset --------------------------------------------------------------- */
*, *::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(--police);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--anthracite);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  line-height: 1.2;
  margin: 0 0 .6em;
  font-weight: 700;
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.85rem, 5.2vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.8vw, 2.15rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

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

/* Un numéro de téléphone ne se coupe jamais en fin de ligne : sur mobile, le
   « 06 » restait seul au bout de la phrase et le reste passait en dessous.
   Le numéro part en entier à la ligne suivante. */
a[href^="tel:"] { white-space: nowrap; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: .4em; }

strong { font-weight: 700; }

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

/* --- Utilitaires --------------------------------------------------------- */
.conteneur { width: min(100% - 2 * var(--pad), 1160px); margin-inline: auto; }
.conteneur--etroit { width: min(100% - 2 * var(--pad), 780px); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--creme { background: var(--creme); }
.section--fonce { background: var(--anthracite); color: var(--creme); }
.section--fonce h2, .section--fonce h3 { color: var(--blanc); }
.section--fonce a { color: var(--or-clair); }

.lede { font-size: clamp(1.1rem, 2.2vw, 1.25rem); color: var(--gris); }
.section--fonce .lede { color: var(--gris-clair); }
.centre { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.lien-evitement {
  position: absolute; top: -100px; left: var(--pad); z-index: 200;
  background: var(--anthracite); color: var(--blanc); padding: .7rem 1.1rem;
  border-radius: var(--radius-sm); transition: top var(--trans);
}
.lien-evitement:focus { top: .6rem; color: var(--blanc); }

.surtitre {
  display: block;
  font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brique); margin-bottom: .7rem;
}
.section--fonce .surtitre { color: var(--or); }

/* --- Boutons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.5rem;
  font: inherit; font-weight: 700; font-size: 1rem;
  border: 2px solid transparent; border-radius: 50px;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--trans), color var(--trans), transform var(--trans), box-shadow var(--trans);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.btn--tel {
  background: var(--brique); color: var(--blanc);
  box-shadow: 0 4px 14px rgba(163, 46, 28, .3);
}
.btn--tel:hover { background: var(--brique-sombre); color: var(--blanc); box-shadow: 0 6px 20px rgba(163, 46, 28, .4); }

.btn--or { background: var(--or); color: var(--anthracite); }
.btn--or:hover { background: var(--or-clair); color: var(--anthracite); }

.btn--fantome { background: transparent; color: var(--anthracite); border-color: var(--gris-clair); }
.btn--fantome:hover { background: var(--creme-fonce); color: var(--anthracite); border-color: var(--gris); }
.section--fonce .btn--fantome { color: var(--creme); border-color: rgba(255, 255, 255, .3); }
.section--fonce .btn--fantome:hover { background: rgba(255, 255, 255, .1); color: var(--blanc); }

.groupe-btn { display: flex; flex-wrap: wrap; gap: .8rem; }
.groupe-btn--centre { justify-content: center; }

/* --- Bandeau d'urgence --------------------------------------------------- */
.bandeau {
  background: var(--anthracite); color: var(--creme);
  font-size: .875rem; text-align: center; padding: .5rem var(--pad);
}
.bandeau strong { color: var(--or-clair); }
.bandeau a { color: var(--or-clair); font-weight: 700; white-space: nowrap; }

/* --- En-tête ------------------------------------------------------------- */
.entete {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gris-clair);
}
/* L'en-tête a droit à une largeur supérieure au corps de texte : logo,
   six entrées de menu et le bouton téléphone doivent tenir sur une ligne. */
.entete__inner {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 72px;
  width: min(100% - 2 * var(--pad), 1320px);
}

/* Le vrai fichier logo, détouré, en 380×143 pour rester net sur les écrans à
   densité doublée.
   La boîte reste plus haute que le dessin : « contain » cale l'image sur la
   largeur (170 → 64 de haut, rapport 2,658) et le reste fait la respiration
   au-dessus et en dessous. Sans cela le logo toucherait les bords de l'en-tête,
   dont la hauteur minimale est de 72px. Ces valeurs reproduisent la taille
   qu'avait le logo du temps où il était recadré dans l'image sociale. */
.logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo__img {
  width: 170px; height: 80px;
  background-image: url("../img/logo.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
}
@media (max-width: 480px) {
  .logo__img { width: 134px; height: 63px; }
}

.nav-bascule {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: transparent; border: 1px solid var(--gris-clair); border-radius: var(--radius-sm);
  cursor: pointer; color: var(--anthracite);
}
.nav-bascule svg { width: 24px; height: 24px; }
.nav-bascule__fermer { display: none; }
.nav-bascule[aria-expanded="true"] .nav-bascule__ouvrir { display: none; }
.nav-bascule[aria-expanded="true"] .nav-bascule__fermer { display: block; }

.nav { display: none; }
.nav[data-ouvert="true"] {
  display: block;
  position: absolute; inset-inline: 0; top: 100%;
  background: var(--blanc); border-bottom: 1px solid var(--gris-clair);
  box-shadow: var(--ombre); padding: .5rem var(--pad) 1.2rem;
}
.nav__liste { list-style: none; margin: 0; padding: 0; }
.nav__liste a {
  display: block; padding: .7rem .2rem; color: var(--anthracite);
  text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--creme-fonce);
}
.nav__liste a:hover, .nav__liste a[aria-current="page"] { color: var(--brique); }
.nav .btn { margin-top: 1rem; width: 100%; justify-content: center; }

.entete__actions { display: none; }

/* Le menu déroulant reste en place tant que la barre complète ne tient pas sur
   une seule ligne. Passer ce seuil sous 1140px fait revenir les retours à la
   ligne à l'intérieur des libellés. */
@media (min-width: 1140px) {
  .nav-bascule { display: none; }
  .nav { display: block; }
  .nav__liste { display: flex; flex-wrap: nowrap; gap: .15rem; align-items: center; }
  .nav__liste a {
    border: 0; padding: .45rem .55rem; font-size: .875rem;
    border-radius: var(--radius-sm); white-space: nowrap;
  }
  .nav__liste a:hover { background: var(--creme); }
  .nav__liste a[aria-current="page"] { background: var(--creme-fonce); color: var(--brique); }
  .nav .btn { display: none; }
  .entete__actions { display: flex; gap: .5rem; align-items: center; }
  .entete__actions .btn { padding: .6rem 1.05rem; font-size: .9rem; }
  /* Le devis est déjà présent dans le héros, les encarts d'appel et la barre
     mobile : on ne l'affiche ici que lorsqu'il reste de la place. */
  .entete__actions .btn--fantome { display: none; }
}

@media (min-width: 1300px) {
  .nav__liste { gap: .3rem; }
  .nav__liste a { padding: .5rem .7rem; font-size: .95rem; }
  .entete__actions .btn--fantome { display: inline-flex; }
}

/* --- Héros --------------------------------------------------------------- */
.heros {
  background:
    linear-gradient(135deg, rgba(36, 31, 28, .93) 0%, rgba(59, 51, 46, .88) 100%),
    var(--anthracite);
  color: var(--creme);
  padding-block: clamp(2.5rem, 7vw, 4.5rem);
  position: relative; overflow: hidden;
}
.heros::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 85% 20%, rgba(233, 168, 0, .16), transparent 70%);
}
.heros > * { position: relative; z-index: 1; }
.heros h1 { color: var(--blanc); }
.heros__lede { font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--gris-clair); max-width: 46ch; }
.heros .groupe-btn { margin-top: 1.8rem; }

.heros__atouts {
  list-style: none; padding: 0; margin: 1.8rem 0 0;
  display: flex; flex-wrap: wrap; gap: .5rem .5rem;
}
.heros__atouts li {
  margin: 0; font-size: .875rem; font-weight: 600;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
  padding: .35rem .8rem; border-radius: 50px;
}

/* --- Héros avec photo ---------------------------------------------------- */
/* Mobile : l'intro, la photo puis les boutons s'empilent dans l'ordre du HTML.
   La photo est volontairement limitée en hauteur pour que le bouton d'appel
   reste visible sans faire défiler. Les photos vont du paysage très large
   (nid dans un arbre, 16/9) au portrait très étroit (nettoyeur vapeur, 1/2,2) :
   le recadrage par « cover » est donc ce qui tient l'ensemble homogène. */
.heros__photo {
  margin: 1.6rem 0 0; max-width: 460px;
}
.heros__photo img {
  display: block; width: 100%; height: auto;
  max-height: 46vh; object-fit: cover;
  /* Point d'ancrage du recadrage, réglable photo par photo depuis le contenu
     (clé « cadrage » du bloc héros) ; 22 % garde le haut par défaut, ce qui
     convient aux portraits où le sujet est dans la moitié supérieure. */
  object-position: var(--cadrage, 50% 22%);
  border-radius: var(--radius); border: 3px solid rgba(233, 168, 0, .55);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .38);
}
.heros__legende {
  margin-top: .6rem; font-size: .85rem; line-height: 1.45;
  color: var(--gris-clair);
}
.heros--photo .heros__actions { margin-top: .4rem; }

@media (min-width: 900px) {
  .heros--photo .heros__grille {
    display: grid; align-items: center;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
  }
  .heros--photo .heros__intro   { grid-column: 1; grid-row: 1; }
  .heros--photo .heros__actions { grid-column: 1; grid-row: 2; margin-top: 0; }
  .heros--photo .heros__photo   { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  /* En deux colonnes la contrainte passe de « vh » à une hauteur fixe : un
     paysage 16/9 garde ses proportions (≈236 px de haut pour 420 de large) et
     seuls les portraits très allongés sont recadrés, pour ne pas écraser la
     colonne de texte en face. */
  .heros--photo .heros__photo img { max-height: 560px; }
}

/* --- Grilles ------------------------------------------------------------- */
.grille { display: grid; gap: 1.3rem; }
.grille--2 { grid-template-columns: 1fr; }
.grille--3 { grid-template-columns: 1fr; }
.grille--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) {
  .grille--2 { grid-template-columns: repeat(2, 1fr); }
  .grille--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grille--3 { grid-template-columns: repeat(3, 1fr); }
  .grille--4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Cartes -------------------------------------------------------------- */
.carte {
  background: var(--blanc); border: 1px solid var(--gris-clair);
  border-radius: var(--radius); padding: 1.5rem;
  display: flex; flex-direction: column;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.carte h3 { margin-bottom: .4rem; }
.carte p { color: var(--gris); font-size: .97rem; }
/* Le corps porte la colonne flex pour que « margin-top: auto » du lien pousse
   toujours la flèche en bas de la carte, photo ou non. */
.carte__corps { display: flex; flex-direction: column; flex: 1; }
.carte__lien { margin-top: auto; padding-top: 1rem; font-weight: 700; font-size: .95rem; text-decoration: none; }
.carte__lien::after { content: " →"; }
.carte__lien:hover { text-decoration: underline; }

a.carte { text-decoration: none; color: inherit; }
a.carte:hover, .carte--lien:hover {
  transform: translateY(-3px); box-shadow: var(--ombre-forte); border-color: var(--or);
}

.carte__icone {
  width: 48px; height: 48px; margin-bottom: 1rem;
  display: grid; place-items: center; font-size: 1.6rem;
  background: var(--creme-fonce); border-radius: 12px;
}

/* --- Cartes illustrées --------------------------------------------------- */
/* Les photos d'intervention sont des portraits 3/4 alors que la carte veut un
   bandeau : un rapport 5/4 imposé recadre juste assez pour garder le sujet,
   et « --cadrage » choisit photo par photo ce qui reste dans le cadre. Le
   padding descend dans le corps pour que l'image touche les bords. */
.carte--photo { padding: 0; overflow: hidden; }
.carte--photo .carte__corps { padding: 1.5rem; }
.carte__photo {
  display: block; width: 100%; height: auto;
  aspect-ratio: 5 / 4; object-fit: cover;
  object-position: var(--cadrage, 50% 50%);
  background: var(--creme-fonce);
}

/* --- Figure au fil du texte ---------------------------------------------- */
.figure { margin: 0 auto; }
.figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius); box-shadow: var(--ombre);
}
.figure__legende {
  margin-top: .7rem; font-size: .9rem; line-height: 1.5; color: var(--gris);
}

/* --- Étapes numérotées --------------------------------------------------- */
.etapes { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.3rem; counter-reset: etape; }
@media (min-width: 620px) { .etapes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .etapes--4 { grid-template-columns: repeat(4, 1fr); } }
.etapes li {
  counter-increment: etape; margin: 0;
  background: var(--blanc); border: 1px solid var(--gris-clair);
  border-radius: var(--radius); padding: 1.4rem;
}
.etapes li::before {
  content: counter(etape, decimal-leading-zero);
  display: block; font-family: var(--police-titre); font-size: 1.6rem; font-weight: 700;
  color: var(--or); line-height: 1; margin-bottom: .6rem;
}
.etapes h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.etapes p { font-size: .94rem; color: var(--gris); margin: 0; }

/* --- Liste à coches ------------------------------------------------------ */
.coches { list-style: none; padding: 0; }
.coches li { position: relative; padding-left: 1.9rem; margin-bottom: .6rem; }
.coches li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 1.1rem; height: .6rem;
  border-left: 3px solid var(--vert); border-bottom: 3px solid var(--vert);
  transform: rotate(-45deg);
}
.alertes { list-style: none; padding: 0; }
.alertes li { position: relative; padding-left: 1.9rem; margin-bottom: .6rem; }
.alertes li::before {
  content: "!"; position: absolute; left: 0; top: .1em;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--brique); color: var(--blanc);
  font-size: .8rem; font-weight: 700; display: grid; place-items: center;
}

/* --- Encart avertissement ------------------------------------------------ */
.encart {
  border-left: 5px solid var(--or);
  background: var(--creme); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.3rem 1.5rem; margin-block: 1.8rem;
}
.encart--danger { border-left-color: var(--brique); background: #fdf2f0; }
.encart h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.encart p:last-child { margin-bottom: 0; }

/* --- Tableau ------------------------------------------------------------- */
.tableau-enveloppe { overflow-x: auto; margin-block: 1.5rem; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; min-width: 480px; }
th, td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--gris-clair); vertical-align: top; }
thead th { background: var(--anthracite); color: var(--blanc); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:nth-child(even) { background: var(--creme); }

/* --- FAQ (accordéon natif) ----------------------------------------------- */
.faq { display: grid; gap: .7rem; }
.faq details {
  background: var(--blanc); border: 1px solid var(--gris-clair);
  border-radius: var(--radius); overflow: hidden;
}
.faq details[open] { border-color: var(--or); }
.faq summary {
  padding: 1.1rem 3rem 1.1rem 1.3rem; cursor: pointer; position: relative;
  font-weight: 700; list-style: none; font-family: var(--police-titre);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 1.3rem; top: 1.45rem;
  width: .6rem; height: .6rem;
  border-right: 2.5px solid var(--brique); border-bottom: 2.5px solid var(--brique);
  transform: rotate(45deg); transition: transform var(--trans);
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.6rem; }
.faq summary:hover { background: var(--creme); }
.faq__corps { padding: 0 1.3rem 1.2rem; color: var(--gris); }

/* --- Bloc contact / CTA -------------------------------------------------- */
.cta {
  background: linear-gradient(135deg, var(--or) 0%, var(--or-sombre) 100%);
  color: var(--anthracite); border-radius: var(--radius);
  padding: clamp(1.8rem, 5vw, 3rem); text-align: center;
}
.cta h2 { color: var(--anthracite); margin-bottom: .5rem; }
.cta p { color: var(--anthracite-clair); max-width: 52ch; margin-inline: auto; }
.cta .groupe-btn { margin-top: 1.6rem; justify-content: center; }
.cta .btn--fantome { border-color: rgba(36, 31, 28, .35); color: var(--anthracite); }
.cta .btn--fantome:hover { background: rgba(36, 31, 28, .1); }

/* --- Communes ------------------------------------------------------------ */
.communes { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.communes li { margin: 0; }
.communes a, .communes span {
  display: block; padding: .4rem .85rem; font-size: .9rem;
  background: var(--blanc); border: 1px solid var(--gris-clair);
  border-radius: 50px; text-decoration: none; color: var(--anthracite);
}
.communes a:hover { border-color: var(--or); background: var(--creme); color: var(--brique); }

/* --- Fil d'Ariane -------------------------------------------------------- */
.ariane { font-size: .85rem; color: var(--gris); padding-block: .9rem; }
.ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.ariane li { margin: 0; }
.ariane li + li::before { content: "› "; color: var(--gris-clair); }
.ariane a { color: var(--gris); }

/* --- Formulaire ---------------------------------------------------------- */
.formulaire { display: grid; gap: 1.1rem; }
.champ { display: grid; gap: .35rem; }
.champ label { font-weight: 600; font-size: .95rem; }
.champ .aide { font-size: .85rem; color: var(--gris); font-weight: 400; }
.champ input, .champ select, .champ textarea {
  font: inherit; font-size: 1rem; padding: .75rem .9rem;
  border: 1px solid var(--gris-clair); border-radius: var(--radius-sm);
  background: var(--blanc); color: var(--anthracite); width: 100%;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--or); }
.champ textarea { min-height: 130px; resize: vertical; }
.champ--requis label::after { content: " *"; color: var(--brique); }
@media (min-width: 620px) { .formulaire--2col { grid-template-columns: 1fr 1fr; } .champ--large { grid-column: 1 / -1; } }
.champ .btn { justify-self: start; }
@media (max-width: 619px) { .champ .btn { justify-self: stretch; justify-content: center; } }
.pot-de-miel { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Retour après envoi. Deux variantes : le succès par défaut, l'échec en rouge.
   Le contenu est écrit par main.js, qui ne l'affiche jamais sans savoir ce qui
   s'est réellement passé. */
.form-retour {
  padding: 1.2rem 1.4rem; margin-bottom: 1.5rem;
  border-left: 5px solid var(--vert); border-radius: 0 8px 8px 0;
  background: #eef7ee;
}
.form-retour--ko { border-left-color: var(--brique); background: #fdf0ec; }
.form-retour p { margin: 0; }
.form-retour p + p { margin-top: .6rem; font-size: .93rem; }
.btn[disabled] { opacity: .65; cursor: progress; }

/* --- Pied de page -------------------------------------------------------- */
.pied { background: var(--anthracite); color: var(--gris-clair); padding-block: 3rem 1.5rem; font-size: .93rem; }
.pied h3 { color: var(--blanc); font-size: 1rem; margin-bottom: .8rem; }
.pied a { color: var(--gris-clair); text-decoration: none; }
.pied a:hover { color: var(--or-clair); text-decoration: underline; }
.pied ul { list-style: none; padding: 0; }
.pied li { margin-bottom: .45rem; }
.pied__grille { display: grid; gap: 2rem; }
@media (min-width: 720px) { .pied__grille { grid-template-columns: 1.4fr 1fr 1fr; } }
.pied__bas {
  margin-top: 2.5rem; padding-top: 1.3rem; border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between;
  font-size: .85rem; color: var(--gris);
}
.pied__tel { font-size: 1.35rem; font-weight: 700; color: var(--or-clair) !important; display: inline-block; margin-bottom: .3rem; }

/* --- Barre d'appel mobile fixe ------------------------------------------- */
.barre-appel {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--gris-clair);
  box-shadow: 0 -2px 16px rgba(36, 31, 28, .18);
}
.barre-appel a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem .5rem; font-weight: 700; font-size: .98rem; text-decoration: none;
}
.barre-appel__tel { background: var(--brique); color: var(--blanc); }
.barre-appel__devis { background: var(--or); color: var(--anthracite); }
.barre-appel svg { width: 19px; height: 19px; flex-shrink: 0; }
body { padding-bottom: 56px; }
@media (min-width: 960px) {
  .barre-appel { display: none; }
  body { padding-bottom: 0; }
}

/* --- Impression ---------------------------------------------------------- */
@media print {
  .entete, .barre-appel, .bandeau, .nav-bascule, .cta { display: none !important; }
  body { padding: 0; font-size: 11pt; color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; }
}