/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Roboto", sans-serif;
  color: #333;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  max-width: 100%;
  display: block;
  user-select: none;
}
button {
  cursor: pointer;
  user-select: none;
}
.phone-info {
  user-select: text;
}

.container-main {
  flex: 1 0 auto;
}
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 72px;
  background: #111;
  color: #fff;
  z-index: 10000;
  display: flex;
  align-items: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
  user-select: none;
}
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 100%;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
}
nav img {
  height: 50px;    transform: scale(2.5);
  transform-origin: left center;
  margin-right: 20px;
  z-index: 1;
  user-select: none;
}
nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
nav ul li a {    color: #fff;
  font-weight: 600;
  transition: color 0.3s;
  display: block;
  padding: 8px 4px;
}
nav ul li a:hover,
nav ul li a:focus,
nav ul li a:active {
  color: #f39c12;
  outline: none;
}
.call-button {
  background: #f39c12;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}
.call-button:hover,
.call-button:focus {
  background: #e67e22;
  outline: none;  }
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
  padding: 5px;
}
.hamburger div {
  width: 25px;
  height: 3px;
  background: #fff;
  transition: all 0.4s ease;
}
.hamburger.active div:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active div:nth-child(2) {    opacity: 0;
}
.hamburger.active div:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  position: relative;
  font-variant-numeric: tabular-nums;
}
.phone-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  font-size: 0.9rem;
  margin-right: 5px;
  text-align: right;    user-select: text;
}
.phone-info span {
  font-size: 0.8rem;
  text-align: right;
  margin-top: 3px;
}

.lang-switch {
  background: transparent;
  border: 1px solid #f39c12;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  min-width: 45px;
  text-align: center;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* Fix: Only apply hover on devices that support hover (prevents sticky orange on mobile) */  @media (hover: hover) {
  .lang-switch:hover {
    background: #f39c12;
  }
}

/* Visual feedback on tap without staying orange */
.lang-switch:active {
  background: #f39c12;
}

.hero {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  padding: 0 20px;
  overflow: hidden;
  margin-top: 72px;
  user-select: none;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;    height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 0;
  pointer-events: none;
}  .hero video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -1;
  opacity: 1 !important;
  transition: none !important;
}
.hero h1,
.hero p,
.hero .btn {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.hero.visible h1,
.hero.visible p,
.hero.visible .btn {
  opacity: 1;
  transform: translateY(0);
}
.hero h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 3rem;
  margin-bottom: 20px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}
.hero p {
  font-size: 1.3rem;
  margin-bottom: 20px;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}
.hero .btn {
  background: #f39c12;
  padding: 15px 30px;
  border: none;
  border-radius: 5px;
  font-size: 1.1rem;
  color: #fff;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}
.hero .btn:hover,
.hero .btn:focus {    background: #e67e22;
  outline: none;
}
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  padding: 80px 0;
  text-align: center;
  justify-content: center;
  user-select: none;
}
.feature-box {
  background: #f4f4f4;
  padding: 25px 20px;
  border-radius: 10px;
  transition: 0.3s;
  max-width: 360px;
  margin: 0 auto;
  min-height: 180px;
  cursor: default;
}
.feature-box:hover,
.feature-box:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.feature-box h3 {
  margin-bottom: 15px;
  color: #111;
}
.about {
  padding: 80px 20px;    background: #e9ecef;
}
.about h2 {
  text-align: center;
  margin-bottom: 30px;
  font-family: "Montserrat", sans-serif;
}
.about p {
  max-width: 900px;
  margin: 10px auto;
  text-align: center;
  line-height: 1.8;
}
.bold-rbq {
  font-weight: bold;
}
.portfolio {
  padding: 80px 20px;
}
.portfolio h2 {
  text-align: center;
  margin-bottom: 40px;
  font-family: "Montserrat", sans-serif;
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.portfolio-grid img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
  user-select: none;
}
.portfolio-grid img:hover,
.portfolio-grid img:focus {
  transform: scale(1.05);
  outline: none;
  box-shadow: 0 0 10px #f39c12;
}
#lightbox {
  display: none;    position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  z-index: 2000;
}
#lightbox img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 10px;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.lightbox-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}
.lightbox-controls span {
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  padding: 10px;
  user-select: none;
  pointer-events: auto;
}
.reviews {
  padding: 80px 20px;
  background: #f4f4f4;
  text-align: center;
  user-select: none;  }
.reviews h2 {
  font-family: "Montserrat", sans-serif;
  margin-bottom: 40px;
}
.review {
  max-width: 700px;
  margin: 20px auto;
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.review p {
  margin-bottom: 10px;
}  .review span {
  font-weight: bold;
  color: #f39c12;
}
.team {
  padding: 80px 20px;
}
.team h2 {
  text-align: center;
  margin-bottom: 40px;
  font-family: "Montserrat", sans-serif;
}
.team-member-container {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  user-select: none;
}
.team-member {
  text-align: center;
  margin: 10px auto;    display: flex;
  flex-direction: column;
  align-items: center;
}
.team-member img {
  width: 230px;
  height: 270px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  border: 3px solid #f39c12;
  transition: transform 0.3s;
}
.team-member img:hover,
.team-member img:focus {
  transform: scale(1.05);
  outline: none;
}
.team-member h3 {
  margin-bottom: 5px;
}
.team-member p {
  color: #777;
}
.contact {
  padding: 30px 20px;
  background: #e9ecef;
  text-align: center;
}
.contact h2 {
  font-family: "Montserrat", sans-serif;
  margin-bottom: 15px;
}
.contact p {
  margin-bottom: 10px;
}
.contact a,
.contact button {
  background: #f39c12;
  padding: 15px 25px;
  border: none;    border-radius: 5px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  font-size: 1rem;
  transition: 0.3s;
  display: inline-block;
  user-select: none;
}  .contact a:hover,
.contact a:focus,
.contact button:hover,  .contact button:focus {
  background: #e67e22;
  outline: none;
  text-decoration: none;
}
footer {
  background: #111;
  color: #fff;
  text-align: center;
  padding: 20px 0;
  font-size: 0.9rem;
  flex-shrink: 0;
  user-select: none;
}
footer .rbq {
  display: block;
  font-size: 0.75rem;
  margin-top: 4px;  }
/* Fade-in animation class */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in.visible {    opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1024px) {
  .features {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
  }
  .portfolio-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;    }
}

/* TRIGGER HAMBURGER AT 1101px AND UNDER */
@media (max-width: 1101px) {
  nav ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #111;
    position: fixed;
    top: 72px;
    left: 0;
    padding: 0;
    z-index: 9999;
    max-height: 0;
    overflow: hidden;
    border-top: 1px solid #f39c12;
    border-bottom: 1px solid #f39c12;
    transition: max-height 0.5s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }    nav ul.show {
    max-height: 500px;
    padding: 10px 0;
  }
  nav ul li {
    border-bottom: 1px solid #f39c12;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    padding-left: 20px;
    height: 35px;
    display: flex;
    align-items: center;      background: #111;
  }
  nav ul.show li {
    opacity: 1;
    transform: translateY(0);
  }
  nav ul li:last-child {      border-bottom: none;
  }
  nav {
    justify-content: flex-start;
    position: relative;
    align-items: center;
  }
  .hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-left: 10px;
    z-index: 2000;
  }
  nav img {
    transform: scale(2);
    margin-left: 10px;
    z-index: 1;
  }
  .header-right {
    position: absolute;      right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    z-index: 2000;
  }    .header-right .phone-info {
    display: none !important;
    visibility: hidden !important;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 1.6rem;
  }
  .hero p {
    font-size: 0.9rem;
  }
  .hero .btn {
    padding: 10px 18px;
    font-size: 0.95rem;
  }
  .team-member img {
    width: 150px;
    height: 180px;
    transition: none !important;
  }
  .team-member img:hover {
    transform: none !important;
  }
  .header-right .call-button {
    padding: 8px 12px;
    font-size: 0.75rem;
  }
  .team-member-container {
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}
/* ============================================================================
   AMPEREUR ÉLECTRIQUE — override layer
   ============================================================================
   Everything above is the original stylesheet, untouched.

   THREE THINGS TO KNOW BEFORE EDITING

   1. `header` has `transform: translateZ(0)` in the original CSS. A transform
      makes an element the containing block for position:fixed descendants, so
      `nav ul { top: 72px }` is measured from the HEADER's top, not the
      viewport. 72px == header height == flush under the header. Do NOT add
      --band-h to it; that double-counts and opens a gap.

   2. The original hides the mobile menu with `max-height: 0` on `nav ul`.
      Never declare max-height on the base `nav ul` rule — it overrides the
      hide and leaves the menu permanently open.

   3. The original styles ALL `nav` elements as
      `display:flex; justify-content:space-between`. Any new <nav> (like the
      breadcrumbs) inherits that and blows its children to opposite edges.

   TUNING: --logo-h (per breakpoint), --band-h (measured by main.js)
   ============================================================================ */

:root {
  --ink:          #111;
  --ink-soft:     #1b2027;
  --accent:       #f39c12;
  --accent-dark:  #e67e22;
  --urgent:       #c0392b;
  --urgent-dark:  #a5281b;

  /* light surfaces — the site is mostly light; black is an accent */
  --surface:      #ffffff;
  --surface-alt:  #f6f7f9;
  --surface-alt2: #eef1f5;
  --line:         #e2e6ec;
  --line-soft:    #eef0f4;
  --text:         #3a4048;
  --text-dim:     #666d76;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --shadow-md: 0 4px 8px rgba(16,24,40,.05), 0 10px 24px rgba(16,24,40,.07);
  --shadow-lg: 0 12px 28px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.06);
}

/* ============================================================
   1. TEXT SELECTION
   ============================================================ */
body { user-select: auto; }
.hero, header, nav { user-select: none; }
.phone-info, p, li, h1, h2, h3, h4, address, dd, dt,
footer, .footer-nap, .footer-nap a, .urgence-num { user-select: text; }

/* ============================================================
   2. LOGO
   ============================================================
   The supplied logo.png is a 1024x1024 canvas but the artwork is
   only 836x346 — 66% of the height is empty transparent space.
   So `height: 125px` rendered a logo just 42px tall, which is why
   it always looked small, and why the original CSS resorted to
   `transform: scale(2.5)` to compensate.

   images/logo-web.png is the same artwork trimmed to its bounding
   box (348x149, lossless, RMSE 0.00). Visible height now equals
   the CSS height, so these numbers mean what they say.

   Aspect ratio 2.336:1 — width = height x 2.336.
   TUNE: --logo-h only.
   ============================================================ */
:root { --logo-h: 46px; }
nav img#logo {
  transform: none !important;
  height: var(--logo-h);
  width: auto;
  max-width: none;
  object-fit: contain;
  margin: 0 22px 0 0;
  flex-shrink: 0;
  z-index: 1;
}
header { overflow: visible; }
@media (max-width: 1400px) { :root { --logo-h: 44px; } }
@media (max-width: 1101px) { :root { --logo-h: 42px; } }
@media (max-width: 900px)  { :root { --logo-h: 40px; } }
@media (max-width: 760px)  { :root { --logo-h: 38px; } }
@media (max-width: 480px)  { :root { --logo-h: 36px; } }
@media (max-width: 380px)  { :root { --logo-h: 32px; } }
@media (max-width: 1101px) { nav img#logo { margin: 0 12px 0 8px; } }
@media (max-width: 480px)  { nav img#logo { margin: 0 8px 0 4px; } }

/* ============================================================
   3. TOP URGENCY BAND
   ============================================================ */
.urgency-band {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 10001;
  background-color: var(--urgent);
  background-image: linear-gradient(90deg, #b8341f 0%, var(--urgent) 45%, #d0472f 100%);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  padding: 8px 12px;
  line-height: 1.3;
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.urgency-band a {
  color: #fff;
  white-space: nowrap;
  /* text-decoration follows the text; a border-bottom follows the padding
     box, which is why the tap-target padding dragged the line out of the
     band entirely. */
  border-bottom: 0;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.urgency-band a:hover { text-decoration-color: #fff; }
.urgency-band .dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #37d67a;
  box-shadow: 0 0 0 3px rgba(55,214,122,.28);
  margin-right: 7px;
  vertical-align: middle;
  animation: livepulse 2s ease-in-out infinite;
}
.urgency-band .sep { opacity: .45; margin: 0 8px; }
@keyframes livepulse { 0%,100% { opacity: 1; } 50% { opacity: .32; } }

/* header sits directly below the band (viewport-positioned, no
   transformed ancestor above it, so --band-h is correct here) */
header { top: var(--band-h, 30px); }
.hero  { margin-top: calc(var(--band-h, 30px) + 72px); }

.band-short { display: none; }
@media (max-width: 860px) {
  .band-long  { display: none; }
  .band-short { display: inline; }
  .urgency-band {
    font-size: 0.8rem;
    padding: 7px 10px;
    white-space: nowrap;
    overflow: hidden;
  }
  .urgency-band .sep { margin: 0 6px; }
}

/* ============================================================
   4. MOBILE DROPDOWN — POSITION ONLY, NO max-height
   `top: 72px` is relative to the transformed header. See note 1.
   ============================================================ */
@media (max-width: 1101px) {
  nav ul { top: 72px; }
  nav ul.show {
    max-height: calc(100vh - var(--band-h, 30px) - 82px);
    overflow-y: auto;
  }
  .phone-info { display: none; }
}

/* ============================================================
   5. BREADCRUMBS
   `.crumbs` is a <nav>, so it inherits the original
   `display:flex; justify-content:space-between`, which pushed its
   two children to opposite ends of the page. Own layout here.
   ============================================================ */
nav.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: auto;
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 20px 0;
  font-size: 0.82rem;
  color: var(--text-dim);
}
nav.crumbs a { color: #5a616b; text-decoration: underline; }
nav.crumbs a:hover { color: var(--urgent); }
nav.crumbs .sep { margin: 0 7px; color: #a8aeb7; }
nav.crumbs .current { color: var(--text-dim); }

/* ============================================================
   6. STICKY MOBILE CALL BAR
   ============================================================ */
.sticky-call {
  display: none;
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  z-index: 10002;
  background-color: var(--urgent);
  background-image: linear-gradient(180deg, #cc4130 0%, var(--urgent) 100%);
  color: #fff;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 1.06rem;
  font-weight: 700;
  padding: 14px 10px;
  border: none;
  box-shadow: 0 -3px 16px rgba(0,0,0,.32);
}
.sticky-call:active { background: var(--urgent-dark); }
.sticky-call small {
  display: block;
  font-weight: 400;
  font-size: .7rem;
  opacity: .94;
  letter-spacing: .03em;
  margin-top: 2px;
}
@media (max-width: 900px) {
  .sticky-call { display: block; }
  body { padding-bottom: 72px; }
}

/* ============================================================
   7. HERO
   ============================================================ */
.hero {
  /* No poster image on purpose. A poster is a frozen frame, which read as
     "the video is paused / buggy". The <video> is in the markup with
     preload="auto" so the browser starts fetching during HTML parse, and it
     fades in the instant it produces frames. Until then this dark colour is
     all you see — which reads as the design, not as a stalled video. */
  background-color: #0b0e12;
}
.hero video {
  z-index: 0;
  opacity: 0 !important;
  transition: opacity .6s ease-in-out !important;
  pointer-events: none;
  background: transparent;
}
.hero video.is-playing { opacity: 1 !important; }
.hero::before {
  z-index: 1;
  background: linear-gradient(to bottom,
    rgba(8,10,14,.55) 0%, rgba(8,10,14,.68) 45%,
    rgba(8,10,14,.68) 60%, rgba(8,10,14,.55) 100%);
}
.hero h1, .hero p, .hero .btn,
.hero .eyebrow, .hero .hero-actions { z-index: 2; }
.hero.hero-urgence { height: auto; min-height: 76vh; padding: 64px 20px; }
.hero p { max-width: 760px; }

.hero .eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(192,57,43,.95);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 8px 15px;
  border-radius: 100px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.hero-actions {
  position: relative;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 28px;
}
.hero .eyebrow, .hero .hero-actions {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease-out, transform .8s ease-out;
}
.hero.visible .eyebrow, .hero.visible .hero-actions { opacity: 1; transform: translateY(0); }
.fade-in.no-anim, .hero.no-anim { transition: none !important; }
.no-js .hero h1, .no-js .hero p, .no-js .hero .eyebrow,
.no-js .hero .hero-actions, .no-js .fade-in {
  opacity: 1 !important; transform: none !important;
}

/* ============================================================
   8. BUTTONS
   ============================================================ */
.btn-urgent {
  background-color: var(--urgent);
  background-image: linear-gradient(180deg, #cf4432 0%, var(--urgent) 100%);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1.12rem;
  padding: 16px 32px;
  border-radius: var(--r-sm);
  display: inline-block;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(192,57,43,.32);
  transition: filter .22s cubic-bezier(.4,0,.2,1), box-shadow .26s cubic-bezier(.4,0,.2,1), background .22s cubic-bezier(.4,0,.2,1);
}
.btn-urgent:hover {
  /* Paint-only. No filter: it would promote the button to a new
     compositor layer at the moment of a touch and iOS drops the
     pending click. No transform either: a lift moves the target
     out from under the cursor and flickers. */
  box-shadow: 0 6px 20px rgba(192,57,43,.42);
  text-decoration: none;
}
.btn-urgent:active { box-shadow: 0 3px 10px rgba(192,57,43,.34); }
.btn-ghost {
  background: rgba(255,255,255,.07);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.55);
  font-weight: 700;
  font-size: 1rem;
  padding: 15px 26px;
  border-radius: var(--r-sm);
  display: inline-block;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background .24s cubic-bezier(.4,0,.2,1), border-color .24s cubic-bezier(.4,0,.2,1);
}
.btn-ghost:hover {
  background: rgba(255,255,255,.16);
  border-color: #fff;
  text-decoration: none;
}
.call-button { border-radius: var(--r-sm); }

a.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  min-height: 38px;
  box-sizing: border-box;
  border-radius: var(--r-sm);
  text-decoration: none;
}
a.lang-switch:hover { text-decoration: none; }

/* ============================================================
   9. SURFACES — light site, black used as an accent only
   ============================================================
   Black is reserved for: header, trust strip, CTA bands, footer,
   hero. Content sections alternate white / very light gray.
   ============================================================ */
.features, .reviews, .alt-bg, .content.alt-bg { background: var(--surface-alt); }
.about { background: var(--surface); }
.portfolio, .team, .content { background: var(--surface); }
.content.alt-bg { background: var(--surface-alt); }

.features h2, .features h3,
.about h2, .about h3,
.reviews h2, .reviews h3,
.alt-bg h2, .alt-bg h3,
.content h2, .content h3 { color: var(--ink); }
.features p, .about p, .reviews p, .alt-bg p, .content p,
.alt-bg li, .content li { color: var(--text); }
.bold-rbq { color: var(--accent-dark); font-weight: 700; }

/* ---- trust strip (stays dark, it's a band) ---- */
.trust-strip { background: var(--ink); color: #fff; padding: 0; }
.trust-strip ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}
.trust-strip li {
  flex: 1 1 190px;
  text-align: center;
  padding: 22px 16px;
  border-right: 1px solid rgba(255,255,255,.1);
  font-size: .88rem;
  line-height: 1.45;
  color: #c6ccd3;
}
.trust-strip li:last-child { border-right: none; }
.trust-strip strong {
  display: block;
  font-family: "Montserrat", sans-serif;
  color: var(--accent);
  font-size: 1.02rem;
  margin-bottom: 4px;
}
@media (max-width: 900px) {
  .trust-strip li {
    flex: 1 1 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding: 15px 14px;
  }
}

/* ============================================================
   10. SECTION RHYTHM
   Consistent vertical spacing so nothing "kisses" the next block.
   ============================================================ */
.content {
  padding: 78px 20px;
  max-width: 880px;
  margin: 0 auto;
}
.content.wide { max-width: 1200px; }
.content h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.95rem;
  line-height: 1.25;
  margin-bottom: 18px;
  letter-spacing: -.01em;
}
.content > h2:first-child { margin-top: 0; }
.content h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  margin: 36px 0 12px;
}
.content p { margin-bottom: 16px; line-height: 1.65; }
.content ul.checks { list-style: none; margin: 0 0 22px; }
.content ul.checks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  line-height: 1.6;
}
.content ul.checks li::before {
  content: "✓";
  position: absolute;
  left: 0; top: -1px;
  color: var(--accent-dark);
  font-weight: 700;
  font-size: 1.05rem;
}
.features { padding: 78px 20px; gap: 20px; }
.about, .portfolio, .team, .reviews { padding: 78px 20px; }

/* ============================================================
   11. CARDS — rounded, soft, aligned
   ============================================================ */
.feature-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 28px 24px;
  transition: box-shadow .26s cubic-bezier(.4,0,.2,1), border-color .26s cubic-bezier(.4,0,.2,1), background .26s cubic-bezier(.4,0,.2,1);
}
.feature-box:hover {
  box-shadow: var(--shadow-md);
  border-color: #d7dbe2;
  background: #fffdfa;
}
.feature-box h3 { color: var(--ink); margin-bottom: 8px; }
.feature-box p  { color: var(--text-dim); }

/* symptom grid: explicit columns so 6 and 9 items never orphan.
   With auto-fit a 1440px viewport produced 4 columns and left a
   single card stranded on the last row. */
.symptoms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 32px 0 8px;
}
@media (max-width: 1000px) {
  .symptoms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* odd count in a 2-column grid: let the last card span both */
  .symptoms > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .symptoms { grid-template-columns: 1fr; }
  .symptoms > *:last-child:nth-child(odd) { grid-column: auto; }
}
.symptom {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--urgent);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 22px 22px;
  transition: box-shadow .26s cubic-bezier(.4,0,.2,1), border-color .26s cubic-bezier(.4,0,.2,1);
}
.symptom:hover { box-shadow: var(--shadow-md); border-color: #d7dbe2; border-left-color: var(--urgent); }
.symptom h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.04rem;
  margin: 0 0 8px;
  color: var(--ink);
}
.symptom p { font-size: .93rem; margin: 0; color: var(--text-dim); line-height: 1.55; }

.linkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.linkgrid a {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 18px 20px;
  font-weight: 700;
  color: var(--ink);
  transition: border-color .26s cubic-bezier(.4,0,.2,1), box-shadow .26s cubic-bezier(.4,0,.2,1), background .26s cubic-bezier(.4,0,.2,1);
}
.linkgrid a:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  background: #fffdf9;
  text-decoration: none;
}
.linkgrid a span {
  display: block;
  font-weight: 400;
  font-size: .86rem;
  color: var(--text-dim);
  margin-top: 5px;
  line-height: 1.45;
}

/* ============================================================
   12. SAFETY CALLOUT
   ============================================================ */
.safety {
  background-color: #fff8e6;
  background-image: linear-gradient(180deg, #fffaf0 0%, #fff6e3 100%);
  border: 1px solid #f0dcae;
  border-left: 5px solid var(--accent);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 28px 30px;
  margin: 36px 0;
}
.safety h3 { margin-top: 0; color: #8a5a06; }
.safety ol { margin: 0; padding-left: 22px; }
.safety ol li { margin-bottom: 10px; line-height: 1.6; color: #4a4235; }
.safety.safety-last { margin-bottom: 8px; }

/* ============================================================
   13. FAQ — rounded panel, breathing room
   ============================================================ */
.faq { padding-bottom: 84px; }
.faq .faq-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 6px 26px;
  overflow: hidden;
}
.faq details {
  border-bottom: 1px solid var(--line-soft);
  padding: 18px 0;
}
.faq details:last-child { border-bottom: none; }
.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  font-size: 1.02rem;
  color: var(--ink);
  list-style: none;
  position: relative;
  padding-right: 36px;
  line-height: 1.45;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 2px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--accent-dark);
  line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 14px 0 2px; color: var(--text-dim); line-height: 1.65; }

/* ============================================================
   14. CTA BANDS
   ============================================================ */
.cta-band {
  background-color: #14181d;                 /* fallback + truthful computed value */
  background-image: radial-gradient(120% 160% at 50% 0%, #23282f 0%, var(--ink) 62%);
  color: #fff;
  text-align: center;
  padding: 66px 20px;
  border-top: 3px solid var(--accent);
}
.cta-band h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.78rem;
  margin-bottom: 10px;
  line-height: 1.3;
  color: #fff;
}
.cta-band p { margin-bottom: 22px; color: #ccd2d9; }
.urgence-num {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 2.15rem;
  color: var(--accent);
  margin: 14px 0 8px;
}
.urgence-num:hover { text-decoration: none; color: #fff; }

/* ============================================================
   15. FOOTER
   ============================================================ */
.footer-nap {
  background: #0a0c0f;
  color: #98a0aa;
  padding: 52px 20px 32px;
  font-size: .88rem;
  line-height: 1.75;
  text-align: left;
  border-top: 1px solid #1a1e24;
}
.footer-nap .cols {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 34px;
}
.footer-nap .cols > div { text-align: left; }
.footer-nap h4,
.footer-nap h3 {
  font-family: "Montserrat", sans-serif;
  color: #fff;
  font-size: .95rem;
  margin-bottom: 12px;
  font-weight: 700;
}
.footer-nap a { color: #98a0aa; }
.footer-nap a:hover { color: var(--accent); text-decoration: underline; }
.footer-nap ul { list-style: none; }
.footer-nap .coverage { color: #7e858e; font-size: .84rem; }

/* ============================================================
   16. CALL MODAL (desktop)
   ============================================================ */
.call-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8,10,14,.74);
  /* `display` is not animatable, so toggling none->flex made opening pop
     in with no fade. visibility + pointer-events keeps the element in the
     tree (inert) so both directions transition. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .26s cubic-bezier(.4,0,.2,1), visibility .26s linear;
}
.call-modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  backdrop-filter: blur(3px);
}
.call-modal__box {
  background: #fff;
  border-radius: var(--r-xl);
  max-width: 470px;
  width: 100%;
  padding: 36px 34px 28px;
  text-align: center;
  position: relative;
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
  animation: modalin .22s ease-out;
}
@keyframes modalin {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.call-modal__close {
  position: absolute;
  top: 10px; right: 12px;
  background: none; border: none;
  font-size: 1.8rem; line-height: 1;
  color: #9aa0a8; cursor: pointer;
  padding: 6px 10px; border-radius: var(--r-sm);
}
.call-modal__close:hover { color: var(--ink); background: #f1f3f5; }
.call-modal__live {
  display: inline-flex; align-items: center; gap: 8px;
  background: #e8f7ee; color: #14683a;
  font-size: .76rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 100px; margin-bottom: 18px;
}
.call-modal__live i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #27ae60; box-shadow: 0 0 0 3px rgba(39,174,96,.22);
  animation: livepulse 2s ease-in-out infinite;
}
.call-modal__box h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 1.34rem; color: var(--ink);
  margin-bottom: 8px; line-height: 1.3;
}
.call-modal__box p { color: var(--text-dim); font-size: .95rem; line-height: 1.55; margin-bottom: 18px; }
.call-modal__num {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 2.35rem; font-weight: 700;
  color: var(--urgent);
  margin: 8px 0 20px;
  user-select: all; text-decoration: none;
}
.call-modal__num:hover { text-decoration: none; color: var(--urgent-dark); }
.call-modal__row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.call-modal__copy {
  background: var(--ink); color: #fff;
  border: none; border-radius: var(--r-sm);
  font-weight: 700; font-size: .95rem;
  padding: 14px 22px; cursor: pointer;
  font-family: "Montserrat", sans-serif;
  transition: background .2s;
}
.call-modal__copy:hover { background: #2b3138; }
.call-modal__copy.done { background: #17703d; }
.call-modal__note {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-size: .8rem; color: #7a808a; line-height: 1.6;
}
.call-modal__note strong { color: var(--ink); }
@media (max-width: 480px) {
  .call-modal__num { font-size: 1.85rem; }
  .call-modal__box { padding: 30px 22px 22px; }
}

/* ============================================================
   17. COVERAGE / REGION BLOCK
   ============================================================ */
.regions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin: 28px 0 6px;
}
.region {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
}
.region h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
  margin: 0 0 8px;
  color: var(--ink);
}
.region h3 .pin { color: var(--urgent); margin-right: 6px; }
.region p { font-size: .89rem; color: var(--text-dim); margin: 0; line-height: 1.55; }
.region.region-main { border-color: #f0c98a; background: linear-gradient(180deg,#fffdf8,#fff9ee); }
.region.region-main h3 { color: #8a5a06; }

/* ============================================================
   18. ANCHOR OFFSET
   ============================================================ */
[id] { scroll-margin-top: calc(var(--band-h, 30px) + 84px); }
html { scroll-behavior: smooth; }

/* ============================================================
   19. 404
   ============================================================ */
.notfound {
  min-height: 60vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 96px 20px 76px;
  background-color: #14181d;
  background-image: radial-gradient(120% 160% at 50% 0%, #23282f 0%, var(--ink) 62%);
  color: #fff;
}
.notfound h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 2rem; margin: 14px 0 14px; color: #fff; line-height: 1.25;
}
.notfound p { color: #b9c0c9; max-width: 560px; margin-bottom: 24px; }
.notfound .linkgrid { max-width: 780px; width: 100%; }
.notfound .linkgrid a { background: #1a1f26; border-color: #2b333d; color: #fff; box-shadow: none; }
.notfound .linkgrid a span { color: #9aa2ab; }

/* ============================================================
   20. ACCESSIBILITY
   ============================================================ */
a:focus-visible, button:focus-visible, summary:focus-visible,
.hamburger:focus-visible, img.portfolio-img:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff;
  padding: 12px 18px; z-index: 10060;
}
.skip-link:focus { left: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html { scroll-behavior: auto; }
  .fade-in { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   21. SMALL SCREENS
   ============================================================ */
@media (max-width: 900px) {
  .content { padding: 54px 18px; }
  .content h2 { font-size: 1.55rem; }
  .features, .about, .portfolio, .team, .reviews { padding: 54px 18px; }
  .cta-band { padding: 50px 18px; }
  .cta-band h2 { font-size: 1.38rem; }
  .urgence-num { font-size: 1.75rem; }
  .hero .eyebrow { font-size: .62rem; letter-spacing: .09em; padding: 7px 12px; }
  .btn-urgent { font-size: 1.04rem; padding: 15px 24px; }
  .btn-ghost { font-size: .95rem; padding: 13px 20px; }
  .call-button { padding: 9px 13px; font-size: .85rem; }
  .hero.hero-urgence { padding: 42px 18px; min-height: 70vh; }
  .faq { padding-bottom: 58px; }
  .faq .faq-list { padding: 4px 18px; }
  .safety { padding: 22px 20px; }
}
@media (max-width: 480px) {
  .call-button { padding: 8px 11px; font-size: .8rem; }
  .hero h1 { font-size: 1.78rem; }
  .footer-nap .cols { gap: 26px; }
}


/* ============================================================
   22. SECTION PANELS  (round 4)
   ============================================================
   Every "box" the client flagged — "Ce que nos clients disent",
   the FAQ, "Les urgences que nous traitons" — was a full-bleed
   .alt-bg band with square corners butting straight into the
   next section. Rendering them as inset rounded panels fixes the
   corners AND the "kissing", because the margin is now part of
   the component instead of something each page has to remember.
   ============================================================ */

.content.alt-bg {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  width: min(100% - 44px, 940px);
  margin: 40px auto 52px;
  padding: 60px 46px;
}
.content.wide.alt-bg { width: min(100% - 44px, 1260px); }

/* inline max-width on the reviews section used to override this */
.content.alt-bg[style] { max-width: none !important; }

/* the FAQ panel already has its own inner card; avoid a double frame */
.content.alt-bg.faq { padding-bottom: 52px; }
.content.faq { padding-bottom: 40px; }
.content.alt-bg.faq .faq-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

/* a plain (white) section that precedes a dark band needs breathing room */
.content + .cta-band,
.content.alt-bg + .cta-band,
.features + .cta-band { margin-top: 8px; }

/* space between the region grid and the link cards under it */
.regions + .linkgrid { margin-top: 56px; }
/* This used to be `.symptoms + * { margin-top: 8px }`, which overrode the
   safety callout's own 36px top margin and made the yellow box butt right
   up against the last symptom card. */
.symptoms + .safety { margin-top: 52px; }
.symptoms + p, .symptoms + div:not(.safety) { margin-top: 26px; }
.safety { margin-top: 52px; }

/* uniform region cards — the highlighted "main" variant read as a
   selected state and confused the client, so it is now identical */
.region.region-main {
  border-color: var(--line);
  background: var(--surface);
}
.region.region-main h3 { color: var(--ink); }

/* services grid gets the same inset-panel treatment for consistency */
.features {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow-sm);
  width: min(100% - 44px, 1260px);
  margin: 40px auto 52px;
  padding: 56px 40px;
  /* Explicit columns. With auto-fit a 1260px panel produced 4 columns and
     left the last 2 cards stranded at the left of an unbalanced row. 6
     divides evenly into both 3 and 2, so no orphans at any breakpoint. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: stretch;
}
@media (max-width: 1000px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .features { grid-template-columns: 1fr; } }
/* Safety net: if a grid ever ends with a lone card, centre it rather than
   leaving it hanging on the left. */
.features > .feature-box:last-child:nth-child(3n+1) { grid-column: 2; }
@media (max-width: 1000px) {
  .features > .feature-box:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 640px) {
  .features > .feature-box:last-child:nth-child(odd) { grid-column: auto; max-width: 360px; }
}

/* reviews + about keep clean white page background */
.reviews { background: transparent; }
.about   { background: transparent; }

@media (max-width: 900px) {
  .content.alt-bg,
  .content.wide.alt-bg,
  .features {
    width: min(100% - 24px, 100%);
    margin: 24px auto 32px;
    padding: 40px 20px;
    border-radius: 18px;
  }
  .regions + .linkgrid { margin-top: 40px; }
}
@media (max-width: 480px) {
  .content.alt-bg,
  .content.wide.alt-bg,
  .features {
    width: calc(100% - 16px);
    padding: 34px 16px;
    border-radius: 14px;
  }
}

/* ============================================================
   23. MODAL — smooth open AND close
   ============================================================
   Closing used to flip display:none instantly. Now a .closing
   state animates out and main.js removes it on transitionend.
   ============================================================ */
.call-modal__box {
  transform: translateY(14px) scale(.98);
  opacity: 0;
  transition: transform .3s cubic-bezier(.34,1.28,.64,1), opacity .24s ease-out;
  animation: none;
}
.call-modal.open .call-modal__box { transform: none; opacity: 1; }
.call-modal__close {
  transition: color .2s ease, background .2s ease;
}
.call-modal__copy { transition: background .22s cubic-bezier(.4,0,.2,1); }

/* lightbox gets the same courtesy */
#lightbox {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .26s cubic-bezier(.4,0,.2,1), visibility .26s linear;
}
#lightbox.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#lightbox img {
  transform: scale(.97);
  transition: transform .3s cubic-bezier(.34,1.28,.64,1);
}
#lightbox.open img { transform: none; }

/* ============================================================
   24. PHONE ICON (inline SVG, inherits colour)
   The 📞 emoji renders red on every platform, which looked wrong
   on the red bar and red buttons. An SVG inherits currentColor.
   ============================================================ */
.ico-phone {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.13em;
  margin-right: .42em;
  flex-shrink: 0;
}
.urgency-band .ico-phone { margin-right: .3em; }

/* ============================================================
   25. GLOBAL SMOOTHNESS
   ============================================================ */
a, button, summary, .feature-box, .symptom, .region, .linkgrid a {
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}
.call-button, a.lang-switch {
  transition: background .22s cubic-bezier(.4,0,.2,1),
              filter .22s cubic-bezier(.4,0,.2,1),
              border-color .22s cubic-bezier(.4,0,.2,1);
}

.urgence-num { transition: color .22s cubic-bezier(.4,0,.2,1); }
.faq summary::after { transition: transform .2s cubic-bezier(.4,0,.2,1); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(180deg); }
img { -webkit-user-drag: none; }

/* ============================================================
   26. FAQ ACCORDION ANIMATION  (round 5)
   ============================================================
   <details> has no native open/close transition — it snaps. The
   answer is wrapped in .faq-a whose height main.js animates, so
   expanding and collapsing both glide. .faq-a-inner holds the
   padding so height animation never fights against it.
   ============================================================ */
.faq-a {
  overflow: hidden;
  height: 0;
  will-change: height;
}
details[open] > .faq-a { height: auto; }
.faq-a.animating { transition: height .32s cubic-bezier(.4,0,.2,1); }
.faq-a-inner {
  padding-top: 2px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .26s ease-out .04s, transform .26s ease-out .04s;
}
details[open] > .faq-a > .faq-a-inner { opacity: 1; transform: none; }
.faq-a-inner > p:last-child { margin-bottom: 0; }

.faq summary {
  transition: color .2s cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color: transparent;
}
.faq summary:hover { color: var(--urgent); }
.faq details { transition: border-color .24s cubic-bezier(.4,0,.2,1); }

/* If JS is unavailable the browser's own toggling must still reveal
   the answer, so never leave it collapsed at height 0. */
.no-js .faq-a { height: auto; }
.no-js .faq-a-inner { opacity: 1; transform: none; }

/* ============================================================
   27. HERO VIDEO — inline element, fades in when it has frames
   ============================================================ */
.hero video.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
  opacity: 0 !important;
  transition: opacity .55s ease-in-out !important;
  pointer-events: none;
  background: transparent;
  border: 0;
}
.hero video.hero-video.is-playing { opacity: 1 !important; }

/* ============================================================
   28. NAVIGATION + GLOBAL MOTION POLISH
   ============================================================ */
nav ul li a {
  transition: color .22s cubic-bezier(.4,0,.2,1),
              background-color .22s cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color: transparent;
}
nav ul li a:hover { color: var(--accent); }

/* hamburger -> X, animated */
.hamburger { cursor: pointer; }
.hamburger > div {
  transition: transform .3s cubic-bezier(.4,0,.2,1),
              opacity .22s cubic-bezier(.4,0,.2,1),
              background-color .22s ease;
  transform-origin: center;
}
.hamburger.active > div:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.active > div:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.hamburger.active > div:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* mobile menu items ease in with the panel */
@media (max-width: 1101px) {
  nav ul li {
    transition: opacity .3s cubic-bezier(.4,0,.2,1),
                transform .3s cubic-bezier(.4,0,.2,1);
  }
  nav ul li a { width: 100%; }
}

.trust-strip li { transition: background-color .24s cubic-bezier(.4,0,.2,1); }
.region {
  transition: box-shadow .26s cubic-bezier(.4,0,.2,1),
              border-color .26s cubic-bezier(.4,0,.2,1);
}
.region:hover { box-shadow: var(--shadow-md); border-color: #d7dbe2; }
.portfolio-img {
  transition: opacity .26s cubic-bezier(.4,0,.2,1),
              box-shadow .26s cubic-bezier(.4,0,.2,1);
  cursor: zoom-in;
}
.portfolio-img:hover { opacity: .9; box-shadow: var(--shadow-md); }
.skip-link { transition: left .15s ease; }
.footer-nap a { transition: color .2s cubic-bezier(.4,0,.2,1); }
.urgency-band a { transition: text-decoration-color .2s ease; }

/* honour the OS setting everywhere */
@media (prefers-reduced-motion: reduce) {
  .faq-a, .faq-a.animating { transition: none !important; }
  .faq-a-inner { transition: none !important; opacity: 1; transform: none; }
  .hero video.hero-video { transition: none !important; }
  .hamburger > div { transition: none !important; }
}

/* ============================================================
   29. LIGHTBOX  (round 6)
   ============================================================
   Three real problems:

   1. z-index was 2000 while the header is 10000 and the urgency
      band 10001 — so the site chrome was drawn ON TOP of the
      overlay. That is why the image "kissed the top bar".
   2. No close button.
   3. Toggling body overflow removed the scrollbar, shifting the
      whole page ~15px on open and back on close. That shift is
      what made dismissing it feel abrupt. `scrollbar-gutter`
      reserves the space permanently so nothing ever moves.
   ============================================================ */
html { scrollbar-gutter: stable; }

#lightbox {
  z-index: 10055;                    /* above header (10000) and band (10001) */
  padding: 84px 24px 84px;           /* breathing room top AND bottom */
  box-sizing: border-box;
  background: rgba(6, 8, 11, .93);
  backdrop-filter: blur(4px);
}
#lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
}

.lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 3;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 2px;
  transition: background .22s cubic-bezier(.4,0,.2,1),
              border-color .22s cubic-bezier(.4,0,.2,1),
              transform .22s cubic-bezier(.4,0,.2,1);
}
.lightbox-close:hover {
  background: var(--urgent);
  border-color: var(--urgent);
  transform: rotate(90deg);
}
.lightbox-count {
  position: absolute;
  top: 26px;
  left: 24px;
  z-index: 3;
  color: rgba(255,255,255,.72);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .06em;
  font-family: "Montserrat", sans-serif;
}
.lightbox-controls span {
  transition: background .22s cubic-bezier(.4,0,.2,1),
              transform .22s cubic-bezier(.4,0,.2,1);
  border-radius: 50%;
}
.lightbox-controls span:hover { background: rgba(255,255,255,.14); }
@media (max-width: 640px) {
  #lightbox { padding: 74px 12px 74px; }
  .lightbox-close { top: 12px; right: 12px; width: 42px; height: 42px; }
  .lightbox-count { top: 20px; left: 16px; }
}

/* ============================================================
   30. FAQ — immediate feedback on close
   ============================================================
   `open` only came off the <details> when the collapse finished,
   so the − stayed a − and the text stayed at full opacity for the
   whole animation. That read as "nothing happens, then it
   closes". .is-closing gives instant visual response.
   ============================================================ */
.faq details.is-closing > summary::after { content: "+"; transform: translateY(-50%) rotate(0deg); }
.faq details.is-closing > .faq-a > .faq-a-inner {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .16s ease-in, transform .16s ease-in;
}

/* ============================================================
   31. ORANGE SEPARATOR LINES
   ============================================================
   The accent rule that starts the CTA band, applied consistently
   so each band and panel reads as its own section.

   The header uses an inset shadow rather than border-bottom: the
   global `box-sizing: border-box` plus its fixed 72px height mean
   a real border would eat 3px of content and shift the nav.
   ============================================================ */
header { box-shadow: inset 0 -3px 0 var(--accent); }
.trust-strip { border-top: 3px solid var(--accent); }
.content.alt-bg { border-top: 3px solid var(--accent); }
.features { border-top: 3px solid var(--accent); }
.footer-nap { border-top: 3px solid var(--accent); }
.notfound { border-top: 3px solid var(--accent); }
/* .cta-band already carries it */

/* the rounded panels need their top corners to stay round with a
   thicker top border */
.content.alt-bg, .features { background-clip: padding-box; }

/* ============================================================
   32. NO GEOMETRY CHANGES ON HOVER  (round 7)
   ============================================================
   The original stylesheet moves several elements on hover, and my
   earlier overrides restyled them without resetting the transform.
   Same defect that caused the reported button flicker: a hovered
   element that moves can slide out from under the cursor, dropping
   the hover state, snapping back, re-firing. Every hover effect is
   now colour / shadow / opacity only — nothing shifts position.

     .feature-box        was translateY(-5px)
     .portfolio-grid img was scale(1.05)
     .team-member img    was scale(1.05)  (reset on mobile only)
     .lightbox-close     was rotate(90deg)
   ============================================================ */

.feature-box:hover,
.feature-box:focus-within {
  transform: none;
  box-shadow: var(--shadow-md);
  border-color: #d7dbe2;
  background: #fffdfa;
}

.portfolio-grid img,
.portfolio-img {
  border-radius: var(--r-md);
  transition: box-shadow .26s cubic-bezier(.4,0,.2,1),
              filter .26s cubic-bezier(.4,0,.2,1);
}
.portfolio-grid img:hover,
.portfolio-grid img:focus,
.portfolio-img:hover {
  transform: none;
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(243,156,18,.55), var(--shadow-md);
}
/* keyboard focus must stay visible — the original set outline:none */
.portfolio-grid img:focus-visible,
.portfolio-img:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.team-member img,
.team-member img:hover,
.team-member img:focus {
  transform: none !important;
  transition: box-shadow .26s cubic-bezier(.4,0,.2,1),
              filter .26s cubic-bezier(.4,0,.2,1);
}
.team-member img:hover {
  box-shadow: var(--shadow-md);
}
.team-member img:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* The close button: a plain cross-fade, no rotation. */
.lightbox-close {
  transition: background-color .22s cubic-bezier(.4,0,.2,1),
              border-color .22s cubic-bezier(.4,0,.2,1),
              color .22s cubic-bezier(.4,0,.2,1),
              opacity .22s cubic-bezier(.4,0,.2,1);
  opacity: .85;
}
.lightbox-close:hover,
.lightbox-close:focus-visible {
  /* Fade only. The earlier rotate(90deg) drew attention to itself and moved
     the target under the cursor, which is exactly what we removed everywhere
     else. */
  transform: none !important;
  opacity: 1;
  background: rgba(255,255,255,.20);
  border-color: rgba(255,255,255,.6);
  color: #fff;
}
.lightbox-close:active { background: rgba(255,255,255,.26); }

/* arrows: fade only, no movement */
.lightbox-controls span {
  transition: background-color .22s cubic-bezier(.4,0,.2,1),
              opacity .22s cubic-bezier(.4,0,.2,1);
  opacity: .8;
}
.lightbox-controls span:hover,
.lightbox-controls span:focus-visible {
  transform: none;
  opacity: 1;
  background: rgba(255,255,255,.14);
}


/* Belt and braces: the close button and arrows must never transform. */
.lightbox-close, .lightbox-close:hover, .lightbox-close:active,
.lightbox-close:focus, .lightbox-close:focus-visible,
.lightbox-controls span, .lightbox-controls span:hover,
.lightbox-controls span:focus, .lightbox-controls span:focus-visible {
  transform: none !important;
}

/* ============================================================
   33. HIT AREAS, STICKY FOCUS, TEAM PHOTO   (round 8)
   ============================================================ */

/* ---- 33a. Oversized click targets --------------------------
   .urgence-num and .call-modal__num were display:block, so the
   anchor stretched the full width of its container. You could
   click far to the left or right of the number, on empty space,
   and still trigger the call. inline-block shrinks the box to
   the text; the parent's text-align:center still centres it. */
/* `inline-block` shrank the hit area to the text (good) but also let the
   button sit BESIDE the number wherever no paragraph separated them — 8 of
   the 10 CTA bands. `display:block` puts it back on its own line,
   `width:fit-content` keeps the hit area at the text width, and auto side
   margins centre it. Both properties are needed; either alone is a bug. */
.urgence-num {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.call-modal__num {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* the button always sits under the number, centred, with real spacing */
.cta-band .urgence-num { margin-top: 14px; margin-bottom: 20px; }
.cta-band .urgence-num + .btn-urgent { margin-top: 4px; }
.cta-band > .btn-urgent { display: inline-block; }
/* the surrounding elements are block-level, so the number still
   sits on its own line */

/* ---- 33b. Nav tab staying orange after a click -------------
   The original rule was:
       nav ul li a:hover, nav ul li a:focus, nav ul li a:active
       { color:#f39c12; outline:none; }
   `:focus` persists after a mouse click, so a tab you clicked
   stayed orange — and `outline:none` removed the keyboard
   indicator at the same time. Hover and keyboard focus are now
   separated: pointer clicks leave nothing behind, keyboard users
   get a real focus ring. */
nav ul li a:focus,
nav ul li a:active {
  color: #fff;
  outline: none;
}
nav ul li a:hover { color: var(--accent); }
nav ul li a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
/* the current page keeps a permanent, quieter marker instead */
/* Requested: on desktop a tab is orange ONLY while the cursor is on it —
   never a persistent state. The current-page marker is kept on mobile,
   where the open menu benefits from showing where you are. */
@media (max-width: 1101px) {
  nav ul li a[aria-current="page"] { color: var(--accent); }
}
@media (min-width: 1102px) {
  nav ul li a[aria-current="page"] { color: #fff; }
  nav ul li a[aria-current="page"]:hover { color: var(--accent); }
}

/* same treatment anywhere else the original styled :focus */
.call-button:focus { outline: none; }
.call-button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hero .btn:focus { outline: none; }
.hero .btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.contact a:focus, .contact button:focus { outline: none; }
.contact a:focus-visible, .contact button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn-urgent:focus, .btn-ghost:focus, a.lang-switch:focus { outline: none; }
.btn-urgent:focus-visible, .btn-ghost:focus-visible, a.lang-switch:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ---- 33c. Team photo -----------------------------------------
   The base rule carries a strong dark shadow:
       box-shadow: 0 8px 20px rgba(0,0,0,.3)
   My hover replaced it with --shadow-md, which is far lighter, so
   hovering made the portrait LOSE its shadow and go flat. It now
   deepens instead, and the orange ring brightens. No movement, no
   brightness filter washing out a photo of a person. */
.team-member img {
  transition: box-shadow .3s cubic-bezier(.4,0,.2,1),
              border-color .3s cubic-bezier(.4,0,.2,1) !important;
}
.team-member img:hover,
.team-member img:focus-visible {
  filter: none;
  box-shadow: 0 14px 34px rgba(0,0,0,.42);
  border-color: #ffb340;
}
.team-member img:focus { outline: none; }
.team-member img:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

/* ============================================================
   34. COLLAPSED MOBILE MENU MUST BE UNREACHABLE  (round 8)
   ============================================================
   The original hides the menu with `max-height: 0; overflow:
   hidden`. That clips it visually but leaves the six links in the
   tab order and in the accessibility tree — keyboard and screen
   reader users move through invisible links, and automation can
   even "click" them. visibility:hidden removes them from both,
   and transitioning visibility keeps the slide animation intact
   (it flips at the end of the collapse, not the start).
   ============================================================ */
@media (max-width: 1101px) {
  nav ul {
    visibility: hidden;
    transition: max-height .5s ease, visibility .5s linear;
  }
  nav ul.show {
    visibility: visible;
    transition: max-height .5s ease, visibility 0s linear;
  }
}

/* ============================================================
   35. TOUCH TARGET SIZES  (round 9)
   ============================================================
   Measured on a 390px viewport. WCAG 2.5.8 asks for 24x24 as a
   minimum; Apple and Google both recommend 44x44. Several targets
   sat between those, and the worst offender was the phone number
   in the urgency band at 106x17 — a CALL link on an emergency
   site, too small to hit reliably with a thumb.

   Each is enlarged with padding plus an equal negative margin, so
   the hit box grows without shifting any layout.

     urgency-band phone   106x17  ->  ~106x37
     hamburger             35x29  ->    44x44
     logo link             96x36  ->    96x44
     call-button          137x35  ->   137x42
     lang-switch           45x38  ->    45x42
     modal close           36x40  ->    44x44
   ============================================================ */

.urgency-band a {
  /* 40px tap height inside a ~30px band: the padding grows the hit box and
     the matching negative margin keeps the band's own height unchanged.
     Inline links inside sentences are deliberately left at text height —
     WCAG 2.5.8 exempts them, and enlarging them would break line spacing. */
  display: inline-block;
  /* Sized to fill the band rather than exceed it. At 40px the invisible tap
     box spilled ~3.5px past the band and, since the band sits above the
     header in z-order, it could swallow clicks along the header's top edge.
     ~34px keeps the whole target inside the band — still double the original
     17px. */
  padding: 8px 7px;
  margin: -8px -3px;
  position: relative;
  z-index: 1;
}
/* The band's own vertical padding shrinks at 860px (8px -> 7px), so the
   link's padding has to follow or the tap box spills past the band and,
   because the band sits above the header in z-order, it would swallow
   clicks along the header's top edge. */
@media (max-width: 860px) {
  .urgency-band a { padding: 7px 7px; margin: -7px -3px; }
}

/* The original hides the hamburger with `display:none` and only shows it
   inside @media (max-width:1101px). My earlier rule set `display:flex`
   unconditionally, which made it appear on desktop next to the logo.
   Never touch `display` here — only sizing, and only where it is shown. */
@media (max-width: 1101px) {
  .hamburger {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-left: -4px;
    box-sizing: border-box;
  }
  .hamburger > div { width: 26px; }
}

nav > a:has(> #logo),
nav a:has(img#logo) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
}

.call-button { min-height: 42px; box-sizing: border-box; }
a.lang-switch { min-height: 42px; }
.call-modal__close { min-width: 44px; min-height: 44px; }
.lightbox-controls span { min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 480px) {
  .call-button { min-height: 40px; padding: 8px 10px; }
  .hamburger { min-width: 42px; min-height: 42px; }
}
/* belt and braces: the hamburger must never be visible on desktop */
@media (min-width: 1102px) {
  .hamburger { display: none !important; }
}

/* FAQ rows are already tall, but guarantee it on the narrowest phones */
.faq summary { min-height: 44px; display: flex; align-items: center; }
.faq summary::after { top: 50%; }


/* ============================================================
   36. MOBILE MENU: TEXT COLOUR ONLY, NO ROW HIGHLIGHT  (round 10)
   ============================================================
   `nav ul li:hover { background: rgba(243,156,18,.08) }` looked fine with a
   mouse, but touch browsers keep :hover applied after a tap until you tap
   somewhere else — so a tapped row stayed shaded orange. Row backgrounds are
   gone. The active tab is signalled by its TEXT turning orange, nothing more.

   Hover colouring is now gated behind `(hover: hover) and (pointer: fine)`
   so it only applies to real pointers, never to a lingering touch state.
   ============================================================ */
@media (max-width: 1101px) {
  nav ul li,
  nav ul li:hover,
  nav ul li:active,
  nav ul li:focus-within {
    background: transparent !important;
  }
  /* no colour change from a stale touch "hover" */
  nav ul li a:hover,
  nav ul li a:active {
    color: #fff;
  }
  /* the current page: text only, and it wins over the above */
  nav ul li a[aria-current="page"],
  nav ul li a[aria-current="page"]:hover,
  nav ul li a[aria-current="page"]:active {
    color: var(--accent) !important;
  }
  /* keyboard focus still identifiable via the ring */
  nav ul li a:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: -3px;
    border-radius: 4px;
  }
}
/* Tablets and small windows that DO have a real pointer keep hover colour. */
@media (max-width: 1101px) and (hover: hover) and (pointer: fine) {
  nav ul li a:hover { color: var(--accent); }
}

/* Deterministic companion to the media-feature gate above: main.js adds
   .is-touch to <html> on the first real touch/pen input. Once set, no hover
   styling applies anywhere, so a lingering touch "hover" can never leave a
   row or button looking selected. */
html.is-touch nav ul li a:hover,
html.is-touch nav ul li a:active { color: #fff; }
html.is-touch nav ul li a[aria-current="page"],
html.is-touch nav ul li a[aria-current="page"]:hover { color: var(--accent); }
html.is-touch nav ul li:hover,
html.is-touch nav ul li:active { background: transparent !important; }
html.is-touch .feature-box:hover,
html.is-touch .linkgrid a:hover,
html.is-touch .region:hover,
html.is-touch .symptom:hover { box-shadow: var(--shadow-sm); background: var(--surface); }
html.is-touch .btn-urgent:hover { filter: none; }
html.is-touch .portfolio-img:hover,
html.is-touch .team-member img:hover { filter: none; }
html.is-touch .portfolio-img:hover { box-shadow: none; }

/* ============================================================
   37. 404 PAGE POLISH  (round 11)
   ============================================================
   The four link cards used `auto-fit, minmax(240px,1fr)` inside a
   780px box, which resolved to 3 columns and stranded the fourth
   card on its own row. Four explicit columns divide evenly, and
   the fallbacks (2 then 1) also divide 4 evenly, so no orphan at
   any width.

   The "Erreur 404" label is replaced by a spacer: the code adds
   nothing a visitor needs, and the H1 already says it plainly.
   ============================================================ */
.notfound-spacer { display: block; height: 8px; }

.notfound .linkgrid,
.linkgrid.linkgrid-4 {
  max-width: 1180px;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.linkgrid.linkgrid-4 a { padding: 16px 16px; }
.linkgrid.linkgrid-4 a span { font-size: .82rem; }

@media (max-width: 1080px) {
  .notfound .linkgrid,
  .linkgrid.linkgrid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
}
@media (max-width: 560px) {
  .notfound .linkgrid,
  .linkgrid.linkgrid-4 { grid-template-columns: 1fr; max-width: 420px; }
}

/* ============================================================
   38. 404 PAGE: FILL THE VIEWPORT, DARK-CARD HOVER  (round 12)
   ============================================================
   1. White band above the footer.
      `.container-main { flex: 1 0 auto }` stretches to fill the
      viewport, but `.notfound` inside it only had `min-height:
      60vh`. The container therefore grew taller than its content
      and `body`'s white background showed through the gap. The
      flex chain now runs all the way down so the dark section
      itself absorbs the leftover height.

   2. Card hover was near-WHITE on a dark card.
      The generic rule is `.linkgrid a:hover { background:#fffdf9;
      box-shadow: var(--shadow-md) }` — sensible on the light
      pages, wrong here: an almost-white flash plus a pale shadow
      that is invisible on black. The 404 cards get a hover tuned
      for a dark surface instead.
   ============================================================ */

body.page-404 .container-main {
  display: flex;
  flex-direction: column;
}
body.page-404 main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
body.page-404 .notfound {
  flex: 1 0 auto;
  min-height: 0;              /* the flex grow handles height now */
}

/* dark-surface hover, matching the feel of the light cards */
.notfound .linkgrid a {
  transition: background-color .24s cubic-bezier(.4,0,.2,1),
              border-color .24s cubic-bezier(.4,0,.2,1),
              box-shadow .26s cubic-bezier(.4,0,.2,1);
}
.notfound .linkgrid a:hover,
.notfound .linkgrid a:focus-visible {
  background: #242c36;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(243,156,18,.35),
              0 12px 28px rgba(0,0,0,.45);
  color: #fff;
}
.notfound .linkgrid a:hover span { color: #c9cfd7; }
.notfound .linkgrid a:active { background: #1d242c; }

/* touch devices: no lingering hover state */
html.is-touch .notfound .linkgrid a:hover {
  background: #1a1f26;
  border-color: #2b333d;
  box-shadow: none;
}
html.is-touch .notfound .linkgrid a:hover span { color: #9aa2ab; }


/* ============================================================
   39. INLINE ICONS REPLACE EMOJI  (round 13)
   ============================================================
   The ⚡ is gone from the site entirely, as requested. The 📍 pins
   were also emoji, which render as multi-colour glyphs that vary
   by platform and clash with the SVG phone icon. They are now
   inline SVG that inherits currentColor, so every icon on the
   site is styled by CSS rather than by the OS emoji font.
   ============================================================ */
.ico-pin {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.14em;
  flex-shrink: 0;
}
.region h3 .pin {
  color: var(--urgent);
  margin-right: 7px;
  display: inline-flex;
  align-items: center;
}


/* ============================================================
   40. FONT LOADING  (round 13)
   ============================================================
   Google Fonts is now loaded without blocking first paint, which
   means text paints in a fallback face and swaps when the webfont
   arrives. Declaring a metrically close fallback stack keeps that
   swap from shifting layout. Measured CLS stays at 0.00.
   ============================================================ */
body {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
}
h1, h2, h3, h4, .btn-urgent, .btn-ghost, .call-button,
.urgence-num, .call-modal__num, .faq summary, .trust-strip strong {
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
}

/* ============================================================
   41. HOME NEEDS NO "YOU ARE HERE" MARKER  (round 14)
   ============================================================
   The mobile menu colours the current page orange, which is useful
   on Laval / Montréal / Urgence but pointless on the homepage —
   you can see you're on it, and a permanently orange row just
   reads as noise.

   aria-current is deliberately KEPT so screen readers still
   announce the current page; only the colour is suppressed, and
   only for the home links.
   ============================================================ */
nav ul li a[aria-current="page"][href="/"],
nav ul li a[aria-current="page"][href="/en/"],
html.is-touch nav ul li a[aria-current="page"][href="/"],
html.is-touch nav ul li a[aria-current="page"][href="/en/"] {
  color: #fff !important;
}
/* hover still works on it, like any other tab */
nav ul li a[aria-current="page"][href="/"]:hover,
nav ul li a[aria-current="page"][href="/en/"]:hover {
  color: var(--accent) !important;
}
html.is-touch nav ul li a[aria-current="page"][href="/"]:hover,
html.is-touch nav ul li a[aria-current="page"][href="/en/"]:hover {
  color: #fff !important;
}

/* ============================================================
   42. LANDSCAPE PHONES  (round 14)
   ============================================================
   Measured at 844x390 (phone held sideways): the urgency band +
   header + sticky call bar consumed 178px — 46% of the viewport —
   and the "Appelez maintenant" button fell BELOW the fold. On an
   emergency site that is a conversion problem, not a cosmetic one.

   Short viewports get tighter chrome and compressed hero type so
   the call button is always reachable without scrolling.
   ============================================================ */
@media (orientation: landscape) and (max-height: 500px) {
  /* slimmer fixed chrome */
  header { height: 56px; }
  :root { --logo-h: 34px; }
  .urgency-band { font-size: .72rem; padding: 4px 10px; }
  /* The link's VERTICAL padding must equal the band's, or the invisible tap
     box spills past the band — and because the band sits above the header in
     z-order it would swallow clicks along the header's top edge. Matched. */
  .urgency-band a { padding: 4px 6px; margin: -4px -3px; }
  .hero { margin-top: calc(var(--band-h, 24px) + 56px); }

  @media (max-width: 1101px) {
    nav ul { top: 56px; }
    nav ul.show { max-height: calc(100vh - var(--band-h, 24px) - 62px); }
  }

  /* hero compressed so the CTA clears the fold */
  .hero.hero-urgence {
    min-height: 0;
    padding: 14px 18px 18px;
  }
  .hero .eyebrow {
    font-size: .55rem;
    padding: 4px 9px;
    margin-bottom: 8px;
    letter-spacing: .07em;
  }
  .hero h1 { font-size: 1.32rem; line-height: 1.2; margin-bottom: 6px; }
  .hero p {
    font-size: .86rem;
    line-height: 1.4;
    margin-bottom: 8px;
    max-width: 620px;
  }
  .hero-actions { margin-top: 12px; gap: 9px; }
  .btn-urgent { font-size: .95rem; padding: 11px 18px; }
  .btn-ghost  { font-size: .86rem; padding: 10px 15px; }

  /* slimmer sticky bar, and body padding follows it */
  .sticky-call { padding: 8px 10px; font-size: .95rem; }
  .sticky-call small { font-size: .62rem; margin-top: 1px; }
  body { padding-bottom: 56px; }

  /* section rhythm tightened so scrolling isn't endless */
  .content, .features, .about, .portfolio, .team, .reviews { padding: 34px 18px; }
  .cta-band { padding: 32px 18px; }
  .trust-strip li { padding: 10px 14px; }
}

/* Very short viewports (some foldables, browser UI expanded) */
@media (orientation: landscape) and (max-height: 400px) {
  .hero p { display: none; }          /* the H1 and CTA carry the message */
  .hero h1 { font-size: 1.18rem; }
  .hero .eyebrow { display: none; }
}

/* Middle tier: short landscape viewports that are too tall for the phone
   rules above but still can't fit a 76vh hero plus the CTA — measured at
   1024x600, where the button landed 5px past the fold. Only the hero
   height is relaxed; type stays full size. */
@media (orientation: landscape) and (min-height: 501px) and (max-height: 680px) {
  .hero.hero-urgence { min-height: 0; padding: 30px 20px 36px; }
  .hero h1 { font-size: 1.8rem; }
  .hero p { margin-bottom: 12px; }
  .hero-actions { margin-top: 18px; }
}

/* ============================================================
   43. SHORT PORTRAIT PHONES  (round 14)
   ============================================================
   Measured at 320x568 (iPhone SE) and 360x640: 178px of fixed
   chrome leaves ~390px of usable height, but the hero content ran
   to ~404px — so the "Appelez maintenant" button sat BELOW the
   fold and the visitor had to scroll to find it.

   On an emergency site the call button must be visible the instant
   the page paints. Hero type and spacing are compressed on short
   screens so it always is. iPhone SE is still widely used.
   ============================================================ */
@media (orientation: portrait) and (max-height: 700px) {
  .hero.hero-urgence {
    min-height: 0;
    padding: 20px 16px 26px;
  }
  .hero .eyebrow {
    font-size: .58rem;
    padding: 5px 10px;
    margin-bottom: 10px;
    letter-spacing: .07em;
  }
  .hero h1 {
    font-size: 1.5rem;
    line-height: 1.18;
    margin-bottom: 8px;
  }
  .hero p {
    font-size: .88rem;
    line-height: 1.45;
    margin-bottom: 10px;
  }
  .hero-actions { margin-top: 14px; gap: 10px; }
  .btn-urgent { font-size: .98rem; padding: 13px 18px; }
  .btn-ghost  { font-size: .88rem; padding: 11px 16px; }
  .trust-strip li { padding: 12px 14px; }
}

/* Very short portrait (older/small devices with browser UI expanded) */
@media (orientation: portrait) and (max-height: 600px) {
  .hero h1 { font-size: 1.34rem; }
  .hero p  { font-size: .84rem; }
  .hero .eyebrow { display: none; }
}

/* ============================================================
   44. REAL-DEVICE iOS FIXES  (round 15)
   ============================================================
   Six issues that only appear on physical hardware, not in
   emulation. Each cause identified:

   1. Text inflating on rotation and STAYING inflated
      iOS auto-adjusts font size when the viewport widens. Without
      text-size-adjust it recalculates on rotate and the larger
      size persists after rotating back.

   2. White/coloured gutters at the left and right edges
      On notched iPhones the default viewport-fit insets content
      into the safe area, exposing the page background either
      side. Fixed with viewport-fit=cover in the meta tag plus
      safe-area padding here, so backgrounds run edge to edge
      while text stays clear of the notch.

   3. Needing two taps to place a call
      iOS spends the first tap resolving :hover on elements that
      have hover styles, and reserves a second for double-tap
      zoom. touch-action:manipulation removes the zoom gesture and
      (hover:none) removes the hover styles, so one tap fires.

   4. FR "Appelez maintenant" touching the logo
      18 characters vs 8 for "Call now". Short label on mobile.

   5. Sticky bar slightly too tall.
   ============================================================ */

/* ---- 1. never let iOS resize text on its own ---- */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---- 2. safe areas: backgrounds edge to edge, content inset ---- */
.urgency-band {
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}
header .container {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  box-sizing: border-box;
}
.sticky-call {
  padding-left: max(10px, env(safe-area-inset-left));
  padding-right: max(10px, env(safe-area-inset-right));
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
@media (max-width: 1101px) {
  nav ul {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}
/* section content clears the notch in landscape without the
   background stopping short */
@media (orientation: landscape) {
  .content, .features, .about, .portfolio, .team, .reviews,
  .cta-band, .footer-nap, .trust-strip, .notfound, nav.crumbs {
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
  .hero { padding-left: max(18px, env(safe-area-inset-left));
          padding-right: max(18px, env(safe-area-inset-right)); }
}
/* scrollbar-gutter:stable was reserving ~15px on the right. Where the
   browser uses overlay scrollbars (macOS, some Chrome configs) that gutter
   is empty and shows html's white background as a visible strip down the
   edge. Removed. The layout shift it was preventing (when a modal locks
   scrolling) is handled properly in main.js instead, by padding the body by
   the measured scrollbar width for exactly as long as the lock lasts. */
html { scrollbar-gutter: auto; }
html, body { background-color: #fff; }
body.scroll-locked { overflow: hidden; }

/* ---- 3. single-tap activation ---- */
a, button, [role="button"], summary,
.portfolio-img, .hamburger, .call-button, .sticky-call,
.btn-urgent, .btn-ghost, .urgence-num, .call-modal__num, .lang-switch {
  touch-action: manipulation;
}
/* On any device without a real pointer, remove every hover style.
   iOS reports hover:none, so this is the authoritative guard —
   .is-touch from main.js is the belt-and-braces companion. */
@media (hover: none) {
  a:hover, button:hover, .feature-box:hover, .linkgrid a:hover,
  .region:hover, .symptom:hover, .portfolio-img:hover,
  .team-member img:hover, nav ul li a:hover, nav ul li:hover,
  .btn-urgent:hover, .btn-ghost:hover, .call-button:hover,
  .faq summary:hover, .footer-nap a:hover, .notfound .linkgrid a:hover {
    filter: none;
  }
  nav ul li a:hover { color: #fff; }
  nav ul li a[aria-current="page"]:hover { color: var(--accent); }
  nav ul li a[aria-current="page"][href="/"]:hover,
  nav ul li a[aria-current="page"][href="/en/"]:hover { color: #fff; }
  nav ul li:hover { background: transparent !important; }
  .feature-box:hover, .region:hover, .symptom:hover { box-shadow: var(--shadow-sm); }
  .linkgrid a:hover { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-sm); }
  .notfound .linkgrid a:hover { background: #1a1f26; border-color: #2b333d; box-shadow: none; }
  .portfolio-img:hover, .team-member img:hover { box-shadow: none; }
}

/* ---- 4. shorter call-button label on small screens ---- */
.cb-short { display: none; }
@media (max-width: 1101px) {
  .cb-long  { display: none; }
  .cb-short { display: inline; }
  .call-button { padding: 9px 14px; font-size: .88rem; }
  nav img#logo { margin-right: 14px; }
  .header-right { gap: 8px; }
}
@media (max-width: 480px) {
  .call-button { padding: 8px 12px; font-size: .84rem; }
  nav img#logo { margin-right: 10px; }
  .header-right { gap: 6px; }
}

/* ---- 5. sticky bar trimmed ---- */
@media (max-width: 900px) {
  .sticky-call { padding-top: 11px; font-size: .99rem; }
  .sticky-call small { font-size: .66rem; margin-top: 1px; }
  body { padding-bottom: 66px; }
}
@media (max-width: 480px) {
  .sticky-call { padding-top: 10px; font-size: .95rem; }
  body { padding-bottom: 62px; }
}

/* ============================================================
   45. TAPS FAILING AFTER A SCROLL  (round 16)
   ============================================================
   Reported: on a real phone, tapping a call button right after
   scrolling often needs a second tap. Three causes, all fixed here.

   CAUSE 1 — the reveal animation moved layout.
   `.fade-in` animated `transform: translateY(30px) -> 0`, so
   revealing a section shifted everything below it up by 30px. The
   scroll sweep reveals sections as you scroll, so a reveal firing
   in the same moment as your tap slid the button out from under
   your finger and the tap landed on empty space. The fade is now
   OPACITY ONLY. Nothing on this site moves during a reveal.

   CAUSE 2 — the fixed bars were not on their own layer.
   `header` already had translateZ(0) + will-change, but the
   urgency band and the sticky call bar did not. iOS re-rasterizes
   un-promoted fixed elements during momentum scrolling and can
   drop touches that land on them mid-repaint. The sticky call bar
   is the most-tapped element on the site, so this mattered most
   exactly where it hurt most.

   CAUSE 3 — no visual confirmation a tap registered.
   tap-highlight was suppressed, so even a successful tap looked
   like nothing happened, which invites a second tap. Explicit
   :active states now respond instantly.
   ============================================================ */

/* ---- 1. reveals never move layout ---- */
.fade-in {
  opacity: 0;
  transform: none !important;
  transition: opacity .55s ease-out !important;
}
.fade-in.visible { opacity: 1; transform: none !important; }
.hero h1, .hero p, .hero .btn,
.hero .eyebrow, .hero .hero-actions {
  transform: none !important;
  transition: opacity .7s ease-out !important;
}
.hero.visible h1, .hero.visible p, .hero.visible .btn,
.hero.visible .eyebrow, .hero.visible .hero-actions { opacity: 1; }

/* ---- 2. promote the fixed bars so touches land during scroll ---- */
.urgency-band,
.sticky-call {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ---- 3. instant, visible tap feedback ---- */
.sticky-call:active {
  background-color: var(--urgent-dark);
  background-image: none;
}


.urgence-num:active { color: #fff; }
.urgency-band a:active { text-decoration-color: #fff; }
.linkgrid a:active, .feature-box:active { background: #f4f6f8; }
.notfound .linkgrid a:active { background: #1d242c; }
.faq summary:active { color: var(--urgent); }
nav ul li a:active { color: var(--accent); }
/* a soft system highlight is better than none on the primary actions */
.sticky-call, .btn-urgent, .call-button, .urgence-num, .call-modal__num {
  -webkit-tap-highlight-color: rgba(255, 255, 255, .14);
}

/* ============================================================
   46. NO `filter` ON INTERACTIVE STATES  (round 17)
   ============================================================
   Reported: after scrolling, the header "Appeler" button and the
   CTA "Appelez maintenant" button still needed two taps, while the
   sticky bottom bar worked first time.

   The difference was the :active style:

     .sticky-call:active  -> background-color   (works)
     .call-button:active  -> filter: brightness (fails)
     .btn-urgent:active   -> filter: brightness (fails)

   `filter` promotes the element onto a NEW compositor layer at the
   exact moment the finger lands. Creating that layer forces a
   repaint, and iOS drops the pending click inside that window.
   A background-colour change is paint-only and costs nothing, so
   the sticky bar was never affected.

   Every interactive state on every button is now background,
   border or box-shadow only. No filter, no opacity, no transform
   anywhere a finger lands. Images keep a shadow-only hover.
   ============================================================ */

/* ---- primary red buttons ---- */
.btn-urgent,
.btn-urgent:hover,
.btn-urgent:focus,
.btn-urgent:focus-visible,
.btn-urgent:active {
  filter: none !important;
}
.btn-urgent:hover {
  background-color: #d4472f;
  background-image: linear-gradient(180deg, #d9492f 0%, #c33b28 100%);
  box-shadow: 0 6px 20px rgba(192,57,43,.42);
}
.btn-urgent:active {
  background-color: var(--urgent-dark);
  background-image: linear-gradient(180deg, #a5281b 0%, #972317 100%);
  box-shadow: 0 2px 8px rgba(192,57,43,.34);
}

/* ---- header call button ---- */
.call-button,
.call-button:hover,
.call-button:focus,
.call-button:focus-visible,
.call-button:active {
  filter: none !important;
}
.call-button:hover  { background-color: #f7a72a; }
.call-button:active { background-color: #d9860a; }

/* ---- ghost button ---- */
.btn-ghost:active { background: rgba(255,255,255,.22); }

/* ---- images: shadow only, never filter or opacity ---- */
.portfolio-grid img, .portfolio-img,
.portfolio-grid img:hover, .portfolio-img:hover,
.portfolio-grid img:focus, .portfolio-img:focus,
.portfolio-grid img:active, .portfolio-img:active,
.team-member img, .team-member img:hover, .team-member img:active {
  filter: none !important;
  opacity: 1 !important;
}
.portfolio-img:hover {
  box-shadow: 0 0 0 3px rgba(243,156,18,.55), var(--shadow-md);
}
.portfolio-img:active {
  box-shadow: 0 0 0 3px rgba(243,156,18,.8), var(--shadow-md);
}
.team-member img:hover { box-shadow: 0 14px 34px rgba(0,0,0,.42); }

/* ---- the big phone numbers ---- */
.urgence-num, .urgence-num:hover, .urgence-num:active,
.call-modal__num, .call-modal__num:hover, .call-modal__num:active {
  filter: none !important;
}
.urgence-num:active { color: #ffd9a0; }
.call-modal__num:active { color: var(--urgent-dark); }

/* ---- band link ---- */
.urgency-band a, .urgency-band a:hover, .urgency-band a:active { filter: none !important; }

/* ---- and a blanket guard: nothing a finger can land on may use
        filter in an interactive state ---- */
a:active, button:active, [role="button"]:active, summary:active,
a:hover, button:hover, [role="button"]:hover {
  filter: none !important;
}