/* Art direction: entreprise de maçonnerie générale à Montpellier -> sobre, robuste, clair
   Palette: neutre pierre/beige chaud + accent bleu acier (bâtiment/BTP)
   Typography: Cabinet Grotesk (display) + Work Sans (body)
   Density: balanced, artisanal, mode clair uniquement */

:root {
  --color-bg: #f6f3ee;
  --color-surface: #faf8f4;
  --color-surface-2: #fcfbf8;
  --color-surface-offset: #efeae2;
  --color-surface-offset-2: #e6dfd4;
  --color-surface-dynamic: #ddd4c6;
  --color-divider: #ddd4c6;
  --color-border: #d1c6b4;
  --color-text: #2b2420;
  --color-text-muted: #6f6458;
  --color-text-faint: #b3a793;
  --color-text-inverse: #f8f4ee;
  --color-primary: #2b5f74;
  --color-primary-hover: #1f4a5c;
  --color-primary-active: #163542;
  --color-primary-highlight: #d3e2e6;
  --color-success: #4a7a35;
  --color-error: #a13030;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  --transition-interactive: 180ms cubic-bezier(0.16,1,0.3,1);
  --shadow-sm: 0 1px 2px oklch(0.25 0.02 40 / 0.08);
  --shadow-md: 0 4px 14px oklch(0.25 0.02 40 / 0.10);
  --shadow-lg: 0 14px 36px oklch(0.25 0.02 40 / 0.16);
  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1200px;
  --font-display: 'Cabinet Grotesk', 'Georgia', serif;
  --font-body: 'Work Sans', 'Helvetica Neue', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: none; text-size-adjust: none; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { min-height: 100dvh; line-height: 1.6; font-family: var(--font-body); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); color: var(--color-text); background: var(--color-bg); }
img { display: block; max-width: 100%; height: auto; }
ul[role="list"] { list-style: none; }
h1,h2,h3 { font-family: var(--font-display); line-height: 1.1; text-wrap: balance; font-weight: 700; }
p, li { text-wrap: pretty; }
a { color: inherit; }
::selection { background: color-mix(in oklab, var(--color-primary) 25%, transparent); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:0.01ms!important; transition-duration:0.01ms!important; scroll-behavior:auto!important; } }

.container { max-width: var(--content-default); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.container-wide { max-width: var(--content-wide); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }

/* Header */
header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--color-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-divider); }
.nav { display:flex; align-items:center; justify-content:space-between; padding-block: 1rem; }
.brand { font-family: var(--font-display); font-weight:800; font-size: 1.25rem; letter-spacing: -0.01em; text-decoration:none; color: var(--color-text); }
.nav-links { display:flex; gap: 2rem; list-style:none; align-items:center; }
.nav-links a { text-decoration:none; font-size: 0.95rem; font-weight: 500; color: var(--color-text-muted); transition: color var(--transition-interactive); }
.nav-links a:hover { color: var(--color-primary); }
.menu-btn { display:none; width:40px; height:40px; align-items:center; justify-content:center; border-radius:var(--radius-md); }
.header-right { display:flex; align-items:center; gap: 1rem; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding: 0.75rem 1.5rem; border-radius: var(--radius-md); font-weight:600; font-size:0.95rem; text-decoration:none; transition: all var(--transition-interactive); }
.btn-primary { background: var(--color-primary); color: var(--color-text-inverse); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-ghost { border: 1px solid var(--color-border); color: var(--color-text); }
.btn-ghost:hover { background: var(--color-surface-offset); }

/* Hero */
.hero { padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem); }
.hero-grid { display:grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items:center; }
.eyebrow { display:inline-flex; align-items:center; gap:0.5rem; color: var(--color-primary); font-weight:600; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:1rem; }
.hero h1 { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.4rem); margin-bottom: 1.25rem; }
.hero p.lead { color: var(--color-text-muted); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem); max-width: 46ch; margin-bottom: 2rem; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }
.hero-image { position:relative; border-radius: var(--radius-xl); overflow:hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/5; }
.hero-image img { width:100%; height:100%; object-fit:cover; }
.hero-badge { position:absolute; bottom: 1.25rem; left: 1.25rem; background: color-mix(in oklab, var(--color-surface) 92%, transparent); backdrop-filter: blur(8px); padding: 0.85rem 1.1rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.hero-badge strong { font-family: var(--font-display); font-size:1.4rem; display:block; color: var(--color-primary); }
.hero-badge span { font-size: 0.8rem; color: var(--color-text-muted); }

/* Trust strip */
.trust { border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); background: var(--color-surface); padding-block: 1.5rem; }
.trust-grid { display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.5rem; text-align:center; }
.trust-item { flex:1; min-width:140px; }
.trust-item strong { display:block; font-family: var(--font-display); font-size:1.3rem; color: var(--color-primary); }
.trust-item span { font-size:0.85rem; color: var(--color-text-muted); }

/* Section headers */
.section { padding-block: clamp(3rem, 7vw, 6rem); }
.section-head { max-width: 640px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-eyebrow { color: var(--color-primary); font-weight:600; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.75rem; display:block; }
.section-head h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); margin-bottom: 0.75rem; }
.section-head p { color: var(--color-text-muted); }

/* Services */
.services-list { display:flex; flex-direction:column; border-top:1px solid var(--color-divider); }
.service-row { display:grid; grid-template-columns: 2.5rem 1fr auto; align-items:center; gap: 1.5rem; padding-block: 1.5rem; border-bottom: 1px solid var(--color-divider); transition: background var(--transition-interactive); }
.service-row:hover { background: var(--color-surface); }
.service-num { font-family: var(--font-display); color: var(--color-text-faint); font-size:1.1rem; }
.service-row h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); font-weight:600; }
.service-row p { color: var(--color-text-muted); font-size:0.95rem; margin-top:0.25rem; }
.service-tag { font-size:0.8rem; color: var(--color-text-muted); border:1px solid var(--color-border); padding: 0.35rem 0.85rem; border-radius: var(--radius-full); white-space:nowrap; }
.services-note { color: var(--color-text-muted); font-size: 0.95rem; margin-top: 1.25rem; }

/* Chantiers types */
.types-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.type-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; text-align:left; }
.type-card strong { display:block; font-family:var(--font-display); font-size:1.1rem; margin-bottom:0.35rem; }
.type-card span { font-size:0.85rem; color: var(--color-text-muted); }

/* Gallery */
.gallery-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem; }
.gallery-item { position:relative; border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 4/3; box-shadow: var(--shadow-sm); cursor:pointer; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition: transform 400ms cubic-bezier(0.16,1,0.3,1); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item .cap { position:absolute; bottom:0; left:0; right:0; padding: 0.6rem 0.8rem; background: linear-gradient(to top, oklch(0.1 0.02 40 / 0.65), transparent); color:#f6f3ee; font-size:0.85rem; font-weight:600; }

/* Lightbox */
.lightbox { position:fixed; inset:0; background: oklch(0.1 0.02 40 / 0.9); display:none; align-items:center; justify-content:center; z-index:100; padding: 2rem; }
.lightbox.open { display:flex; }
.lightbox img { max-width: 90vw; max-height: 85vh; border-radius: var(--radius-md); }
.lightbox-close { position:absolute; top:1.5rem; right:1.5rem; width:44px; height:44px; border-radius:var(--radius-full); background: oklch(1 0 0 / 0.1); color:#fff; display:flex; align-items:center; justify-content:center; }
.lightbox-nav { position:absolute; top:50%; transform: translateY(-50%); width:48px; height:48px; border-radius:var(--radius-full); background: oklch(1 0 0 / 0.1); color:#fff; display:flex; align-items:center; justify-content:center; }
.lightbox-prev { left: 1.5rem; } .lightbox-next { right: 1.5rem; }

/* Contact */
.contact-grid { display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); }
.contact-info { display:flex; flex-direction:column; gap: 1.5rem; }
.info-card { display:flex; gap:1rem; align-items:flex-start; }
.info-card .icon { width:44px; height:44px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color: var(--color-primary); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.info-card .icon svg { width:20px; height:20px; }
.info-card strong { display:block; margin-bottom:0.15rem; }
.info-card span, .info-card a { color: var(--color-text-muted); font-size:0.95rem; text-decoration:none; }
.info-card a:hover { color: var(--color-primary); }

.form-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow-md); }
.field { margin-bottom: 1.25rem; }
.field label { display:block; font-size:0.85rem; font-weight:600; margin-bottom:0.45rem; }
.field input, .field textarea { width:100%; padding: 0.75rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface-2); font: inherit; color: var(--color-text); transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive); }
.field input:focus, .field textarea:focus { outline:none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-highlight); }
.field textarea { resize: vertical; min-height: 110px; }
.field-error { color: var(--color-error); font-size:0.8rem; margin-top:0.35rem; display:none; }
.field.invalid input, .field.invalid textarea { border-color: var(--color-error); }
.field.invalid .field-error { display:block; }
.form-note { font-size:0.8rem; color: var(--color-text-faint); margin-top:1rem; }
.form-success { display:none; text-align:center; padding: 2rem 1rem; }
.form-success.show { display:block; }
.form-success svg { width:48px; height:48px; color: var(--color-success); margin: 0 auto 1rem; }

/* Footer */
footer { border-top: 1px solid var(--color-divider); padding-block: 2.5rem; background: var(--color-surface); }
.footer-grid { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-legal { font-size: 0.8rem; color: var(--color-text-faint); }
.footer-brand { font-family: var(--font-display); font-weight:700; }

@media (max-width: 860px) {
  .nav-links { display:none; }
  .menu-btn { display:flex; }
  .hero-grid, .contact-grid { grid-template-columns: 1fr; }
  .hero-image { order:-1; aspect-ratio: 16/10; }
  .types-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .service-row { grid-template-columns: 2rem 1fr; }
  .service-tag { grid-column: 1/-1; justify-self:flex-start; margin-top:0.5rem; }
  .trust-grid { justify-content:flex-start; }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .types-grid { grid-template-columns: 1fr; }
}