/* ============================================================
   Clinique Vitalise — MOBILE APP SHELL (installable PWA)
   Everything here is phone-only (<=720px). Desktop is untouched:
   the JS-injected chrome (#cvab / #cvtabs / .cvsheet) stays
   display:none until the media query below turns it on.
   Colours all come from the site's own theme tokens, so the
   shell flips with Clair/Sombre automatically.
   ============================================================ */

#cvab, #cvtabs, .cvsheet, .cvsheet-back, #cvinstall { display: none; }

/* inline booking selector on the rendez-vous page — reuses the sheet's .cvrow / .cvbtn
   rows (styled in the media blocks below), wrapped in a card with the sheet's panel bg. */
.rdv-inline { max-width: 640px; background: var(--ink-2, var(--ink)); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; padding: 6px 8px 14px; box-shadow: 0 24px 60px -34px rgba(16,28,42,.28); }
.rdv-inline .cvsheet-body { padding: 4px 10px 4px; }
.rdv-inline .cvbk-back { margin-top: 8px; }
/* two-column booking layout: intro on the left, the selector on the right */
.rdv-layout { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 62px); align-items: center; }
.rdv-layout .rdv-inline { max-width: none; width: 100%; margin: 0; }
.rdv-layout .rdv-intro { align-self: center; max-width: 30rem; }
@media (max-width: 880px) {
  .rdv-layout { grid-template-columns: 1fr; gap: 26px; }
  .rdv-layout .rdv-inline { max-width: 560px; margin: 0 auto; }
  .rdv-layout .rdv-intro { max-width: none; }
}

@media (max-width: 720px) {
  :root { --cvab-h: 56px; --cvtab-h: 66px; }

  /* hide the desktop nav entirely — the app bar + tab bar replace it.
     (it stays in the DOM so its search / lang / theme handlers still fire) */
  .nav { display: none !important; }
  /* the WebGL field + scroll hint are dropped on phones for battery/speed */
  #scene { display: none !important; }
  #hero .scrollhint { display: none !important; }

  /* give content room for the fixed bars (+ notch safe areas) */
  body {
    padding-top: calc(var(--cvab-h) + env(safe-area-inset-top));
    padding-bottom: calc(var(--cvtab-h) + env(safe-area-inset-bottom));
  }
  #load { z-index: 5000; }

  /* ---------------- TOP APP BAR ---------------- */
  #cvab {
    display: flex; align-items: center; gap: 10px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 900;
    height: calc(var(--cvab-h) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 14px 0;
    background: color-mix(in srgb, var(--ink) 84%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
    backdrop-filter: saturate(1.4) blur(16px);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    transition: transform .3s ease;
  }
  #cvab.hide { transform: translateY(-101%); }
  #cvab .cvab-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin-right: auto; --cvnavy: #F4F1E9; --cvlav: #c2c4e6; }
  html.light #cvab .cvab-brand { --cvnavy: #3a4a8c; --cvlav: #a9abd6; }
  #cvab .cvmk { width: 44px; height: auto; flex: none; }
  #cvab .cvsun { fill: var(--cvnavy); } #cvab .cvtrap { fill: var(--cvlav); }
  #cvab .cvab-word {
    font-family: 'Jost', var(--sans); font-weight: 300; font-size: 12.5px;
    letter-spacing: .17em; text-transform: uppercase; color: var(--cvnavy); line-height: 1;
    border-bottom: 1.3px solid var(--cvnavy); padding-bottom: 3px; white-space: nowrap;
  }
  /* keep the wordmark "A" glyph sized even if the host page lacks the global .cvA rule */
  #cvab .cvab-word .cvA { height: .72em; width: .68em; vertical-align: baseline; margin: 0 .01em; display: inline-block; }
  #cvab .cvab-btn {
    width: 40px; height: 40px; flex: none; display: grid; place-items: center;
    border: 0; background: none; color: var(--bone); border-radius: 50%; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #cvab .cvab-btn:active { background: color-mix(in srgb, var(--bone) 10%, transparent); }
  #cvab .cvab-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }

  /* ---------------- BOTTOM TAB BAR ---------------- */
  #cvtabs {
    display: flex; align-items: stretch; justify-content: space-around;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    height: calc(var(--cvtab-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--ink) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.5) blur(18px);
    backdrop-filter: saturate(1.5) blur(18px);
    border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  }
  #cvtabs .cvtab {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; border: 0; background: none; cursor: pointer; text-decoration: none;
    color: var(--muted-2); padding: 8px 2px 6px; -webkit-tap-highlight-color: transparent;
    transition: color .18s;
  }
  #cvtabs .cvtab svg { width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  #cvtabs .cvtab .cvtab-l { font-size: 10px; font-weight: 600; letter-spacing: .02em; }
  #cvtabs .cvtab.on { color: var(--accent); }
  #cvtabs .cvtab:active { color: var(--accent); }

  /* elevated centre action (Rendez-vous) */
  #cvtabs .cvtab-rdv { position: relative; }
  #cvtabs .cvtab-rdv .cvtab-fab {
    width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
    margin-top: -26px; margin-bottom: 1px;
    background: var(--accent-deep, #234E8F); color: #fff;
    box-shadow: 0 10px 24px -8px rgba(35,78,143,.7), 0 0 0 5px var(--ink);
    transition: transform .15s ease;
  }
  #cvtabs .cvtab-rdv:active .cvtab-fab { transform: scale(.93); }
  #cvtabs .cvtab-rdv .cvtab-fab svg { width: 26px; height: 26px; stroke: #fff; }
  #cvtabs .cvtab-rdv .cvtab-l { color: var(--accent); }

  /* ---------------- BOTTOM SHEETS ---------------- */
  .cvsheet-back {
    display: block; position: fixed; inset: 0; z-index: 1200;
    background: rgba(9,17,27,.5); opacity: 0; visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  .cvsheet-back.open { opacity: 1; visibility: visible; }
  .cvsheet {
    display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300;
    max-height: 88vh; background: var(--ink-2, var(--ink));
    border-radius: 22px 22px 0 0; border-top: 1px solid var(--line);
    box-shadow: 0 -20px 60px rgba(0,0,0,.35);
    transform: translateY(101%); transition: transform .34s cubic-bezier(.22,1,.36,1);
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
  .cvsheet.open { transform: translateY(0); }
  .cvsheet-handle { width: 42px; height: 5px; border-radius: 3px; background: var(--line); margin: 10px auto 4px; flex: none; }
  .cvsheet-head { display: flex; align-items: center; gap: 10px; padding: 6px 20px 12px; }
  .cvsheet-head h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--bone); margin: 0; flex: 1; }
  .cvsheet-head .cvsheet-x { width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--bone) 7%, transparent); color: var(--bone); font-size: 20px; line-height: 1; cursor: pointer; }
  .cvsheet-sub { padding: 0 20px 10px; color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: -4px 0 0; }
  .cvsheet-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .cvsheet-body { padding: 4px 14px 6px; }

  /* generic list rows inside a sheet */
  .cvrow {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    padding: 14px 12px; border-radius: 14px; border: 0; background: none; cursor: pointer;
    color: var(--text); text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .cvrow + .cvrow { border-top: 1px solid color-mix(in srgb, var(--line-2) 90%, transparent); }
  .cvrow:active { background: color-mix(in srgb, var(--accent) 10%, transparent); }
  .cvrow .cvrow-ic {
    width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent);
  }
  .cvrow .cvrow-ic svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .cvrow .cvrow-tx { flex: 1; min-width: 0; }
  .cvrow .cvrow-tx b { display: block; font-family: var(--serif); font-weight: 500; font-size: 15.5px; color: var(--bone); line-height: 1.25; }
  .cvrow .cvrow-tx span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
  .cvrow .cvrow-go { flex: none; color: var(--muted-2); }
  .cvrow .cvrow-go svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

  /* booking detail actions */
  .cvbk-actions { padding: 4px 20px 8px; display: flex; flex-direction: column; gap: 10px; }
  .cvbk-actions .cvbtn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 15px 16px; border-radius: 14px; font: inherit; font-weight: 600; font-size: 15px;
    text-decoration: none; border: 0; cursor: pointer; width: 100%; -webkit-tap-highlight-color: transparent;
  }
  .cvbk-actions .cvbtn svg { width: 19px; height: 19px; }
  .cvbtn-primary { background: var(--accent-deep, #234E8F); color: #fff; box-shadow: 0 10px 26px -12px rgba(35,78,143,.7); }
  .cvbtn-primary svg { stroke: #fff; fill: none; stroke-width: 2; }
  .cvbtn-ghost { background: color-mix(in srgb, var(--bone) 6%, transparent); color: var(--bone); border: 1px solid var(--line); }
  .cvbtn-ghost svg { stroke: currentColor; fill: none; stroke-width: 2; }
  .cvbk-note { padding: 2px 22px 10px; color: var(--muted); font-size: 12.5px; line-height: 1.5; text-align: center; }
  .cvbk-back { align-self: flex-start; margin: 2px 0 2px 12px; background: none; border: 0; color: var(--accent); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; }
  .cvbk-back svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; }

  /* the "menu" sheet: settings rows (lang + theme) + secondary links */
  .cvseg-label { padding: 12px 20px 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
  .cvseg { display: flex; gap: 8px; padding: 0 18px 6px; }
  .cvseg button {
    flex: 1; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--bone) 4%, transparent);
    color: var(--muted); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .cvseg button.on { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--bone); }
  .cvmenu-links { padding: 6px 8px 2px; }
  .cvmenu-links a { display: block; padding: 13px 12px; border-radius: 12px; color: var(--text); text-decoration: none; font-size: 14.5px; font-weight: 500; }
  .cvmenu-links a:active { background: color-mix(in srgb, var(--accent) 10%, transparent); }
  .cvmenu-foot { padding: 12px 22px 2px; font-size: 11.5px; color: var(--muted-2); text-align: center; line-height: 1.5; }

  /* install affordance inside the menu sheet */
  #cvinstall { display: block; margin: 8px 18px 4px; }
  #cvinstall .cvbtn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 15px; border-radius: 14px; border: 0; background: var(--accent-deep, #234E8F); color: #fff; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; }
  #cvinstall .cvbtn svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; }
  .cvios-tip { margin: 6px 20px 2px; padding: 13px 15px; border-radius: 13px; background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); color: var(--muted); font-size: 12.8px; line-height: 1.55; }
  .cvios-tip b { color: var(--bone); }
  .cvios-tip .shareico { display: inline-block; vertical-align: -3px; }

  /* ---------------- LIGHTER, BOOKING-FIRST HERO (homepage) ---------------- */
  #hero { min-height: auto !important; padding-top: 18px !important; padding-bottom: 18px !important; }
  #hero .hero-grid { gap: 20px; }
  #hero .hero-copy { order: 1; }
  #hero .hublot { order: 2 !important; width: min(58%, 216px) !important; margin: 2px auto 4px !important; }
  #hero .hublot .cine { display: block !important; }          /* mobile: clip plays (muted/looped), paused off-screen by app-mobile.js */
  #hero .hero-copy h1 { margin-bottom: 16px; }
  #hero .hero-copy .sub { margin-bottom: 22px; font-size: 15.5px; }
  #hero .hero-cta { flex-direction: column; gap: 10px; flex-wrap: nowrap; }
  #hero .hero-cta .btn { width: 100%; justify-content: center; text-align: center; }
  #hero .hero-kpis { margin-top: 26px; gap: 22px; }

  /* rounder, app-like cards + comfy tap targets */
  .centre-card, .tile, .pilier, .member, .cap, .hot, .chapter, .form { border-radius: 16px; }
}

/* respect users who ask for less motion */
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .cvsheet, .cvsheet-back, #cvab { transition: none !important; }
}

/* ============================================================
   DESKTOP booking modal (>720px) — the SAME booking sheet, shown
   as a centered modal. The app bar / tab bar stay mobile-only;
   only the sheet appears, triggered by every « Prendre rendez-vous ».
   Content styles mirror the mobile sheet; only positioning differs.
   ============================================================ */
@media (min-width: 721px) {
  .cvsheet-back {
    display: block; position: fixed; inset: 0; z-index: 1200;
    background: rgba(9,17,27,.55); opacity: 0; visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  }
  .cvsheet-back.open { opacity: 1; visibility: visible; }
  .cvsheet {
    display: flex; flex-direction: column; position: fixed; z-index: 1300;
    top: 50%; left: 50%; width: min(468px, 92vw); max-height: min(84vh, 760px);
    background: var(--ink-2, var(--ink)); border: 1px solid var(--line);
    border-radius: 20px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.5);
    transform: translate(-50%, -46%) scale(.98); opacity: 0; visibility: hidden;
    transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .28s ease, visibility .28s ease;
    overflow: hidden; padding-bottom: 12px;
  }
  .cvsheet.open { transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; }
  .cvsheet-handle { display: none; }
  .cvsheet-head { display: flex; align-items: center; gap: 10px; padding: 20px 22px 12px; }
  .cvsheet-head h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--bone); margin: 0; flex: 1; }
  .cvsheet-head .cvsheet-x { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--bone) 7%, transparent); color: var(--bone); font-size: 21px; line-height: 1; cursor: pointer; transition: background .15s; }
  .cvsheet-head .cvsheet-x:hover { background: color-mix(in srgb, var(--bone) 14%, transparent); }
  .cvsheet-sub { padding: 0 22px 10px; color: var(--muted); font-size: 14px; line-height: 1.5; margin: -4px 0 0; }
  .cvsheet-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .cvsheet-body { padding: 4px 14px 8px; }
  .cvrow {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    padding: 14px; border-radius: 14px; border: 0; background: none; cursor: pointer;
    color: var(--text); text-decoration: none; transition: background .15s;
  }
  .cvrow + .cvrow { border-top: 1px solid color-mix(in srgb, var(--line-2) 90%, transparent); }
  .cvrow:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
  .cvrow .cvrow-ic { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent); }
  .cvrow .cvrow-ic svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .cvrow .cvrow-tx { flex: 1; min-width: 0; }
  .cvrow .cvrow-tx b { display: block; font-family: var(--serif); font-weight: 500; font-size: 16px; color: var(--bone); line-height: 1.25; }
  .cvrow .cvrow-tx span { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
  .cvrow .cvrow-go { flex: none; color: var(--muted-2); }
  .cvrow .cvrow-go svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
  .cvbk-actions { padding: 4px 22px 10px; display: flex; flex-direction: column; gap: 10px; }
  .cvbk-actions .cvbtn { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 16px; border-radius: 14px; font: inherit; font-weight: 600; font-size: 15px; text-decoration: none; border: 0; cursor: pointer; width: 100%; transition: transform .1s, box-shadow .15s; }
  .cvbk-actions .cvbtn svg { width: 19px; height: 19px; }
  .cvbtn-primary { background: var(--accent-deep, #234E8F); color: #fff; box-shadow: 0 10px 26px -12px rgba(35,78,143,.7); }
  .cvbtn-primary:hover { box-shadow: 0 14px 32px -12px rgba(35,78,143,.85); }
  .cvbtn-primary svg { stroke: #fff; fill: none; stroke-width: 2; }
  .cvbtn-ghost { background: color-mix(in srgb, var(--bone) 6%, transparent); color: var(--bone); border: 1px solid var(--line); }
  .cvbtn-ghost:hover { background: color-mix(in srgb, var(--bone) 11%, transparent); }
  .cvbtn-ghost svg { stroke: currentColor; fill: none; stroke-width: 2; }
  .cvbk-note { padding: 2px 22px 12px; color: var(--muted); font-size: 13px; line-height: 1.5; text-align: center; }
  .cvbk-back { align-self: flex-start; margin: 2px 0 2px 14px; background: none; border: 0; color: var(--accent); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; }
  .cvbk-back svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; }
}
@media (min-width: 721px) and (prefers-reduced-motion: reduce) {
  .cvsheet, .cvsheet-back { transition: none !important; }
}

/* ── 2026: all buttons blue — clear default, blue fill + WHITE text + zoom on hover ── */
:root{--cta:#3A78D4}       /* dark theme (default) — vivid royal blue, white text readable + pops on dark */
html.light{--cta:#2F5AA8}  /* light theme — deep royal blue */
/* PRIMARY (site CTAs + booking « en ligne »): solid blue, white text, lift + zoom on hover */
.btn.btn-primary,.cvbtn.cvbtn-primary{background:var(--cta) !important;color:#fff !important;border-color:transparent !important;box-shadow:0 8px 24px -10px color-mix(in srgb,var(--cta) 62%,transparent) !important;transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,background .2s !important}
.btn.btn-primary svg,.cvbtn.cvbtn-primary svg{stroke:#fff !important}
.btn.btn-primary:hover,.cvbtn.cvbtn-primary:hover{background:color-mix(in srgb,var(--cta) 90%,#000) !important;color:#fff !important;transform:translateY(-2px) scale(1.04) !important;box-shadow:0 16px 38px -10px color-mix(in srgb,var(--cta) 80%,transparent) !important}
/* GHOST / secondary (incl. « Nous appeler », « e-mail »): readable outline default, fill blue + white + zoom on hover */
.btn.btn-ghost{color:var(--cta) !important;border-color:color-mix(in srgb,var(--cta) 45%,transparent) !important;transition:transform .2s cubic-bezier(.22,1,.36,1),background .2s,color .2s,border-color .2s !important}
.cvbtn.cvbtn-ghost{transition:transform .2s cubic-bezier(.22,1,.36,1),background .2s,color .2s,border-color .2s !important}
.btn.btn-ghost:hover,.cvbtn.cvbtn-ghost:hover{background:var(--cta) !important;color:#fff !important;border-color:var(--cta) !important;transform:translateY(-2px) scale(1.04) !important}
.btn.btn-ghost:hover svg,.cvbtn.cvbtn-ghost:hover svg{stroke:#fff !important}
/* filter chips (équipe / centre / rendez-vous picks): selected + hover = blue fill, white text, zoom */
.teamfilter button,.pick button{transition:transform .2s cubic-bezier(.22,1,.36,1),background .2s,color .2s,border-color .2s !important}
.teamfilter button.on,.pick button.on{background:var(--cta) !important;color:#fff !important;border-color:var(--cta) !important}
.teamfilter button:hover,.pick button:hover{background:var(--cta) !important;color:#fff !important;border-color:var(--cta) !important;transform:translateY(-1px) scale(1.04) !important}
/* Touch devices (iOS/Android): :hover STICKS after a tap, which made the ghost booking buttons turn blue (2 blue at once). On touch, force the resting look so only the real primary button stays blue. */
@media (hover: none) {
  .cvbtn.cvbtn-ghost:hover { background: color-mix(in srgb, var(--bone) 6%, transparent) !important; color: var(--bone) !important; border-color: var(--line) !important; transform: none !important; }
  .cvbtn.cvbtn-ghost:hover svg { stroke: currentColor !important; }
  .cvbtn.cvbtn-primary:hover { background: var(--cta) !important; transform: none !important; }
  .teamfilter button:hover:not(.on),.pick button:hover:not(.on) { background: transparent !important; color: var(--muted) !important; border-color: var(--line) !important; transform: none !important; }
}

/* ── 2026: desktop nav — 3 specialties → prestations flyout submenu ── */
.navsub{position:relative}
.navsub>a.navsub-t{position:relative;display:block;padding:9px 32px 9px 14px;border-radius:9px;font-size:13.5px;color:var(--muted);cursor:pointer;transition:background .18s,color .18s}
.navsub>a.navsub-t::after{content:"";position:absolute;right:15px;top:calc(50% - 4px);width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);opacity:.5}
.navsub:hover>a.navsub-t,.navsub:focus-within>a.navsub-t{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--bone)}
.navsub-menu{position:absolute;top:-7px;left:100%;margin-left:6px;min-width:232px;background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:7px;box-shadow:0 26px 62px rgba(0,0,0,.3);opacity:0;visibility:hidden;transform:translateX(-5px);transition:opacity .18s ease,transform .18s ease;z-index:410;display:flex;flex-direction:column;gap:1px}
.navsub-menu::before{content:"";position:absolute;top:0;left:-12px;width:14px;height:100%}
.navsub:hover>.navsub-menu,.navsub:focus-within>.navsub-menu{opacity:1;visibility:visible;transform:translateX(0)}
.navsub-menu a{padding:9px 14px;border-radius:9px;font-size:13.5px;white-space:nowrap;color:var(--muted);transition:background .18s,color .18s}
.navsub-menu a:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--bone)}

/* ── logo agrandi & plus visible (demande client) — override des styles inline ── */
.nav .brand .cvmk{width:72px}
.nav .brand .cvw{font-size:24px}