/* ══════════════════════════════════════════════════════════════════════════
   En-tête partagé — barre en verre, menu coulissant, bascule de langue.

   Fichier identique dans les trois projets. Un défaut corrigé ici se corrige
   partout : ne pas modifier une copie isolée.

   Attend ces variables du thème de la page :
     --ink --ink-2 --ink-3 --accent --edge --hair --lift --r-pill
   ══════════════════════════════════════════════════════════════════════════ */

.shell{position:sticky;top:0;z-index:50;padding:.65rem 0}
.shell-wrap{max-width:1080px;margin:0 auto;padding-inline:clamp(1rem,4vw,2.5rem)}

.shell-bar{
  display:flex;align-items:center;gap:.6rem;min-height:52px;
  padding:.4rem .5rem .4rem .9rem;border-radius:var(--r-pill,999px);
  background:rgba(255,255,255,.64);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--edge,rgba(255,255,255,.75));
  box-shadow:var(--lift), inset 0 1px 0 rgba(255,255,255,.9);
}

.shell-mark{
  font-weight:600;letter-spacing:-.03em;text-decoration:none;white-space:nowrap;
  font-size:1rem;margin-right:auto;
}
.shell-mark i{font-style:normal;color:var(--accent)}

/* ── bouton burger ── */
.burger{
  display:none;width:38px;height:38px;flex:0 0 auto;padding:0;cursor:pointer;
  border:1px solid var(--edge);border-radius:50%;background:rgba(255,255,255,.5);
  position:relative;
}
.burger span{
  position:absolute;left:11px;width:16px;height:1.7px;border-radius:2px;
  background:var(--ink);transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .18s ease;
}
.burger span:nth-child(1){top:13px}
.burger span:nth-child(2){top:18.2px}
.burger span:nth-child(3){top:23.4px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.2px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.2px) rotate(-45deg)}

/* ── liens ── */
.shell-links{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.shell-links a,.shell-links button:not(.shell-lang){
  text-decoration:none;color:var(--ink-2);font-size:.92rem;font-weight:500;
  padding:.42rem .8rem;border-radius:var(--r-pill,999px);
  border:0;background:none;cursor:pointer;white-space:nowrap;
}
.shell-links a:hover,.shell-links button:not(.shell-lang):hover{
  color:var(--ink);background:rgba(255,255,255,.75);
}
.shell-links a.solid{
  background:var(--ink);color:#fff;
}
.shell-links a.solid:hover{background:#000;color:#fff}

/* Bloc « qui est connecté », visible dans la barre sur grand écran
   et rangé en tête du panneau sur mobile. */
.shell-user{display:flex;align-items:center;gap:.45rem;font-size:.88rem;color:var(--ink-2)}
.shell-user .pill{
  background:var(--accent);color:#fff;border-radius:var(--r-pill,999px);
  padding:.12rem .55rem;font-size:.72rem;font-weight:600;
}
.shell-user .pill.staff{background:var(--ink-3)}

/* ── bascule de langue ── */
.shell-lang{
  flex:0 0 auto;cursor:pointer;font-weight:600;font-size:.8rem;letter-spacing:.02em;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--edge);background:rgba(255,255,255,.5);color:var(--ink);
  transition:transform .16s ease;
}
.shell-lang:hover{transform:translateY(-1px);background:rgba(255,255,255,.85)}

/* ══ mobile : le menu devient un panneau coulissant ══ */
@media (max-width:860px){
  .burger{display:block}
  .shell-mark{font-size:.98rem}

  .shell-links{
    position:fixed;top:0;left:0;z-index:70;
    width:min(84vw,320px);height:100dvh;
    display:flex;flex-direction:column;align-items:stretch;gap:.15rem;
    padding:5rem 1.15rem 2rem;
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(30px) saturate(180%);
    -webkit-backdrop-filter:blur(30px) saturate(180%);
    border-right:1px solid var(--edge);
    box-shadow:24px 0 60px -30px rgba(18,19,26,.5);
    transform:translateX(-101%);
    transition:transform .34s cubic-bezier(.32,.72,0,1);
    overflow-y:auto;overscroll-behavior:contain;
  }
  .shell-links.open{transform:translateX(0)}

  .shell-links a,.shell-links button:not(.shell-lang){
    text-align:left;font-size:1.05rem;padding:.8rem .9rem;border-radius:14px;
  }
  .shell-links a.solid{margin-top:.4rem;text-align:center}

  .shell-user{
    order:-1;margin-bottom:.8rem;padding:0 .9rem .9rem;
    border-bottom:1px solid var(--hair);flex-wrap:wrap;
  }

  /* voile derrière le panneau */
  .shell-scrim{
    position:fixed;inset:0;z-index:60;background:rgba(18,19,26,.35);
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;transition:opacity .3s ease;
  }
  .shell-scrim.on{opacity:1;pointer-events:auto}

  /* le burger passe au-dessus du panneau pour servir de bouton de fermeture */
  .burger{position:relative;z-index:80}
  body.shell-locked{overflow:hidden}
}

@media (min-width:861px){
  .shell-scrim{display:none}
}

/* ── rail d'onglets : défile au lieu de s'empiler sur trois lignes ── */
.rail-tabs{
  display:flex;gap:.4rem;margin-bottom:1rem;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;padding-bottom:.2rem;
}
.rail-tabs::-webkit-scrollbar{display:none}
.rail-tabs>*{flex:0 0 auto}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .shell-bar,.shell-links,.burger,.shell-lang{background:rgba(255,255,255,.95)}
}
@media (prefers-reduced-motion:reduce){
  .shell-links,.burger span,.shell-scrim,.shell-lang{transition:none!important}
}