/* =====================================================================================================================
   Pixel, MK5 v2 (ruling ND4, LX12): the mobile Directory overlay, a sheet that slides down from the top bar.
   Desk 10, 06-11-2026. v2 = Fabrice's choice of 06-11 (17:22): the filled accent badge of the home grid on the dark sheet. Build of record N46g. Load after n46g.css (and after the MK2 v4 file). For N46i, otherwise N46j.

   Method: read only on live and on the build of record. Tokens only: no hex, no colour literal, no important flag, no new token,
   no new font. The ground is --os-chrome-dark (the dark Directory chrome Fabrice approved on 28-10, ruling LA1).
   Colours follow ruling NA and NF: the button on a dark panel is the warm tone (rusty spice, white text, 2 px white line);
   gold stays the focus ring only.

   Needs the markup and script lines of the file "TEMPLATE - Mobile Directory overlay v2, theme lines for Nick (06-11-2026).md".
   No new string: the title reuses the Directory label, the grabber reuses the Close string.

   Everything below is scoped to the phone width (max-width 768px), where the Menu button exists.
   ===================================================================================================================== */

@media (max-width:768px){

/* ----- 1. The overlay is the scrim; the sheet is the dark panel inside it ----- */
body .gpcf-mobile-nav.dir-dark:not([hidden]){
  display:block;
  position:fixed;
  inset:var(--topbar-height-mobile) 0 0 0;
  z-index:99;
  padding:0;
  overflow:hidden;
  background:rgba(var(--os-ink-rgb),.55);
  color:var(--on-dark);
  animation:gpcf-scrim-in var(--duration-base) var(--ease) both;
}
body .gpcf-mobile-nav.dir-dark.is-closing{ animation:gpcf-scrim-out var(--duration-base) var(--ease) both; }

/* ----- 2. The sheet: near black, a light transparency (94%) over a 20 px blur, the bottom corners rounded, thumb zone at the foot ----- */
body .gpcf-mobile-nav.dir-dark .gpcf-mobile-nav__sheet{
  position:relative;
  box-sizing:border-box;
  max-height:100%;
  margin:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:0 var(--space-9) calc(var(--space-3) + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--dir-bg,var(--os-chrome-dark)) 94%,transparent);
  -webkit-backdrop-filter:blur(var(--space-9)) saturate(1.2);
  backdrop-filter:blur(var(--space-9)) saturate(1.2);
  border-radius:0 0 var(--space-10) var(--space-10);
  animation:gpcf-sheet-down calc(var(--duration-base) * 1.5) var(--ease) both;
}
body .gpcf-mobile-nav.dir-dark.is-closing .gpcf-mobile-nav__sheet{ animation:gpcf-sheet-up var(--duration-base) var(--ease) both; }

@keyframes gpcf-sheet-down{ from{ transform:translateY(-100%); } to{ transform:translateY(0); } }
@keyframes gpcf-sheet-up{ from{ transform:translateY(0); } to{ transform:translateY(-100%); } }
/* The scrim animates its own colour, not its opacity, so the sheet inside is never faded. */
@keyframes gpcf-scrim-in{ from{ background-color:transparent; } to{ background-color:rgba(var(--os-ink-rgb),.55); } }
@keyframes gpcf-scrim-out{ from{ background-color:rgba(var(--os-ink-rgb),.55); } to{ background-color:transparent; } }
@media (prefers-reduced-motion:reduce){
  body .gpcf-mobile-nav.dir-dark:not([hidden]),
  body .gpcf-mobile-nav.dir-dark .gpcf-mobile-nav__sheet,
  body .gpcf-mobile-nav.dir-dark.is-closing,
  body .gpcf-mobile-nav.dir-dark.is-closing .gpcf-mobile-nav__sheet{ animation:none; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body .gpcf-mobile-nav.dir-dark .gpcf-mobile-nav__sheet{ background:var(--dir-bg,var(--os-chrome-dark)); }
}

/* ----- 3. Head row: the Directory title and the close button on the same 44 px line ----- */
body .gpcf-mobile-nav.dir-dark .gpcf-mobile-nav__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:var(--space-15);
  padding:var(--space-5) 0 var(--space-3);
}
body .gpcf-mobile-nav.dir-dark .gpcf-mobile-nav__title{
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-h3);
  line-height:1.2;
  color:var(--on-dark);
}
body .gpcf-mobile-nav.dir-dark .gpcf-mobile-nav__close{
  position:static;
  inset:auto;
  margin:0;
  width:var(--tap-min);
  height:var(--tap-min);
  border:1px solid var(--on-dark-border);
  border-radius:var(--radius-pill);
  background:var(--on-dark-fill);
  color:var(--on-dark);
}
body .gpcf-mobile-nav.dir-dark .gpcf-mobile-nav__close:active{ background:var(--on-dark-border); }

/* ----- 4. The twelve rubriques: the filled accent badge of the home grid with its white icon, and the white label, straight on the dark sheet ----- */
/* Grid after the iPhone home screen: three columns on a 20 px side margin (--space-9), 8 px between columns,
   a 44 px minimum target (each cell is about 111 by 104 px), a 44 px badge with a 26 px icon, label 14 px (the site floor), two lines at most. */
body .gpcf-mobile-nav.dir-dark .cats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-1) var(--space-3);
  margin:0;
  padding:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}
body .gpcf-mobile-nav.dir-dark .cat{
  --acc-on-dark:color-mix(in srgb,var(--acc,var(--os-dark-cyan)) 50%,var(--on-dark));   /* for the current-rubrique frame */
  box-sizing:border-box;
  min-height:104px;
  justify-content:flex-start;
  gap:var(--space-2);
  padding:var(--space-4) var(--space-1) var(--space-3);
  border:1px solid transparent;
  border-radius:var(--radius-md);
  background:none;
  box-shadow:none;
  transform:none;
  -webkit-tap-highlight-color:transparent;
  transition:background var(--duration-fast) var(--ease);
}
body .gpcf-mobile-nav.dir-dark .cat:hover{ border-color:transparent; box-shadow:none; }
/* The badge: the raw rubrique accent as a 44 px square, the icon white (3.70:1 or more on all twelve; 3:1 needed for a graphic).
   A 1 px light ring keeps the darker squares (Immobilier, Education) from melting into the black. */
body .gpcf-mobile-nav.dir-dark .cat .badge,
body .gpcf-mobile-nav.dir-dark .cat:hover .badge{
  width:var(--tap-min);
  height:var(--tap-min);
  border-radius:var(--radius-md);
  background:var(--acc);
  color:var(--on-dark);
  box-shadow:0 0 0 1px var(--on-dark-border);
}
body .gpcf-mobile-nav.dir-dark .cat .badge .ico,
body .gpcf-mobile-nav.dir-dark .cat:hover .badge .ico,
body .gpcf-mobile-nav.dir-dark .cat:focus-visible .badge .ico{ color:var(--on-dark); }
body .gpcf-mobile-nav.dir-dark .cat .badge svg{ width:26px; height:26px; stroke:currentColor; stroke-width:2; }
body .gpcf-mobile-nav.dir-dark .cat b,
body .gpcf-mobile-nav.dir-dark .cat:hover b,
body .gpcf-mobile-nav.dir-dark .cat:visited b{
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-chrome);
  line-height:1.25;
  text-align:center;
  text-wrap:balance;
  color:var(--on-dark);
}
/* Pressed: a soft pill of white at 16%, the label stays white. */
body .gpcf-mobile-nav.dir-dark .cat:active{ background:var(--on-dark-fill); }
/* The rubrique of the page being shown: the same pill and a 1 px frame in its own accent, lightened for the dark ground. */
body .gpcf-mobile-nav.dir-dark .cat[aria-current]{
  background:var(--on-dark-fill);
  border-color:var(--acc-on-dark);
}
/* The short white bar of j6 under the current label goes: the frame says it. */
body .gpcf-mobile-nav.dir-dark .cat[aria-current] b::after{ display:none; }
body .gpcf-mobile-nav.dir-dark .cat:focus-visible{ outline:3px solid var(--os-cta); outline-offset:2px; }

/* ----- 5. The real estate line: a visible card, the accent bar and arrow lightened, white text ----- */
body .gpcf-mobile-nav.dir-dark .cats-more{
  --acc-on-dark:color-mix(in srgb,var(--acc,var(--os-dark-cyan)) 50%,var(--on-dark));
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-1);
  margin:var(--space-5) 0 0;
  padding:var(--space-5) var(--space-15) var(--space-5) var(--space-7);
  border:1px solid var(--on-dark-border);
  border-radius:var(--radius-card);
  background:var(--on-dark-fill);
}
body .gpcf-mobile-nav.dir-dark .cats-more__rub{
  padding-left:var(--space-3);
  border-left:3px solid var(--acc-on-dark);
  font-size:var(--size-label);
  letter-spacing:var(--ls-label);
  color:var(--on-dark-muted);
}
body .gpcf-mobile-nav.dir-dark .cats-more a{
  min-height:var(--tap-min);
  font-size:var(--size-body);
  line-height:1.3;
  color:var(--on-dark);
  text-decoration:none;
}
/* The whole card is the link; the arrow is drawn with two borders, no icon file. */
body .gpcf-mobile-nav.dir-dark .cats-more a::before{ content:""; position:absolute; inset:0; border-radius:var(--radius-card); }
body .gpcf-mobile-nav.dir-dark .cats-more a::after{
  content:"";
  position:absolute;
  top:50%;
  right:var(--space-9);
  width:var(--space-3);
  height:var(--space-3);
  border-top:2px solid var(--acc-on-dark);
  border-right:2px solid var(--acc-on-dark);
  transform:translateY(-50%) rotate(45deg);
}
body .gpcf-mobile-nav.dir-dark .cats-more a:active{ text-decoration:underline; text-underline-offset:3px; }
body .gpcf-mobile-nav.dir-dark .cats-more a:focus-visible{ outline:3px solid var(--os-cta); outline-offset:3px; }

/* ----- 6. The foot, in the thumb zone: the Blog pill on the left, the language switch on the right ----- */
body .gpcf-mobile-nav.dir-dark .gpcf-mobile-nav__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-5);
  margin:var(--space-9) 0 0;
  padding:0 var(--space-1);
}
/* The Blog pill is a panel button (ruling NF): the warm tone, white text, a 2 px white line. */
body .gpcf-mobile-nav.dir-dark a.gpcf-mobile-nav__blog{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--tap-comfortable);
  padding:0 var(--space-12);
  border:0;
  border-radius:var(--radius-pill);
  background-color:var(--os-rusty-spice);
  background-image:none;
  box-shadow:0 0 0 2px var(--on-dark);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-button);
  color:var(--on-dark);
  text-decoration:none;
}
body .gpcf-mobile-nav.dir-dark a.gpcf-mobile-nav__blog:hover,
body .gpcf-mobile-nav.dir-dark a.gpcf-mobile-nav__blog:active,
body .gpcf-mobile-nav.dir-dark a.gpcf-mobile-nav__blog:focus-visible{
  background-color:color-mix(in srgb,var(--os-rusty-spice) 80%,var(--os-ink-black));
  color:var(--on-dark);
  text-decoration:none;
}
body .gpcf-mobile-nav.dir-dark a.gpcf-mobile-nav__blog:focus-visible{ outline:3px solid var(--os-cta); outline-offset:6px; }

/* The language switch in colour: the current language is a dark teal pill with a white line; the others are white on a soft pill.
   Switch (4i): for pearl aqua instead, set the two properties noted below on the current link. */
body .gpcf-mobile-nav.dir-dark .lang{
  display:inline-flex;
  gap:0;
  padding:0;
  border:1px solid var(--on-dark-border);
  border-radius:var(--radius-pill);
  background:var(--on-dark-fill);
  align-self:center;
}
body .gpcf-mobile-nav.dir-dark .lang a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:var(--tap-comfortable);
  height:var(--tap-min);
  padding:0 var(--space-4);
  border-radius:var(--radius-pill);
  font-size:var(--size-chrome);
  font-weight:var(--weight-bold);
  letter-spacing:var(--ls-label);
  text-transform:uppercase;
  text-decoration:none;
  color:var(--on-dark);
}
body .gpcf-mobile-nav.dir-dark .lang a[aria-current]{
  background:var(--os-dark-teal);   /* switch: var(--os-pearl-aqua) */
  color:var(--on-dark);             /* switch: var(--os-ink-black) */
  box-shadow:0 0 0 2px var(--on-dark);
}
body .gpcf-mobile-nav.dir-dark .lang a:active{ background:var(--on-dark-border); }
body .gpcf-mobile-nav.dir-dark .lang a[aria-current]:active{ background:var(--os-dark-teal); }
body .gpcf-mobile-nav.dir-dark .lang a:focus-visible{ outline:3px solid var(--os-cta); outline-offset:3px; }

/* ----- 7. The grabber: the thumb pulls the sheet back up; a tap closes it too ----- */
body .gpcf-mobile-nav.dir-dark .gpcf-mobile-nav__grab{
  display:block;
  position:relative;
  width:100%;
  height:var(--tap-min);
  margin:var(--space-1) 0 0;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
body .gpcf-mobile-nav.dir-dark .gpcf-mobile-nav__grab::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:var(--space-14);
  height:var(--space-1);
  border-radius:var(--radius-pill);
  background:color-mix(in srgb,var(--on-dark) 45%,transparent);
  transform:translate(-50%,-50%);
}
body .gpcf-mobile-nav.dir-dark .gpcf-mobile-nav__grab:focus-visible{ outline:3px solid var(--os-cta); outline-offset:-3px; border-radius:var(--radius-sm); }

/* ----- 8. Small phones (375 by 667 and under): the sheet scrolls inside the overlay; the grabber stays reachable ----- */
@media (max-height:700px){
  body .gpcf-mobile-nav.dir-dark .cat{ min-height:96px; }
  body .gpcf-mobile-nav.dir-dark .gpcf-mobile-nav__head{ min-height:var(--tap-min); padding-top:var(--space-3); }
}

}