/* =========================================================================
   PoolConcept 2026 — À propos (CSS dedicat)
   Identitate: un fil d'or (ligne d'eau) qui traverse la page — la signature.
   ========================================================================= */
:root{
  --a-noir:#070708; --a-noir2:#0c0c0e;
  --a-ivoire:#EFEBE3; --a-gris:#9a9a9e;
  --a-or:#C8A24C; --a-or2:#E4C879; --a-orsoft:rgba(200,162,76,.34);
  --a-line:rgba(239,235,227,.12);
  --a-disp:"Bodoni Moda", Georgia, serif;
  --a-ui:"Space Grotesk", system-ui, sans-serif;
  --a-mono:"Space Mono", ui-monospace, monospace;
  --a-e:cubic-bezier(.22,.61,.36,1); --a-slow:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--a-noir);color:var(--a-ivoire);font-family:var(--a-ui);font-weight:300;
  overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* firul auriu vertical (signature) — se umple pe scroll */
.thread{position:fixed;top:0;left:50%;transform:translateX(-50%);width:1px;height:100vh;z-index:1;pointer-events:none;
  background:var(--a-line)}
.thread i{position:absolute;top:0;left:0;width:100%;background:linear-gradient(var(--a-or2),var(--a-or));
  height:var(--fill,0%);box-shadow:0 0 12px rgba(200,162,76,.5);transition:height .1s linear}
.thread i::after{content:"";position:absolute;bottom:-3px;left:50%;transform:translateX(-50%);width:6px;height:6px;
  border-radius:50%;background:var(--a-or2);box-shadow:0 0 12px 2px rgba(200,162,76,.6)}
@media (max-width:760px){.thread{left:18px;transform:none}}

.a-wrap{position:relative;z-index:2;max-width:1100px;margin-inline:auto;padding-inline:clamp(1.2rem,4vw,3rem)}

/* HERO */
.a-hero{min-height:82vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding-top:clamp(5rem,12vh,8rem)}
.a-hero .eyebrow{font-family:var(--a-mono);font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:var(--a-or2)}
.a-hero h1{font-family:var(--a-disp);font-weight:500;font-size:clamp(2.6rem,8vw,6rem);line-height:1;margin:.6rem 0 0}
.a-hero .sub{color:var(--a-gris);max-width:52ch;margin:1.4rem auto 0;font-size:1.05rem}
.a-hero .since{margin-top:2rem;font-family:var(--a-mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--a-gris)}
.a-hero .since b{color:var(--a-or2);font-weight:400}

/* section title */
.a-eyebrow{font-family:var(--a-mono);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--a-or2);
  text-align:center;display:block}
.a-h2{font-family:var(--a-disp);font-weight:500;font-size:clamp(1.9rem,4.6vw,3.4rem);text-align:center;margin:.4rem 0 0}

/* HISTOIRE */
.a-story{padding:clamp(4rem,10vh,7rem) 0}
.a-story .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center;margin-top:clamp(2rem,5vh,3.2rem)}
@media (max-width:820px){.a-story .grid{grid-template-columns:1fr}}
.a-story .txt p{color:var(--a-gris);margin:0 0 1rem;max-width:52ch}
.a-story .txt p strong{color:var(--a-ivoire);font-weight:400}
.a-story .pic{position:relative;overflow:hidden;border:1px solid var(--a-line);aspect-ratio:4/5}
.a-story .pic img{width:100%;height:100%;object-fit:cover}
.a-story .pic::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--a-orsoft);opacity:.4}

/* STATS */
.a-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.4vw,2rem);
  padding:clamp(2.4rem,6vh,4rem) 0;border-block:1px solid var(--a-line)}
@media (max-width:680px){.a-stats{grid-template-columns:repeat(2,1fr);gap:2rem}}
.a-stat{text-align:center}
.a-stat .n{font-family:var(--a-disp);font-weight:500;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;color:var(--a-ivoire)}
.a-stat .n .suf{color:var(--a-or2)}
.a-stat .l{font-family:var(--a-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--a-gris);margin-top:.6rem}

/* ÉQUIPE */
.a-team{padding:clamp(4rem,10vh,7rem) 0}
.a-team .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.7rem,1.4vw,1.1rem);margin-top:clamp(2rem,5vh,3rem)}
@media (max-width:820px){.a-team .grid{grid-template-columns:repeat(2,1fr)}}
.mbr{position:relative;overflow:hidden;border:1px solid var(--a-line);aspect-ratio:4/5;background:#fff}
.mbr img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--a-slow)}
.mbr:hover img{transform:scale(1.03)}
.mbr:hover{border-color:var(--a-orsoft)}

/* SERVICES / démarche */
.a-approach{padding:clamp(4rem,10vh,7rem) 0}
.a-approach .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.9rem,2vw,1.4rem);margin-top:clamp(2rem,5vh,3rem)}
@media (max-width:680px){.a-approach .grid{grid-template-columns:1fr}}
.appc{position:relative;border:1px solid var(--a-line);padding:clamp(1.4rem,3vw,2rem);background:var(--a-noir2);
  opacity:0;transform:translateY(16px);transition:.8s var(--a-e)}
.appc.in{opacity:1;transform:none}
.appc .no{font-family:var(--a-mono);font-size:.66rem;letter-spacing:.2em;color:var(--a-or2)}
.appc h3{font-family:var(--a-disp);font-weight:500;font-size:clamp(1.15rem,2.1vw,1.5rem);margin:.5rem 0 .5rem}
.appc p{color:var(--a-gris);margin:0;font-size:.94rem}

/* TÉMOIGNAGES */
.a-quotes{padding:clamp(4rem,10vh,7rem) 0}
.a-quotes .flow{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.4vw,1.8rem);margin-top:clamp(2rem,5vh,3rem)}
@media (max-width:760px){.a-quotes .flow{grid-template-columns:1fr}}
.qt{position:relative;border:1px solid var(--a-line);padding:clamp(1.6rem,3.4vw,2.4rem);background:var(--a-noir2);
  opacity:0;transform:translateY(18px);transition:.9s var(--a-slow)}
.qt.in{opacity:1;transform:none}
.qt::before{content:"\201C";position:absolute;top:.2rem;left:1rem;font-family:var(--a-disp);font-size:3.4rem;color:var(--a-orsoft);line-height:1}
.qt p{color:var(--a-ivoire);font-weight:300;font-size:.98rem;line-height:1.7;margin:1rem 0 0;font-style:italic}
.qt .who{display:flex;align-items:center;gap:.7rem;margin-top:1.2rem}
.qt .who .ini{width:34px;height:34px;border-radius:50%;border:1px solid var(--a-orsoft);display:grid;place-items:center;
  font-family:var(--a-mono);font-size:.66rem;color:var(--a-or2)}
.qt .who .r{font-family:var(--a-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--a-gris)}
.qt .who .r b{display:block;color:var(--a-ivoire);font-size:.78rem;letter-spacing:.06em;margin-bottom:.15rem}

/* TEAM PHOTO + finance */
.a-band{position:relative;margin:clamp(2rem,5vh,3rem) 0}
.a-band .frame{position:relative;overflow:hidden;border:1px solid var(--a-line)}
.a-band img{display:block;width:100%;height:auto}
.a-band .frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--a-orsoft);opacity:.4}
.a-finance{text-align:center;color:var(--a-gris);font-size:.86rem;margin-top:1.2rem}
.a-finance b{color:var(--a-or2);font-weight:400}

/* CTA */
.a-cta{padding:clamp(4rem,9vh,6rem) 0 clamp(5rem,12vh,8rem);text-align:center}
.a-cta .rule{width:1px;height:clamp(40px,8vh,70px);background:linear-gradient(transparent,var(--a-or2));margin:0 auto clamp(1.4rem,4vh,2.2rem)}
.a-cta h2{font-family:var(--a-disp);font-weight:500;font-size:clamp(1.8rem,4.6vw,3.4rem);margin:0 0 1.6rem}
.a-cta h2 em{font-style:italic;color:var(--a-or2)}
.a-cta a{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--a-mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--a-ivoire);text-decoration:none;border:1px solid var(--a-or);
  padding:.9rem 1.8rem;border-radius:1px;transition:.35s var(--a-e)}
.a-cta a:hover{background:var(--a-or);color:#000}

a:focus-visible,button:focus-visible{outline:2px solid var(--a-or2);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  .appc,.qt{opacity:1;transform:none}
  .thread i{transition:none}
}