/* ============================================================
   MOBILE — Coconut
   Dedicated phone experience: real nav (burger + drawer),
   sticky action bar, and a tightened type/spacing tier.
   Loaded AFTER styles.css + brutalist.css so it wins.
   ============================================================ */

/* ---- Burger button: hidden on desktop, shown on tablet/phone ---- */
.nav-burger {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  flex: 0 0 auto;
  transition: border-color .2s ease, background .2s ease;
}
.nav-burger span {
  display: block;
  width: 18px;
  height: 1.6px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .28s cubic-bezier(.4,.1,.2,1), opacity .2s ease;
}
.nav-burger.is-open { border-color: var(--ink); }
.nav-burger.is-open span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-burger.is-open span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* ---- Mobile drawer + scrim (off by default) ---- */
.mobile-drawer {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 49;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform .34s cubic-bezier(.2,.7,.2,1), opacity .26s ease, visibility 0s linear .34s;
  max-height: calc(100dvh - 64px);
  overflow-y: auto;
}
.mobile-drawer.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: transform .38s cubic-bezier(.2,.7,.2,1), opacity .3s ease, visibility 0s;
  box-shadow: 0 26px 50px -28px rgba(var(--ink-rgb), 0.45);
}
.mobile-drawer-inner {
  padding: 22px 28px 30px;
  display: flex;
  flex-direction: column;
}
.drawer-eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-bottom: 6px;
}
.drawer-links {
  display: flex;
  flex-direction: column;
}
.drawer-link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 2px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: var(--display-weight);
  letter-spacing: -0.025em;
  color: var(--ink);
  /* slide-in only while drawer is open */
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.2,1), color .2s ease;
}
.mobile-drawer.is-open .drawer-link { opacity: 1; transform: translateX(0); }
.drawer-link-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--tomato);
  letter-spacing: 0.04em;
}
.drawer-link-arrow {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--ink-30);
  transition: transform .2s ease, color .2s ease;
}
.drawer-link:active { color: var(--tomato); }
.drawer-link:active .drawer-link-arrow { color: var(--tomato); transform: translateX(4px); }
.drawer-foot {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.drawer-cta {
  justify-content: center;
  width: 100%;
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 16px;
}
.drawer-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-65);
}
.drawer-meta a { transition: color .2s ease; }
.drawer-meta a:active { color: var(--tomato); }

.drawer-scrim {
  position: fixed;
  inset: 64px 0 0;
  z-index: 48;
  background: rgba(var(--ink-rgb), 0.32);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
  border: 0;
  padding: 0;
}
.drawer-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .3s ease, visibility 0s;
}

body.drawer-open { overflow: hidden; }

/* ============================================================
   STICKY MOBILE ACTION BAR
   ============================================================ */
.mobile-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 47;
  gap: 10px;
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
  /* frosted bar that stays in the warm cream family: --surface is the design
     system's "elevated" tone (a touch darker than --bg in light mode, a touch
     lighter in dark), so the bar reads as a distinct layer without the muddy,
     aggressive look of mixing ink in. A hair of translucency + blur gives a soft
     frosted-glass feel; a faint hairline + soft top shadow lift it off the page. */
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  -webkit-backdrop-filter: saturate(135%) blur(14px);
  backdrop-filter: saturate(135%) blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 28px -24px rgba(var(--ink-rgb), 0.35);
}
/* compact circular icon-only call button */
.mobile-bar-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: var(--bg);
}
.mobile-bar-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 1 auto;
  padding: 13px 20px;
  border-radius: 999px;
  background: var(--tomato);
  color: #ffffff;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
}
.mobile-bar-cta .arrow { font-family: var(--font-mono); font-size: 13px; opacity: 0.9; }
.mobile-bar-call:active { border-color: var(--ink); }
.mobile-bar-cta:active { background: var(--tomato-2); }

/* ============================================================
   TABLET / SMALL-DESKTOP — show burger, hide inline menu
   (covers the 901–1000px gap where the old menu just vanished)
   ============================================================ */
@media (max-width: 1000px) {
  .nav-inner { grid-template-columns: 1fr auto; }
  .nav-burger { display: inline-flex; }
  /* the devis CTA lives in the drawer + sticky bar on mobile/tablet */
  .nav-cta-btn { display: none; }
}

/* ============================================================
   PHONE + TABLET TIER — ≤ 1000px
   Tablets get the same arrangement as phones (per request). Spacings are
   expressed in % where it helps (relative to width → scales smoothly from
   phone to tablet, and is easy to tweak). Section/hero padding uses % too:
   on a full-width section, % resolves against the viewport width.
   ============================================================ */
@media (max-width: 1000px) {
  /* show the sticky bar; clear it with body padding so the footer
     and last section aren't hidden behind it */
  .mobile-bar { display: flex; }
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }

  .nav-cta { gap: 8px; }

  /* container + rhythm — side padding in % so it scales with the screen */
  .container { padding: 0 5.5%; }
  :root {
    --pad-section: 6%;
    --pad-hero-top: 6%;
    --pad-hero-bot: 5.5%;
    --gap-grid: 6%;
  }
  [data-density="compact"] { --pad-section: 8%; --pad-hero-top: 4%; --pad-hero-bot: 4.5%; }
  [data-density="spacieux"] { --pad-section: 8%; --pad-hero-top: 7.5%; --pad-hero-bot: 7%; }

  /* typography */
  .h-display { font-size: 42px; line-height: 1.02; letter-spacing: -0.025em; }
  [data-type="brutaliste"] .h-display { font-size: 38px; }
  .h-1 { font-size: 31px; }
  .h-2 { font-size: 27px; }
  .h-3 { font-size: 23px; }

  /* hero */
  .hero h1 { max-width: 100% !important; margin-top: 4% !important; }
  .hero-sub { font-size: 16px; margin: 3.5% 0 5%; max-width: 100%; }
  .hero-ctas { gap: 10px; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .hero-ctas .btn--ghost { justify-content: center; }
  /* the "Demander un devis" CTA is already in the drawer + sticky bar — drop the
     repetitive one in the first section on phones, keep "Voir les services". */
  .hero-ctas .btn--primary { display: none; }

  /* pill / eyebrow keep size but allow wrap */
  .eyebrow { gap: 10px; }

  /* trust strip — compact 2×2 so it reads fast without eating the screen.
     The desktop version is a full-bleed strip framed by the section's own
     top/bottom borders, while the internal grid lines are inset by the container
     padding — so on mobile the outer and inner lines don't align and it looks
     uneven. Fix: drop the section borders and turn the GRID itself into one
     self-contained, evenly-bordered box (every line is 1px var(--line), inset
     consistently), with a single internal cross. */
  .trust { border-top: 0; border-bottom: 0; }
  .trust-grid {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  .trust-cell { padding: 8% 8%; gap: 3px; }
  .trust-num { font-size: 24px; }
  .trust-label { font-size: 9.5px; letter-spacing: 0.04em; line-height: 1.3; }
  /* internal cross only: mid vertical (cells 1 & 3 right) + mid horizontal
     (cells 1 & 2 bottom). The outer edges are the grid border above. */
  .trust-cell:nth-child(1),
  .trust-cell:nth-child(3) { border-right: 1px solid var(--line); }
  .trust-cell:nth-child(2),
  .trust-cell:nth-child(4) { border-right: 0; }
  .trust-cell:nth-child(1),
  .trust-cell:nth-child(2) { border-bottom: 1px solid var(--line); }
  .trust-cell:nth-child(3),
  .trust-cell:nth-child(4) { border-bottom: 0; }

  /* service chapters */
  /* GOAL: compact, classy service blocks on phones — the illustration sits
     BESIDE the skills list (not full-width) to save vertical space.
     The blurb + bullets live INSIDE .chapter-copy while the illustration is its
     sibling .chapter-photo, so we flatten both wrappers with display:contents
     (every piece becomes a direct grid item of .chapter) then place each piece by
     area. (FadeUp wraps each piece in a .fade-up div — :has() targets them.) */
  .chapter {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    column-gap: 4.5%;
    row-gap: 0.5%;
    /* the illustration stretches to match the height of the bullet list beside it
       (per request) — both share the "ill bullets" row and stretch to its track. A
       min-height floor keeps it from collapsing when a service has few bullets. */
    align-items: stretch;
    grid-template-areas:
      "head    head"
      "title   title"
      "blurb   blurb"
      "ill     bullets"
      "foot    foot";
  }
  .chapter-copy,
  .chapter--flip .chapter-copy,
  .chapter-photo,
  .chapter--flip .chapter-photo { display: contents; }

  .chapter-copy > .fade-up:has(.chapter-head)  { grid-area: head; }
  .chapter-copy > .fade-up:has(.chapter-title) { grid-area: title; }
  .chapter-copy > .fade-up:has(.chapter-blurb) { grid-area: blurb; margin-bottom: -4%; }
  /* illustration matches the bullet-list height: both stretch to the shared row.
     min-height is a floor so it never collapses when a service has few bullets. */
  .chapter-photo > .fade-up                    { grid-area: ill; width: 100%; align-self: stretch; min-height: clamp(130px, 40vw, 170px); }
  .chapter-copy > .fade-up:has(.bullets)       { grid-area: bullets; align-self: stretch; }
  .chapter-copy > .fade-up:has(.chapter-foot)  { grid-area: foot; margin-top: 1%; }

  /* the visual fills the (clamped) illustration cell */
  .photo,
  .chapter-photo .photo,
  .chapter-photo .dev-ill { height: 100%; }

  /* #1: a tinted frame on every illustration — a darker shade of each card's own
     base colour, so they read as one family. The gradient cards (sage/cool/warm)
     get a 2px frame; the dev "live build" card already carries its own inner
     browser chrome, so its outer frame is half as thick (1px) to keep it from
     reading heavier than the rest. */
  .chapter-photo .photo--sage,
  .chapter-photo .photo--cool,
  .chapter-photo .photo--warm { border-width: 2px; border-style: solid; }
  .chapter-photo .dev-ill     { border-width: 1px; border-style: solid; }
  .chapter-photo .photo--sage { border-color: color-mix(in srgb, var(--sage-b) 50%, #000); }
  .chapter-photo .photo--cool { border-color: color-mix(in srgb, var(--cool-b) 50%, #000); }
  .chapter-photo .photo--warm { border-color: color-mix(in srgb, var(--warm-b) 50%, #000); }
  .chapter-photo .dev-ill     { border-color: color-mix(in srgb, var(--rust-b) 50%, #000); }
  /* #4: keep the dev-illustration animation running on phones (service 01 has no
     3D model, just a light CSS animation — no battery concern). Reduced-motion is
     still honoured by the global block at the bottom of this file. */

  /* #5: the "live build" illustration is too detailed for the compact slot — its
     floating terminal + label overflow and get half-clipped. On phones we simplify:
     hide the terminal + corner label and let the browser mock fill the card with
     smaller chrome so every block fits. The build animation is preserved. */
  .chapter-photo .dev-ill .win.console,
  .chapter-photo .dev-ill .corner-label { display: none; }
  /* shrink the rust-gradient frame the browser mock floats on — at 8px it ate too
     much of the small card; 3px keeps just a hint of the rust card without the
     thick orange-cocoa border. */
  .chapter-photo .dev-ill .win.builder { inset: 3px; transform: none; }
  .chapter-photo .dev-ill .win-bar { height: 22px; padding: 0 8px; gap: 4px; }
  .chapter-photo .dev-ill .win-bar .dot { width: 6px; height: 6px; }
  /* keep the address pill on ONE line so it doesn't grow tall / overflow the bar */
  .chapter-photo .dev-ill .url-bar {
    font-size: 7px; padding: 1px 6px; margin-left: 5px; gap: 0;
    min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .chapter-photo .dev-ill .url-bar .lock { display: none; }
  .chapter-photo .dev-ill .progress { top: 22px; }
  .chapter-photo .dev-ill .builder-canvas { padding: 8px 9px 9px; gap: 6px; height: calc(100% - 22px); }

  /* bullets stack tight in their narrower column */
  .bullets { grid-template-columns: 1fr; gap: 0; margin-bottom: -3.5%; }
  .bullet { padding: 3.5% 0; font-size: 14px; }
  .bullet:nth-child(odd) { padding-right: 0; border-right: 0; }
  .bullet:nth-child(even) { padding-left: 0; }
  /* the last bullet's bottom border would double up with the chapter-foot's top
     border just under it — drop it */
  .bullet:last-child { border-bottom: 0; }

  .chapter-head { gap: 10px; margin-bottom: 2.5%; flex-wrap: wrap; }
  .chapter-title { margin-bottom: 3%; }
  .chapter-blurb { font-size: 15.5px; max-width: 100%; }
  .chapter-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .chapter-foot .btn { width: 100%; justify-content: center; }

  /* about */
  .about-people { grid-template-columns: 1fr; }
  .person--card { gap: 14px; }
  .about-manifeste-title, .about-editorial-title { font-size: 28px; }
  .about-manifeste-lead, .about-editorial-lead { font-size: 16px; }
  .roster-row { gap: 14px; padding: 3.5% 0; }
  .roster-name { font-size: 18px; }
  .avatar--lg { width: 72px; height: 72px; font-size: 34px; }

  /* pricing */
  .price-card { min-height: 0; padding: 6% 5.5%; }
  .price-amount { font-size: 40px; }
  .pricing-intro { margin-bottom: 5%; }

  /* zone */
  .zone-copy p { max-width: 100%; }

  /* services lead band: its desktop padding is a fixed 60px — tighten + scale */
  .services-lead { padding: 3.5% 0 6%; }

  /* contact */
  .contact-grid { gap: 2%; }
  .contact-copy .h-2 { margin: 3% 0 5%; max-width: 100%; }
  .form-card { padding: 6%; }
  .form-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .form-foot .btn { width: 100%; justify-content: center; }
  .radios { gap: 7px; }
  .radio-pill { padding: 9px 13px; }

  /* footer */
  .footer { padding: 9% 0 6%; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 6% 6%; margin-bottom: 7%; }
  .footer-bottom { flex-direction: column; gap: 8px; }

  /* legal pages */
  .legal { padding: 40px 0 64px; }
  .legal h2 { font-size: 20px; margin-top: 32px; }
  .legal-lead { font-size: 16px; }
}

/* ============================================================
   PHONE HERO — let the first screen breathe: the hero fills the
   viewport (minus the 64px nav) and its content is vertically
   centred, so the trust strip only shows once you start scrolling.
   ============================================================ */
@media (max-width: 640px) {
  .hero {
    min-height: calc(100svh - 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* optical centering: bias the block slightly upward so it doesn't feel like
       it's sinking toward the sticky bar */
    padding-bottom: 9%;
  }
  .hero h1 { margin-top: 6% !important; }
  .hero-sub { margin: 5% 0 9%; }
  /* CTA hugs its content and sits centred (not a full-width, form-like button). */
  .hero-ctas { justify-content: center; gap: 12px; }
  .hero-ctas .btn--ghost { width: auto; align-self: center; }
}

/* ============================================================
   SMALL PHONE — ≤ 420px
   ============================================================ */
@media (max-width: 420px) {
  .container { padding: 0 18px; }
  .h-display { font-size: 36px; }
  [data-type="brutaliste"] .h-display { font-size: 32px; }
  .h-1 { font-size: 27px; }
  .h-2 { font-size: 24px; }

  .drawer-link { font-size: 26px; padding: 15px 2px; }
  .mobile-drawer-inner { padding: 20px 22px 26px; }

  /* keep the compact 2×2 even on the tightest screens (don't stack to 4 tall) */
  .trust-cell { padding: 12px 10px; }
  .trust-grid {margin-bottom: 30px;}
  .trust-num { font-size: 22px; }

  .footer-grid { grid-template-columns: 1fr; gap: 26px; }

  .price-amount { font-size: 36px; }
  .mobile-bar { padding-left: 12px; padding-right: 12px; }
  .mobile-bar-call { min-width: 0; padding: 14px 14px; }
}

/* ============================================================
   3D ILLUSTRATIONS ON PHONES — <model-viewer>
   On phones we do NOT run the rotating WebGL model (battery + GPU).
   Two ways to wire it (see HANDOFF-mobile.md for the JS):

   • Approach A (recommended, no duplicate markup):
       <model-viewer poster="poster.webp" reveal="manual" …>
     + a tiny script that only calls dismissPoster() on desktop.
     On phones the .glb is never fetched — only the poster shows.

   • Approach B (duplicate markup): render BOTH a <model-viewer
     class="ill-3d"> and an <img class="ill-poster">; toggle by width.
   The rules below cover Approach B and a few safe defaults for A.
   ============================================================ */
@media (max-width: 1000px) {
  .ill-poster { display: block; width: 100%; height: 100%; object-fit: cover;
    border-radius: var(--radius-photo, 14px); border: 1px solid var(--line); }
  model-viewer.ill-3d { display: none !important; }

  /* the model fills its cell so it matches the bullet list height beside it */
  .chapter-photo model-viewer { height: 100%; --poster-color: transparent; }
}
@media (min-width: 1001px) {
  .ill-poster { display: none; }
}

/* ============================================================
   REDUCED MOTION — honour the OS "reduce motion" setting:
   freeze the looping dev illustration everywhere.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .dev-ill *,
  .dev-ill .caret { animation: none !important; }
  .dev-ill .caret { opacity: 1; }
}