/* Finitions de visite (15/11) : menu sur téléphone, barre qui réapparaît en remontant, retour en haut.
   Elles s'ajoutent au site validé sans changer sa structure ni ses textes. */
html{scroll-behavior:smooth}
section[id],header[id],[id].wrap{scroll-margin-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.xp,.xp *{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;box-sizing:border-box}

/* bouton menu (téléphone) */
.xp-menu-btn{all:unset;box-sizing:border-box;display:none;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;
  color:inherit;cursor:pointer;box-shadow:inset 0 0 0 1.5px currentColor;flex:none}
.nav .xp-menu-btn,.hero .xp-menu-btn,.xp-barre .xp-menu-btn{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.xp-menu-btn.xp-seul{margin-left:12px}
.nav:has(.xp-seul)>:nth-last-child(2):not(:first-child){margin-left:auto}
.xp-menu-btn:focus-visible{outline:3px solid #8fa8ff;outline-offset:2px}
.xp-menu-btn svg{width:22px;height:22px}
@media (max-width:900px){.xp-menu-btn{display:inline-flex}.navlinks{flex-wrap:nowrap;gap:8px}}

/* barre collante qui revient quand on remonte */
.xp-barre{position:fixed;left:0;right:0;top:0;z-index:40;background:rgba(10,31,68,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(255,255,255,.08),0 12px 30px -18px rgba(0,0,0,.6);transform:translateY(-105%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.xp-barre.on{transform:none}
.xp-barre-in{max-width:1180px;margin:0 auto;padding:8px max(16px,4vw);display:flex;align-items:center;gap:14px;min-height:62px}
.xp-barre img{height:34px;width:auto;display:block}
.xp-barre nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.xp-barre nav a{color:#d5d8ee;text-decoration:none;font-weight:600;font-size:14.5px;padding:10px 12px;border-radius:999px}
.xp-barre nav a:hover,.xp-barre nav a[aria-current="true"]{color:#fff;background:rgba(255,255,255,.08)}
.xp-barre nav a.xp-cta{background:#D4AF37;color:#00086a;font-weight:800;margin-left:6px}
.xp-barre .xp-menu-btn{margin-left:auto;width:42px;height:42px}
@media (max-width:900px){.xp-barre nav{display:none}}

/* panneau menu */
.xp-panneau[hidden]{display:none}
.xp-panneau{position:fixed;inset:0;z-index:70}
.xp-voile{position:absolute;inset:0;background:rgba(3,8,30,.6);animation:xp-fondu .25s both}
.xp-tiroir{position:absolute;top:0;right:0;bottom:0;width:min(360px,88vw);background:#0A1F44;color:#fff;padding:18px 18px calc(24px + env(safe-area-inset-bottom));
  overflow:auto;box-shadow:-30px 0 60px -20px rgba(0,0,0,.6);animation:xp-glisse .38s cubic-bezier(.2,.8,.2,1) both;display:flex;flex-direction:column}
.xp-tiroir-haut{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.xp-tiroir-haut img{height:38px;width:auto}
.xp-fermer{all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
.xp-fermer:focus-visible{outline:3px solid #8fa8ff}
.xp-tiroir a{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#fff;text-decoration:none;font-weight:700;font-size:18px;
  padding:15px 6px;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
.xp-tiroir a::after{content:"";width:8px;height:8px;border-top:2px solid #D4AF37;border-right:2px solid #D4AF37;transform:rotate(45deg);flex:none}
.xp-tiroir a small{display:block;font-weight:500;font-size:13.5px;color:#a9aecb;margin-top:2px}
.xp-tiroir .xp-groupe{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#D4AF37;margin:20px 6px 2px}
.xp-tiroir .xp-wa{margin-top:auto;justify-content:center;background:#D4AF37;color:#00086a;border-radius:999px;box-shadow:none;min-height:54px;font-size:16px}
.xp-tiroir .xp-wa::after{display:none}
.xp-tiroir .xp-membres{justify-content:center;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);margin:18px 0 10px;min-height:52px;font-size:16px}
.xp-tiroir .xp-membres::after{display:none}
@keyframes xp-fondu{from{opacity:0}}
@keyframes xp-glisse{from{transform:translateX(100%)}}

/* retour en haut */
.xp-haut{all:unset;position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(84px + env(safe-area-inset-bottom));z-index:35;width:46px;height:46px;border-radius:50%;
  background:#D4AF37;color:#00086a;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 14px 30px -12px rgba(0,0,0,.55);
  opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .3s,transform .3s}
.xp-haut.on{opacity:1;transform:none;pointer-events:auto}
.xp-haut:focus-visible{outline:3px solid #8fa8ff;outline-offset:2px}
@media (min-width:901px){.xp-haut{bottom:28px}}

[data-tier="reduit"] .xp-voile,[data-tier="reduit"] .xp-tiroir{animation:none}
[data-tier="reduit"] .xp-barre,[data-tier="reduit"] .xp-haut{transition:none}