/* ============================================================
   franco-media.com, header (top bar) and footer
   TASK-N05 Block B2, 05-09-2026. Values taken verbatim from
   BUILD-SPEC.md sections 1 and 11, and from the approved
   reference/01-home-desktop-1440.html (desktop) and
   reference/04-mobile-390-three-pages.html (mobile) mockups.
   Do not invent colours or values; everything here traces back
   to those two sources or to tokens.css.
   ============================================================ */

/* ---------- Top bar, desktop ---------- */

.topbar{
  background:var(--os-card);
  border-bottom:1px solid var(--os-line);
  position:sticky;
  top:0;
  z-index:100;
}
.topbar .wrap{
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 var(--page-gutter);
  display:flex;
  align-items:center;
  gap:28px;
  height:var(--topbar-height);
}
.topbar img.logo{ display:block; width:262px; height:auto; } /* N30: Board 14 desktop width, about 34px high in the 74px bar */

/* TASK-N31 (ruling EU): Directory and Blog are the two doors of the site, so
   they read as navigation: sentence case, ink at rest, dark teal on hover and
   keyboard focus, a 44px tap target. The two links sit in .topbar-nav. */
.topbar-nav{
  display:flex;
  align-items:center;
  gap:var(--space-9);
}
a.nav,
button.nav{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  min-height:var(--tap-min);
  padding:0 var(--space-3);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-nav);
  letter-spacing:var(--ls-nav);
  text-transform:none;
  color:var(--os-heading);
  text-decoration:none;
  background:none;
  border:0;
  cursor:pointer;
  transition:color var(--duration-fast) var(--ease);
}
a.nav:hover,
button.nav:hover,
a.nav:focus-visible,
button.nav:focus-visible{ color:var(--os-link); }

/* Current door: a 2px golden underline under the label, decorative only
   (no text on golden). Blog on the blog listing and on single posts; Directory
   while the launcher panel is open. None on the home page. */
a.nav[aria-current="page"] .nav__label,
button.nav[aria-expanded="true"] .nav__label{
  text-decoration:underline;
  text-decoration-color:var(--os-highlight);
  text-decoration-thickness:2px;
  text-underline-offset:6px;
}

/* The chevron after the Directory label: the launcher signal. */
.nav__chev{
  display:inline-flex;
  transition:transform var(--duration-base) var(--ease);
}
.nav__chev svg{ display:block; stroke:currentColor; }
button.nav[aria-expanded="true"] .nav__chev{ transform:rotate(180deg); }
@media (prefers-reduced-motion:reduce){
  .nav__chev,
  a.nav,
  button.nav{ transition:none; }
}

.lang{
  display:inline-flex;
  gap:2px;
  padding:2px;
  border-radius:var(--radius-pill);
  background:var(--os-sunken);
}
.lang a{
  display:inline-flex;
  align-items:center;
  padding:5px 13px;
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-chrome);
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--os-link);
  text-decoration:none;
}
.lang a[aria-current]{ background:var(--os-link); color:#fff; }

.searchbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:var(--radius-sm);
  border:1px solid var(--os-line);
  color:var(--os-link);
  background:var(--os-card);
  cursor:pointer;
  padding:0;
}
.searchbtn .ico,
.menu .ico{ display:inline-flex; }
.searchbtn svg,
.menu .ico svg,
.gpcf-mobile-nav__close svg{ stroke:currentColor; display:block; }

.gpcf-launcher-panel{ background:var(--os-card); border-bottom:1px solid var(--os-line); }
.gpcf-launcher-panel[hidden]{ display:none; }
.gpcf-launcher-panel .cats{ max-width:var(--content-max); margin:0 auto; padding:20px var(--page-gutter); }

.gpcf-search-panel{ background:var(--os-card); border-bottom:1px solid var(--os-line); }
.gpcf-search-panel[hidden]{ display:none; }
.gpcf-search-form{ max-width:var(--content-max); margin:0 auto; padding:14px var(--page-gutter); }
.gpcf-search-form input[type="search"]{
  width:100%;
  border:1px solid var(--os-line);
  border-radius:var(--radius-sm);
  padding:10px 14px;
  font-family:var(--font-body);
  font-size:var(--size-body-sm);
  color:var(--os-text);
  background:var(--os-bg);
}

/* Mobile menu button: hidden on desktop, shown at the mobile breakpoint. */
.menu{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  flex:0 0 auto;
  border-radius:var(--radius-sm);
  border:1px solid var(--os-line);
  color:var(--os-link);
  background:var(--os-card);
  cursor:pointer;
  padding:0;
}

/* Mobile nav overlay: functional stand-in, not yet a confirmed design.
   See the B2 report, flagged per BUILD-SPEC's own "ask before inventing
   it" instruction for this exact element. */
.gpcf-mobile-nav{
  display:none;
}
.gpcf-mobile-nav:not([hidden]){
  display:flex;
  flex-direction:column;
  gap:var(--space-9);
  position:fixed;
  inset:var(--topbar-height-mobile) 0 0 0;
  background:var(--os-card);
  padding:var(--space-14) var(--page-gutter-mobile);
  z-index:99;
  overflow-y:auto;
}
.gpcf-mobile-nav a.nav{ font-size:16px; padding:0; min-height:var(--tap-min); } /* N31b (ruling EX): ink and 16px (N31), now a 44px tap height on phone too */
/* TASK-N19B (ruling BO): amends BM1's single-column layout per Fabrice's
   device-pass correction - three tiles per row, compact cards, icon
   above a short label. Blog keeps its place below the tiles (BM
   correction, unchanged by this amendment). */
.gpcf-mobile-nav .cats{ grid-template-columns:repeat(3,1fr); gap:10px; }
.gpcf-mobile-nav .cat{ padding:12px 6px 10px; gap:7px; min-height:auto; }
.gpcf-mobile-nav .cat .badge{ width:40px; height:40px; }
.gpcf-mobile-nav .cat .badge svg{ width:20px; height:20px; }
.gpcf-mobile-nav .cat b{ font-size:12px; line-height:1.25; }
.gpcf-mobile-nav__close{
  position:absolute;
  top:var(--space-9);
  right:var(--page-gutter-mobile);
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--os-line);
  border-radius:var(--radius-sm);
  background:none;
  color:var(--os-link);
  cursor:pointer;
}
body.gpcf-nav-open{ overflow:hidden; }

/* ---------- Top bar, mobile (390px) ---------- */

@media (max-width:768px){
  .topbar .wrap{
    height:var(--topbar-height-mobile);
    padding:0 var(--page-gutter-mobile);
    gap:12px;
  }
  .topbar img.logo{ width:162px; min-width:120px; max-width:100%; height:auto; } /* N30: Board 14 phone width; 120px is the usage sheet floor */
  .topbar .wrap > .topbar-nav{ display:none; }
  .topbar .wrap > .searchbtn{ display:none; }
  .topbar .wrap > .menu{ display:inline-flex; }
  .topbar .lang a{ height:var(--tap-min); padding:0 11px; display:inline-flex; align-items:center; } /* N32 (FA2 flag 3): was 38px, now the 44px tap height on phone */

  /* TASK-N19B (ruling BO): same 3-across compact grid as the mobile nav
     overlay, so the launcher panel never drifts out of step with it. */
  .gpcf-launcher-panel .cats{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .gpcf-launcher-panel .cat{ padding:12px 6px 10px; gap:7px; min-height:auto; }
  .gpcf-launcher-panel .cat .badge{ width:40px; height:40px; }
  .gpcf-launcher-panel .cat .badge svg{ width:20px; height:20px; }
  .gpcf-launcher-panel .cat b{ font-size:12px; line-height:1.25; }
}

/* ---------- Footer, desktop ---------- */

footer.sitefoot{
  background:var(--os-heading);
  color:#fff;
  margin-top:var(--space-16);
}
footer.sitefoot .wrap{
  max-width:var(--content-max);
  margin:0 auto;
  padding:44px var(--page-gutter) 30px;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:var(--split-gap);
}
footer.sitefoot img.logo{ display:block; width:262px; max-width:100%; height:auto; } /* N30: Board 14 footer width */
footer.sitefoot p.about{
  margin:14px 0 0;
  font-family:var(--font-body);
  font-size:14.5px;
  line-height:1.55;
  color:var(--on-dark-muted);
  max-width:32ch;
}
footer.sitefoot h4{
  margin:0 0 10px;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-chrome);
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--os-cta); /* N33 (FL): column titles take the golden orange of the logo's first i dot, was var(--on-dark-muted) */
}
footer.sitefoot .col{ display:flex; flex-direction:column; gap:8px; }
a.foot{
  font-family:var(--font-body);
  font-size:14.5px;
  color:var(--on-dark-muted);
  text-decoration:none;
}
a.foot:hover{ color:#fff; }

.lang.ondark{ background:var(--on-dark-fill); }
.lang.ondark a{ color:#fff; }
.lang.ondark a[aria-current]{ background:#fff; color:var(--os-heading); }

footer.sitefoot .legal{ border-top:1px solid var(--on-dark-border); }
footer.sitefoot .legal .wrap{
  display:flex;
  align-items:center;
  gap:16px;
  padding-top:15px;
  padding-bottom:15px;
  font-family:var(--font-body);
  font-size:var(--size-chrome);
  color:var(--on-dark-muted);
  grid-template-columns:none;
}

/* ---------- Footer, mobile (390px) ---------- */

@media (max-width:768px){
  footer.sitefoot .wrap{
    grid-template-columns:1fr 1fr;
    padding:28px var(--page-gutter-mobile) 20px;
    gap:22px;
  }
  footer.sitefoot .wrap > div:first-child{ grid-column:1 / -1; }
  footer.sitefoot img.logo{ width:200px; } /* N30: phone footer, keeps the previous 26px height */
  footer.sitefoot .col{ gap:9px; }

  /* Each column trims to three links at 390px, per BUILD-SPEC section 11
     and reference/04-mobile-390-three-pages.html. Hiding by position
     (not removing from the DOM) so desktop keeps its approved order and
     nothing needs duplicating: Explorer and Vivre à Phuket drop their
     last link; Annonceurs drops its third (Publireportages), which
     visually reproduces the mobile mockup's own Forfaits / Bannières /
     Nous contacter order without reordering the markup. */
  footer.sitefoot .wrap > div:nth-child(2) .col a.foot:nth-child(4),
  footer.sitefoot .wrap > div:nth-child(3) .col a.foot:nth-child(4),
  footer.sitefoot .wrap > div:nth-child(4) .col a.foot:nth-child(3){
    display:none;
  }
  footer.sitefoot .legal .wrap{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    margin-top:24px;
    padding-top:14px;
  }
}