/* =========================================================================
   PoolConcept 2026 — MENU interior (toate paginile, nu home)
   Include: header fix + overlay full-screen. Markup injectat de menu.js.
   ========================================================================= */
:root{
  --m-noir:#070708; --m-noir2:#0e0e10;
  --m-ivoire:#EFEBE3; --m-gris:#9a9a9e;
  --m-or:#C8A24C; --m-or2:#E4C879; --m-orsoft:rgba(200,162,76,.36);
  --m-line:rgba(239,235,227,.14);
  --m-disp:"Bodoni Moda", Georgia, serif;
  --m-ui:"Space Grotesk", system-ui, sans-serif;
  --m-mono:"Space Mono", ui-monospace, monospace;
  --m-e:cubic-bezier(.22,.61,.36,1); --m-slow:cubic-bezier(.16,1,.3,1);
}
[hidden]{display:none!important}

/* ---------- Header fix ---------- */
.pc-hdr{position:fixed;inset:0 0 auto;z-index:90;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(.8rem,1.8vw,1.2rem) clamp(1.2rem,3vw,2.4rem);
  background:linear-gradient(180deg,rgba(7,7,8,.72),rgba(7,7,8,0));
  transition:background .4s var(--m-e)}
.pc-hdr.solid{background:rgba(7,7,8,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--m-line)}
.pc-hdr .pc-logo img{height:clamp(28px,3vw,42px);width:auto;display:block;object-fit:contain;
  filter:drop-shadow(0 1px 12px rgba(0,0,0,.55))}
.pc-hdr-right{display:flex;align-items:center;gap:clamp(.8rem,1.6vw,1.2rem)}
.pc-btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--m-mono);font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--m-ivoire);border:1px solid var(--m-orsoft);
  padding:.55rem 1rem;border-radius:1px;background:rgba(7,7,8,.42);backdrop-filter:blur(6px);
  cursor:pointer;transition:.35s var(--m-e)}
.pc-btn:hover{background:var(--m-or);color:#000;border-color:var(--m-or)}
.pc-btn--devis{border-color:var(--m-or);color:var(--m-or2)}
.pc-btn--devis:hover{color:#000}
/* icon menu: 2 linii care devin X */
.pc-burg{position:relative;width:16px;height:10px}
.pc-burg::before,.pc-burg::after{content:"";position:absolute;left:0;width:100%;height:1.5px;background:currentColor;transition:.35s var(--m-e)}
.pc-burg::before{top:0}.pc-burg::after{bottom:0}
.pc-menu-open .pc-btn--menu .pc-burg::before{top:4px;transform:rotate(45deg)}
.pc-menu-open .pc-btn--menu .pc-burg::after{bottom:4.5px;transform:rotate(-45deg)}

/* ---------- Overlay ---------- */
.pc-ov{position:fixed;inset:0;z-index:85;background:var(--m-noir);display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .45s var(--m-e),visibility .45s var(--m-e)}
.pc-ov.open{opacity:1;visibility:visible}
.pc-ov-main{flex:1;display:grid;grid-template-columns:1.05fr 1fr;min-height:0;
  padding:calc(clamp(28px,3vw,42px) + clamp(2.4rem,5vh,4rem)) clamp(1.4rem,4vw,3.4rem) clamp(1rem,2.4vh,1.6rem)}

/* colonne gauche : les 5 univers */
.pc-cats{display:flex;flex-direction:column;justify-content:center;gap:clamp(.3rem,1.4vh,.8rem);min-height:0}
.pc-cat{display:flex;align-items:baseline;gap:1rem;background:none;border:0;cursor:pointer;text-align:left;
  padding:.25em 0;color:var(--m-ivoire);opacity:0;transform:translateY(16px)}
.pc-ov.open .pc-cat{animation:pcRise .7s var(--m-slow) forwards}
.pc-ov.open .pc-cat:nth-child(2){animation-delay:.06s}
.pc-ov.open .pc-cat:nth-child(3){animation-delay:.12s}
.pc-ov.open .pc-cat:nth-child(4){animation-delay:.18s}
.pc-ov.open .pc-cat:nth-child(5){animation-delay:.24s}
@keyframes pcRise{to{opacity:1;transform:none}}
.pc-cat .n{font-family:var(--m-mono);font-size:.66rem;letter-spacing:.22em;color:var(--m-or2);min-width:2.2em}
.pc-cat .t{font-family:var(--m-disp);font-weight:500;font-size:clamp(1.7rem,4.6vh,3rem);line-height:1.12;
  transition:color .3s var(--m-e),letter-spacing .45s var(--m-e)}
.pc-cat:hover .t,.pc-cat.on .t{color:var(--m-or2);letter-spacing:.02em}
.pc-cat .arr{margin-left:auto;color:var(--m-or2);opacity:0;transform:translateX(-8px);transition:.35s var(--m-e)}
.pc-cat:hover .arr,.pc-cat.on .arr{opacity:1;transform:none}
.pc-cat .arr svg{width:22px;height:22px;display:block}

/* colonne droite : preview + sous-menu */
.pc-panel{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:0;
  padding-left:clamp(1.4rem,3.4vw,3rem);border-left:1px solid var(--m-line)}
.pc-prev{position:relative;aspect-ratio:16/9;max-height:34vh;overflow:hidden;border:1px solid var(--m-line);margin-bottom:clamp(1rem,2.6vh,1.6rem)}
.pc-prev img{width:100%;height:100%;object-fit:cover;filter:brightness(.78) saturate(.98);transform:scale(1.03);
  transition:opacity .4s var(--m-e),transform 1.4s var(--m-slow);display:block}
.pc-prev::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--m-orsoft);opacity:.5;pointer-events:none}
.pc-sub{overflow:auto;scrollbar-width:thin;scrollbar-color:var(--m-orsoft) transparent;min-height:0}
.pc-sub .grp{margin-bottom:clamp(.8rem,2vh,1.2rem)}
.pc-sub .gl{font-family:var(--m-mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--m-or2);
  padding-bottom:.45rem;margin-bottom:.5rem;border-bottom:1px solid var(--m-line)}
.pc-sub ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1.4rem}
.pc-sub a{font-family:var(--m-ui);font-weight:300;font-size:clamp(.92rem,1.1vw,1.05rem);color:var(--m-ivoire);
  text-decoration:none;display:inline-flex;align-items:center;gap:.5rem;transition:color .3s var(--m-e)}
.pc-sub a::before{content:"";width:0;height:1px;background:var(--m-or2);transition:width .3s var(--m-e)}
.pc-sub a:hover{color:var(--m-or2)}
.pc-sub a:hover::before{width:12px}

/* rangée basse : services + contact */
.pc-ov-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:clamp(.9rem,2vh,1.2rem) clamp(1.4rem,4vw,3.4rem);border-top:1px solid var(--m-line)}
.pc-svcs{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}
.pc-svcs a{font-family:var(--m-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--m-gris);text-decoration:none;transition:color .3s var(--m-e)}
.pc-svcs a:hover{color:var(--m-or2)}
.pc-ov-foot .pc-contact{font-family:var(--m-ui);font-weight:300;font-size:.8rem;color:var(--m-gris)}
.pc-ov-foot .pc-contact a{color:var(--m-ivoire);text-decoration:none}
.pc-ov-foot .pc-contact a:hover{color:var(--m-or2)}

/* ---------- Responsive (portrait / écrans étroits) ---------- */
@media (max-width:860px){
  .pc-ov-main{grid-template-columns:1fr;overflow:auto;padding-top:calc(clamp(28px,3vw,42px) + 3.2rem)}
  .pc-panel{border-left:0;padding-left:0;margin-top:1rem}
  .pc-prev{display:none}
  .pc-cat .t{font-size:clamp(1.5rem,6.4vw,2rem)}
}

/* a11y */
.pc-btn:focus-visible,.pc-cat:focus-visible,.pc-sub a:focus-visible,.pc-svcs a:focus-visible{outline:2px solid var(--m-or2);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .pc-ov,.pc-cat,.pc-prev img{transition-duration:.001s!important;animation-duration:.001s!important}
  .pc-ov.open .pc-cat{opacity:1;transform:none}
}

/* séparateur avant un lien lié (ex. Icetubs sous Bains froids) */
.pc-sub .grp--sep{border-top:1px solid var(--m-line);margin-top:clamp(.8rem,2vh,1.2rem);padding-top:clamp(.8rem,2vh,1.2rem)}
.pc-sub .grp--sep a{color:var(--m-or2)}