/* ============================================================
   Le Beau Web, styles du MENU, source unique et centralisee.
   Charge apres le <style> inline de chaque page : fait autorite
   (les anciennes copies inline sont donc neutralisees).
   Le HTML du menu est genere par assets/menu.js.
   Utilise les variables de theme (--ink, --stem, --leaf...) definies
   dans le :root inline de chaque page.
   ------------------------------------------------------------
   Barre : sticky par defaut ; l'accueil ajoute .topbar--home
   (position fixe, elle flotte au-dessus du heros).
   ============================================================ */

.topbar{position:sticky;top:0;z-index:70;background:rgba(247,244,233,.82);backdrop-filter:blur(12px);border-bottom:1px solid rgba(31,42,29,.06)}
.topbar--home{position:fixed;left:0;right:0}
.topbar nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,4vw,44px)}

.brand{font-family:var(--serif);font-weight:600;font-size:clamp(1.15rem,1.6vw,1.5rem);letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.brand em{font-style:italic;color:var(--leaf)}

.pill{display:none;align-items:center;gap:2px;background:rgba(255,253,246,.66);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.6);border-radius:999px;padding:5px 6px 5px 16px;box-shadow:0 6px 22px rgba(31,42,29,.10)}
.pill a{font-size:.86rem;font-weight:600;color:var(--ink-2);padding:8px 12px;border-radius:999px;text-decoration:none;transition:color .2s}
.pill a:hover{color:var(--ink)}
.pill a[aria-current="page"]{color:var(--leaf)}
.pill .go{background:#a8542e;color:#fff;padding:9px 16px}
.pill .go:hover{background:#dd9155;color:#4a1f0e}

.pill-item{position:relative;display:flex;align-items:center}
.has-menu>a{display:inline-flex;align-items:center;gap:5px}
.has-menu>a::after{content:"";width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4px solid currentColor;opacity:.55;transition:transform .2s}
.has-menu:hover>a::after,.has-menu:focus-within>a::after{transform:rotate(180deg)}
.submenu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px);padding-top:10px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s,visibility 0s .2s;z-index:30}
.has-menu:hover .submenu,.has-menu:focus-within .submenu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);transition:opacity .2s,transform .2s}
.submenu-inner{background:rgba(255,253,246,.95);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.7);border-radius:16px;box-shadow:0 16px 42px rgba(31,42,29,.20);padding:8px;min-width:238px;display:flex;flex-direction:column;gap:2px}
.submenu-inner a{display:block;white-space:nowrap;font-size:.86rem;font-weight:600;color:var(--ink-2);padding:10px 14px;border-radius:11px;text-decoration:none;transition:background .18s,color .18s}
.submenu-inner a:hover,.submenu-inner a:focus-visible{background:rgba(133,171,139,.20);color:var(--ink)}
.submenu-inner a[aria-current="page"]{color:var(--leaf);background:rgba(133,171,139,.14)}

.nav-right{display:flex;align-items:center;gap:18px}
.nav-right a{font-size:.86rem;font-weight:600;color:var(--ink-2);text-decoration:none;transition:opacity .2s}
.nav-right a:hover{opacity:.7}

.burger{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;background:rgba(255,253,246,.7);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.6);color:var(--ink);cursor:pointer}
.burger span{display:block;width:16px;height:2px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:16px;height:2px;background:currentColor}
.burger span::before{top:-5px}.burger span::after{top:5px}

/* Feuille mobile */
.sheet{position:fixed;inset:0;z-index:90;background:rgba(247,244,233,.94);backdrop-filter:blur(16px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:0;visibility:hidden;transition:opacity .35s var(--curve), visibility 0s .35s}
.sheet.open{opacity:1;visibility:visible;transition:opacity .35s var(--curve)}
.sheet a{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,6vw,2rem);color:var(--ink);text-decoration:none;padding:10px 18px;border-radius:14px;transition:color .2s}
.sheet a:hover{color:var(--leaf)}
.sheet>a[aria-current="page"]{color:var(--leaf)}
.sheet .sub{display:flex;flex-direction:column;align-items:center;margin:-2px 0 6px}
.sheet .sub a{font-family:var(--sans);font-weight:600;font-size:clamp(.98rem,3.4vw,1.12rem);color:var(--ink-2);opacity:.85;padding:6px 14px}
.sheet .sub a:hover{color:var(--leaf);opacity:1}
.sheet .sub a[aria-current="page"]{color:var(--leaf);opacity:1}
.sheet .close{position:absolute;top:22px;right:clamp(16px,4vw,44px);width:42px;height:42px;border-radius:999px;background:rgba(255,253,246,.8);border:1px solid rgba(255,255,255,.7);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
.sheet .close span{display:block;width:16px;height:16px;position:relative}
.sheet .close span::before,.sheet .close span::after{content:'';position:absolute;left:0;top:7px;width:16px;height:2px;background:currentColor}
.sheet .close span::before{transform:rotate(45deg)}
.sheet .close span::after{transform:rotate(-45deg)}

/* Bascule desktop / mobile du menu */
@media(min-width:1024px){ .pill{display:flex} .burger{display:none} }
@media(max-width:1023px){ .nav-right a{display:none} }