/* Portail de 3dgogarden.com : deux moitiés (Go | Échecs), chacune avec la vidéo de fond de son site et une carte vitrée
   reprise du menu (public/css/styles.css .menu-hero-card) — Cinzel, laque #9e2a22, or #c6951f. Téléphone : moitiés empilées. */
:root { --red: #9e2a22; --gold: #c6951f; --gold2: #e5b94e; --ink: #181512; --paper: #faf7f0; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #120d09; color: var(--ink); font-family: 'Cormorant Garamond', Georgia, serif; }
body { overflow: hidden; }
a { color: inherit; text-decoration: none; }

/* ---- barre du haut ---- */
.pt-top { position: fixed; z-index: 5; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 22px 14px; background: linear-gradient(#120d09cc, #120d0900); pointer-events: none; }
.pt-top > * { pointer-events: auto; }
.pt-brand { display: flex; align-items: center; gap: 10px; font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--paper); font-size: 15px; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.pt-mark { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 18%, var(--gold2) 40%, var(--gold) 70%);
  box-shadow: 0 0 12px rgba(229,185,78,.6); }
.pt-lang { display: flex; gap: 6px; padding: 5px; border-radius: 12px; background: rgba(28,20,12,.72); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pt-lang button { border: 0; padding: 3px; border-radius: 6px; background: none; cursor: pointer; opacity: .55; transition: opacity .2s, background .2s; line-height: 0; }
.pt-lang button:hover, .pt-lang button:focus-visible { opacity: .9; }
.pt-lang button.on { opacity: 1; background: rgba(229,185,78,.28); box-shadow: inset 0 0 0 1px var(--gold2); }
.pt-lang img { width: 24px; height: 16px; object-fit: cover; border-radius: 2px; display: block; }

/* ---- deux moitiés ---- */
.pt-split { position: relative; display: flex; height: 100dvh; width: 100%; }
.pt-ask { position: absolute; z-index: 4; left: 50%; top: calc(74px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); margin: 0;
  font-family: 'Cinzel', serif; font-weight: 600; font-size: clamp(20px, 2.6vw, 34px); color: var(--paper); white-space: nowrap;
  text-shadow: 0 2px 18px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.9); pointer-events: none; }
.pt-side { position: relative; flex: 1 1 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
  transition: flex-grow .55s cubic-bezier(.3,.7,.2,1); outline: none; }
.pt-side + .pt-side { border-left: 1px solid rgba(229,185,78,.55); }
.pt-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s ease, filter .6s; filter: saturate(.92); }
.pt-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, rgba(18,13,9,.05), rgba(18,13,9,.55)); transition: background .5s; }
/* survol : la moitié choisie grandit, l'autre s'estompe */
@media (hover: hover) {
  .pt-split:hover .pt-side { flex-grow: .8; }
  .pt-split .pt-side:hover, .pt-split .pt-side:focus-visible { flex-grow: 1.25; }
  .pt-side:hover .pt-bg, .pt-side:focus-visible .pt-bg { transform: scale(1.08); filter: saturate(1.05); }
  .pt-split:hover .pt-side:not(:hover) .pt-veil { background: rgba(18,13,9,.55); }
}

/* ---- carte vitrée (comme le menu du site) ---- */
.pt-card { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  width: min(380px, 80%); padding: 26px 26px 24px; border-radius: 26px; background: rgba(255,255,255,.66);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 28px 70px rgba(10,7,4,.45), inset 0 0 22px rgba(255,255,255,.35), inset 0 0 0 1px rgba(198,149,31,.55);
  transform: translateY(0); transition: transform .45s cubic-bezier(.3,.7,.2,1), box-shadow .45s; }
.pt-side:hover .pt-card, .pt-side:focus-visible .pt-card { transform: translateY(-6px);
  box-shadow: 0 36px 80px rgba(10,7,4,.55), inset 0 0 22px rgba(255,255,255,.35), inset 0 0 0 2px var(--gold); }
.pt-icon { width: 64px; height: 64px; color: var(--ink); }
.pt-icon svg { width: 100%; height: 100%; }
.pt-name { font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(30px, 3.4vw, 44px); color: var(--red); line-height: 1; letter-spacing: .04em; }
.pt-site { font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); }
.pt-slogan { font-style: italic; font-size: 19px; font-weight: 500; color: #3b2a1c; line-height: 1.25; min-height: 2.5em; }
.pt-btn { margin-top: 6px; padding: 11px 26px; border-radius: 999px; font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px; letter-spacing: .05em;
  color: var(--paper); background: linear-gradient(#b3342b, var(--red)); box-shadow: 0 6px 18px rgba(158,42,34,.45), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .2s, box-shadow .2s; }
.pt-side:hover .pt-btn, .pt-side:focus-visible .pt-btn { transform: scale(1.04); box-shadow: 0 10px 26px rgba(158,42,34,.6), inset 0 1px 0 rgba(255,255,255,.3); }
.pt-side:focus-visible .pt-card { outline: 3px solid var(--gold2); outline-offset: 4px; }

.pt-foot { position: fixed; z-index: 5; inset: auto 0 0 0; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); text-align: center;
  font-size: 13px; color: rgba(250,247,240,.75); background: linear-gradient(#120d0900, #120d09cc); pointer-events: none; }

/* ---- téléphone / écran en hauteur : moitiés empilées ---- */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1024px) {
  .pt-split { flex-direction: column; }
  .pt-side + .pt-side { border-left: 0; border-top: 1px solid rgba(229,185,78,.55); }
  .pt-ask { top: calc(64px + env(safe-area-inset-top, 0px)); font-size: 20px; }
  .pt-go .pt-card { margin-top: 70px; }
  .pt-card { padding: 16px 18px 16px; gap: 5px; width: min(340px, 86%); border-radius: 20px; }
  .pt-icon { width: 44px; height: 44px; }
  .pt-slogan { font-size: 16px; min-height: 0; }
  .pt-btn { padding: 9px 22px; font-size: 14px; }
  .pt-brand { font-size: 13px; }
  .pt-lang img { width: 20px; height: 14px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .pt-ask { top: calc(54px + env(safe-area-inset-top, 0px)); font-size: 17px; }
  .pt-card { padding: 12px 16px; gap: 4px; margin-top: 50px; }
  .pt-icon { display: none; }
  .pt-slogan { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-side, .pt-bg, .pt-card, .pt-btn { transition: none; }
}

/* bouton de la musique des menus (js/menu-music.js) */
#menu-music-btn{position:fixed;z-index:60;left:16px;bottom:calc(44px + env(safe-area-inset-bottom,0px));width:40px;height:40px;border-radius:9999px;display:flex;align-items:center;justify-content:center;
  padding:0;cursor:pointer;color:#faf7f0;background:rgba(28,20,12,.62);border:1px solid rgba(229,185,78,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(0,0,0,.35)}
#menu-music-btn[hidden]{display:none}
#menu-music-btn svg{width:22px;height:22px}#menu-music-btn .mm-x{display:none}#menu-music-btn.off .mm-x{display:inline}#menu-music-btn.off .mm-w{display:none}#menu-music-btn.off{opacity:.7}