/* ═══════════════════════════════════════════════════
   PUNK AGENCY — style.css
   ═══════════════════════════════════════════════════ */

:root {
  --noir:   #0f0f0d;
  --vert:   #1a3d2b;
  --vert2:  #2d6045;
  --or:     #b8965a;
  --creme:  #f4f0e8;
  --gris:   #8a8a82;
  --blanc:  #fafaf7;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'Archivo', sans-serif; background: var(--blanc); color: var(--noir); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 3.5rem;
  background: rgba(250,250,247,.96); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(184,150,90,.18);
  transition: box-shadow .3s;
}
.nav-logo { font-family:'Archivo',sans-serif; font-weight:600; font-size:.95rem; letter-spacing:.35em; color:var(--vert); text-decoration:none; }
.nav-logo span { color: var(--or); }
.nav-links { display: flex; gap: 1.6rem; list-style: none; }
.nav-links a {
  font-size: .67rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--noir); text-decoration: none; font-weight: 500;
  position: relative; transition: color .2s;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -3px; left: 0;
  width: 0; height: 1px; background: var(--or); transition: width .3s;
}
.nav-links a:hover { color: var(--vert); }
.nav-links a:hover::after { width: 100%; }
.lang-switch { display: flex; gap: .4rem; }
.lang-switch button {
  background: none; border: 1px solid transparent; cursor: pointer;
  font-family: 'Archivo', sans-serif; font-size: .68rem; letter-spacing: .15em;
  padding: .22rem .55rem; transition: all .2s; color: var(--gris);
}
.lang-switch button.active { border-color: var(--or); color: var(--vert); }

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: .3rem; }
.hamburger span { width: 24px; height: 2px; background: var(--vert); transition: all .3s; }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

.nav-mobile { display: none; }
.nav-mobile.open {
  display: flex; flex-direction: column; gap: 0;
  position: fixed; top: 56px; left: 0; right: 0; z-index: 190;
  background: rgba(250,250,247,.98); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(184,150,90,.2);
}
.nav-mobile a {
  display: block; padding: .85rem 1.5rem;
  font-size: .78rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--noir); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid rgba(184,150,90,.1);
  transition: background .2s, color .2s;
}
.nav-mobile a:hover { background: var(--creme); color: var(--vert); }

/* ── SECTIONS ── */
section { padding: 6rem 4rem; }
.section-tag {
  font-size: .63rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--or); margin-bottom: .9rem;
  display: flex; align-items: center; gap: .9rem;
}
.section-tag::before { content: ''; width: 24px; height: 1px; background: var(--or); }
h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  font-weight: 300; line-height: 1.05; letter-spacing: -.01em;
}
h2 em { font-style: italic; color: var(--vert); }

/* em in h2 on dark backgrounds must be white/gold, not green */
#ref-marques h2 em,
#telechargements h2 em,
#competences h2 em,
#mobilite h2 em { color: var(--or); }

/* ── HERO — sobre et élégant ── */
#hero {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}

/* Image de fond très atténuée */
.hero-bg-full {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(.18) saturate(.5) blur(1px);
}
.hero-bg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(26,61,43,.55) 0%, rgba(15,15,13,.75) 60%, rgba(15,15,13,.9) 100%);
}

/* Contenu centré */
.hero-solo {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 2rem 3rem;
  gap: 0;
}

/* Lignes décoratives */
.hero-line-top, .hero-line-bottom {
  width: 1px; background: rgba(184,150,90,.4);
  margin: 1.8rem auto;
}
.hero-line-top  { height: 60px; animation: grow-line .9s ease forwards; transform-origin: top; }
.hero-line-bottom { height: 60px; animation: grow-line .9s ease .3s forwards; transform-origin: top; opacity: 0; }
@keyframes grow-line {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}

/* Nom de l'agence */
.hero-agency-name {
  display: flex; align-items: baseline; gap: .6em;
  animation: fade-up .9s ease .15s both;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-punk {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 300; letter-spacing: .08em;
  color: var(--creme); line-height: 1;
}
.hero-agency-word {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 2.2rem);
  font-weight: 300; letter-spacing: .55em;
  color: var(--or); line-height: 1;
  text-transform: uppercase;
  padding-top: .3em;
}

/* Divider doré */
.hero-divider {
  width: 60px; height: 1px; background: var(--or);
  margin: 1.4rem auto; opacity: .7;
  animation: fade-up .9s ease .3s both;
}

/* Tagline et lieu */
.hero-tagline-clean {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: clamp(.75rem, 1.6vw, 1rem);
  font-weight: 400; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(244,240,232,.7);
  animation: fade-up .9s ease .4s both;
}
.hero-location-clean {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 300; font-style: italic;
  letter-spacing: .12em; color: var(--or);
  margin-top: .6rem;
  animation: fade-up .9s ease .5s both;
}

/* Navigation rapide sous le nom */
.hero-nav-links {
  display: flex; align-items: center; gap: 1.2rem;
  animation: fade-up .9s ease .65s both;
}
.hero-nav-links a {
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(244,240,232,.45); text-decoration: none;
  transition: color .2s;
}
.hero-nav-links a:hover { color: var(--or); }
.hn-dot { color: rgba(184,150,90,.35); font-size: .7rem; }

/* DOWNLOAD BAR */
.dl-bar {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: center; gap: 1rem;
  padding: .8rem 2rem;
  background: rgba(15,15,13,.7); backdrop-filter: blur(8px);
  border-top: 1px solid rgba(184,150,90,.2);
  flex-wrap: wrap;
}
.dl-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Archivo Narrow', sans-serif; font-size: .62rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--creme); text-decoration: none;
  padding: .4rem 1rem; border: 1px solid rgba(184,150,90,.4);
  transition: all .25s;
}
.dl-btn:hover { background: var(--or); color: var(--noir); border-color: var(--or); }
.dl-btn svg { width: 12px; height: 12px; fill: currentColor; }

.scroll-cue {
  position: absolute; bottom: 3.8rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  color: rgba(244,240,232,.3); font-size: .58rem; letter-spacing: .2em;
  text-transform: uppercase; z-index: 20;
}
.scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, transparent, var(--or));
  animation: scrl 1.8s ease-in-out infinite;
}
@keyframes scrl {
  0%, 100% { transform: scaleY(0); transform-origin: top; }
  50%       { transform: scaleY(1); transform-origin: top; }
}

/* ── ABOUT — correction #3 ── */
#about { background: var(--blanc); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.about-text p { font-size: .93rem; line-height: 1.9; color: #444; margin-top: 1.5rem; font-weight: 300; }
.about-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem; font-style: italic; line-height: 1.6; color: var(--vert);
  border-left: 2px solid var(--or); padding-left: 1.4rem; margin-top: 1.8rem;
}
.about-stats {
  display: flex; gap: 2.5rem; margin-top: 2rem;
  padding-top: 1.5rem; border-top: 1px solid rgba(184,150,90,.2);
}
.about-stat .num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem; font-weight: 300; color: var(--or); display: block;
}
.about-stat .label { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }
.about-legal { font-size: .75rem; color: var(--gris); margin-top: 1.5rem; line-height: 1.7; }

/* Team — correction #3 */
.team-grid { display: flex; flex-direction: column; gap: 1.6rem; }
.team-card {
  display: grid; grid-template-columns: 90px 1fr; gap: 1.4rem; align-items: start;
  padding: 1.5rem; border: 1px solid rgba(184,150,90,.2);
  background: var(--creme); transition: border-color .3s, transform .3s;
}
.team-card:hover { border-color: var(--or); transform: translateX(4px); }
.team-photo {
  width: 90px; height: 90px; border-radius: 50%; object-fit: cover;
  object-position: center 20%; filter: grayscale(.1);
  flex-shrink: 0;
}
.team-info h3 {
  font-family: 'Archivo Narrow', sans-serif; font-size: .88rem;
  letter-spacing: .1em; font-weight: 500; text-transform: uppercase; color: var(--vert);
  margin-bottom: .4rem;
}
.team-info p { font-size: .78rem; line-height: 1.65; color: #555; }

/* ── COMPÉTENCES — correction #4 ── */
#competences { background: var(--noir); color: var(--creme); }
#competences h2 { color: var(--creme); }
#competences h2 em { color: var(--or); }
.comp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 3rem; }
.comp-card {
  position: relative; padding: 2.2rem; overflow: hidden;
  border: 1px solid rgba(184,150,90,.12);
  cursor: zoom-in; transition: border-color .3s;
  min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end;
}
.comp-card:hover { border-color: rgba(184,150,90,.4); }
/* Background image — correction #4 + correction: less visible for readability */
.comp-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(.15) saturate(.4);
  transition: filter .4s, transform .5s;
}
.comp-card:hover .comp-bg { filter: brightness(.10) saturate(.3); transform: scale(1.04); }
.comp-content { position: relative; z-index: 2; }
/* No number — correction #4 */
.comp-card h3 {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--or); font-weight: 500; margin-bottom: .7rem;
}
.comp-card p { font-size: .82rem; line-height: 1.7; color: rgba(244,240,232,.72); font-weight: 300; }
/* Zoom on click modal — correction #4 */
.comp-modal {
  display: none; position: fixed; inset: 0; z-index: 900;
  background: rgba(10,10,8,.9); backdrop-filter: blur(8px);
  align-items: center; justify-content: center;
}
.comp-modal.open { display: flex; }
.comp-modal-inner {
  background: var(--noir); border: 1px solid rgba(184,150,90,.3);
  max-width: 600px; width: 90vw; padding: 3rem;
  position: relative;
}
.comp-modal-close {
  position: absolute; top: 1rem; right: 1.2rem;
  background: none; border: none; color: rgba(244,240,232,.6);
  font-size: 1.6rem; cursor: pointer; line-height: 1; transition: color .2s;
}
.comp-modal-close:hover { color: var(--or); }
.comp-modal h3 {
  font-family: 'Cormorant Garamond', serif; font-size: 1.8rem; font-weight: 300;
  color: var(--creme); margin-bottom: 1.2rem;
}
.comp-modal p { font-size: .9rem; line-height: 1.9; color: rgba(244,240,232,.72); font-weight: 300; }

/* ── LIGHTBOX ── */
.lightbox {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(10,10,8,.95); backdrop-filter: blur(6px); cursor: zoom-out;
}
.lightbox.open { display: flex; align-items: center; justify-content: center; }
.lightbox-inner { position: relative; max-width: 94vw; max-height: 92vh; }
.lightbox-inner img {
  max-width: 90vw; max-height: 85vh; object-fit: contain;
  display: block; box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.lightbox-close {
  position: absolute; top: -2.5rem; right: 0;
  background: none; border: none; color: rgba(244,240,232,.7);
  font-size: 1.8rem; cursor: pointer; line-height: 1; transition: color .2s;
}
.lightbox-close:hover { color: var(--or); }
.lightbox-caption {
  position: absolute; bottom: -2.2rem; left: 0; right: 0; text-align: center;
  font-size: .7rem; letter-spacing: .15em; color: rgba(244,240,232,.5); text-transform: uppercase;
}
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(15,15,13,.6); border: 1px solid rgba(184,150,90,.3);
  color: var(--creme); width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.2rem; transition: all .2s; z-index: 10;
}
.lightbox-nav:hover { background: var(--or); color: var(--noir); }
.lightbox-prev { left: -56px; }
.lightbox-next { right: -56px; }

/* ── GALLERY SECTIONS ── */
.ref-section { padding: 6rem 4rem; }
.gallery-intro { font-size: .88rem; line-height: 1.9; color: #555; max-width: 780px; margin-top: 1.4rem; font-weight: 300; }
.gallery-intro.dark { color: rgba(244,240,232,.65); }

/* correction #5 & #6 — equal size, no wide first */
.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 3px; margin-top: 2.5rem;
}
.gallery-thumb {
  position: relative; overflow: hidden; cursor: pointer;
  aspect-ratio: 4/3; background: var(--vert);
}
/* NO .wide override anymore */
.gallery-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease, filter .4s;
}
.gallery-thumb:hover img { transform: scale(1.04); filter: brightness(.7); }
.gallery-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.1rem 1.3rem;
  background: linear-gradient(to top, rgba(15,15,13,.9) 0%, transparent 100%);
  transform: translateY(35%); transition: transform .38s ease; z-index: 2;
}
.gallery-thumb:hover .gallery-caption { transform: translateY(0); }
.gallery-client { font-size: .58rem; letter-spacing: .25em; text-transform: uppercase; color: var(--or); margin-bottom: .3rem; }
.gallery-name { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-weight: 300; color: var(--creme); }
.gallery-detail { font-size: .7rem; color: rgba(244,240,232,.58); margin-top: .3rem; opacity: 0; transition: opacity .3s .08s; }
.gallery-thumb:hover .gallery-detail { opacity: 1; }
.gallery-thumb::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255,255,255,.01) 20px, rgba(255,255,255,.01) 21px);
  z-index: 1; pointer-events: none;
}

/* Gradient bg fallbacks */
.bg-l1{background:linear-gradient(135deg,#1a3d2b,#2d6045 50%,#b8965a)}
.bg-l2{background:linear-gradient(135deg,#0f0f0d,#1a3d2b)}
.bg-l3{background:linear-gradient(135deg,#2d6045,#b8965a)}
.bg-m1{background:linear-gradient(135deg,#1c2e1c,#3a6a3a)}
.bg-m2{background:linear-gradient(135deg,#0f1a0f,#1c3020)}
.bg-m3{background:linear-gradient(135deg,#2a4a2a,#3a6a3a)}
.bg-r1{background:linear-gradient(135deg,#2a2018,#5a4a38 60%,#8a7a60)}
.bg-r2{background:linear-gradient(135deg,#1a1a1a,#2a2018)}
.bg-r3{background:linear-gradient(135deg,#5a4a38,#7a6a50)}

/* ── MOBILITÉ — correction #7 ── */
#mobilite { background: var(--vert); color: var(--creme); position: relative; overflow: hidden; }
#mobilite::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(184,150,90,.04) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(184,150,90,.04) 1px, transparent 1px);
  background-size: 55px 55px;
}
#mobilite h2 { color: var(--creme); position: relative; }
#mobilite h2 em { color: var(--or); }
#mobilite .section-tag { position: relative; }

/* Text first — correction #7 */
.mob-text-block { position: relative; margin-bottom: 3.5rem; }
.mob-text-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; margin-top: 1.8rem; }
.mob-text-col p {
  font-size: .87rem; line-height: 1.95; color: rgba(244,240,232,.72);
  font-weight: 300; margin-bottom: 1rem;
}
.mob-stats-row {
  display: flex; gap: 2.5rem; margin-top: 2rem;
  padding-top: 1.8rem; border-top: 1px solid rgba(184,150,90,.15);
}
.mob-stat .num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.4rem; font-weight: 300; color: var(--or); display: block;
}
.mob-stat .label { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(244,240,232,.45); }

/* Maps grid — correction #7 */
.mob-maps-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem; position: relative;
}
.mob-map-block {
  background: rgba(255,255,255,.04); border: 1px solid rgba(184,150,90,.15);
  overflow: hidden; transition: border-color .3s, transform .3s;
  cursor: pointer;
}
.mob-map-block:hover { border-color: rgba(184,150,90,.5); transform: translateY(-2px); }
.mob-map-block.wide { grid-column: span 2; }
.mob-map-block h4 {
  font-family: 'Archivo Narrow', sans-serif; font-size: .63rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--or); font-weight: 500; padding: .85rem 1rem .45rem;
}
.mob-map-block img {
  width: 100%; display: block;
  filter: brightness(.88) saturate(.8); transition: filter .4s;
}
.mob-map-block:hover img { filter: brightness(.95) saturate(.9); }

/* Photos mobilité */
.mob-photos-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 3px; margin-top: 3rem;
}

/* ── CLIENTS — correction #8 ── */
#clients { background: var(--creme); }
.clients-cats { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
/* No hover on h3 — correction #8 */
.client-cat h3 {
  font-size: .63rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--or); font-weight: 500;
  margin-bottom: .9rem; padding-bottom: .6rem;
  border-bottom: 1px solid rgba(184,150,90,.3);
  /* No transition, no hover effect */
}
.client-list { display: flex; flex-wrap: wrap; gap: .42rem; }
.client-tag {
  font-size: .75rem; color: var(--vert); background: white;
  border: 1px solid rgba(26,61,43,.14); padding: .28rem .8rem;
  letter-spacing: .04em; transition: all .2s; cursor: default;
}
.client-tag:hover { background: var(--vert); color: var(--creme); border-color: var(--vert); }

/* ── TÉLÉCHARGEMENTS ── */
#telechargements { background: var(--noir); }
.dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem; }
.dl-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(184,150,90,.15);
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .3s, background .3s;
}
.dl-card:hover { border-color: rgba(184,150,90,.45); background: rgba(184,150,90,.07); }
.dl-card-cover { width: 100%; aspect-ratio: 3/4; object-fit: cover; filter: brightness(.82); }
.dl-card-body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; gap: .8rem; }
.dl-card h3 { font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:300; color:var(--creme); }
.dl-card p { font-size: .74rem; color: rgba(244,240,232,.5); line-height: 1.5; flex: 1; }
.dl-link {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: 'Archivo Narrow', sans-serif; font-size: .63rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--creme); text-decoration: none;
  padding: .5rem 1.1rem; border: 1px solid rgba(184,150,90,.4);
  transition: all .25s;
}
.dl-link:hover { background: var(--or); color: var(--noir); border-color: var(--or); }
.dl-link svg { width: 12px; height: 12px; fill: currentColor; flex-shrink: 0; }

/* ── CONTACT ── */
#contact { background: var(--blanc); display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.contact-info .address { font-size: .83rem; line-height: 2; color: #555; margin-top: 1.5rem; font-weight: 300; }
.contact-info a { color: var(--vert); text-decoration: none; transition: color .2s; display: block; margin-top: .7rem; font-size: .92rem; font-weight: 500; }
.contact-info a:hover { color: var(--or); }
.contact-details { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.8rem; }
.contact-detail { display: flex; gap: .9rem; align-items: center; font-size: .78rem; color: var(--gris); }
.detail-label { font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--or); width: 60px; flex-shrink: 0; }

/* CTA email block */
.contact-cta {
  background: var(--vert); padding: 3.5rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem;
  border: 1px solid rgba(184,150,90,.25);
}
.contact-cta-text {
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(244,240,232,.65); font-weight: 300; line-height: 1.6;
}
.contact-cta-email {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 300;
  color: var(--or); text-decoration: none; letter-spacing: .02em;
  border-bottom: 1px solid rgba(184,150,90,.35);
  padding-bottom: .3rem;
  transition: color .2s, border-color .2s;
  word-break: break-all;
}
.contact-cta-email:hover { color: var(--creme); border-color: var(--creme); }
.contact-cta-sub {
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(244,240,232,.4);
}

/* ── FOOTER ── */
footer {
  background: var(--noir); padding: 2.2rem 4rem;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid rgba(184,150,90,.14);
}
.footer-logo { font-family:'Archivo',sans-serif; font-weight:600; font-size:.88rem; letter-spacing:.35em; color:var(--creme); }
.footer-logo span { color: var(--or); }
.footer-legal { font-size: .67rem; color: rgba(244,240,232,.32); text-align: center; line-height: 1.7; }
.footer-links { display: flex; gap: 1.3rem; }
.footer-links a { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,240,232,.48); text-decoration: none; transition: color .2s; }
.footer-links a:hover { color: var(--or); }

/* ── REVEAL ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.rd1 { transition-delay: .1s; } .rd2 { transition-delay: .2s; } .rd3 { transition-delay: .3s; }

/* ════════════════════════════════════════
   RESPONSIVE — correction #1
   ════════════════════════════════════════ */

/* Tablet landscape & portrait */
@media (max-width: 1024px) {
  nav { padding: .9rem 2rem; }
  .nav-links { gap: 1.2rem; }
  .nav-links a { font-size: .6rem; }
  section, .ref-section { padding: 5rem 2.5rem; }
  .about-grid { gap: 3rem; }
  .hero-center { padding: 4rem 2rem 0; }
  .comp-grid { grid-template-columns: repeat(2, 1fr); }
  .mob-text-grid { gap: 2rem; }
  #contact { gap: 3rem; }
}

/* Mobile landscape & portrait — correction #1 */
@media (max-width: 768px) {
  nav { padding: .85rem 1.2rem; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  section, .ref-section { padding: 4rem 1.2rem; }

  /* Hero mobile */
  .hero-solo { padding: 1.5rem; }
  .hero-punk { font-size: 3.2rem; }
  .hero-agency-word { font-size: 1rem; letter-spacing: .4em; }
  .hero-tagline-clean { font-size: .68rem; letter-spacing: .2em; }
  .hero-location-clean { font-size: .95rem; }
  .hero-nav-links { gap: .8rem; flex-wrap: wrap; justify-content: center; }
  .hero-line-top, .hero-line-bottom { height: 40px; margin: 1.2rem auto; }
  .dl-bar { padding: .6rem 1rem; gap: .5rem; }
  .dl-btn { font-size: .58rem; padding: .35rem .7rem; }
  .scroll-cue { display: none; }

  /* About */
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-stats { gap: 1.5rem; flex-wrap: wrap; }
  .team-card { grid-template-columns: 70px 1fr; gap: 1rem; padding: 1.2rem; }
  .team-photo { width: 70px; height: 70px; }

  /* Competences */
  .comp-grid { grid-template-columns: 1fr 1fr; gap: 2px; }
  .comp-card { min-height: 160px; padding: 1.4rem; }
  .comp-card h3 { font-size: .65rem; }
  .comp-card p { font-size: .75rem; }

  /* Galleries — correction #5 #6 */
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 2px; }

  /* Mobilité */
  .mob-text-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .mob-maps-grid { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .mob-map-block.wide { grid-column: span 2; }
  .mob-photos-grid { grid-template-columns: 1fr 1fr; gap: 2px; }
  .mob-stats-row { gap: 1.5rem; flex-wrap: wrap; }

  /* Clients */
  .clients-cats { grid-template-columns: 1fr; gap: 1.5rem; }

  /* Downloads */
  .dl-grid { grid-template-columns: 1fr; gap: 1.5rem; }

  /* Contact */
  #contact { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-cta { padding: 2rem; }

  /* Footer */
  footer { flex-direction: column; gap: 1.2rem; text-align: center; padding: 1.8rem 1.2rem; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 1rem; }

  /* Lightbox nav */
  .lightbox-prev { left: -40px; }
  .lightbox-next { right: -40px; }
}

/* Mobile portrait only (very narrow) */
@media (max-width: 480px) {
  .hero-panel { min-height: 55vw; }
  .hero-tagline { font-size: 1rem; letter-spacing: .01em; }
  .gallery-grid { grid-template-columns: 1fr; }
  .mob-maps-grid { grid-template-columns: 1fr; }
  .mob-map-block.wide { grid-column: 1; }
  .mob-photos-grid { grid-template-columns: 1fr; }
  .comp-grid { grid-template-columns: 1fr; }
  h2 { font-size: 2rem; }
}

/* Landscape mobile */
@media (max-width: 900px) and (orientation: landscape) {
  #hero { min-height: auto; }
  .hero-punk { font-size: 4rem; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Mobilité photos — toutes cases égales (#3 correction) */
.mob-photos-grid .gallery-thumb {
  aspect-ratio: 16/10;
  min-height: auto;
}