/* =========================================================================
   PoolConcept 2026 — Contact (CSS dedicat)
   Identitate: enveloppe GRAPHIQUE wireframe or — même langage que le plan 3D.
   ========================================================================= */
:root{
  --c-noir:#070708; --c-noir2:#0c0c0e;
  --c-ivoire:#EFEBE3; --c-gris:#9a9a9e;
  --c-or:#C8A24C; --c-or2:#E4C879; --c-orsoft:rgba(200,162,76,.34);
  --c-line:rgba(239,235,227,.12);
  --c-disp:"Bodoni Moda", Georgia, serif;
  --c-ui:"Space Grotesk", system-ui, sans-serif;
  --c-mono:"Space Mono", ui-monospace, monospace;
  --c-e:cubic-bezier(.22,.61,.36,1); --c-slow:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c-noir);color:var(--c-ivoire);font-family:var(--c-ui);font-weight:300;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
/* planșă discretă în fundal (ca la étude-3d) */
body::before{content:"";position:fixed;inset:0;z-index:-1;opacity:.45;
  background-image:linear-gradient(var(--c-line) 1px,transparent 1px),linear-gradient(90deg,var(--c-line) 1px,transparent 1px);
  background-size:44px 44px}
body::after{content:"";position:fixed;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 50% 28%,transparent 42%,rgba(7,7,8,.82) 100%)}

/* HEAD */
.c-head{text-align:center;padding:clamp(6rem,15vh,9rem) clamp(1.2rem,4vw,3rem) 0;position:relative;z-index:2}
.c-head .eyebrow{font-family:var(--c-mono);font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--c-or2)}
.c-head h1{font-family:var(--c-disp);font-weight:500;font-size:clamp(2.4rem,7vw,5rem);line-height:1;margin:.5rem 0 0}
.c-head .sub{color:var(--c-gris);max-width:52ch;margin:1.2rem auto 0}

/* SCÈNE : enveloppe graphique */
.c-stage{max-width:760px;margin:clamp(2rem,5vh,3.4rem) auto 0;padding-inline:clamp(1.2rem,4vw,3rem);position:relative;z-index:2}
.env-svg{width:100%;height:auto;display:block;overflow:visible}

/* trasee wireframe */
.env-svg .draw{fill:none;stroke:var(--c-or2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 10px rgba(200,162,76,.18))}
.env-svg .thin{stroke:var(--c-orsoft);stroke-width:1}
.env-svg .body{fill:rgba(200,162,76,.03)}
.env-svg .flapg{fill:rgba(7,7,8,.55);transform-box:fill-box;transform-origin:top center;transition:transform 1s var(--c-slow) .4s}
html.js-on .env:not(.sealed) .flapg{transform:scaleY(-1)}          /* clapă deschisă cât JS urmează s-o închidă */
.env-svg .wax{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .55s var(--c-slow) 1.15s}
html.js-on .env.sealed .wax{transform:scale(1)}
.env-svg .waxc{fill:rgba(200,162,76,.12);stroke:var(--c-or2);stroke-width:1.2}
.env-svg .waxt{font-family:"Bodoni Moda",serif;font-weight:500;font-size:15px;fill:var(--c-or2);text-anchor:middle;dominant-baseline:central}
/* text tehnic */
.env-svg .t-mono{font-family:"Space Mono",monospace;fill:var(--c-ivoire)}
.env-svg .t-lbl{font-family:"Space Mono",monospace;fill:var(--c-or2);letter-spacing:.12em}
.env-svg .t-gris{fill:var(--c-gris)}
.env-svg .t-disp{font-family:"Bodoni Moda",serif;fill:var(--c-ivoire)}
/* cote */
.env-svg .dim{stroke:var(--c-orsoft);stroke-width:1}
.env-svg .dimt{font-family:"Space Mono",monospace;font-size:9px;fill:var(--c-or2);letter-spacing:.08em}
/* timbru + oblitération */
.env-svg .stampb{fill:none;stroke:var(--c-orsoft);stroke-width:1;stroke-dasharray:3 3}
.env-svg .pmark{fill:none;stroke:var(--c-or2);stroke-width:1;opacity:0;transition:opacity .5s var(--c-e) .3s}
html.js-on .env.sealed .pmark{opacity:.9}
.env-svg .pmt{font-family:"Space Mono",monospace;font-size:6.5px;fill:var(--c-or2);letter-spacing:.14em;text-anchor:middle}

/* animația de trasare (stroke-draw) — pornește la .sealed sau imediat fără JS */
html.js-on .env-svg .draw{stroke-dasharray:var(--len,1400);stroke-dashoffset:var(--len,1400)}
html.js-on .env.drawn .env-svg .draw{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s var(--c-slow)}

/* butoane */
.c-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:clamp(1.8rem,4vh,2.6rem)}
.c-btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--c-mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;padding:.9rem 1.7rem;border-radius:1px;cursor:pointer;border:1px solid var(--c-or);
  color:var(--c-ivoire);background:none;text-decoration:none;transition:.35s var(--c-e)}
.c-btn.primary{background:var(--c-or);color:#000}
.c-btn:hover{background:var(--c-or);color:#000}
.c-btn svg{width:16px;height:16px}

/* LETTRE : formular (foaie wireframe) */
.letter{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;padding:1.2rem;
  opacity:0;visibility:hidden;transition:opacity .4s var(--c-e),visibility .4s var(--c-e)}
.letter.open{opacity:1;visibility:visible}
.letter .bg{position:absolute;inset:0;background:rgba(4,4,5,.8);backdrop-filter:blur(7px)}
.letter .sheet{position:relative;width:100%;max-width:520px;max-height:92vh;overflow:auto;background:var(--c-noir2);
  color:var(--c-ivoire);padding:clamp(1.8rem,4vw,2.8rem);border:1px solid var(--c-orsoft);
  box-shadow:0 30px 80px rgba(0,0,0,.6);transform:translateY(22px);transition:transform .5s var(--c-slow)}
.letter.open .sheet{transform:none}
.letter .close{position:absolute;top:.8rem;right:.8rem;background:none;border:0;cursor:pointer;color:var(--c-gris);font-size:1.05rem}
.letter .close:hover{color:var(--c-or2)}
.letter .hd{font-family:var(--c-mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--c-or2)}
.letter h3{font-family:var(--c-disp);font-weight:500;font-size:1.5rem;margin:.3rem 0 1.3rem}
.letter .field{margin-bottom:.95rem}
.letter label{display:block;font-family:var(--c-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-gris);margin-bottom:.35rem}
.letter input,.letter textarea{width:100%;background:var(--c-noir);border:1px solid var(--c-line);color:var(--c-ivoire);
  padding:.65rem .75rem;font-family:var(--c-ui);font-weight:300;font-size:.95rem;border-radius:1px}
.letter input:focus,.letter textarea:focus{outline:none;border-color:var(--c-or)}
.letter textarea{min-height:96px;resize:vertical}
.letter .hp{position:absolute;left:-9999px}
.letter .send{width:100%;margin-top:.5rem;background:var(--c-or);color:#000;border:0;padding:.9rem;
  font-family:var(--c-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;border-radius:1px;transition:background .3s var(--c-e)}
.letter .send:hover{background:var(--c-or2)}
.letter .send:disabled{opacity:.6;cursor:default}
.letter .note{margin:.7rem 0 0;font-family:var(--c-ui);font-size:.82rem;color:var(--c-gris);min-height:1.2em;text-align:center}
.letter .note.err{color:#d98a8a}
.letter-sent{display:none;text-align:center}
.letter-sent.show{display:block}
.letter-form.hide{display:none}

/* COORDONNÉES */
.c-info{max-width:1000px;margin:clamp(4rem,10vh,7rem) auto 0;padding-inline:clamp(1.2rem,4vw,3rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.6rem);position:relative;z-index:2}
@media (max-width:720px){.c-info{grid-template-columns:1fr}}
.info-c{border:1px solid var(--c-line);padding:clamp(1.4rem,3vw,2rem);background:var(--c-noir2)}
.info-c .ic{color:var(--c-or2);width:22px;height:22px}
.info-c .k{font-family:var(--c-mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c-gris);margin:.9rem 0 .4rem}
.info-c a,.info-c p{color:var(--c-ivoire);text-decoration:none;font-size:1rem;margin:0;line-height:1.6}
.info-c a:hover{color:var(--c-or2)}

/* CARTE */
.c-map{max-width:1000px;margin:clamp(1.6rem,4vh,2.4rem) auto 0;padding-inline:clamp(1.2rem,4vw,3rem);position:relative;z-index:2}
.c-map .frame{position:relative;border:1px solid var(--c-line);overflow:hidden;aspect-ratio:16/7}
.c-map iframe{width:100%;height:100%;border:0;display:block;filter:invert(.92) hue-rotate(180deg) contrast(1.05)}
.c-hours{text-align:center;font-family:var(--c-mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c-gris);margin-top:1rem;padding-bottom:clamp(4rem,10vh,7rem)}
.c-hours b{color:var(--c-or2);font-weight:400}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--c-or2);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  html.js-on .env-svg .draw{stroke-dashoffset:0}
  html.js-on .env .flapg{transform:none}
  html.js-on .env .wax{transform:scale(1)}
  html.js-on .env .pmark{opacity:.9}
}