/* ==========================================================================
   M.A.S ELEC 30 · maquette Timy Studio
   DA : graphite froid (la pierre de leurs photos) eclaire par la lumiere
        chaude 2700K qu'ils posent, et aligne par un trait laser rouge
        repris du point de repere visible sur leur photo de chantier.
   ========================================================================== */

:root {
  /* Palette semantique */
  --color-bg:           #1C1F23;  /* graphite froid, la pierre de la niche */
  --color-bg-alt:       #16191C;  /* fond des sections creuses */
  --color-surface:      #262A2F;  /* cartes, champs */
  --color-surface-hi:   #2E333A;  /* surface survolee */
  --color-text:         #E9E7E3;  /* platre */
  --color-text-muted:   #969CA3;
  --color-accent:       #FF3B26;  /* rouge laser */
  --color-accent-soft:  rgba(255, 59, 38, 0.14);
  --color-glow:         #FFCE8A;  /* lumiere chaude 2700K */
  --color-glow-soft:    rgba(255, 206, 138, 0.13);
  --color-border:       #333940;
  --color-on-accent:    #16191C;  /* texte sur bouton rouge, contraste AA */

  /* Typographie : mono d'instrument + sans humaniste */
  --font-display: Consolas, "SF Mono", "DejaVu Sans Mono", "Liberation Mono", monospace;
  --font-body:    Corbel, Optima, "Lucida Grande", "Helvetica Neue", sans-serif;

  /* Espacements */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   2rem;
  --space-xl:   4rem;
  --space-2xl:  8rem;

  /* Rayons : quasi nuls, on est dans l'appareillage electrique */
  --radius-sm:  3px;
  --radius-md:  6px;
  --radius-full: 9999px;

  /* Transitions */
  --t-fast:   0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --t-base:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow:   0.6s cubic-bezier(0.4, 0, 0.2, 1);

  --wrap:     1180px;
  --pad:      clamp(1.25rem, 5vw, 2.5rem);
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* --- Typographie ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.4rem, 1.4rem + 4.4vw, 4.6rem); }
h2 { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.9rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem); letter-spacing: -0.01em; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.sec-head { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec-head .eyebrow { margin-bottom: var(--space-md); }
.sec-head h2 { margin-bottom: var(--space-md); }
.sec-head p { color: var(--color-text-muted); font-size: 1.06rem; }
.sec-head-center { margin-inline: auto; text-align: center; }

section { padding-block: clamp(4rem, 9vw, var(--space-2xl)); }

/* --- Etoiles : calque clippe, jamais 5 pleines pour une note partielle ---- */
.stars {
  position: relative;
  display: inline-block;
  font-size: 1rem;
  letter-spacing: 0.1em;
  line-height: 1;
  flex: none;
}
.stars-bg { color: var(--color-border); }
.stars-fg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--color-glow);
  width: calc(var(--note) / 5 * 100%);
}
.stars-lg { font-size: 1.4rem; }

/* --- Boutons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base),
              transform var(--t-fast), box-shadow var(--t-base);
}

.btn-laser {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: 0 0 0 rgba(255, 59, 38, 0);
}
.btn-laser:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 26px rgba(255, 59, 38, 0.34);
}
.btn-num { font-variant-numeric: tabular-nums; opacity: 0.72; }

.btn-ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-ghost:hover { border-color: var(--color-text-muted); background: rgba(255, 255, 255, 0.03); }

.btn-block { width: 100%; justify-content: center; }

/* --- Marqueur de maquette ------------------------------------------------- */
.pitch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.6rem var(--pad);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-align: center;
}
.pitch-dot {
  width: 6px; height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent);
  flex: none;
}

/* --- Nav ------------------------------------------------------------------ */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(28, 31, 35, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
}
.nav-in {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-height: 68px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  margin-right: auto;
}
.brand-mark { width: 22px; height: 22px; flex: none; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
}
.nav-links { display: flex; gap: 1.6rem; }
.nav-links a {
  position: relative;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--t-base);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-base);
}
.nav-links a:hover { color: var(--color-text); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-tel {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-decoration: none;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-base), background var(--t-base);
}
.nav-tel:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.nav-tel-label { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.nav-tel-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}

/* --- HERO ----------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(600px, 88svh, 900px);
  padding-block: clamp(3rem, 7vw, 5rem);
  overflow: hidden;
  background: var(--color-bg);
}

/* La photo eclaire la page : halo chaud qui deborde sur la colonne de texte */
.hero-glow {
  position: absolute;
  top: 50%; right: 8%;
  width: min(1100px, 105vw);
  aspect-ratio: 1;
  transform: translate(0, -50%);
  background: radial-gradient(circle, var(--color-glow-soft) 0%, rgba(255, 206, 138, 0.05) 38%, transparent 68%);
  pointer-events: none;
}

.hero-photo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(42%, 620px);
  margin: 0;
  overflow: hidden;
}
/* Surdimensionnee et debordante en haut : la parallaxe a de la marge
   des deux cotes, le cadre reste couvert du debut a la fin du scroll. */
.hero-photo img {
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: 62% 50%;
  will-change: transform;
}
/* Fondu vers le graphite : la photo ne se decoupe pas, elle se diffuse */
.hero-photo-fade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--color-bg) 0%, rgba(28, 31, 35, 0.72) 26%, rgba(28, 31, 35, 0) 62%),
    linear-gradient(0deg, var(--color-bg) 0%, rgba(28, 31, 35, 0) 22%),
    linear-gradient(180deg, var(--color-bg) 0%, rgba(28, 31, 35, 0) 20%);
}

.hero-in { position: relative; z-index: 2; }
.hero-text { max-width: 40rem; }
.hero-text .eyebrow { margin-bottom: 1.1rem; }

/* Le trait laser : il traverse tout le viewport, photo comprise */
.laser {
  position: relative;
  height: 1px;
  margin: 1.9rem 0 1.9rem;
}
/* Le rail part du point de repere et file jusqu'au bord du viewport,
   photo comprise. Le debordement est clippe par .hero (overflow: hidden). */
.laser-rail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 1px;
  overflow: hidden;
}
.laser-beam {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 0 50%;
  background: linear-gradient(90deg,
    var(--color-accent) 0%,
    var(--color-accent) 74%,
    rgba(255, 59, 38, 0) 100%);
  box-shadow: 0 0 10px rgba(255, 59, 38, 0.55), 0 0 26px rgba(255, 59, 38, 0.22);
}
/* Le point de repere, repris de leur photo de chantier */
.laser-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  box-shadow: 0 0 10px var(--color-accent), 0 0 22px rgba(255, 59, 38, 0.6);
}

.hero-lede {
  max-width: 34rem;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  color: var(--color-text-muted);
  margin-bottom: 1.6rem;
}

.hero-note {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.8rem;
  font-size: 0.95rem;
  color: var(--color-text-muted);
}
.hero-note strong {
  font-family: var(--font-display);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.hero-note a, .avis-score a { color: var(--color-text-muted); text-decoration-color: var(--color-border); text-underline-offset: 3px; }
.hero-note a:hover, .avis-score a:hover { color: var(--color-text); }

.hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* --- Band de faits -------------------------------------------------------- */
.facts {
  padding-block: 0;
  border-block: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}
.facts-in {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.fact {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1.6rem 1.2rem;
  border-left: 1px solid var(--color-border);
}
.fact:first-child { border-left: 0; }
.fact strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.fact span { font-size: 0.85rem; color: var(--color-text-muted); }

/* --- Interventions -------------------------------------------------------- */
.metier-list { list-style: none; border-top: 1px solid var(--color-border); }
.metier {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  align-items: start;
  gap: var(--space-lg);
  padding: clamp(1.6rem, 3vw, 2.3rem) 0;
  border-bottom: 1px solid var(--color-border);
}
/* Le trait laser rejoue le role de regle d'alignement */
.metier::before {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%;
  height: 1px;
  background: var(--color-accent);
  box-shadow: 0 0 8px rgba(255, 59, 38, 0.5);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-slow);
}
.metier:hover::before { transform: scaleX(1); }
.metier-k {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.08em;
  padding-top: 0.35rem;
}
.metier-body h3 { margin-bottom: 0.5rem; }
.metier-body p { color: var(--color-text-muted); max-width: 42rem; }
.metier-tag {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.75rem;
  white-space: nowrap;
  margin-top: 0.3rem;
}

/* --- Avant / apres -------------------------------------------------------- */
.ba { background: var(--color-bg-alt); }
.ba-grid {
  display: grid;
  grid-template-columns: 1fr 5rem 1fr;
  align-items: center;
  gap: 0;
}
.ba-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: zoom-in;
}
.ba-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 42%;
  transition: transform var(--t-slow), filter var(--t-slow);
}
.ba-card:hover img { transform: scale(1.03); }
.ba-avant img { filter: saturate(0.6) brightness(0.78); }
.ba-avant:hover img { filter: saturate(0.75) brightness(0.86); }
.ba-apres { border-color: rgba(255, 206, 138, 0.28); }
.ba-apres::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 20%, var(--color-glow-soft), transparent 62%);
}
.ba-label {
  position: absolute;
  top: 0.9rem; left: 0.9rem;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: var(--radius-sm);
  background: rgba(22, 25, 28, 0.86);
  color: var(--color-text-muted);
  backdrop-filter: blur(6px);
}
.ba-label-on { background: var(--color-accent); color: var(--color-on-accent); }

/* Le trait laser relie les deux photos : c'est lui le "avant -> apres" */
.ba-link { position: relative; height: 1px; }
.ba-rail { position: absolute; inset: 0; overflow: hidden; }
.ba-beam {
  display: block;
  width: 100%; height: 100%;
  transform-origin: 0 50%;
  background: var(--color-accent);
  box-shadow: 0 0 10px rgba(255, 59, 38, 0.7);
}
.ba-dot {
  position: absolute;
  top: 50%; right: -3px;
  width: 7px; height: 7px;
  margin-top: -3.5px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  box-shadow: 0 0 12px var(--color-accent);
}

/* --- Galerie -------------------------------------------------------------- */
.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 15rem;
  gap: 0.85rem;
}
.m-cell {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: zoom-in;
}
.m-wide { grid-column: span 2; }
.m-tall { grid-row: span 2; }
.m-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.m-cell:hover img { transform: scale(1.05); }
.m-cell figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1rem 0.85rem;
  font-size: 0.83rem;
  color: var(--color-text);
  background: linear-gradient(0deg, rgba(15, 17, 19, 0.92) 0%, rgba(15, 17, 19, 0) 100%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-base), transform var(--t-base);
}
.m-cell:hover figcaption, .m-cell:focus-within figcaption { opacity: 1; transform: none; }

/* --- Avis ----------------------------------------------------------------- */
.avis { background: var(--color-bg-alt); }
.avis-score {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--color-text-muted);
}
.avis-score strong {
  font-family: var(--font-display);
  color: var(--color-text);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}
.avis-grid {
  columns: 3;
  column-gap: 0.9rem;
}
.avis blockquote {
  break-inside: avoid;
  margin-bottom: 0.9rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: border-color var(--t-base), transform var(--t-base);
}
.avis blockquote:hover { border-color: rgba(255, 206, 138, 0.3); transform: translateY(-3px); }
.avis blockquote p {
  font-size: 0.95rem;
  color: var(--color-text);
  white-space: pre-line;   /* les avis sont affiches verbatim, sauts de ligne compris */
  margin-bottom: 1rem;
}
.avis cite {
  display: flex;
  flex-direction: column;
  font-style: normal;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
}
.avis cite span {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.76rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* --- Contact -------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.contact-info .eyebrow { margin-bottom: var(--space-md); }
.contact-info h2 { margin-bottom: 0.75rem; }
.contact-lede { color: var(--color-text-muted); margin-bottom: 1.8rem; }

.contact-tel {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 0.15rem;
  transition: color var(--t-base), text-shadow var(--t-base);
}
.contact-tel:hover { color: var(--color-accent); text-shadow: 0 0 24px rgba(255, 59, 38, 0.45); }

.contact-meta { margin-top: 2.2rem; display: grid; gap: 1.5rem; }
.contact-meta dt {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}
.contact-meta dd { color: var(--color-text-muted); }
.h-row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 22rem;
  padding: 0.32rem 0;
  border-bottom: 1px dashed var(--color-border);
}
.h-row b {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.h-off b { color: var(--color-text-muted); font-weight: 400; }

.gmaps {
  display: inline-block;
  margin-top: 1.8rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-underline-offset: 4px;
  transition: color var(--t-base);
}
.gmaps:hover { color: var(--color-accent); }

.contact-form {
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.field input, .field textarea {
  width: 100%;
  padding: 0.75rem 0.85rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-base);
  resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--color-accent); }
.field ::placeholder { color: #868D94; }  /* 4,9:1 sur le fond : AA tenu */
.form-note {
  margin-top: 0.9rem;
  font-size: 0.76rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* --- Footer --------------------------------------------------------------- */
.foot {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  padding-block: 2.5rem;
}
.foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem var(--space-lg);
}
.foot-brand { display: flex; align-items: center; gap: 0.7rem; margin-right: auto; }
.foot-brand .brand-mark { width: 24px; height: 24px; }
.foot-brand strong { display: block; font-family: var(--font-display); font-size: 0.95rem; }
.foot-brand span { font-size: 0.8rem; color: var(--color-text-muted); }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.foot-links a {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--t-base);
}
.foot-links a:hover { color: var(--color-accent); }
.foot-legal, .foot-cred {
  width: 100%;
  padding-top: 1.2rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.foot-cred { padding-top: 0; border-top: 0; margin-top: -0.6rem; }

/* --- Lightbox ------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(12, 14, 16, 0.94);
  backdrop-filter: blur(8px);
}
.lightbox.open { display: grid; }
.lb-img {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  border-radius: var(--radius-md);
}
.lb-close, .lb-nav {
  position: absolute;
  background: none;
  border: 0;
  color: var(--color-text);
  cursor: pointer;
  line-height: 1;
  opacity: 0.7;
  transition: opacity var(--t-base), color var(--t-base);
}
.lb-close:hover, .lb-nav:hover { opacity: 1; color: var(--color-accent); }
.lb-close { top: 1rem; right: 1.4rem; font-size: 2.4rem; }
.lb-nav { top: 50%; transform: translateY(-50%); font-size: 3.4rem; padding: 0 1rem; }
.lb-prev { left: 0.5rem; }
.lb-next { right: 0.5rem; }

/* --- Reveal (ne masque que si JS est la) ---------------------------------- */
.js .reveal { opacity: 0; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .hero-photo { width: 46%; }
  /* La colonne de texte s'arrete avant la photo, elle ne passe pas dessous */
  .hero-text { max-width: 30rem; }
  .contact-grid { grid-template-columns: 1fr; }
  .avis-grid { columns: 2; }
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 13rem; }
}

@media (max-width: 760px) {
  /* La photo passe en bandeau haut : .hero doit empiler, pas juxtaposer */
  .hero {
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
    padding-top: 0;
  }
  .hero-in { padding-block: 0 clamp(2rem, 6vw, 3rem); }
  .hero-text { max-width: none; }
  /* Bandeau contenu : le CTA telephone doit rester visible sans scroll */
  .hero-photo {
    position: relative;
    width: 100%;
    height: 32svh;
    max-height: 260px;
    margin-bottom: -2.5rem;
  }
  .hero-photo img { object-position: 62% 46%; }
  .hero-photo-fade {
    background:
      linear-gradient(0deg, var(--color-bg) 2%, rgba(28, 31, 35, 0) 55%),
      linear-gradient(180deg, rgba(28, 31, 35, 0.35) 0%, rgba(28, 31, 35, 0) 40%);
  }
  .hero-glow { top: 22%; right: -20%; width: 130vw; }
  .facts-in { grid-template-columns: 1fr 1fr; }
  .fact { border-left: 0; border-top: 1px solid var(--color-border); }
  .fact:nth-child(-n+2) { border-top: 0; }
  .fact:nth-child(even) { border-left: 1px solid var(--color-border); }
  .metier { grid-template-columns: 2.5rem 1fr; }
  .metier-tag { display: none; }
  .ba-grid { grid-template-columns: 1fr; gap: 0.85rem; }
  .ba-link { height: 3rem; width: 1px; margin-inline: auto; }
  .ba-beam { transform-origin: 50% 0; }
  .ba-dot { top: auto; bottom: -3px; right: 50%; margin-right: -3.5px; }
  .avis-grid { columns: 1; }
  .mosaic { grid-template-columns: 1fr; grid-auto-rows: 14rem; }
  .m-wide, .m-tall { grid-column: auto; grid-row: auto; }
  .m-cell figcaption { opacity: 1; transform: none; }
  .hero-cta { width: 100%; }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
  .lb-nav { font-size: 2.4rem; }
}

/* --- L'animation revele, elle ne bloque jamais ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .metier::before { transform: scaleX(1); }
}