/* =========================================================
   JEAN-PIERRE POUGET — MAÇONNERIE & PIERRE
   Feuille de style principale
   Palette inspirée des tons de pierre naturelle (ocre, crème,
   anthracite) visibles sur les photos de réalisations.
   ========================================================= */

/* ---------- 1. VARIABLES & RESET ---------- */
:root {
  --color-bg: #faf7f2;
  --color-bg-alt: #f1ebe0;
  --color-dark: #211d18;
  --color-dark-soft: #2c2620;
  --color-text: #3a332b;
  --color-text-light: #6b6155;
  --color-accent: #c17f45;      /* terracotta / pierre ocre */
  --color-accent-dark: #a3652f;
  --color-accent-soft: #e9d3b8;
  --color-white: #ffffff;
  --color-border: #e5dccb;

  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 4px 14px rgba(33, 29, 24, 0.06);
  --shadow-md: 0 12px 32px rgba(33, 29, 24, 0.1);
  --shadow-lg: 0 24px 60px rgba(33, 29, 24, 0.18);

  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --header-h: 84px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-dark);
  line-height: 1.15;
  margin: 0 0 1rem;
  font-weight: 700;
}

p { margin: 0 0 1rem; color: var(--color-text-light); }

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

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

button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.header-inner { max-width: 1320px; }

/* ---------- 2. UTILITAIRES ---------- */
.section-kicker {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: 0.75rem;
}
.section-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.section-subtitle {
  max-width: 620px;
  font-size: 1.05rem;
}
.center { text-align: center; margin-left: auto; margin-right: auto; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.98rem;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-accent);
  color: var(--color-white);
  box-shadow: 0 10px 24px rgba(193, 127, 69, 0.35);
}
.btn-primary:hover { background: var(--color-accent-dark); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(193, 127, 69, 0.4); }
.btn-outline {
  border: 1.5px solid rgba(255,255,255,0.55);
  color: var(--color-white);
  backdrop-filter: blur(4px);
}
.btn-outline:hover { background: rgba(255,255,255,0.12); transform: translateY(-3px); }
.btn-small { padding: 11px 22px; font-size: 0.9rem; }
.btn-full { width: 100%; }

/* animation d'apparition au scroll */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- 3. HEADER ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(250, 247, 242, 0);
  transition: background var(--transition), box-shadow var(--transition), height var(--transition);
}
.site-header.scrolled {
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  height: 72px;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
}

.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; min-width: 0; white-space: nowrap; }
.logo-mark {
  width: 46px; height: 46px;
  border-radius: 10px;
  background: var(--color-dark);
  color: var(--color-accent-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.logo-text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-white);
  line-height: 1.2;
  transition: color var(--transition);
}
.logo-text small {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-soft);
  transition: color var(--transition);
}

.main-nav { flex-shrink: 1; min-width: 0; }
.main-nav ul { display: flex; gap: 2px; flex-wrap: nowrap; }
.nav-link {
  display: block;
  padding: 10px 12px;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--color-white);
  border-radius: 100px;
  transition: background var(--transition), color var(--transition);
  position: relative;
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active { background: rgba(255,255,255,0.14); color: var(--color-accent-soft); }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.phone-pill {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.9rem;
  color: var(--color-white);
  padding: 10px 14px;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 100px;
  transition: border-color var(--transition), color var(--transition);
  white-space: nowrap;
}
.phone-pill svg { fill: var(--color-accent-soft); flex-shrink: 0; transition: fill var(--transition); }
.phone-pill:hover { border-color: var(--color-accent); color: var(--color-accent-soft); }

/* --- Etat "scrolled" : fond clair, donc texte foncé --- */
.site-header.scrolled .logo-text { color: var(--color-dark); }
.site-header.scrolled .logo-text small { color: var(--color-accent-dark); }
.site-header.scrolled .nav-link { color: var(--color-dark); }
.site-header.scrolled .nav-link:hover,
.site-header.scrolled .nav-link.active { background: var(--color-bg-alt); color: var(--color-accent-dark); }
.site-header.scrolled .phone-pill { color: var(--color-dark); border-color: var(--color-border); }
.site-header.scrolled .phone-pill svg { fill: var(--color-accent); }
.site-header.scrolled .phone-pill:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--color-dark);
  flex-shrink: 0;
  z-index: 1200;
}
.burger span {
  width: 20px; height: 2px;
  background: var(--color-accent-soft);
  margin: 0 auto;
  transition: transform var(--transition), opacity var(--transition);
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Fond assombri derrière le menu mobile ouvert */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 13, 10, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  z-index: 1050;
}
.nav-overlay.open { opacity: 1; visibility: visible; }

/* CTA repris dans le panneau du menu mobile (masqué en desktop) */
.mobile-nav-cta { display: none; }

/* ---------- 4. HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--color-white);
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  animation: heroZoom 18s ease-in-out infinite alternate;
}
@keyframes heroZoom {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,17,13,0.78) 0%, rgba(20,17,13,0.62) 45%, rgba(20,17,13,0.88) 100%);
}
.hero-content { position: relative; padding-top: var(--header-h); z-index: 2; }
.hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-accent-soft);
  margin-bottom: 1.2rem;
}
.hero h1 {
  color: var(--color-white);
  font-size: clamp(2.3rem, 6vw, 4rem);
  max-width: 850px;
  margin-bottom: 1.4rem;
}
.hero-text {
  max-width: 620px;
  font-size: 1.12rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 2.2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 3.5rem; }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.18);
  max-width: 720px;
}
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-number { font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; color: var(--color-accent-soft); }
.stat-label { font-size: 0.85rem; color: rgba(255,255,255,0.7); }

.scroll-cue {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  color: var(--color-white);
  opacity: 0.75;
  animation: bounce 2.2s infinite;
  z-index: 2;
}
.scroll-cue svg { fill: currentColor; }
@keyframes bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 10px); }
}

/* ---------- 5. ABOUT ---------- */
.about { padding: 120px 0; background: var(--color-bg); }
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
  align-items: center;
}
.about-images {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.about-img { border-radius: var(--radius); object-fit: cover; box-shadow: var(--shadow-md); }
.about-img-1 { height: 420px; grid-column: 1; align-self: start; }
.about-img-2 { height: 240px; grid-column: 2; align-self: end; margin-top: 60px; }

.about-points { margin-top: 1.8rem; display: flex; flex-direction: column; gap: 14px; }
.about-points li { display: flex; align-items: flex-start; gap: 12px; font-weight: 500; color: var(--color-text); }
.about-points svg { fill: var(--color-accent); flex-shrink: 0; margin-top: 2px; }

/* ---------- 6. SERVICES ---------- */
.services { padding: 120px 0; background: var(--color-bg-alt); }
.services-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.service-card {
  background: var(--color-white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.service-img { height: 210px; overflow: hidden; }
.service-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.service-card:hover .service-img img { transform: scale(1.08); }
.service-body { padding: 26px 26px 30px; }
.service-body h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.service-body p { margin: 0; font-size: 0.95rem; }

/* ---------- 7. WHY CHOOSE US ---------- */
.why { padding: 100px 0; background: var(--color-dark); }
.why .section-kicker { color: var(--color-accent-soft); }
.why .section-title { color: var(--color-white); }
.why-grid {
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.why-card {
  background: var(--color-dark-soft);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 32px 26px;
  transition: transform var(--transition), border-color var(--transition);
}
.why-card:hover { transform: translateY(-6px); border-color: var(--color-accent); }
.why-icon {
  width: 54px; height: 54px;
  border-radius: 14px;
  background: rgba(193, 127, 69, 0.15);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.why-icon svg { fill: var(--color-accent-soft); }
.why-card h3 { color: var(--color-white); font-size: 1.1rem; margin-bottom: 0.5rem; }
.why-card p { color: rgba(255,255,255,0.6); font-size: 0.92rem; margin: 0; }

/* ---------- 8. GALLERY ---------- */
.gallery { padding: 120px 0; background: var(--color-bg); }
.gallery-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 18px;
}
.gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery-item:nth-child(6) { grid-column: span 2; }
.gallery-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.gallery-item::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(33,29,24,0) 40%, rgba(33,29,24,0.55) 100%);
  opacity: 0;
  transition: opacity var(--transition);
}
.gallery-item:hover::after { opacity: 1; }
.gallery-item:hover img { transform: scale(1.1); }

.lightbox {
  position: fixed; inset: 0;
  background: rgba(15, 13, 10, 0.94);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition);
  padding: 24px;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(90vw, 1000px); max-height: 78vh; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lightbox-caption { color: var(--color-white); margin-top: 18px; font-size: 0.95rem; opacity: 0.85; }
.lightbox-close {
  position: absolute; top: 24px; right: 28px;
  font-size: 2.4rem; color: var(--color-white); line-height: 1;
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.lightbox-nav:hover { background: rgba(255,255,255,0.22); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }

/* ---------- 9. TESTIMONIALS ---------- */
.testimonials { padding: 120px 0; background: var(--color-bg-alt); }
.testimonials-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.testimonial-card {
  background: var(--color-white);
  border-radius: var(--radius);
  padding: 32px 26px;
  box-shadow: var(--shadow-sm);
  margin: 0;
  transition: transform var(--transition), box-shadow var(--transition);
}
.testimonial-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.testimonial-card p { color: var(--color-text); font-style: italic; font-size: 0.98rem; }
.testimonial-card cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-accent-dark);
}
.testimonial-card cite span {
  display: block;
  margin-top: 3px;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--color-text-light);
}
.testimonial-stars {
  color: var(--color-accent);
  font-size: 1rem;
  letter-spacing: 3px;
  margin-bottom: 12px;
}

/* Résumé de la note Google, en tête de la section avis */
.google-rating-summary {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  margin: 8px auto 8px;
  padding: 10px 24px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
  transition: transform var(--transition), box-shadow var(--transition);
}
.google-rating-summary:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.google-rating-summary strong { color: var(--color-dark); font-family: var(--font-heading); }
.google-rating-summary span { color: var(--color-text-light); font-weight: 500; }
.google-rating-stars { color: var(--color-accent); letter-spacing: 2px; }
.testimonials-cta { margin-top: 48px; }

/* ---------- 10. CONTACT ---------- */
.contact { padding: 120px 0; background: var(--color-bg); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 640px;
  margin: 0 auto;
}
.contact-list { margin-top: 2rem; display: flex; flex-direction: column; gap: 18px; }
.contact-list li { display: flex; align-items: center; gap: 14px; font-weight: 500; }
.contact-list svg { fill: var(--color-accent); flex-shrink: 0; }
.contact-list a:hover { color: var(--color-accent-dark); }

.map-wrapper {
  margin-top: 2.2rem;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  height: 280px;
}
.map-wrapper iframe { width: 100%; height: 100%; border: 0; }

/* ---------- 11. FOOTER ---------- */
.site-footer { background: var(--color-dark); color: rgba(255,255,255,0.75); padding: 80px 0 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand p { color: rgba(255,255,255,0.55); margin-top: 18px; max-width: 320px; }
.footer-siren { font-size: 0.82rem; letter-spacing: 0.03em; }
.footer-links h4, .footer-contact h4 {
  color: var(--color-white);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 20px;
}
.footer-links ul, .footer-contact ul { display: flex; flex-direction: column; gap: 12px; }
.footer-links a:hover, .footer-contact a:hover { color: var(--color-accent-soft); }
.footer-bottom { text-align: center; padding: 26px 0; font-size: 0.85rem; color: rgba(255,255,255,0.45); }
.footer-credit { margin-top: 6px; }
.footer-credit a { color: rgba(255,255,255,0.6); text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover { color: var(--color-accent-soft); }

/* ---------- 12. FLOATING BUTTONS ---------- */
.back-to-top {
  position: fixed;
  bottom: 28px; right: 28px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-dark);
  color: var(--color-accent-soft);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 900;
}
.back-to-top svg { fill: currentColor; }
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }

.whatsapp-btn {
  position: fixed;
  bottom: 28px; left: 28px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.45);
  z-index: 900;
  transition: transform var(--transition);
}
.whatsapp-btn:hover { transform: scale(1.08); }

/* ---------- 13. RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-images { max-width: 520px; margin: 0 auto; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 190px; }
  .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .gallery-item:nth-child(6) { grid-column: span 1; }
}

/* Le seuil du menu burger est plus haut (1180px) que celui de la barre
   d'appel mobile (860px) : entre les deux, le header bascule déjà en
   panneau off-canvas alors que la barre fixe en bas d'écran reste
   réservée aux vrais téléphones. Avant ce correctif, la nav (6 liens),
   le numéro et le bouton CTA restaient sur une seule ligne jusqu'à
   860px et se chevauchaient dès que la fenêtre desktop était réduite
   sous ~1180px (aucune marge de manœuvre en flex, tout est en
   white-space: nowrap). */
@media (max-width: 1180px) {
  .main-nav, .header-actions { display: none; }
  .burger { display: flex; }

  .main-nav {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(78vw, 340px);
    background: var(--color-dark);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition);
    z-index: 1100;
    box-shadow: -18px 0 40px rgba(0,0,0,0.25);
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav ul { flex-direction: column; width: 100%; padding: 100px 36px 20px; gap: 6px; }
  .main-nav .nav-link { display: block; color: var(--color-white); font-size: 1.15rem; padding: 14px 18px; }
  .main-nav .nav-link:hover { background: rgba(255,255,255,0.08); color: var(--color-accent-soft); }

  .mobile-nav-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 36px 40px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .phone-pill-mobile { justify-content: center; border-color: rgba(255,255,255,0.4); }

  /* Le panneau .main-nav garde toujours un fond foncé une fois ouvert
     sur mobile, quel que soit l'état "scrolled" du header (qui ne
     s'applique normalement qu'au fond clair du header en desktop).
     Sans ce correctif, défiler avec le menu ouvert repasse les liens
     en texte foncé (.site-header.scrolled .nav-link) sur fond foncé,
     rendant le menu illisible. */
  .site-header.scrolled .main-nav .nav-link { color: var(--color-white); }
  .site-header.scrolled .main-nav .nav-link:hover,
  .site-header.scrolled .main-nav .nav-link.active { background: rgba(255,255,255,0.08); color: var(--color-accent-soft); }

  /* Même correctif pour le numéro de téléphone repris dans le panneau
     mobile (.phone-pill-mobile hérite de .phone-pill, dont le texte et
     la bordure passent en foncé une fois le header "scrolled"). */
  .site-header.scrolled .main-nav .phone-pill { color: var(--color-white); border-color: rgba(255,255,255,0.4); }
  .site-header.scrolled .main-nav .phone-pill svg { fill: var(--color-accent-soft); }
  .site-header.scrolled .main-nav .phone-pill:hover { border-color: var(--color-accent); color: var(--color-accent-soft); }
}

@media (max-width: 640px) {
  /* padding-left/right seulement : un shorthand "padding" écraserait le
     padding-top mis par .hero-content (même sélectivité, règle plus tardive),
     ce qui faisait passer le texte du hero derrière le header fixe. */
  .container { padding-left: 18px; padding-right: 18px; }
  .header-inner { gap: 12px; }
  .logo-text { font-size: 0.95rem; }
  .hero { min-height: 92vh; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-stats { gap: 24px; }
  .about, .services, .why, .gallery, .testimonials, .contact { padding: 80px 0; }
  .services-grid, .why-grid, .testimonials-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 1; }
  .about-images { grid-template-columns: 1fr; }
  .about-img-1, .about-img-2 { grid-column: 1; height: 260px; margin: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .whatsapp-btn { width: 50px; height: 50px; bottom: 20px; left: 20px; }
  .back-to-top { bottom: 20px; right: 20px; }
  /* Les boutons flottants occupent la bande des ~70px en bas de l'écran ;
     sans cette marge, la ligne de copyright du footer passe dessous une fois
     la page défilée jusqu'en bas. */
  .footer-bottom { padding-bottom: 90px; }
}

@media (max-width: 400px) {
  .logo-text small { display: none; }
}

/* =========================================================
   14. OPTIMISATIONS (SEO, PERFORMANCE, CONVERSION)
   Ajouts à la maquette d'origine, sans en modifier la
   structure : images en WebP via <picture>, accessibilité,
   barre d'appel mobile.
   ========================================================= */

/* ---------- 14.1 Accessibilité ---------- */

/* Lien d'évitement pour la navigation au clavier / lecteur d'écran */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--color-accent);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Focus visible cohérent sur tout le site */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 14.2 Images servies en WebP via <picture> ---------- */
/* <picture> est "inline" par défaut : on lui redonne le comportement
   du <img> qu'il remplace, sinon les cadres se déforment. */
.service-img picture,
.gallery-item picture,
.about-images picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Vignettes de la section "À propos" : le cadre est porté par <picture> */
.about-images picture.about-img {
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.about-images picture.about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ---------- 14.3 Liste de contact ---------- */
/* L'adresse tient sur deux lignes : alignement des icônes en haut. */
.contact-list li { align-items: flex-start; line-height: 1.5; }
.contact-list svg { margin-top: 2px; }
.contact-list strong { color: var(--color-dark); }

/* ---------- 14.4 Barre d'appel fixe (mobile) ---------- */
/* Levier de conversion n°1 sur téléphone : appeler en un geste,
   sans avoir à remonter en haut de page. */
.mobile-cta-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1150;
  background: rgba(33, 29, 24, 0.97);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
}
.mobile-cta-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.92rem;
  transition: transform var(--transition);
}
/* La barre d'appel fixe occupe le même bas d'écran que le bouton
   "Devis gratuit" du panneau mobile (.mobile-nav-cta) : sans ce
   masquage pendant l'ouverture du menu, elle passe par-dessus
   (z-index plus élevé) et ne laisse voir ce bouton qu'à moitié. */
body.nav-open .mobile-cta-bar { display: none; }
.mobile-cta-bar a:active { transform: scale(0.97); }
.mobile-cta-bar .cta-call { background: var(--color-accent); color: #fff; }
.mobile-cta-bar .cta-quote { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.25); }
.mobile-cta-bar svg { fill: currentColor; flex-shrink: 0; }

/* ---------- 14.5 Mentions légales repliées ---------- */
/* Obligatoires en France (loi LCEN). Repliées en bas de page pour
   rester sur un site une seule page sans alourdir la lecture. */
.legal { padding: 0 0 70px; background: var(--color-bg); }
.legal-item {
  max-width: 820px;
  margin: 0 auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.legal-item.open { box-shadow: var(--shadow-sm); border-color: var(--color-accent); }
.legal-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 26px;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text-light);
}
.legal-item.open .legal-question { color: var(--color-dark); }
.legal-icon {
  flex-shrink: 0;
  width: 26px; height: 26px;
  position: relative;
  border-radius: 50%;
  background: var(--color-bg-alt);
  transition: background var(--transition), transform var(--transition);
}
.legal-icon::before,
.legal-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--color-accent-dark);
  transform: translate(-50%, -50%);
  transition: opacity var(--transition);
}
.legal-icon::before { width: 12px; height: 2px; }
.legal-icon::after { width: 2px; height: 12px; }
.legal-item.open .legal-icon { background: var(--color-accent); transform: rotate(180deg); }
.legal-item.open .legal-icon::before { background: #fff; }
.legal-item.open .legal-icon::after { opacity: 0; }

.legal-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.legal-answer-inner { padding: 0 26px 26px; }
.legal-answer-inner h3 {
  font-size: 1rem;
  margin-top: 1.6rem;
  margin-bottom: 0.5rem;
  color: var(--color-dark);
}
.legal-answer-inner h3:first-child { margin-top: 0; }
.legal-answer-inner p { font-size: 0.88rem; line-height: 1.7; margin-bottom: 0.9rem; }
.legal-answer-inner a { color: var(--color-accent-dark); text-decoration: underline; }

/* ---------- 14.6 Responsive des ajouts ---------- */
@media (max-width: 860px) {
  /* Barre d'appel visible uniquement sur mobile */
  .mobile-cta-bar { display: flex; }
  /* Les boutons flottants remontent au-dessus de la barre */
  .whatsapp-btn { bottom: 84px; }
  .back-to-top { bottom: 84px; }
  /* Réserve la hauteur réelle de la barre (≈73 px) sous le footer */
  body { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
}

@media (max-width: 640px) {
  .whatsapp-btn { bottom: 84px; left: 16px; }
  .back-to-top { bottom: 84px; right: 16px; }
  /* La règle de la section 13 réservait 90 px sous le footer pour les boutons
     flottants ; la barre d'appel fixe occupe désormais cet espace. */
  .footer-bottom { padding-bottom: 26px; }
}

/* ---------- 14.7 Garde-fous ---------- */
/* Un scroll horizontal involontaire dégrade l'expérience mobile
   et pénalise directement le classement Google. */
html, body { overflow-x: hidden; max-width: 100%; }