/*
 * One application navigation shell.
 *
 * This file is intentionally loaded after every screen stylesheet.  Several
 * reference screens used to redefine the header dimensions, logo and gaps;
 * those local rules made the navigation jump while moving through the app.
 * The public Home header is the canonical geometry for every app screen.
 */
.platform[class] .pheader {
  position: relative;
  z-index: var(--z-header);
  width: 100%;
  height: 80px !important;
  min-height: 80px !important;
  padding: 0 !important;
  border: 0;
  background: var(--gradient-header);
  color: var(--color-white);
}

.platform[class] .pheader > div {
  width: 100%;
  max-width: none !important;
  height: 80px !important;
  min-height: 80px !important;
  margin: 0 !important;
  padding: 0 clamp(24px, 4vw, 80px) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* WCAG 1.4.12: the free space between logo, navigation and tools is distributed by space-between;
     the gap is only a minimum, so imposed text spacing shrinks the spacing instead of widening the page. */
  gap: 16px;
}

.platform[class] .pheader .plogo {
  order: 0;
  flex: 0 0 220px;
  width: 220px !important;
  height: 62px !important;
  min-width: 220px;
  display: flex;
  align-items: center;
}

.platform[class] .pheader .festime-official-logo {
  width: 220px !important;
  height: 62px !important;
  max-width: 100%;
  background-color: transparent;
  background-image: url('/assets/festime-logo-silver.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 0;
}

.platform[class] .pheader-nav {
  order: 1;
  align-self: stretch;
  height: 80px !important;
  min-height: 80px;
  flex: 0 1 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(22px, 2.1vw, 38px);
  margin: 0 !important;
}

.platform[class] .pheader-nav > a {
  position: relative;
  height: 80px !important;
  min-height: 80px;
  padding: 0 !important;
  border: 0;
  display: flex;
  align-items: center;
  color: var(--color-on-dark);
  font-size: var(--font-size-sm) !important;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.platform[class] .pheader-nav > a.active::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0 !important;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--color-brand-accent);
}

.platform[class] .pheader-tools {
  order: 2;
  flex: 0 0 auto;
  height: 80px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 14px !important;
}

.platform[class] .pheader-tools .icon-button,
.platform[class] .pheader-tools .pmenu {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-round);
  color: var(--color-white);
}

.platform[class] .pheader-tools .icon-button:hover,
.platform[class] .pheader-tools .icon-button:focus-visible,
.platform[class] .pheader-tools .pmenu:hover,
.platform[class] .pheader-tools .pmenu:focus-visible {
  background: #ffffff12;
}

.platform[class] .pheader-tools .icon-button .icon,
.platform[class] .pheader-tools .pmenu .icon {
  width: 21px;
  height: 21px;
}

.platform[class] .pheader .puser {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--color-white);
  white-space: nowrap;
}

.platform[class] .pheader .puser > span:last-child {
  font-size: var(--font-size-sm);
}

.platform[class] .pheader .navigation-avatar,
.platform[class] .pheader .pavatar,
.platform[class] .pheader .initial-avatar {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px;
  border-radius: var(--radius-round);
}

.platform[class] .pheader .locale-form {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0;
}

.platform[class] .pheader .locale-form select {
  /* Native language names (lot lang12): the select fits its label, within a bound that keeps the header on one line. */
  width: auto;
  min-width: 54px;
  max-width: 112px;
  text-overflow: ellipsis;
  height: 34px;
  padding: 0 7px;
  border: 1px solid #3b4969;
  border-radius: 7px;
  background: var(--color-text);
  color: var(--color-white);
  font-size: var(--font-size-2xs);
}

/* Dashboard retains its useful side rail, but no longer repeats the logo. */
.platform.screen-dashboard .dash-brand { display: none; }
.platform.screen-dashboard .dash-topbar { display: none; }
.platform.screen-dashboard .filmmaker-dashboard { min-height: calc(100svh - 80px); }
.platform.screen-dashboard .dash-sidebar {
  top: 80px;
  min-height: calc(100svh - 80px);
  height: calc(100svh - 80px); /* the sticky rail fits the viewport: its last link stays reachable (WCAG 2.4.11) */
}
/* On short screens the account link sits over the decorative artwork: give it the rail colour so its text stays legible. */
.platform.screen-dashboard .dash-sidebar-user { background-color: inherit; }

@media (max-width: 1200px) {
  .platform[class] .pheader > div {
    padding-inline: var(--space-6) !important;
    gap: var(--space-5);
  }
  .platform[class] .pheader .plogo {
    flex-basis: 180px;
    width: 180px !important;
    min-width: 180px;
    height: 54px !important;
  }
  .platform[class] .pheader .festime-official-logo {
    width: 180px !important;
    height: 54px !important;
  }
  .platform[class] .pheader-nav { gap: 18px; }
  .platform[class] .pheader-nav > a { font-size: var(--font-size-xs) !important; }
  .platform[class] .pheader .puser > span:last-child,
  .platform[class] .pheader .locale-form { display: none; }
}

@media (max-width: 900px) {
  .platform[class] .pheader > div { justify-content: space-between; }
  .platform[class] .pheader-nav { display: none; }
  .platform[class] .pheader-nav.open {
    position: absolute;
    inset: 80px 0 auto;
    z-index: var(--z-overlay);
    height: auto !important;
    min-height: 0;
    padding: 12px 24px 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 18px;
    background: var(--color-text);
    box-shadow: var(--shadow-dropdown);
  }
  .platform[class] .pheader-nav.open > a {
    height: 44px !important;
    min-height: 44px;
    justify-content: center;
  }
  .platform[class] .pheader-nav.open > a.active::after { bottom: 3px !important; }
  .platform[class] .pheader-tools .pmenu { display: grid; }
}

@media (max-width: 600px) {
  .platform[class] .pheader {
    height: 68px !important;
    min-height: 68px !important;
  }
  .platform[class] .pheader > div {
    height: 68px !important;
    min-height: 68px !important;
    padding-inline: var(--space-4) !important;
    gap: var(--space-2);
  }
  .platform[class] .pheader .plogo {
    flex-basis: 145px;
    width: 145px !important;
    min-width: 145px;
    height: 48px !important;
  }
  .platform[class] .pheader .festime-official-logo {
    width: 145px !important;
    height: 48px !important;
  }
  .platform[class] .pheader-tools {
    height: 68px;
    gap: 5px !important;
  }
  .platform[class] .pheader-tools .icon-button:first-child,
  .platform[class] .pheader .puser { display: none; }
  .platform[class] .pheader-tools .icon-button,
  .platform[class] .pheader-tools .pmenu {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
  .platform[class] .pheader-nav.open {
    inset-block-start: 68px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px 16px 16px;
  }
  .platform.screen-dashboard .filmmaker-dashboard { min-height: calc(100svh - 68px); }
  .platform.screen-dashboard .dash-sidebar { top: 68px; }
}

@media (max-width: 370px) {
  .platform[class] .pheader .plogo {
    flex-basis: 132px;
    width: 132px !important;
    min-width: 132px;
  }
  .platform[class] .pheader .festime-official-logo { width: 132px !important; }
}

/* Mobile : le menu latéral du tableau de bord ne doit pas occuper toute la hauteur de l'écran. */
@media (max-width: 900px) {
  .platform.screen-dashboard .dash-sidebar {position: static; top: auto; min-height: 0; height: auto;}
}

/* Conflit d’intérêts : panneau repliable, discret au-dessus de l’évaluation. */
.jury-conflict-panel{padding:12px 18px}
.jury-conflict-panel>summary{cursor:pointer;list-style:none;font-size:var(--font-size-base);color:#5b21b6}
.jury-conflict-panel>summary::-webkit-details-marker{display:none}
.jury-conflict-panel>summary::before{content:"⚠ ";}
.jury-conflict-panel[open]>summary{margin-bottom:var(--space-2)}
/* Header sign-out (real accounts must not depend on the validation bar). */
.platform[class] .pheader-tools .header-logout{display:contents}
.platform[class] .pheader-tools .header-logout .icon-button{background:transparent;cursor:pointer}
@media (max-width:520px){.platform[class] .pheader-tools .header-logout{display:none}}
/* Language switch inside the mobile menu (the header selector is hidden at <=600px). */
.platform[class] .pheader-nav .locale-form-mobile{display:none}
@media (max-width:600px){
 .platform[class] .pheader-nav.open .locale-form-mobile{display:flex;grid-column:1/-1;justify-content:center;align-items:center;gap:8px;padding:8px 0 12px}
 .platform[class] .pheader-nav.open .locale-form-mobile select{height:38px;min-width:150px;border-radius:10px;border:1px solid #ffffff40;background:var(--color-navy-950);color:var(--color-white);padding:0 10px;font-size:14px}
 .platform[class] .pheader-nav.open .locale-form-mobile button{height:38px;min-width:44px;border-radius:10px;border:0;background:var(--color-purple-500);color:var(--color-white);font-weight:700}
}

/* Langue : avec JavaScript, le choix s’applique immédiatement ; le bouton ✓ ne sert qu’en repli. */
.locale-apply-nojs{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;padding:0!important}

/* Header tools identical to the home page on every screen: screen sheets (festival page, project workspace,
   submissions) used to hide the member name, the search button or the language selector, or to reorder the tools,
   which moved the navigation links. Checked at 0 px by tests/e2e/layout-audit.js. */
.platform[class] .pheader .plogo{order:0!important}
.platform[class] .pheader-nav{order:1!important}
.platform[class] .pheader-tools{order:2!important;flex:0 0 auto!important;margin-inline:0!important}
.platform[class] .pheader .puser::after{content:none!important}
@media (min-width:1201px){
 .platform[class] .pheader .puser>span:not(.navigation-avatar):last-child{display:block!important}
 .platform[class] .pheader-tools .locale-form{display:flex!important}
}
@media (min-width:601px){.platform[class] .pheader-tools>.icon-button:first-child{display:grid!important}}

/* Unread notifications: the badge text is hidden from screen readers, which hear « Notifications, N unread » instead. */
.platform[class] .pheader-tools .header-bell{position:relative}
.platform[class] .pheader-tools .notification-badge{position:absolute;top:1px;inset-inline-end:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-pill);background:var(--color-danger-text);color:var(--color-white);font-size:10px;font-weight:var(--font-weight-bold);line-height:18px;text-align:center;pointer-events:none}

/* User menu on the avatar (native <details>: keyboard, Escape-free toggle and expanded state announced by screen readers). */
.platform[class] .pheader .puser-menu{position:relative}
.platform[class] .pheader .puser-menu>summary{list-style:none;cursor:pointer;border-radius:var(--radius-pill);padding-inline-end:4px}
.platform[class] .pheader .puser-menu>summary::-webkit-details-marker{display:none}
.platform[class] .pheader .puser-menu>summary>.icon-chevron{order:3;width:16px;height:16px;flex:0 0 16px;transition:transform var(--duration-fast)}
.platform[class] .pheader .puser-menu[open]>summary>.icon-chevron{transform:rotate(180deg)}
.platform[class] .pheader .puser-dropdown{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:var(--z-dropdown);min-width:230px;padding:var(--space-2);display:grid;gap:2px;background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-dropdown)}
.platform[class] .pheader .puser-dropdown a,.platform[class] .pheader .puser-dropdown button{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:8px 12px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text);font:inherit;font-size:var(--font-size-sm);text-align:start;cursor:pointer;white-space:nowrap}
.platform[class] .pheader .puser-dropdown .icon{width:18px;height:18px;flex:0 0 18px;color:var(--color-brand)}
.platform[class] .pheader .puser-dropdown a:hover,.platform[class] .pheader .puser-dropdown button:hover{background:var(--color-brand-soft)}
.platform[class] .pheader .puser-dropdown :is(a,button):focus-visible{outline:2px solid var(--color-focus)!important;outline-color:var(--color-focus)!important;outline-offset:-2px}
.platform[class] .pheader-tools .puser-dropdown .header-logout{display:block!important;margin:4px 0 0;padding-top:4px;border-top:1px solid var(--color-line-soft)}
.platform[class] .pheader-tools .puser-dropdown .header-logout button{background:transparent}
/* On phones the avatar alone opens the menu (the first name stays hidden). */
@media (max-width:600px){
 .platform[class] .pheader .puser-menu>summary.puser{display:flex!important;gap:4px}
 .platform[class] .pheader .puser-menu>summary.puser>span:last-child{display:none!important}
 .platform[class] .pheader .puser-dropdown{position:fixed;top:68px;inset-inline:var(--space-4);min-width:0}
}