/* =========================================================================
   PoolConcept 2026 — Home "5 cadres" — noir + or. From scratch.
   ========================================================================= */
:root{
  --noir:#070708; --noir-2:#0e0e10; --ink:#000;
  --ivoire:#EFEBE3; --gris:#9a9a9e;
  --or:#C8A24C; --or-2:#E4C879; --or-soft:rgba(200,162,76,.36);
  --line:rgba(239,235,227,.14);
  --disp:"Bodoni Moda", Georgia, serif;
  --ui:"Space Grotesk", system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;
  --e:cubic-bezier(.22,.61,.36,1); --slow:cubic-bezier(.16,1,.3,1);
  --bar:rgba(7,7,8,.42);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--noir);color:var(--ivoire);font-family:var(--ui);font-weight:300;
  overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;width:100%;height:100%;object-fit:cover}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
::selection{background:var(--or);color:#000}

/* ---------- Barre haute (logo + services) ---------- */
.topbar{position:fixed;inset:0 0 auto;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(1rem,2.4vw,1.8rem) clamp(1.2rem,3vw,2.4rem);pointer-events:none}
.topbar > *{pointer-events:auto}
.brand{display:inline-flex;align-items:center}
.brand img{height:clamp(30px,3.4vw,48px);width:auto;display:block;object-fit:contain;filter:drop-shadow(0 1px 14px rgba(0,0,0,.6))}
.svc-btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ivoire);border:1px solid var(--or-soft);padding:.6rem 1.1rem;border-radius:1px;
  background:rgba(7,7,8,.42);backdrop-filter:blur(6px);transition:.4s var(--e)}
.svc-btn:hover{background:var(--or);color:#000;border-color:var(--or)}
.svc-btn .plus{width:11px;height:11px;position:relative}
.svc-btn .plus::before,.svc-btn .plus::after{content:"";position:absolute;background:currentColor}
.svc-btn .plus::before{inset:5px 0 5px 0;height:1px}.svc-btn .plus::after{inset:0 5px 0 5px;width:1px}

/* ---------- Grille bento : 5 cadres inégaux ---------- */
.grid{position:fixed;inset:0;display:grid;gap:2px;background:var(--line);
  grid-template-columns:1.5fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr;
  grid-template-areas:"piscine piscine spa sauna" "piscine piscine mini bain"}
.tile[data-cat="piscine"]{grid-area:piscine}
.tile[data-cat="spa"]{grid-area:spa}
.tile[data-cat="sauna"]{grid-area:sauna}
.tile[data-cat="mini"]{grid-area:mini}
.tile[data-cat="bain"]{grid-area:bain}

.tile{position:relative;overflow:hidden;background:var(--noir-2);isolation:isolate}
.tile .media{position:absolute;inset:0;z-index:0;transform:scale(1.02);transition:transform 1.1s var(--slow),filter .6s var(--e)}
.tile .media img{filter:brightness(.74) saturate(.92)}
.tile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,7,8,.15) 0%,rgba(7,7,8,0) 35%,rgba(7,7,8,.55) 100%)}
.tile:hover .media{transform:scale(1.05)}
.tile:hover .media img{filter:brightness(.92) saturate(1.05);animation:none}
/* eau : filtre SVG au survol — UNIQUEMENT les univers aquatiques */
@media (hover:hover){
  .tile[data-cat="piscine"]:hover .media,
  .tile[data-cat="mini"]:hover .media,
  .tile[data-cat="spa"]:hover .media{filter:url(#pc-water)}
}
/* sauna & bains froids : pas d'eau — chaleur / glace */
.tile[data-cat="sauna"] .tap .rip,
.tile[data-cat="bain"] .tap .rip{animation:none;opacity:0}
.tile[data-cat="sauna"]:hover .media img{filter:brightness(.95) saturate(1.08)}
.tile[data-cat="bain"]:hover .media img{filter:brightness(.98) saturate(1.02)}

/* cadres portrait (sauna / bain) : cadrer le sujet, ne pas le rogner au centre */
.tile[data-cat="sauna"] .media img{object-position:50% 38%}
.tile[data-cat="bain"] .media img{object-position:50% 42%}

/* libellé catégorie, barre semi-transparente ~10% du bas */
.tile .label{position:absolute;left:0;right:0;bottom:9%;z-index:3;display:flex;justify-content:center;pointer-events:none}
/* petits cadres : le libelle tient sur une ligne, colle en bas, jamais coupe */
.tile[data-cat="sauna"] .label,
.tile[data-cat="bain"] .label,
.tile[data-cat="spa"] .label,
.tile[data-cat="mini"] .label{bottom:0;left:0;right:0}
.tile[data-cat="sauna"] .label span,
.tile[data-cat="bain"] .label span,
.tile[data-cat="spa"] .label span,
.tile[data-cat="mini"] .label span{width:100%;text-align:center;border-radius:0;border-left:0;border-right:0;border-bottom:0;
  font-size:clamp(.95rem,1.5vw,1.5rem);padding:.7em .8em;background:rgba(7,7,8,.55);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.tile .label span{font-family:var(--disp);font-weight:500;font-size:clamp(1.1rem,2.3vw,2.4rem);letter-spacing:.02em;color:#fff;
  background:rgba(7,7,8,.42);backdrop-filter:blur(7px);border:1px solid var(--or-soft);
  padding:.4em 1.1em;border-radius:2px;box-shadow:0 8px 40px rgba(0,0,0,.4)}
.tile .label .num{font-family:var(--mono);font-size:.42em;color:var(--or-2);letter-spacing:.2em;margin-right:.9em;vertical-align:.35em}

/* icône "tap/click" au survol */
.tile .tap{position:absolute;top:50%;left:50%;z-index:3;width:clamp(46px,4vw,66px);transform:translate(-50%,-60%) scale(.8);
  opacity:0;transition:.45s var(--e);pointer-events:none;color:var(--or-2)}
.tile:hover .tap{opacity:1;transform:translate(-50%,-50%) scale(1)}
.tile .tap svg{width:100%;height:auto;display:block;filter:drop-shadow(0 4px 14px rgba(0,0,0,.6))}
.tile .tap .rip{transform-origin:center;animation:rip 2.4s var(--e) infinite}
.tile .tap .rip2{animation-delay:.5s}.tile .tap .rip3{animation-delay:1s}
@keyframes rip{0%{opacity:.0;transform:scale(.4)}30%{opacity:.9}100%{opacity:0;transform:scale(1.5)}}

/* ---------- Viewer plein écran (catégorie ouverte) ---------- */
.viewer{position:fixed;inset:0;z-index:60;display:none;overflow:hidden;background:var(--ink)}
.viewer.open{display:block}
.viewer .media{position:absolute;inset:0}
.viewer .media img{filter:brightness(.68) saturate(1)}
.viewer .media.water{filter:url(#pc-water)}
.viewer[data-layout="full"]::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,7,8,.35),rgba(7,7,8,0) 30%,rgba(7,7,8,.92) 100%)}
.back{position:fixed;top:clamp(1rem,2.4vw,1.8rem);left:clamp(1.2rem,3vw,2.4rem);z-index:70;display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivoire);
  border:1px solid var(--or-soft);padding:.6rem 1.1rem;border-radius:1px;background:rgba(7,7,8,.5);backdrop-filter:blur(7px);transition:.4s var(--e)}
.back:hover{background:var(--or);color:#000;border-color:var(--or)}
.back svg{width:16px;height:16px}

.v-head{position:absolute;left:0;right:0;top:34%;z-index:65;text-align:center;pointer-events:none;padding-inline:1rem}
.v-head .num{font-family:var(--mono);color:var(--or-2);letter-spacing:.3em;font-size:.8rem}
.v-head h2{font-family:var(--disp);font-weight:500;font-size:clamp(2.4rem,6vw,5.5rem);line-height:1;margin-top:.4rem;color:#fff}

/* barre menu bas (groupes, scroll-snap horizontal) */
.v-menu{position:absolute;left:0;right:0;bottom:0;z-index:66;background:var(--bar);backdrop-filter:blur(10px);
  border-top:1px solid var(--or-soft);padding:clamp(1rem,2.2vw,1.6rem) 0}
.v-menu .scroller{display:flex;gap:clamp(1.6rem,3vw,3rem);overflow-x:auto;scroll-snap-type:x proximity;
  padding:0 clamp(1.4rem,4vw,3rem);scrollbar-width:thin;scrollbar-color:var(--or-soft) transparent}
.v-menu .scroller::-webkit-scrollbar{height:3px}
.v-menu .scroller::-webkit-scrollbar-thumb{background:var(--or-soft)}
.mgroup{scroll-snap-align:start;min-width:max-content}
.mgroup .glabel{font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--or-2);
  padding-bottom:.7rem;margin-bottom:.7rem;border-bottom:1px solid var(--line)}
.mgroup ul{list-style:none;display:flex;flex-direction:column;gap:.45rem}
.mgroup a{font-family:var(--ui);font-weight:300;font-size:clamp(.95rem,1.3vw,1.15rem);color:var(--ivoire);
  display:inline-flex;align-items:center;gap:.6rem;transition:color .3s var(--e),padding .3s var(--e)}
.mgroup a::before{content:"";width:0;height:1px;background:var(--or-2);transition:width .3s var(--e)}
.mgroup a:hover{color:#fff;padding-left:.2rem}
.mgroup a:hover::before{width:14px}
.v-menu .edge{position:absolute;top:0;bottom:0;width:48px;pointer-events:none;z-index:2}
.v-menu .edge.r{right:0;background:linear-gradient(270deg,var(--bar),transparent)}
.v-menu .edge.l{left:0;background:linear-gradient(90deg,var(--bar),transparent)}

/* panneau : transparent en plein écran (head/menu se positionnent sur le viewer) */
.v-panel{display:contents}
.v-head .num,.v-head h2{text-shadow:0 2px 26px rgba(0,0,0,.55)}

/* 4-5 (portrait) : écran scindé — photo sur une moitié, liens centrés sur la moitié noire */
.viewer[data-layout="split"] .media{width:50%}
.viewer[data-layout="split"][data-side="left"]  .media{left:0;right:auto}
.viewer[data-layout="split"][data-side="right"] .media{left:auto;right:0}
.viewer[data-layout="split"] .media img{filter:brightness(.9) saturate(1)}
.viewer[data-layout="split"] .v-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(1.4rem,3vh,2.4rem);position:absolute;top:0;bottom:0;width:50%;padding:clamp(1.6rem,4vw,3.2rem);z-index:66}
.viewer[data-layout="split"][data-side="left"]  .v-panel{right:0;left:auto}
.viewer[data-layout="split"][data-side="right"] .v-panel{left:0;right:auto}
.viewer[data-layout="split"] .v-head{position:static;inset:auto;top:auto}
.viewer[data-layout="split"] .v-menu{position:static;background:none;border:0;backdrop-filter:none;padding:0;width:auto}
.viewer[data-layout="split"] .v-menu .scroller{flex-direction:column;align-items:center;overflow:visible;padding:0;gap:clamp(1.2rem,2.6vh,1.9rem)}
.viewer[data-layout="split"] .v-menu .edge{display:none}
.viewer[data-layout="split"] .mgroup{min-width:0;text-align:center}
.viewer[data-layout="split"] .mgroup .glabel{display:inline-block}
.viewer[data-layout="split"] .mgroup ul{align-items:center}
.viewer[data-layout="split"] .mgroup a{justify-content:center}
.viewer[data-layout="split"] .mgroup a::before{display:none}

/* ---------- Services : 6 cadres "desen tehnic" ---------- */
.services{position:fixed;inset:0;z-index:80;display:none;background:#060607}
.services.open{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:1px;background:var(--line)}
.svc-tile{position:relative;background:#060607;display:grid;place-items:center;overflow:hidden}
/* fond technique : grille + diagonales crayon */
.svc-tile::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:34px 34px}
.svc-tile .cross{position:absolute;inset:18px;border:1px solid var(--or-soft);opacity:.5}
.svc-tile .cross::before,.svc-tile .cross::after{content:"";position:absolute;background:var(--or-soft)}
.svc-tile .cross::before{left:-1px;top:-7px;width:1px;height:14px}
.svc-tile .cross::after{top:-1px;left:-7px;height:1px;width:14px}
.svc-tile .tnum{position:absolute;top:1.2rem;left:1.4rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--or-2);opacity:.8}
.svc-tile h3{position:relative;font-family:var(--disp);font-weight:500;font-size:clamp(1.3rem,2.4vw,2.2rem);text-align:center;color:var(--ivoire);
  padding:.3em .6em;transition:letter-spacing .5s var(--e),color .4s var(--e)}
.svc-tile .sub{position:absolute;bottom:1.4rem;left:0;right:0;text-align:center;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gris);opacity:0;transform:translateY(8px);transition:.45s var(--e)}
.svc-tile:hover{background:#08080a}
.svc-tile:hover h3{letter-spacing:.04em;color:#fff}
.svc-tile:hover .sub{opacity:.9;transform:none}
/* trait crayon qui se trace au survol */
.svc-tile .pen{position:absolute;left:50%;bottom:3.4rem;width:0;height:1px;background:var(--or-2);transform:translateX(-50%);transition:width .5s var(--e)}
.svc-tile:hover .pen{width:46px}

/* ---------- Garde rotation mobile ---------- */
.rotate{position:fixed;inset:0;z-index:200;display:none;background:var(--noir);color:var(--ivoire);
  flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;text-align:center;padding:2rem}
.rotate svg{width:84px;height:84px;color:var(--or-2)}
.rotate .phone{transform-origin:center;animation:rotateHint 2.6s var(--slow) infinite}
@keyframes rotateHint{0%,15%{transform:rotate(0)}45%,70%{transform:rotate(-90deg)}100%{transform:rotate(-90deg)}}
.rotate p{font-family:var(--ui);font-weight:300;max-width:24ch;line-height:1.6;color:var(--gris)}
.rotate b{font-family:var(--disp);color:#fff;font-weight:500;font-size:1.3rem;display:block;margin-bottom:.3rem}
.rotate:not([hidden]){display:flex}

/* ---------- Transitions / a11y ---------- */
::view-transition-old(root),::view-transition-new(root){animation-duration:.5s}
button:focus-visible,a:focus-visible{outline:2px solid var(--or-2);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}}

/* desktop large : libellés un peu plus aérés */
@media (min-width:1500px){ .grid{gap:3px} }
/* séparateur avant un lien lié (ex. Icetubs sous Bains froids) */
.mgroup--sep{border-top:1px solid var(--line);margin-top:1rem;padding-top:1rem}
.mgroup--sep a{color:var(--or-2)}