/* =============================================================
   PoolConcept — design system propriu (superiorpool.ch)
   Noir luxe + accent or champagne discret. Distinct de Ceramic.
   ============================================================= */

:root{
  --noir:#0A0A0B;        /* fond */
  --noir-2:#111113;      /* panneaux */
  --noir-3:#17171A;      /* survol panneaux */
  --ivoire:#ECE8E1;      /* texte clair */
  --gris:#8C8C90;        /* texte secondaire */
  --or:#C2A36B;          /* accent or champagne — usage parcimonieux */
  --or-clair:#D8BE8C;
  --hair:rgba(236,232,225,.12);
  --hair-or:rgba(194,163,107,.34);

  --serif:"Fraunces", Georgia, serif;        /* titres */
  --sans:"Manrope", system-ui, sans-serif;   /* corps / UI */
  --script:"Pinyon Script", cursive;         /* accent manuscrit */

  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:cubic-bezier(.16,1,.3,1);
  --wrap:1280px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--noir); color:var(--ivoire);
  font-family:var(--sans); font-weight:300; line-height:1.6;
  font-size:clamp(15px,1.05vw,17px); letter-spacing:.01em;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--or); color:var(--noir); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1.2rem,4vw,3rem); }
.eyebrow{ font-family:var(--sans); font-weight:500; font-size:.74rem; letter-spacing:.28em; text-transform:uppercase; color:var(--or); }

/* ---------- Header ---------- */
#hdr{ position:fixed; inset:0 0 auto; z-index:60; padding-block:clamp(1rem,2vw,1.5rem);
      transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s var(--ease);
      border-bottom:1px solid transparent; }
#hdr.scrolled{ background:rgba(10,10,11,.82); backdrop-filter:blur(14px);
               padding-block:.7rem; border-bottom:1px solid var(--hair); }
.nav{ display:flex; align-items:center; justify-content:space-between; }
.logo{ font-family:var(--serif); font-weight:400; font-size:1.35rem; letter-spacing:.02em; }
.logo span{ color:var(--or); margin-inline:.06em; }
.nav-links{ display:flex; gap:clamp(1.4rem,2.6vw,2.6rem); align-items:center; }
.nav-links a{ font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ivoire); position:relative; padding-block:.3rem; }
.nav-links a:not(.quote)::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--or); transition:width .4s var(--ease); }
.nav-links a:not(.quote):hover::after{ width:100%; }
.nav-links .quote{ border:1px solid var(--hair-or); color:var(--or); padding:.55rem 1.2rem; border-radius:2px; transition:background .4s var(--ease), color .4s var(--ease); }
.nav-links .quote:hover{ background:var(--or); color:var(--noir); }
.burger{ display:none; width:30px; height:20px; background:none; border:0; position:relative; cursor:pointer; }
.burger span{ position:absolute; left:0; width:100%; height:1.5px; background:var(--ivoire); transition:.4s var(--ease); }
.burger span:first-child{ top:4px; } .burger span:last-child{ bottom:4px; }

.overlay{ position:fixed; inset:0; z-index:55; background:var(--noir); display:flex; flex-direction:column;
          align-items:center; justify-content:center; gap:1.6rem; opacity:0; visibility:hidden; transition:.5s var(--ease); }
.overlay.open{ opacity:1; visibility:visible; }
.overlay a{ font-family:var(--serif); font-size:1.9rem; color:var(--ivoire); }
.overlay a:hover{ color:var(--or); }

/* ---------- HERO triptyque (signature) ---------- */
.hero{ position:relative; height:100svh; min-height:600px; overflow:hidden; }
.tript{ position:absolute; inset:0; display:flex; }
.panel{ position:relative; flex:1 1 0; overflow:hidden; transition:flex-grow .7s var(--slow); border-right:1px solid var(--hair-or); }
.panel:last-child{ border-right:0; }
.panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
            filter:grayscale(1) brightness(.5) contrast(1.05); transform:scale(1.06);
            transition:filter .9s var(--ease), transform 6s var(--slow); }
.panel .plabel{ position:absolute; left:0; right:0; bottom:clamp(1.5rem,4vh,3rem); text-align:center; z-index:3;
                font-family:var(--sans); font-weight:500; font-size:.8rem; letter-spacing:.24em; text-transform:uppercase;
                color:var(--ivoire); opacity:0; transform:translateY(10px); transition:.5s var(--ease); }
.panel .plabel::before{ content:""; display:block; width:1px; height:clamp(20px,4vh,40px); background:var(--or); margin:0 auto .8rem; transform:scaleY(0); transform-origin:bottom; transition:transform .5s var(--ease) .05s; }
@media (hover:hover){
  /* accordéon : le panneau survolé s'ouvre à ~95%, les autres se réduisent */
  .hero:hover .panel{ flex-grow:1; }
  .hero:hover .panel:hover{ flex-grow:38; }
  .panel:hover img{ filter:grayscale(0) brightness(.82) contrast(1.02); transform:scale(1); }
  .panel:hover .plabel{ opacity:1; transform:none; }
  .panel:hover .plabel::before{ transform:scaleY(1); }
}
.panel.press img{ filter:grayscale(0) brightness(.78); transform:scale(1); }
.panel.press .plabel{ opacity:1; transform:none; }
.panel.press .plabel::before{ transform:scaleY(1); }

.hero-veil{ position:absolute; inset:0; z-index:2; pointer-events:none;
            background:radial-gradient(120% 90% at 50% 38%, rgba(10,10,11,.18) 0%, rgba(10,10,11,.62) 70%, rgba(10,10,11,.9) 100%); }
/* cadru décoratif or (linii fine în colțuri) */
.hero-frame{ position:absolute; inset:clamp(1rem,2.4vw,2.2rem); z-index:4; pointer-events:none; }
.hero-frame::before,.hero-frame::after{ content:""; position:absolute; width:clamp(40px,7vw,90px); height:clamp(40px,7vw,90px); }
.hero-frame::before{ top:0; left:0; border-top:1px solid var(--hair-or); border-left:1px solid var(--hair-or); }
.hero-frame::after{ bottom:0; right:0; border-bottom:1px solid var(--hair-or); border-right:1px solid var(--hair-or); }

.hero-content{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center;
               text-align:center; pointer-events:none; padding-inline:1.2rem; }
.hero-content .eyebrow{ opacity:0; transform:translateY(14px); animation:rise 1s var(--ease) .3s forwards; }
.hero-content h1{ font-family:var(--serif); font-weight:300; font-size:clamp(2.6rem,8vw,6.4rem); line-height:1; letter-spacing:-.015em; margin-top:1.1rem; }
.hero-content h1 .script{ font-family:var(--script); font-weight:400; color:var(--or); font-size:1.32em; line-height:.6; letter-spacing:0; padding-inline:.06em; }
.hero-content h1 > span{ display:inline-block; opacity:0; transform:translateY(22px); animation:rise 1.1s var(--slow) forwards; }
.hero-content h1 .w1{ animation-delay:.45s; } .hero-content h1 .w2{ animation-delay:.6s; }
.hero-rule{ width:0; height:1px; background:var(--hair-or); margin:clamp(1.4rem,3vh,2.2rem) auto; animation:grow 1.2s var(--ease) 1s forwards; }
.hero-content .kicker{ color:var(--gris); font-size:.86rem; letter-spacing:.18em; text-transform:uppercase; opacity:0; animation:rise 1s var(--ease) 1.1s forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }
@keyframes grow{ to{ width:clamp(60px,12vw,140px); } }

.scroll-cue{ position:absolute; left:50%; bottom:1.6rem; transform:translateX(-50%); z-index:6;
             font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gris);
             display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.scroll-cue .bar{ width:1px; height:34px; background:linear-gradient(var(--or),transparent); animation:cue 2s var(--ease) infinite; }
@keyframes cue{ 0%,100%{ transform:scaleY(.4); opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }

@media (max-width:760px){
  .tript{ flex-direction:column; }
  .panel{ border-right:0; border-bottom:1px solid var(--hair-or); }
  .panel img{ filter:grayscale(0) brightness(.6); }
  .panel .plabel{ opacity:1; transform:none; bottom:1rem; }
  .panel .plabel::before{ transform:scaleY(1); height:18px; }
}

/* ---------- Sections génériques ---------- */
.sec{ padding-block:clamp(4.5rem,10vw,9rem); }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:clamp(2.4rem,5vw,4rem); flex-wrap:wrap; }
h2{ font-family:var(--serif); font-weight:300; font-size:clamp(2.1rem,5vw,3.8rem); line-height:1.05; letter-spacing:-.01em; }
h2 .script{ font-family:var(--script); color:var(--or); font-weight:400; font-size:1.3em; }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.12s; } .reveal[data-d="2"]{ transition-delay:.24s; } .reveal[data-d="3"]{ transition-delay:.36s; }

/* Intro */
.intro .grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,5rem); align-items:end; }
.intro p{ color:var(--gris); max-width:48ch; font-size:1.04rem; }
.intro .stats{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:clamp(1.6rem,5vw,4rem);
               margin-top:clamp(2rem,4vw,3.2rem); padding-top:clamp(1.6rem,4vw,2.6rem); border-top:1px solid var(--hair); }
.stat .n{ font-family:var(--serif); font-weight:300; font-size:clamp(1.9rem,3.2vw,2.8rem); }
.stat .n em{ font-family:var(--script); color:var(--or); font-style:normal; }
.stat .l{ color:var(--gris); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; margin-top:.3rem; }
@media (max-width:760px){ .intro .grid{ grid-template-columns:1fr; gap:1.4rem; } }

/* Univers */
.u-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.7rem,1.2vw,1rem); }
.u-card{ position:relative; display:flex; flex-direction:column; justify-content:flex-end;
         min-height:clamp(250px,32vw,400px); padding:clamp(1.3rem,2vw,2rem); background:var(--noir-2);
         border:1px solid var(--hair); overflow:hidden; transition:border-color .5s var(--ease), transform .5s var(--ease); }
.u-card::before{ content:""; position:absolute; inset:0; z-index:0; background:var(--bg) center/cover no-repeat;
                 filter:grayscale(1) brightness(.5); transform:scale(1.05); transition:filter .7s var(--ease), transform .9s var(--slow); }
.u-card::after{ content:""; position:absolute; inset:0; z-index:1;
                background:linear-gradient(180deg,rgba(10,10,11,.15),rgba(10,10,11,.6) 60%,rgba(10,10,11,.9)); }
.u-card > *{ position:relative; z-index:2; }
.u-card:hover{ border-color:var(--hair-or); transform:translateY(-5px); }
.u-card:hover::before, .u-card.press::before{ filter:grayscale(0) brightness(.72); transform:scale(1); }
.u-card .idx{ position:absolute; top:clamp(1.1rem,2vw,1.8rem); left:clamp(1.3rem,2vw,2rem); font-size:.74rem; letter-spacing:.2em; color:var(--or); z-index:2; }
.u-card h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,2.2vw,2.1rem); }
.u-card p{ color:var(--gris); font-size:.9rem; margin-top:.5rem; max-width:32ch; opacity:0; transform:translateY(8px); transition:.5s var(--ease); }
.u-card:hover p, .u-card.press p{ opacity:1; transform:none; }
.u-card .more{ margin-top:1rem; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--or); display:inline-flex; align-items:center; gap:.5rem; }
.u-card .more::after{ content:""; width:1.4rem; height:1px; background:var(--or); transition:width .4s var(--ease); }
.u-card:hover .more::after{ width:2.6rem; }
.u-card.lg{ grid-column:span 3; } .u-card.sm{ grid-column:span 2; }
@media (max-width:900px){ .u-grid{ grid-template-columns:repeat(2,1fr); } .u-card.lg,.u-card.sm{ grid-column:span 1; } }
@media (max-width:520px){ .u-grid{ grid-template-columns:1fr; } }

/* Featured editorial */
.feat{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(1.6rem,4vw,4rem); margin-bottom:clamp(3rem,6vw,5rem); }
.feat:nth-child(even){ direction:rtl; } .feat:nth-child(even) > *{ direction:ltr; }
.feat-media{ position:relative; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--hair); }
.feat-media::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px var(--hair-or); opacity:0; transition:.5s var(--ease); }
.feat:hover .feat-media::after{ opacity:1; }
.feat-media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.7); transition:filter .7s var(--ease), transform 1.2s var(--slow); }
.feat:hover .feat-media img{ filter:grayscale(0) brightness(.9); transform:scale(1.04); }
.feat-media.ph{ background:linear-gradient(135deg,var(--noir-2),var(--noir-3)); display:grid; place-items:center; }
.feat-media.ph span{ color:var(--gris); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; }
.feat .num{ font-family:var(--script); color:var(--or); font-size:2.4rem; line-height:1; }
.feat h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.7rem,3vw,2.6rem); margin-top:.3rem; }
.feat .tag{ color:var(--or); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; margin:.5rem 0 1rem; }
.feat p.txt{ color:var(--gris); max-width:46ch; }
.feat-link{ display:inline-flex; align-items:center; gap:.6rem; margin-top:1.4rem; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivoire); }
.feat-link::after{ content:""; width:2rem; height:1px; background:var(--or); transition:width .4s var(--ease); }
.feat-link:hover::after{ width:3.2rem; }
@media (max-width:760px){ .feat{ grid-template-columns:1fr; } .feat:nth-child(even){ direction:ltr; } }

/* CTA bandă */
.cta-line{ display:inline-flex; align-items:center; gap:.7rem; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ivoire); border:1px solid var(--hair-or); padding:.85rem 1.8rem; border-radius:2px; transition:background .4s var(--ease), color .4s var(--ease); }
.cta-line:hover{ background:var(--or); color:var(--noir); }

/* Réalisations */
.real{ text-align:center; border-top:1px solid var(--hair); }
.real p{ color:var(--gris); max-width:54ch; margin:1.2rem auto 2.2rem; }

/* Footer */
footer{ border-top:1px solid var(--hair); padding-block:clamp(3rem,6vw,5rem); }
.foot-top{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding-bottom:2rem; border-bottom:1px solid var(--hair); }
.foot-links{ display:flex; gap:clamp(1.2rem,2.4vw,2.2rem); flex-wrap:wrap; }
.foot-links a{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gris); }
.foot-links a:hover{ color:var(--or); }
.foot-bottom{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:1.6rem; }
.foot-bottom small{ color:var(--gris); font-size:.78rem; letter-spacing:.03em; }

/* ---------- Modal Devis ---------- */
.modal{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:1.2rem;
        opacity:0; visibility:hidden; transition:.4s var(--ease); }
.modal.open{ opacity:1; visibility:visible; }
.modal-bg{ position:absolute; inset:0; background:rgba(5,5,6,.74); backdrop-filter:blur(6px); }
.modal-panel{ position:relative; width:100%; max-width:480px; max-height:92vh; overflow:auto; background:var(--noir-2);
              border:1px solid var(--hair-or); padding:clamp(1.6rem,4vw,2.6rem); transform:translateY(18px); transition:transform .5s var(--slow); }
.modal.open .modal-panel{ transform:none; }
.modal-close{ position:absolute; top:1rem; right:1rem; background:none; border:0; color:var(--gris); font-size:1.1rem; cursor:pointer; }
.modal-close:hover{ color:var(--or); }
.modal h3{ font-family:var(--serif); font-weight:300; font-size:1.7rem; margin:.3rem 0 1.4rem; }
.field{ margin-bottom:1rem; }
.field label{ display:block; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gris); margin-bottom:.4rem; }
.field input,.field select,.field textarea{ width:100%; background:var(--noir); border:1px solid var(--hair); color:var(--ivoire);
              padding:.7rem .8rem; font-family:var(--sans); font-size:.95rem; border-radius:2px; transition:border-color .3s var(--ease); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--or); }
.field textarea{ min-height:90px; resize:vertical; }
.hp{ position:absolute; left:-9999px; }
.submit{ width:100%; margin-top:.6rem; background:var(--or); color:var(--noir); border:0; padding:.9rem; font-family:var(--sans);
         font-weight:500; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; border-radius:2px; transition:background .3s var(--ease); }
.submit:hover{ background:var(--or-clair); }
.submit:disabled{ opacity:.6; cursor:default; }
.form-note{ margin-top:.8rem; font-size:.82rem; color:var(--gris); min-height:1.2em; text-align:center; }
.form-note.err{ color:#d98a8a; }
.modal-success{ display:none; text-align:center; }
.modal-success.show{ display:block; }
.modal-form.hide{ display:none; }
.modal-success p:last-child{ color:var(--gris); margin-top:.6rem; }

/* ---------- Focus & reduced motion ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--or); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
  .reveal{ opacity:1; transform:none; }
  .hero-content .eyebrow,.hero-content h1>span,.hero-content .kicker{ opacity:1; transform:none; }
  .hero-rule{ width:clamp(60px,12vw,140px); }
}