/* ==========================================================================
   Navbar
   ==========================================================================
   Ported from web/components/site/navbar.tsx, the largest component in the
   build. Three surfaces share one set of data:

     1. the bar itself, sticky at the top of every page
     2. the desktop mega-menu, a floating card on hover or click
     3. the mobile panel, the same content inside a <details>

   Behaviour lives in assets/js/navbar.js. This file is presentation only.
   ========================================================================== */

.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--background);
  transition: background-color 300ms ease, color 300ms ease;
}

/* Any section can flip the sticky header to its dark palette while it sits
   underneath, with data-navbar-theme="dark". navbar.js adds .dark here. */
@media (prefers-reduced-motion: reduce) {
  .navbar { transition: none; }
}

.navbar__inner {
  display: flex;
  height: 4.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* --------------------------------------------------------------------------
   Logo. logo-black.png is the only mark we hold, so the dark state inverts it
   with a filter rather than loading a second asset. The realisations cover
   tiles use the same trick.
   -------------------------------------------------------------------------- */
.navbar__logo {
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
}

.navbar__logo-img {
  height: 1.75rem;
  width: auto;
  transition: filter 300ms ease;
}

.navbar.dark .navbar__logo-img {
  filter: brightness(0) invert(1);
}

@media (prefers-reduced-motion: reduce) {
  .navbar__logo-img { transition: none; }
}

/* --------------------------------------------------------------------------
   Desktop nav
   -------------------------------------------------------------------------- */
.navbar__nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
}

.navbar__cta { display: none; align-items: center; }

@media (min-width: 1024px) {
  .navbar__nav { display: flex; }
  .navbar__cta { display: flex; }
}

.navbar__expertises { position: relative; }

.navbar__trigger,
.navbar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--radius-md);
  padding: 0.5rem 0.75rem;
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--text-label-weight);
  color: var(--foreground);
  transition: color 150ms ease;
}

.navbar__trigger:hover,
.navbar__link:hover { color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  .navbar__trigger, .navbar__link { transition: none; }
}

.navbar__chevron {
  width: 1rem;
  height: 1rem;
  color: var(--subtle-foreground);
  transition: transform 150ms ease;
}

.navbar__trigger[aria-expanded="true"] .navbar__chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .navbar__chevron { transition: none; }
}

/* --------------------------------------------------------------------------
   Mobile trigger. 44px square, which is the minimum comfortable touch target.
   -------------------------------------------------------------------------- */
.navbar__burger {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--foreground);
}

.navbar__burger svg { width: 1.25rem; height: 1.25rem; }

/* Which glyph shows is driven by aria-expanded, so the button's accessible
   state and its icon can never disagree. */
.navbar__burger .navbar__burger-close,
.navbar__burger[aria-expanded="true"] .navbar__burger-open { display: none; }
.navbar__burger[aria-expanded="true"] .navbar__burger-close { display: block; }

@media (min-width: 1024px) {
  .navbar__burger { display: none; }
}

/* --------------------------------------------------------------------------
   Mega-menu. Floats below the bar and does not push layout, so opening it
   never reflows the page behind it.
   -------------------------------------------------------------------------- */
.navbar__mega {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  display: none;
}

@media (min-width: 1024px) {
  .navbar__mega[data-open="true"] { display: block; }
}

/* The menu scrolls on short screens (overflow-y: auto below), and a scroll
   container clips the panel's shadow at its edge. The shadow reaches 40px
   below the panel, so the bottom padding gives it room to fade: without it
   the shadow ended in a flat grey band (Hulusi, 15 Sept, "so broken"). */
.navbar__mega-inner { padding-top: 0.75rem; padding-bottom: 4rem; }

.navbar__mega-row {
  margin-inline: auto;
  display: flex;
  max-width: none;
  align-items: stretch;
  gap: 1rem;
}

.navbar__mega-panel {
  position: relative;
  flex: 1;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-subtle);
  background-color: var(--surface);
  padding: 1.5rem;
  box-shadow: var(--shadow-xl);
}


/* --------------------------------------------------------------------------
   Mobile panel
   -------------------------------------------------------------------------- */
.navbar__mobile {
  display: none;
  max-height: calc(100dvh - 4.5rem);
  overflow-y: auto;
  border-top: 1px solid var(--border-subtle);
  background-color: var(--background);
}

.navbar__mobile[data-open="true"] { display: block; }

@media (min-width: 1024px) {
  .navbar__mobile[data-open="true"] { display: none; }
}

.navbar__mobile-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-block: 1.5rem;
}

.navbar__mobile-summary {
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.5rem;
  font-size: var(--text-label-lg-size);
  line-height: var(--text-label-lg-line);
  font-weight: var(--text-label-lg-weight);
  color: var(--foreground);
  list-style: none;
}

/* Both are needed: Safari uses the pseudo-element, everyone else list-style. */
.navbar__mobile-summary::-webkit-details-marker { display: none; }
.navbar__mobile-summary::marker { content: ""; }

.navbar__mobile-details[open] .navbar__chevron { transform: rotate(180deg); }

.navbar__mobile-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1rem;
}

.navbar__estimate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  background-color: var(--background-subtle);
  padding: 1rem;
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--text-label-weight);
  color: var(--foreground);
}

.navbar__estimate-label { display: flex; align-items: center; gap: 0.5rem; }
.navbar__estimate svg { width: 1rem; height: 1rem; color: var(--brand); }

.navbar__mobile-link {
  padding-block: 0.5rem;
  font-size: var(--text-label-lg-size);
  line-height: var(--text-label-lg-line);
  font-weight: var(--text-label-lg-weight);
  color: var(--foreground);
}

.navbar__phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.5rem;
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--text-label-weight);
  color: var(--muted-foreground);
}

.navbar__phone svg { width: 1rem; height: 1rem; }

.navbar__mobile .navbar__button { width: 100%; }

/* Keep every destination reachable on short screens. */
.navbar__mega {
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
}

@media (max-width: 1023px) {
  .navbar__mobile .expertise-item,
  .navbar__mobile a.chip { min-height: 2.75rem; align-items: center; }
}

/* One header geometry on the homepage, service pages and other main pages. */
.navbar { border-bottom: 1px solid var(--ed-line, var(--border)); }
.navbar .container {
  width: min(100% - var(--ed-gutter, clamp(1.5rem, 4vw, 3rem)) * 2, var(--ed-container, 75rem));
  max-width: var(--ed-container, 75rem);
  padding-inline: 0;
}
.navbar__inner { height: 5rem; gap: .75rem; }
.navbar__logo { flex: 0 0 auto; }
/* Right region of the bar, holding the CTA, so the bar lays out as three
   regions. The FR/EN toggle that lived here was removed on 16 Sept; English
   stays reachable through ?lang=en links. */
.navbar__end { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.navbar__logo-img { height: 2rem; width: 8.708rem; object-fit: contain; }
.navbar__nav { flex: 0 0 auto; }
/* Links and CTA share the 1rem label size (Hulusi, 16 Sept): 14px read small
   against the logo and the 16px page copy. */
.navbar__trigger, .navbar__link { padding-inline: .5rem; white-space: nowrap; font-size: 1rem; }
.navbar__cta { flex: 0 0 auto; }
.navbar__project-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; gap: .625rem; padding: 0 1.25rem;
  border: 1px solid var(--brand); border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: 1rem; font-weight: 500; line-height: 1.2; white-space: nowrap;
}
.navbar__project-icon { display: inline-grid; place-items: center; flex: 0 0 auto; }
.navbar__project-icon svg { width: 1.125rem; height: 1.125rem; }
.navbar__burger { background: var(--ed-ink, var(--foreground)); color: var(--surface); border-radius: .75rem; flex: 0 0 2.75rem; }
/* Items sit in a flex row with one gap (Hulusi, 15 Sept). The previous
   fixed grid columns left a gap that depended on word length: 16px between
   Expertises and Réalisations, 54px between Méthode and À propos. */
@media (min-width:1024px) {
  .navbar__nav { display: flex; gap: .5rem; }
  /* Links centred in the bar (Hulusi, 16 Sept): three regions, logo | links |
     CTA, the outer two sharing the free space equally. The right
     region is wider than the logo, so at 1024px it keeps its content width and
     the links sit a few px left of true centre rather than overflowing. */
  .navbar__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .navbar__logo { justify-self: start; }
  .navbar__end { justify-self: end; margin-left: 0; }
}
@media (max-width:1023px) { .navbar__inner { height: 4.5rem; } }

/* Header buttons follow the 14 Sept button rule: a text-only pill, no icon.
   navbar.css defines them itself because five pages do not load editorial.css
   and the header has to look the same on every page. Same geometry as
   .ed-button: 3.125rem tall, 1.375rem side padding, 1rem label. */
.navbar__button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.125rem; padding: 0 1.375rem; border-radius: 999px;
  border: 1px solid var(--brand); background: var(--brand); color: #fff;
  font-size: 1rem; line-height: 1.3; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.navbar__button--block { width: 100%; }
.navbar__mega .navbar__button { margin-top: .5rem; width: 100%; }
@media (hover:hover) and (pointer:fine) {
  .navbar__button:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
}
@media (prefers-reduced-motion: reduce) { .navbar__button { transition: none; } }

/* --------------------------------------------------------------------------
   Peek deck (assets/js/peek-deck.js): three project cards fanning out beside
   the cursor while an expertise is hovered. Fixed and body-mounted; the JS
   sets the position, the fan lean and each card's transform inline.
   -------------------------------------------------------------------------- */
.peek-deck {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: transform 200ms ease-out, opacity 150ms ease, visibility 0s 150ms;
}
.peek-deck[data-open="true"] { opacity: 1; visibility: visible; transition: transform 200ms ease-out, opacity 150ms ease; }
.peek-deck__fan { position: relative; width: 240px; height: 120px; transition: transform 200ms ease-out; }
.peek-deck__card {
  position: absolute; inset: 0; margin: auto; width: 134px; height: 84px;
  object-fit: cover; border-radius: .5rem; border: 2px solid #fff;
  box-shadow: var(--shadow-xl); background: var(--surface);
  opacity: 0; transform: scale(.9);
  transition: transform 350ms cubic-bezier(.22, 1, .36, 1), opacity 350ms cubic-bezier(.22, 1, .36, 1);
}
.peek-deck[data-open="true"] .peek-deck__card { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .peek-deck { display: none; } }

/* Phone in the bar (meeting of 23 Sept: "fit the phone number into the top
   navigation"). A quiet text link beside the CTA, so the CTA stays the one
   call to action. The number shows from 1280px; between 1024 and 1279 the
   bar has no room for it, so the icon alone keeps the call one tap away.
   Below 1024 the icon sits beside the menu button, the same square, so a
   phone visitor can call without opening the menu. */
.navbar__tel { display: none; }
@media (max-width: 1023px) {
  .navbar__tel {
    display: inline-grid; place-items: center; flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem;
    border: 1px solid var(--ed-line, var(--border-subtle)); border-radius: .75rem;
    color: var(--brand); background: var(--surface, #fff);
  }
  .navbar__tel svg { width: 1.25rem; height: 1.25rem; }
  .navbar__tel span { display: none; }
  .navbar__tel:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
}
@media (min-width: 1024px) {
  .navbar__tel {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 2.75rem; min-width: 2.75rem; padding: 0 .5rem; border-radius: 999px;
    color: var(--ed-ink, var(--foreground)); font-size: 1rem; font-weight: 500; line-height: 1.2;
    white-space: nowrap; text-decoration: none; font-variant-numeric: tabular-nums;
  }
  .navbar__tel svg { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; color: var(--brand); }
  .navbar__tel span { display: none; }
  .navbar__tel:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
}
/* Hulusi, 24 Sept: the number has to catch the eye (Lucas wants calls). It
   is an outlined pill beside the CTA: present, but second to it. */
@media (min-width: 1024px) {
  .navbar__tel { border: 1.5px solid var(--brand); padding: 0 1.125rem 0 .875rem; min-height: 2.75rem; color: var(--ed-ink, var(--foreground)); background: #fff; transition: background-color 150ms ease; }
  .navbar__tel svg { color: var(--brand); }
}
@media (hover: hover) and (pointer: fine) { .navbar__tel:hover { background: #eef3ff; } }
@media (min-width: 1280px) {
  .navbar__tel span { display: inline; }
  /* With the number in, the right region is wider than the logo, so the links
     sit left of true centre; this gap keeps them clear of the phone, which
     then reads with the CTA as one contact cluster, not as a sixth link. */
  .navbar__inner { column-gap: 2.5rem; }
  .navbar__end { gap: 1rem; }
}
@media (hover: hover) and (pointer: fine) {
  .navbar__tel:hover span { text-decoration: underline; text-underline-offset: .2em; }
}

/* Wide bar (Hulusi, 24 Sept): the header spans the window with a side
   gutter, capped at 90rem (1440px) so it does not run apart on big screens instead of sitting in the content column, so the logo
   and the contact cluster move to the edges and the links get room. */
@media (min-width: 1024px) {
  :root .navbar .container.navbar__inner { width: 100%; max-width: 90rem; margin-inline: auto; padding-inline: clamp(1.5rem, 2.5vw, 2.5rem); }
}

/* The phone, round 2 (Hulusi: still not catching the eye). A dark pill with
   a live dot: it reads as "someone answers now", a different signal from the
   blue CTA, so the two don't compete. The dot pulses slowly; still under
   reduced motion. */
@media (min-width: 1024px) {
  .navbar__tel {
    border: 0; background: var(--ed-ink, #121417); color: #fff; padding: 0 1.125rem 0 .875rem; gap: .625rem;
  }
  .navbar__tel svg { color: #fff; }
  .navbar__tel::before {
    content: ""; flex: 0 0 auto; width: .5rem; height: .5rem; border-radius: 50%; background: #2ecc71;
    box-shadow: 0 0 0 0 rgb(46 204 113 / .6); animation: tel-live 2.4s ease-out infinite;
  }
}
@media (hover: hover) and (pointer: fine) { .navbar__tel:hover { background: #2a2e35; } }
@keyframes tel-live { 0% { box-shadow: 0 0 0 0 rgb(46 204 113 / .55); } 70%, 100% { box-shadow: 0 0 0 .5rem rgb(46 204 113 / 0); } }
@media (prefers-reduced-motion: reduce) { .navbar__tel::before { animation: none; } }


/* ---------- The CTA waits, the phone leads (Hulusi, 24 Sept) ---------- */
@media (min-width: 1024px) {
  /* Hidden only on pages whose hero carries its own CTA (the homepage), so a
     script that fails to load can never take the CTA away elsewhere (7 Oct). */
  .navbar .navbar__cta { transition: max-width 450ms cubic-bezier(.2, .8, .2, 1), opacity 250ms ease-out, transform 450ms cubic-bezier(.2, .8, .2, 1); }
  body:has(#hero .hero__actions a, #hero [data-hero-cta]) .navbar:not([data-cta]) .navbar__cta { overflow: hidden; max-width: 0; opacity: 0; transform: translateX(.75rem); pointer-events: none;
    transition: max-width 450ms cubic-bezier(.2, .8, .2, 1), opacity 250ms ease-out, transform 450ms cubic-bezier(.2, .8, .2, 1); }
  .navbar[data-cta] .navbar__cta { max-width: 20rem; opacity: 1; transform: none; pointer-events: auto; }
  body:has(#hero .hero__actions a, #hero [data-hero-cta]) .navbar:not([data-cta]) .navbar__end { gap: 0; }

  /* The phone: two lines, a promise over the number, the handset in a
     round badge that rings gently every few seconds. */
  /* Same box as the CTA: 3rem high, pill. The handset sits in a green disc
     with a soft halo that breathes, no wobble. */
  .navbar__tel { height: 3rem; min-height: 3rem; padding: 0 1.25rem 0 .3125rem; gap: .75rem; border-radius: 999px; }
  .navbar__tel::before { display: none; }
  .navbar__tel svg { box-sizing: border-box; flex: 0 0 auto; width: 2.375rem; height: 2.375rem; padding: .6rem; border-radius: 50%; background: #22c55e; color: #fff; stroke-width: 2.25; animation: tel-halo 2.8s ease-out infinite; }
  .navbar__tel span { display: grid; line-height: 1.15; text-align: left; }
  .navbar__tel span::before { content: "Un expert vous répond"; font-size: .8125rem; font-weight: 400; color: #b7bcc4; }
}
/* 1024 to 1279px: the links tighten so six links, the phone and the CTA fit
   beside a full-size logo (14 Oct 2026, Équipe joined the bar). The phone
   keeps its number on one line and drops only the "Un expert vous répond"
   line (21 Oct, Hulusi: the folded icon read as a green box in a black box). */
@media (min-width: 1024px) and (max-width: 1279px) {
  .navbar__tel { padding: 0 1rem 0 .3125rem; gap: .5rem; font-size: .9375rem; }
  .navbar__tel span::before { display: none; }
  .navbar__trigger, .navbar__link { padding-inline: .375rem; }
}
/* Under 1160px the number no longer fits beside the CTA: the phone becomes a
   single green call button, the same 3rem square, its number still the
   accessible name. */
@media (min-width: 1024px) and (max-width: 1159px) {
  .navbar__tel { width: 3rem; padding: 0; gap: 0; background: #22c55e; }
  .navbar__tel span { display: none; }
  .navbar__tel svg { width: 3rem; height: 3rem; padding: .8125rem; background: transparent; }
}
@media (min-width: 1024px) and (max-width: 1159px) and (hover: hover) and (pointer: fine) { .navbar__tel:hover { background: #16a34a; } }
/* The logo never shrinks to make room (it sat at a third of its size at 1024px). */
.navbar__logo-img { max-width: none; }
@keyframes tel-halo { 0% { box-shadow: 0 0 0 0 rgb(34 197 94 / .55); } 70%, 100% { box-shadow: 0 0 0 .5rem rgb(34 197 94 / 0); } }
@media (prefers-reduced-motion: reduce) { .navbar__tel svg { animation: none; } .navbar .navbar__cta { transition: none; } }

/* The CTA takes exactly the phone's box. */
@media (min-width: 1024px) {
  .navbar .navbar__project-link { height: 3rem; min-height: 3rem; padding: 0 1.375rem; border-radius: 999px; }
}

/* Links left-aligned beside the logo (Hulusi, 30 Sept): centred, they sat
   close to the phone and CTA and read as off-centre. Logo | links | end. */
@media (min-width: 1024px) {
  :root .navbar .navbar__inner { grid-template-columns: auto 1fr auto; column-gap: 0; }
  :root .navbar .navbar__nav { justify-self: start; margin-left: clamp(2rem, 4vw, 3.5rem); }
  :root .navbar .navbar__end { justify-self: end; margin-left: 1.5rem; }
}