/* ══════════════════════════════════════════════════════════════════════════
   VERRE LIQUIDE — matière et chrome partagés

   Deux noms à retenir, à me redonner tels quels pour une demande future :

     « verre liquide »   la matière : ce qui est derrière un panneau devient
                         flou, désaturé puis resaturé, et illisible. Le texte
                         posé dessus reste net. Classe : .glass

     « menu popover »    le menu ancré au coin haut droit, de la taille de son
                         contenu, qui surgit depuis ce coin. Il ne couvre pas
                         l'écran : c'est le voile derrière lui qui rend la page
                         illisible. Classes : .shell-links + .shell-scrim

   Fichier identique dans les trois projets. Corriger ici, jamais une copie.

   Variables attendues de la page :
     --ink --ink-2 --ink-3 --accent --edge --hair --r --r-pill
   ══════════════════════════════════════════════════════════════════════════ */

/* ── la matière ─────────────────────────────────────────────────────────────
   Trois couches font l'effet, et il en faut trois :
     1. le flou d'arrière-plan, assez fort pour rendre le texte derrière illisible
     2. la saturation poussée, sinon le flou donne un gris terne
     3. le liseré lumineux interne, qui donne l'épaisseur du bord
   Un fond blanc translucide seul ne suffit pas — c'est ce qui manquait. */
.glass{
  position:relative;
  background:var(--glass,rgba(255,255,255,.55));
  backdrop-filter:blur(44px) saturate(200%);
  -webkit-backdrop-filter:blur(44px) saturate(200%);
  border:1px solid var(--edge,rgba(255,255,255,.7));
  border-radius:var(--r,22px);
  box-shadow:
    0 1px 2px rgba(18,19,26,.04),
    0 20px 52px -20px rgba(18,19,26,.32),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.35);
}

/* ── barre supérieure ── */
.shell{position:sticky;top:0;z-index:50;padding:.65rem 0}
.shell.above{z-index:75}     /* reste net au-dessus du voile quand le menu est ouvert */
.shell-wrap{max-width:1080px;margin:0 auto;padding-inline:clamp(1rem,4vw,2.5rem)}

.shell-bar{
  display:flex;align-items:center;gap:.5rem;min-height:52px;
  padding:.4rem .5rem .4rem .95rem;border-radius:var(--r-pill,999px);
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(44px) saturate(200%);
  -webkit-backdrop-filter:blur(44px) saturate(200%);
  border:1px solid var(--edge,rgba(255,255,255,.7));
  box-shadow:
    0 1px 2px rgba(18,19,26,.04),
    0 16px 40px -18px rgba(18,19,26,.30),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.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)}

/* ── boutons ronds de la barre ── */
.burger,.shell-lang{
  flex:0 0 auto;width:38px;height:38px;padding:0;cursor:pointer;
  border:1px solid var(--edge);border-radius:50%;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  transition:transform .16s ease,background .16s ease;
}
.burger:hover,.shell-lang:hover{background:rgba(255,255,255,.9);transform:translateY(-1px)}
.shell-lang{font-weight:600;font-size:.8rem;letter-spacing:.02em;color:var(--ink)}

.burger{display:none;position:relative}
.burger span{
  position:absolute;left:11px;width:16px;height:1.7px;border-radius:2px;
  background:var(--ink);transition:transform .3s 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}

.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)}

/* ══ menu popover ══════════════════════════════════════════════════════════
   Sous 860 px, les liens deviennent un panneau ancré au coin haut droit, à la
   taille de son contenu. Il surgit depuis ce coin : transform-origin est ce qui
   donne la sensation qu'il sort du bouton plutôt que d'apparaître au hasard.

   PIÈGE : un élément qui porte backdrop-filter crée une « racine d'arrière-plan ».
   Ses descendants ne peuvent plus échantillonner ce qu'il y a derrière la page.
   Le menu étant écrit dans la barre — qui porte backdrop-filter — son propre flou
   ne captait rien : le texte de la page traversait le panneau. shell.js le
   déplace donc dans <body> tant qu'on est en mode popover.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width:860px){
  .burger{display:block}
  .shell-mark{font-size:.98rem}

  .shell-links{
    position:fixed;z-index:70;
    top:calc(env(safe-area-inset-top,0px) + 66px);
    right:clamp(1rem,4vw,2.5rem);
    width:max-content;min-width:180px;max-width:min(68vw,256px);
    display:flex;flex-direction:column;align-items:stretch;gap:.1rem;
    padding:.45rem;border-radius:24px;

    /* Plus opaque que le reste du verre : un menu doit rester lisible même
       posé sur du texte. Le flou de la page, c'est le voile qui s'en charge. */
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(30px) saturate(200%);
    -webkit-backdrop-filter:blur(30px) saturate(200%);
    border:1px solid var(--edge);
    box-shadow:
      0 28px 64px -20px rgba(18,19,26,.45),
      inset 0 1px 0 rgba(255,255,255,.95);

    transform-origin:top right;
    transform:scale(.82) translate(14px,-14px);
    opacity:0;pointer-events:none;
    transition:transform .38s cubic-bezier(.22,1.15,.34,1), opacity .2s ease;
  }
  .shell-links.open{transform:scale(1) translate(0,0);opacity:1;pointer-events:auto}

  .shell-links a,.shell-links button:not(.shell-lang){
    text-align:left;font-size:1rem;padding:.72rem .85rem;border-radius:16px;
  }
  .shell-links a:not(:last-child),
  .shell-links button:not(.shell-lang):not(:last-child){
    border-bottom:1px solid var(--hair);
  }
  .shell-links a.solid{margin-top:.3rem;text-align:center;border-bottom:0}

  .shell-user{
    order:-1;padding:.55rem .85rem .7rem;margin-bottom:.15rem;
    border-bottom:1px solid var(--hair);flex-wrap:wrap;
  }

  /* Le voile : c'est LUI qui rend la page illisible, pas le menu.
     Le flou s'applique à tout ce qui est dessous, écritures comprises. */
  .shell-scrim{
    position:fixed;inset:0;z-index:60;
    background:rgba(247,247,249,.22);
    backdrop-filter:blur(24px) saturate(150%) brightness(1.03);
    -webkit-backdrop-filter:blur(24px) saturate(150%) brightness(1.03);
    opacity:0;pointer-events:none;transition:opacity .32s ease;
  }
  .shell-scrim.on{opacity:1;pointer-events:auto}
  body.shell-locked{overflow:hidden}
}

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

/* ══ barres de défilement ══════════════════════════════════════════════════
   Masquées partout : elles cassent la matière du verre liquide en posant une
   bande grise opaque par-dessus.

   Le contenu reste défilable au doigt, à la molette et au clavier. Là où un
   débordement horizontal est possible, `.fondu` pose un dégradé sur le bord
   droit — c'est ce qui remplace la barre pour signaler qu'il y a une suite.
   ═════════════════════════════════════════════════════════════════════════ */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}

.fondu{position:relative}
.fondu::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:36px;
  pointer-events:none;opacity:0;transition:opacity .25s ease;
  background:linear-gradient(to right,transparent,rgba(247,247,249,.85));
  border-radius:0 var(--r,22px) var(--r,22px) 0;
}
.fondu.deborde::after{opacity:1}

/* ── rail d'onglets : défile au lieu de s'empiler ── */
.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}

/* Sans backdrop-filter, on opacifie : mieux vaut perdre l'effet que la lisibilité. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.shell-bar,.shell-links,.burger,.shell-lang{background:rgba(255,255,255,.96)}
  .shell-scrim{background:rgba(247,247,249,.85)}
}
@media (prefers-reduced-motion:reduce){
  .shell-links,.burger span,.shell-scrim,.shell-lang,.burger{transition:none!important}
}