/* ============================================================
   MENU HUB — bouton à droite + panneau latéral (design original).
   Une seule définition propre, sans doublon ni conflit.
   ============================================================ */

/* ---- bouton burger ---- */
.hub,
.hub.classic,
.hub.docked{
  position:fixed;
  left:auto;
  right:clamp(18px,3vw,38px);
  top:calc((var(--header-h, 76px) - 50px) / 2);
  width:50px;
  height:50px;
  transform:none;
  border-radius:50%;
  background:var(--navy,#2c4980);
  border:1px solid rgba(255,255,255,.18);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 35px rgba(16,32,56,.18);
  opacity:1; pointer-events:auto;
  z-index:1002;
  transition: transform .3s var(--easeout), box-shadow .25s, background .25s;
}
.hub:hover,
.hub.classic:hover,
.hub.docked:hover{ filter:brightness(1.1); }
.hub.open{ background:var(--orange,#f39200); }

/* Sur la page d'Accueil, le bouton porte un dégradé animé (identité de
   la marque) au lieu de la couleur unie des autres pages. */
body.page-template-template-hub .hub:not(.open),
body.page-template-templates-template-hub-php .hub:not(.open),
body.book-fullscreen .hub:not(.open){
  background:linear-gradient(135deg,#16283f,#2c4980,#17758d,#2c4980);
  background-size:300% 300%; animation:hubGradientAccueil 6s ease-in-out infinite;
}
@keyframes hubGradientAccueil{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }

.hub{ box-sizing:border-box; }
.hub-bar{
  position:absolute; width:20px; height:2px; left:50%; top:50%; margin-left:-10px; margin-top:-1px; background:#fff; border-radius:2px;
  transition: transform .42s cubic-bezier(.2,.8,.2,1), opacity .22s, width .3s;
}
.hub-bar.b1{ transform:translateY(-6px); }
.hub-bar.b2{ transform:translateY(0); }
.hub-bar.b3{ transform:translateY(6px); }
.hub.open .hub-bar.b1{ transform:rotate(45deg); }
.hub.open .hub-bar.b2{ opacity:0; transform:scaleX(.2); }
.hub.open .hub-bar.b3{ transform:rotate(-45deg); }

@media (max-width:600px){
  .hub, .hub.classic, .hub.docked{ left:auto; right:16px; top:calc((var(--header-h, 76px) - 46px) / 2); width:46px; height:46px; }
}

.site-header .wrap{ justify-content:flex-start; gap:0; }
.site-header .site-logo{ margin-right:auto; margin-left:0; }

/* ---- panneau latéral (le menu lui-même) ---- */
.hub-menu{
  position:fixed; inset:0; z-index:1001;
  display:flex; align-items:center; justify-content:flex-end;
  opacity:1; visibility:hidden; pointer-events:none;
  transition: visibility 0s linear .5s;
}
.hub-menu.open{ visibility:visible; pointer-events:auto; transition:none; }

.hub-backdrop{
  position:absolute; inset:0; background:rgba(10,18,30,.26); backdrop-filter:blur(5px);
  opacity:0; transition: opacity .38s ease;
}
.hub-menu.open .hub-backdrop{ opacity:1; }

.hub-card{
  position:relative; height:100%; width:min(430px,92vw); border-radius:34px 0 0 34px;
  padding:74px 44px 34px; background:#ffffff; box-shadow:-25px 0 70px rgba(10,18,30,.18);
  text-align:left; overflow:auto;
  transform:translateX(108%) rotate(2deg) scale(.98); transform-origin:right center; opacity:1;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.hub-menu.open .hub-card{ transform:translateX(0) rotate(0) scale(1); }
.hub-logo{ width:38px; margin:0 0 30px; opacity:.9; }

.hub-list{ list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:0; }
.hub-list li{ border-bottom:1px solid var(--line,rgba(0,0,0,.08)); }
.hub-list a,
.hub-list button{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  text-align:left; padding:13px 0; font-size:clamp(17px,2vw,22px); font-weight:800;
  color:var(--ink,var(--navy)); text-decoration:none; background:none; border:0; cursor:pointer;
}
.hub-list a::after{
  content:''; width:14px; height:14px; opacity:.35; transform:translateX(-4px); transition:.25s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316283f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat;
}
.hub-list a:hover::after{ opacity:1; transform:translateX(0) rotate(8deg); }
.hub-list-site{ margin-top:0; padding-top:0; border-top:0; }
.hub-list-site a{ font-size:14px; font-weight:650; color:var(--muted); }

.hub-contact{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding-top:22px; border-top:var(--border-w) solid var(--border-c);
}
.hub-contact a{
  display:flex; align-items:center; justify-content:flex-start; gap:9px; text-decoration:none;
  font-size:13px; font-weight:700; color:var(--muted); transition: color .25s;
}
.hub-contact a:hover{ color:var(--teal); }

@media (max-width:600px){
  .hub-card{ padding:72px 28px 28px; border-radius:26px 0 0 26px; }
}

/* ---- interrupteur mode sombre (dans le menu) ---- */
.hub-theme{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:12px 14px; border-radius:var(--radius-card); background:var(--bg-soft); margin-top:18px;
  font-size:13px; font-weight:700; color:var(--ink);
}
.hub-theme-track{
  position:relative; width:42px; height:24px; border-radius:999px; background:var(--line); flex:none;
  transition: background .3s var(--easeout);
}
.hub-theme[aria-pressed="true"] .hub-theme-track{ background:var(--navy); }
.hub-theme-dot{
  position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.25); transition: transform .3s var(--easeout);
  display:flex; align-items:center; justify-content:center;
}
.hub-theme[aria-pressed="true"] .hub-theme-dot{ transform:translateX(18px); }
.hub-theme-dot svg{ width:11px; height:11px; }

/* ---- sélecteur de style graphique (admin) ---- */
.style-picker{ margin-top:14px; padding:12px 14px; border-radius:12px; background:var(--bg-soft); }
.style-picker-label{ display:block; font-size:11px; font-weight:700; color:var(--muted); margin-bottom:10px; }
.style-swatches{ display:grid; grid-template-columns:repeat(4,36px); gap:8px; }
.style-sw{
  width:100%; aspect-ratio:1; border-radius:50%; border:2px solid var(--ink); cursor:pointer;
  transition: transform .25s var(--easeout), box-shadow .25s;
  padding:0;
}
.style-sw:hover{ transform:scale(1.12); }
.style-sw.active{ box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--ink); }

.hub-games-link{
  display:block; margin-top:12px; padding:8px 4px; text-align:center;
  font-size:11px; font-weight:600; color:var(--muted); background:none; border:0; cursor:pointer;
  letter-spacing:.02em; transition: color .2s;
}
.hub-games-link:hover{ color:var(--navy); }


/* Accueil : le menu est hors du conteneur d'introduction pour rester cliquable.
   Il reste invisible pendant l'écran d'entrée puis devient disponible dès l'entrée. */
body.entrance-locked #hubBtn,
body.entrance-locked #hubMenu{ opacity:0 !important; pointer-events:none !important; }
#hubBtn{ transition:opacity .35s ease, transform .3s var(--easeout), box-shadow .25s, background .25s; }

/* V9 — burger aligné sur le header : il ne recouvre plus le titre du hero. */
.site-header .site-logo{max-width:calc(100% - 76px);}
.site-header .site-logo img{height:52px;width:auto;max-width:min(310px,72vw);object-fit:contain;}
.hub{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}


/* V11 — menu partagé : apparition contrôlée sur l'accueil. */
body.home #hubBtn,
body.page-template-template-accueil #hubBtn,
body.page-template-templates-template-accueil-php #hubBtn,
body.page-template-template-hub #hubBtn,
body.page-template-templates-template-hub-php #hubBtn{
  opacity:0;
  pointer-events:none;
  transform:translateY(-10px) scale(.96);
}
body.home #hubBtn.hub-ready,
body.page-template-template-accueil #hubBtn.hub-ready,
body.page-template-templates-template-accueil-php #hubBtn.hub-ready,
body.page-template-template-hub #hubBtn.hub-ready,
body.page-template-templates-template-hub-php #hubBtn.hub-ready{
  opacity:1;
  pointer-events:auto;
  transform:none;
}
body:not(.home):not(.page-template-template-accueil):not(.page-template-templates-template-accueil-php):not(.page-template-template-hub):not(.page-template-templates-template-hub-php) #hubBtn{
  opacity:1;
  pointer-events:auto;
}

.home-discover-cue{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:8;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  padding:7px 12px;
  border:0;
  background:transparent;
  color:var(--navy,#2c4980);
  font:inherit;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  cursor:pointer;
  opacity:.72;
  transition:opacity .25s ease, transform .25s ease;
}
.home-discover-cue:hover{opacity:1;transform:translateX(-50%) translateY(3px)}
.home-discover-cue svg{animation:dpDiscoverBounce 1.8s ease-in-out infinite}
@keyframes dpDiscoverBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}