/* PoolConcept 2026 — Réalisations (galerie "vivante").
   Système du site : noir + or, Bodoni Moda / Space Grotesk / Space Mono.
   Effet eau : ripple qui suit le curseur (canvas #rRipple) + caustiques ambiantes (SVG). */

:root{
  --r-noir:#070708; --r-noir2:#0c0c0e;
  --r-ivoire:#EFEBE3; --r-gris:#9a9a9e;
  --r-or:#C8A24C; --r-or2:#E4C879; --r-orsoft:rgba(200,162,76,.5);
  --r-ice:#9FD6E8;
  --r-line:rgba(239,235,227,.12);
  --r-disp:"Bodoni Moda", Georgia, serif;
  --r-ui:"Space Grotesk", system-ui, sans-serif;
  --r-mono:"Space Mono", ui-monospace, monospace;
  --r-e:cubic-bezier(.22,.61,.36,1); --r-slow:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--r-noir);color:var(--r-ivoire);font-family:var(--r-ui);
  font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.r-wrap{max-width:1400px;margin:0 auto;padding:0 clamp(1.1rem,3.5vw,2.6rem)}

/* ---------- couches d'eau ---------- */
#rRipple{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;
  mix-blend-mode:screen;opacity:.55}
.r-caustics{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;
  opacity:.05;mix-blend-mode:soft-light}
.r-caustics rect{fill:var(--r-ice)}

/* ---------- hero ---------- */
.r-hero{position:relative;z-index:2;padding:clamp(7rem,16vh,11rem) 0 clamp(2.4rem,6vh,4rem)}
.r-kicker{font-family:var(--r-mono);font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--r-ice);margin:0 0 1rem;display:flex;align-items:center;gap:.7rem}
.r-kicker::before{content:"";width:26px;height:1px;background:var(--r-orsoft)}
.r-hero h1{font-family:var(--r-disp);font-weight:400;font-size:clamp(2.8rem,9vw,7rem);
  line-height:.96;letter-spacing:-.01em;margin:0}
.r-hero h1 em{font-style:italic;color:var(--r-or2)}
.r-sub{margin:1.2rem 0 0;max-width:52ch;color:var(--r-gris);font-size:clamp(1rem,1.5vw,1.18rem)}

/* ---------- grille mosaïque ---------- */
.r-main{position:relative;z-index:2;padding-bottom:clamp(3rem,8vw,6rem)}
.r-grid{display:grid;gap:clamp(.6rem,1.2vw,1rem);
  grid-template-columns:repeat(auto-fill,minmax(clamp(160px,22vw,240px),1fr));
  grid-auto-rows:clamp(190px,24vw,280px);grid-auto-flow:row dense}
.r-tile{position:relative;overflow:hidden;display:block;cursor:zoom-in;
  background:var(--r-noir2);border:1px solid var(--r-line);
  opacity:0;transform:translateY(26px) scale(.98);
  transition:opacity .8s var(--r-slow),transform .55s var(--r-e),box-shadow .45s var(--r-e),z-index 0s;
  will-change:transform}
.r-tile.in{opacity:1;transform:none}
.r-tile.is-big{grid-column:span 2;grid-row:span 2}
.r-tile img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--r-slow),filter .5s var(--r-e);
  filter:saturate(.92) brightness(.92)}

/* survol : la tuile se soulève avec le curseur, cadre or, ombre profonde */
.r-tile:hover{transform:translateY(-14px) scale(1.05);z-index:5;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.75), 0 0 0 1px var(--r-orsoft)}
.r-tile:hover img{transform:scale(1.06);filter:saturate(1.05) brightness(1)}

/* pastille "+" au survol */
.r-plus{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5);
  width:52px;height:52px;display:grid;place-items:center;border:1px solid var(--r-or2);
  border-radius:50%;background:rgba(7,7,8,.35);backdrop-filter:blur(3px);color:var(--r-or2);
  opacity:0;transition:opacity .35s var(--r-e),transform .45s var(--r-e);pointer-events:none}
.r-plus svg{width:22px;height:22px}
.r-tile:hover .r-plus{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* on masque l'icône par défaut de la galerie ici (on a notre "+") */
#rGrid .pc-gitem .zi{display:none}

@media (max-width:640px){ .r-tile.is-big{grid-column:span 1;grid-row:span 1} }

/* ---------- final + footer ---------- */
.r-final{position:relative;z-index:2;text-align:center;padding:clamp(4rem,10vw,8rem) 0}
.r-h2{font-family:var(--r-disp);font-weight:400;font-size:clamp(1.7rem,4vw,3rem);margin:0 0 1.8rem;
  letter-spacing:-.01em;text-wrap:balance}
.r-cta{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--r-ui);font-weight:500;
  font-size:.86rem;padding:1rem 1.7rem;color:var(--r-noir);background:var(--r-or2);
  border:1px solid var(--r-or2);text-decoration:none;cursor:pointer;transition:.35s var(--r-e)}
.r-cta svg{width:16px;height:16px;transition:transform .35s var(--r-e)}
.r-cta:hover{background:transparent;color:var(--r-or2)}
.r-cta:hover svg{transform:translateX(4px)}
.r-foot{position:relative;z-index:2;border-top:1px solid var(--r-line);padding:2.2rem 0;
  color:var(--r-gris);font-family:var(--r-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.r-foot a{color:var(--r-or2);text-decoration:none}

/* ---------- accessibilité : moins d'animation ---------- */
@media (prefers-reduced-motion:reduce){
  #rRipple,.r-caustics{display:none}
  .r-tile{opacity:1;transform:none;transition:box-shadow .3s,transform .3s}
  .r-caustics animate{display:none}
}