/* ─── VARIABLES ──────────────────────────────────────────────────────────── */
:root {
  --noir:      #10110f;
  --acier:     #1c1f1b;
  --gris:      #2a2d29;
  --gris-mid:  #6b7069;
  --gris-clair:#b8bdb5;
  --blanc:     #f0ede6;
  --or:        #c9a84c;
  --or-clair:  #e8c96a;
  --or-pale:   #f5e9c8;
  --rouille:   #8b3a1a;
  --accent:    #d4a030;
  /* nouvelles teintes luxe */
  --acier-clair: #2e3330;
  --acier-mid:   #252825;
  --champagne:   #e8dfc8;
}

/* ─── RESET ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background: var(--acier);
  color: var(--blanc);
  font-family: 'Barlow', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  cursor: default;
}
img { display:block; width:100%; }
a  { text-decoration:none; color:inherit; }

/* ─── BARRE DE BRUIT (texture métal) ──────────────────────────────────────── */
body::before {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:.025;
}

/* ─── NAV ────────────────────────────────────────────────────────────────── */
nav {
  position: fixed; top:0; left:0; right:0; z-index:100;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 4rem;
  height: 72px;
  background: linear-gradient(to bottom, rgba(10,10,10,.97) 0%, rgba(10,10,10,0) 100%);
  transition: background .4s;
}
nav.scrolled { background: rgba(10,10,10,.97); border-bottom:1px solid rgba(200,149,42,.2); }

.nav-logo {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  letter-spacing:.12em;
  color: var(--blanc);
  display:flex; align-items:center; gap:.6rem;
}
.nav-logo span { color: var(--or); }
.logo-line {
  width:2px; height:32px;
  background: linear-gradient(to bottom, var(--or), transparent);
}

.nav-links {
  display:flex; gap:2.5rem; list-style:none;
  font-family:'Barlow Condensed', sans-serif;
  font-size:.85rem; letter-spacing:.18em; text-transform:uppercase;
}
.nav-links a {
  position:relative; padding-bottom:4px;
  color: var(--gris-clair);
  transition: color .3s;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:0;
  width:0; height:1px; background:var(--or);
  transition: width .3s;
}
.nav-links a:hover { color:var(--blanc); }
.nav-links a:hover::after { width:100%; }

.nav-cta {
  font-family:'Barlow Condensed', sans-serif;
  font-size:.82rem; letter-spacing:.15em; text-transform:uppercase;
  padding: .55rem 1.4rem;
  border: 1px solid var(--or);
  color: var(--or);
  transition: background .3s, color .3s;
}
.nav-cta:hover { background:var(--or); color:var(--noir); }

.burger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.burger span { display:block; width:24px; height:1.5px; background:var(--blanc); transition:.3s; }

/* ─── HERO ───────────────────────────────────────────────────────────────── */
#hero {
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 0 4rem 6rem;
  overflow:hidden;
}

.hero-bg {
  position:absolute; inset:0;
  background:
    linear-gradient(135deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,.3) 60%, rgba(10,10,10,.7) 100%),
    repeating-linear-gradient(
      -55deg,
      transparent,
      transparent 2px,
      rgba(200,149,42,.03) 2px,
      rgba(200,149,42,.03) 4px
    );
  background-color: #111;
}

/* Grille métal SVG en fond */
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(200,149,42,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,149,42,.06) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 80% at 60% 50%, black 0%, transparent 100%);
}

/* Croix de visée / réticule décoratif */
.hero-reticle {
  position:absolute; right:8%; top:50%; transform:translateY(-50%);
  width:380px; height:380px; opacity:.12;
}
.hero-reticle::before,
.hero-reticle::after {
  content:''; position:absolute; background:var(--or);
}
.hero-reticle::before { top:50%; left:0; right:0; height:1px; margin-top:-.5px; }
.hero-reticle::after  { left:50%; top:0; bottom:0; width:1px; margin-left:-.5px; }
.reticle-circle {
  position:absolute; inset:20%;
  border:1px solid var(--or); border-radius:50%;
}
.reticle-circle::before {
  content:'';
  position:absolute; inset:30%;
  border:1px solid var(--or); border-radius:50%;
}

.hero-eyebrow {
  font-family:'Barlow Condensed', sans-serif;
  font-size:.8rem; letter-spacing:.35em; text-transform:uppercase;
  color:var(--or);
  margin-bottom:1.2rem;
  opacity:0; animation: fadeUp .8s .3s forwards;
}
.hero-title {
  font-family:'Bebas Neue', sans-serif;
  font-size: clamp(4rem, 10vw, 9rem);
  line-height:.9; letter-spacing:.04em;
  color:var(--blanc);
  opacity:0; animation: fadeUp .9s .5s forwards;
}
.hero-title em {
  display:block; color:var(--or);
  font-style:normal;
}
.hero-sub {
  max-width:520px;
  margin-top:1.8rem;
  font-size:1.05rem; line-height:1.7;
  color:var(--gris-clair);
  opacity:0; animation: fadeUp .9s .7s forwards;
}
.hero-actions {
  display:flex; gap:1.2rem; margin-top:2.8rem; flex-wrap:wrap;
  opacity:0; animation: fadeUp .9s .9s forwards;
}
.btn-primary {
  font-family:'Barlow Condensed', sans-serif;
  font-size:.9rem; letter-spacing:.15em; text-transform:uppercase;
  padding: .85rem 2.2rem;
  background: var(--or);
  color: var(--noir);
  font-weight:700;
  transition: background .3s, transform .2s;
  position:relative; overflow:hidden;
}
.btn-primary::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,.15);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s;
}
.btn-primary:hover { transform:translateY(-2px); }
.btn-primary:hover::after { transform:scaleX(1); }

.btn-secondary {
  font-family:'Barlow Condensed', sans-serif;
  font-size:.9rem; letter-spacing:.15em; text-transform:uppercase;
  padding: .85rem 2.2rem;
  border:1px solid rgba(245,242,237,.25);
  color:var(--blanc);
  transition: border-color .3s, color .3s, transform .2s;
}
.btn-secondary:hover { border-color:var(--or); color:var(--or); transform:translateY(-2px); }

.hero-stats {
  position:absolute; right:4rem; bottom:5rem;
  display:flex; flex-direction:column; gap:1.8rem;
  opacity:0; animation: fadeLeft .9s 1.1s forwards;
}
.stat { text-align:right; }
.stat-num {
  font-family:'Bebas Neue', sans-serif;
  font-size:2.6rem; color:var(--or); line-height:1;
}
.stat-label {
  font-family:'Barlow Condensed', sans-serif;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gris-clair);
}

.scroll-hint {
  position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-family:'Barlow Condensed', sans-serif;
  font-size:.7rem; letter-spacing:.25em; text-transform:uppercase;
  color:var(--gris-clair);
  animation: bounce 2s 1.5s infinite;
}
.scroll-hint::after {
  content:''; width:1px; height:40px;
  background:linear-gradient(to bottom, var(--or), transparent);
}

/* ─── SECTIONS COMMUNES ──────────────────────────────────────────────────── */
section { position:relative; }
.container { max-width:1200px; margin:0 auto; padding:0 4rem; }

.section-label {
  font-family:'Barlow Condensed', sans-serif;
  font-size:.72rem; letter-spacing:.35em; text-transform:uppercase;
  color:var(--or); margin-bottom:.8rem;
}
.section-title {
  font-family:'Bebas Neue', sans-serif;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height:1; letter-spacing:.05em;
}
.separator {
  width:48px; height:2px;
  background: linear-gradient(to right, var(--or), transparent);
  margin:1.5rem 0;
}

/* ─── BAND INTERSTITIEL ──────────────────────────────────────────────────── */
.band {
  background: linear-gradient(90deg, var(--or) 0%, var(--or-clair) 50%, var(--or) 100%);
  color:var(--noir);
  padding:1.4rem 0;
  overflow:hidden;
  border-top: 1px solid var(--or-clair);
  border-bottom: 1px solid var(--or-clair);
}
.band-track {
  display:flex; gap:0; white-space:nowrap;
  animation: marquee 22s linear infinite;
}
.band-item {
  font-family:'Bebas Neue', sans-serif;
  font-size:1.3rem; letter-spacing:.15em;
  padding:0 3rem; flex-shrink:0;
  display:flex; align-items:center; gap:1.5rem;
}
.band-dot { width:6px; height:6px; background:var(--noir); border-radius:50%; opacity:.4; }

/* ─── SAVOIR-FAIRE ───────────────────────────────────────────────────────── */
#services { padding:7rem 0; background:var(--acier-clair); }

.services-intro {
  display:grid; grid-template-columns:1fr 1fr; gap:4rem;
  align-items:end; margin-bottom:5rem;
}
.services-text p {
  max-width:480px;
  font-size:1.05rem; line-height:1.8;
  color:var(--gris-clair); margin-top:1rem;
}

.services-grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1px;
  background:rgba(200,149,42,.15);
}
.service-card {
  background:var(--acier-clair);
  padding:3rem 2.5rem;
  transition: background .35s, transform .35s;
  position:relative; overflow:hidden;
  border-bottom: 1px solid rgba(201,168,76,.08);
}
.service-card::before {
  content:''; position:absolute; top:0; left:0;
  width:3px; height:0; background:var(--or);
  transition:height .4s;
}
.service-card:hover { background:var(--gris); transform:translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.service-card:hover::before { height:100%; }

.service-icon {
  font-size:2.2rem; margin-bottom:1.4rem;
  display:block;
}
.service-num {
  position:absolute; top:1.5rem; right:2rem;
  font-family:'Bebas Neue', sans-serif;
  font-size:4rem; color:rgba(200,149,42,.08);
  line-height:1;
}
.service-name {
  font-family:'Bebas Neue', sans-serif;
  font-size:1.7rem; letter-spacing:.05em;
  margin-bottom:.8rem;
}
.service-desc {
  font-size:.92rem; line-height:1.75;
  color:var(--gris-clair);
}
.service-mat {
  margin-top:1.4rem;
  display:flex; flex-wrap:wrap; gap:.4rem;
}
.mat-tag {
  font-family:'Barlow Condensed', sans-serif;
  font-size:.7rem; letter-spacing:.15em; text-transform:uppercase;
  padding:.25rem .7rem; border:1px solid rgba(200,149,42,.35);
  color:var(--or);
}

/* ─── RÉALISATIONS ───────────────────────────────────────────────────────── */
#realisations { padding:7rem 0; background:var(--acier-mid); }

.real-header {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:3.5rem;
}
.real-link {
  font-family:'Barlow Condensed', sans-serif;
  font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--or); border-bottom:1px solid rgba(200,149,42,.3);
  padding-bottom:2px; transition:border-color .3s;
}
.real-link:hover { border-color:var(--or); }

/* Mosaïque */
.mosaic {
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-template-rows: repeat(3, 200px);
  gap:6px;
}
.mosaic-item {
  background:var(--gris);
  position:relative; overflow:hidden;
  cursor:pointer;
}
.mosaic-item:nth-child(1) { grid-column:1/6; grid-row:1/3; }
.mosaic-item:nth-child(2) { grid-column:6/9; grid-row:1/2; }
.mosaic-item:nth-child(3) { grid-column:9/13; grid-row:1/2; }
.mosaic-item:nth-child(4) { grid-column:6/10; grid-row:2/4; }
.mosaic-item:nth-child(5) { grid-column:10/13; grid-row:2/3; }
.mosaic-item:nth-child(6) { grid-column:1/4; grid-row:3/4; }
.mosaic-item:nth-child(7) { grid-column:4/6; grid-row:3/4; }
.mosaic-item:nth-child(8) { grid-column:10/13; grid-row:3/4; }

.mosaic-bg {
  position:absolute; inset:0;
  transition:transform .5s cubic-bezier(.25,.46,.45,.94);
}
.mosaic-item:hover .mosaic-bg { transform:scale(1.06); }

/* SVG / icônes illustratifs en attendant des photos */
.mosaic-bg { display:flex; align-items:center; justify-content:center; font-size:3rem; }

.m1 .mosaic-bg { background: linear-gradient(135deg, #252825 0%, #303530 100%); }
.m2 .mosaic-bg { background: linear-gradient(135deg, #2a2d2a 0%, #222522 100%); }
.m3 .mosaic-bg { background: linear-gradient(135deg, #2a2e26 0%, #35301a 100%); }
.m4 .mosaic-bg { background: linear-gradient(135deg, #252825 0%, #302518 100%); }
.m5 .mosaic-bg { background: linear-gradient(135deg, #2d2a1a 0%, #252825 100%); }
.m6 .mosaic-bg { background: linear-gradient(135deg, #1a1a1a 0%, #1e1e1e 100%); }
.m7 .mosaic-bg { background: linear-gradient(135deg, #2a2d2a 0%, #222522 100%); }
.m8 .mosaic-bg { background: linear-gradient(135deg, #282420 0%, #252825 100%); }

.mosaic-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.9) 0%, transparent 50%);
  opacity:0; transition:opacity .35s;
  display:flex; align-items:flex-end; padding:1.5rem;
}
.mosaic-item:hover .mosaic-overlay { opacity:1; }
.mosaic-caption {
  font-family:'Barlow Condensed', sans-serif;
  font-size:.8rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--or);
}

/* Wireframe illustrations métal */
.metal-shape {
  width:60%; height:60%;
  border:1px solid rgba(200,149,42,.25);
  position:relative;
}
.metal-shape::before {
  content:''; position:absolute; inset:15%;
  border:1px solid rgba(200,149,42,.15);
}
.stair-icon { display:flex; flex-direction:column; justify-content:flex-end; gap:0; }
.stair-icon div {
  height:6px;
  background:rgba(200,149,42,.3);
  margin-left:auto;
  transition:margin .3s;
}
.stair-icon div:nth-child(1){width:20%}
.stair-icon div:nth-child(2){width:35%}
.stair-icon div:nth-child(3){width:50%}
.stair-icon div:nth-child(4){width:65%}
.stair-icon div:nth-child(5){width:80%}
.stair-icon div:nth-child(6){width:95%}

/* ─── APPROCHE / PROCESS ────────────────────────────────────────────────── */
#process { padding:7rem 0; background:var(--acier-clair); }

.process-inner {
  display:grid; grid-template-columns:1fr 1.5fr; gap:6rem; align-items:center;
}
.process-steps { display:flex; flex-direction:column; gap:0; margin-top:2rem; }
.step {
  display:flex; gap:2rem; padding:2rem 0;
  border-bottom:1px solid rgba(200,149,42,.1);
  position:relative;
}
.step:last-child { border-bottom:none; }
.step-num {
  font-family:'Bebas Neue', sans-serif;
  font-size:1rem; color:var(--or); opacity:.5;
  min-width:32px; padding-top:.2rem;
}
.step-content h3 {
  font-family:'Barlow Condensed', sans-serif;
  font-size:1.1rem; letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:.4rem;
}
.step-content p {
  font-size:.9rem; line-height:1.7; color:var(--gris-clair);
}

.process-visual {
  position:relative; height:480px;
}
.pv-card {
  position:absolute;
  background:var(--gris);
  padding:2.5rem;
}
.pv-card-main {
  inset:0 0 80px 0;
  border-left:3px solid var(--or);
  background: var(--acier-clair);
}
.pv-card-sub {
  bottom:0; right:0; left:30%;
  height:130px;
  background:var(--or);
  display:flex; align-items:center;
  padding:1.5rem 2rem;
}
.pv-quote {
  font-family:'Bebas Neue', sans-serif;
  font-size:1.6rem; letter-spacing:.06em;
  color:var(--noir); line-height:1.2;
}
.pv-main-label {
  font-family:'Barlow Condensed', sans-serif;
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--or); margin-bottom:1rem;
}
.pv-main-text {
  font-size:.95rem; line-height:1.8; color:var(--gris-clair);
}

/* ─── MATÉRIAUX ──────────────────────────────────────────────────────────── */
#materiaux { padding:7rem 0; background:var(--acier); }

.mat-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:rgba(200,149,42,.1); margin-top:4rem;
}
.mat-item {
  background:var(--acier);
  padding:3rem 2.5rem;
  display:flex; flex-direction:column; gap:1rem;
  transition:background .3s, box-shadow .3s;
}
.mat-item:hover { background:var(--acier-clair); box-shadow: inset 0 0 0 1px rgba(201,168,76,.2); }
.mat-bar {
  height:3px; width:40px;
  background:var(--or);
}
.mat-title {
  font-family:'Bebas Neue', sans-serif;
  font-size:2rem; letter-spacing:.06em;
}
.mat-sub {
  font-family:'Barlow Condensed', sans-serif;
  font-size:.75rem; letter-spacing:.25em; text-transform:uppercase;
  color:var(--or);
}
.mat-desc { font-size:.9rem; line-height:1.7; color:var(--gris-clair); }
.mat-props { display:flex; flex-direction:column; gap:.4rem; margin-top:.5rem; }
.mat-prop {
  display:flex; align-items:center; gap:.8rem;
  font-size:.85rem; color:var(--gris-clair);
}
.mat-prop::before {
  content:''; width:4px; height:4px;
  background:var(--or); flex-shrink:0;
}

/* ─── CLIENTS ────────────────────────────────────────────────────────────── */
#clients { padding:5rem 0; background:var(--acier-clair); border-top:1px solid rgba(201,168,76,.15); }

.clients-inner { display:flex; gap:4rem; align-items:center; }
.clients-label { flex-shrink:0; }
.clients-logos {
  display:flex; gap:3rem; flex-wrap:wrap; align-items:center;
}
.client-badge {
  font-family:'Barlow Condensed', sans-serif;
  font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gris-clair); opacity:.6;
  padding:.5rem 1.2rem; border:1px solid rgba(255,255,255,.1);
  transition:opacity .3s, border-color .3s;
}
.client-badge:hover { opacity:1; border-color:rgba(200,149,42,.4); color:var(--blanc); }

/* ─── CONTACT ────────────────────────────────────────────────────────────── */
#contact { padding:8rem 0; background:var(--acier-mid); }

.contact-inner {
  display:grid; grid-template-columns:1fr 1fr; gap:6rem;
}
.contact-info { display:flex; flex-direction:column; gap:2.5rem; margin-top:2rem; }
.info-block {}
.info-label {
  font-family:'Barlow Condensed', sans-serif;
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--or); margin-bottom:.4rem;
}
.info-val { font-size:1rem; color:var(--blanc); }
.info-val a { transition:color .3s; }
.info-val a:hover { color:var(--or); }

.contact-form { display:flex; flex-direction:column; gap:1.2rem; margin-top:2rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.field { display:flex; flex-direction:column; gap:.5rem; }
.field label {
  font-family:'Barlow Condensed', sans-serif;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gris-clair);
}
.field input,
.field select,
.field textarea {
  background:rgba(255,255,255,.07);
  border:1px solid rgba(201,168,76,.2);
  border-radius:0;
  padding:.85rem 1rem;
  color:var(--blanc);
  font-family:'Barlow', sans-serif;
  font-size:.95rem;
  outline:none;
  transition:border-color .3s, background .3s;
  appearance:none;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color:var(--or);
  background:rgba(200,149,42,.05);
}
.field textarea { resize:vertical; min-height:130px; }
.field select option { background:var(--acier); }
.form-submit {
  align-self:flex-start;
  font-family:'Barlow Condensed', sans-serif;
  font-size:.9rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.9rem 2.5rem;
  background:var(--or); color:var(--noir); font-weight:700;
  border:none; cursor:pointer;
  transition:background .3s, transform .2s;
}
.form-submit:hover { background:var(--or-clair); transform:translateY(-2px); }

/* ─── FOOTER ────────────────────────────────────────────────────────────── */
footer {
  background:var(--noir);
  border-top:1px solid rgba(201,168,76,.2);
  padding:3rem 0;
}
.footer-inner {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1.5rem;
}
.footer-logo {
  font-family:'Bebas Neue', sans-serif;
  font-size:1.6rem; letter-spacing:.1em;
}
.footer-logo span { color:var(--or); }
.footer-info {
  font-size:.82rem; color:var(--gris-clair); line-height:1.8;
}
.footer-links {
  display:flex; gap:2rem; list-style:none;
  font-family:'Barlow Condensed', sans-serif;
  font-size:.75rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--gris-clair);
}
.footer-links a:hover { color:var(--or); }

/* ─── ANIMATIONS ──────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeLeft {
  from { opacity:0; transform:translateX(28px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes bounce {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%      { transform:translateX(-50%) translateY(8px); }
}
@keyframes marquee {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
@keyframes spin-slow {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}

/* Reveal on scroll */
.reveal {
  opacity:0; transform:translateY(30px);
  transition: opacity .7s, transform .7s;
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media(max-width:900px){
  nav { padding:0 2rem; }
  .nav-links { display:none; }
  .burger { display:flex; }
  .nav-links.open {
    display:flex; flex-direction:column;
    position:fixed; top:72px; left:0; right:0; bottom:0;
    background:rgba(10,10,10,.98);
    align-items:center; justify-content:center;
    gap:2.5rem; font-size:1.1rem;
  }
  #hero { padding:0 2rem 5rem; }
  .hero-stats { display:none; }
  .hero-reticle { display:none; }
  .services-intro { grid-template-columns:1fr; gap:2rem; }
  .services-grid { grid-template-columns:1fr 1fr; }
  .process-inner { grid-template-columns:1fr; }
  .process-visual { display:none; }
  .mat-grid { grid-template-columns:1fr; }
  .contact-inner { grid-template-columns:1fr; gap:3rem; }
  .form-row { grid-template-columns:1fr; }
  .container { padding:0 2rem; }
  .mosaic {
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
  }
  .mosaic-item { grid-column:auto !important; grid-row:auto !important; height:160px; }
  .clients-inner { flex-direction:column; align-items:flex-start; }
  .footer-inner { flex-direction:column; align-items:flex-start; }
}
@media(max-width:600px){
  .services-grid { grid-template-columns:1fr; }
  .hero-actions { flex-direction:column; }
  .btn-primary,.btn-secondary { text-align:center; }
}

/* ─── Mosaïque couleurs de fond ─────────────────────────────────────────── */
.m1 .mosaic-bg { background: linear-gradient(135deg, #252825 0%, #303530 100%); display:flex;align-items:center;justify-content:center; }
.m2 .mosaic-bg { background: linear-gradient(135deg, #2a2d2a 0%, #222522 100%); display:flex;align-items:center;justify-content:center; }
.m3 .mosaic-bg { background: linear-gradient(135deg, #2a2e26 0%, #35301a 100%); display:flex;align-items:center;justify-content:center; }
.m4 .mosaic-bg { background: linear-gradient(135deg, #252825 0%, #302518 100%); display:flex;align-items:center;justify-content:center; }
.m5 .mosaic-bg { background: linear-gradient(135deg, #2d2a1a 0%, #252825 100%); display:flex;align-items:center;justify-content:center; }
.m6 .mosaic-bg { background: linear-gradient(135deg, #1a1a1a 0%, #1e1e1e 100%); display:flex;align-items:center;justify-content:center; }
.m7 .mosaic-bg { background: linear-gradient(135deg, #2a2d2a 0%, #222522 100%); display:flex;align-items:center;justify-content:center; }
.m8 .mosaic-bg { background: linear-gradient(135deg, #282420 0%, #252825 100%); display:flex;align-items:center;justify-content:center; }

/* WordPress admin bar compensation */
.admin-bar nav { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar nav { top: 46px; } }

/* ─── LOGO IMAGE ─────────────────────────────────────────────────────────── */
.nav-logo-img {
  height: 52px;
  width: auto;
  display: block;
  /* Fond blanc du logo rendu transparent via mix-blend-mode */
  mix-blend-mode: lighten;
  filter: contrast(1.1) brightness(1.05);
  transition: opacity .3s;
  border-radius: 2px;
}
.nav-logo-img:hover { opacity: .85; }

/* Fallback : fond noir derrière le logo pour masquer le blanc */
.nav-logo {
  background: transparent;
  padding: 4px 0;
  display: flex;
  align-items: center;
}

.footer-logo-img {
  height: 60px;
  width: auto;
  display: block;
  mix-blend-mode: lighten;
  filter: contrast(1.1) brightness(1.05);
  opacity: .9;
}

/* ─── HERO AVEC PHOTO RÉELLE ─────────────────────────────────────────────── */
/* Renforcer l'overlay pour que le texte reste lisible sur la photo */
.hero-bg {
  position: absolute !important;
  inset: 0 !important;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(10,12,10,.82) 0%, rgba(10,12,10,.40) 55%, rgba(10,12,10,.65) 100%);
}
/* La grille se superpose au-dessus de l'overlay */
.hero-grid {
  z-index: 1;
}
/* Tout le contenu texte au-dessus */
#hero .hero-eyebrow,
#hero .hero-title,
#hero .hero-sub,
#hero .hero-actions,
#hero .hero-stats,
#hero .scroll-hint,
#hero svg,
#hero .hero-reticle {
  position: relative;
  z-index: 2;
}

/* ─── LOGO FIX DEFINITIF ────────────────────────────────────────────────────
   Le logo AMD est un JPEG avec fond blanc.
   On utilise mix-blend-mode:multiply sur fond sombre pour effacer le blanc.
   Sur la nav (fond très sombre), cela rend le fond blanc invisible.
──────────────────────────────────────────────────────────────────────────── */
a.nav-logo {
  display: flex;
  align-items: center;
  background: transparent;
  padding: 0;
  text-decoration: none;
}
.nav-logo-img {
  height: 52px !important;
  width: auto !important;
  display: block !important;
  mix-blend-mode: screen !important;   /* fond blanc devient transparent sur fond sombre */
  filter: none !important;             /* annule le filtre blanc précédent */
  border-radius: 0 !important;
  opacity: 1 !important;
  transition: opacity .3s !important;
}
.nav-logo-img:hover { opacity: .8 !important; }

.footer-logo-img {
  height: 60px !important;
  width: auto !important;
  display: block !important;
  mix-blend-mode: screen !important;
  filter: none !important;
  opacity: .95 !important;
}