@font-face{font-family:"Gaultier Display";src:url(../assets/fonts/gaultier-display-vf.woff2) format("woff2");font-weight:0 1000;font-display:swap}
@font-face{font-family:"Gotham";src:url(../assets/fonts/gotham-light.woff2) format("woff2");font-weight:300;font-display:swap}
:root{
  --bordeaux:#491012;
  --bordeaux-deep:#3C0E0F;
  --rose:#FEB7AE;
  --rose-logo:#F6BCB3;
  --creme:#F6EBD3;
  --display:"Gaultier Display","Arial Black",Impact,sans-serif;
  --body:"Gotham","Montserrat","Helvetica Neue",Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
/* La charte reste identique en mode sombre comme en mode clair */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bordeaux:#491012;--creme:#F6EBD3;--rose:#FEB7AE}}
:root[data-theme="dark"]{--bordeaux:#491012;--creme:#F6EBD3;--rose:#FEB7AE}
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px);background:var(--bordeaux)}
body{background:var(--bordeaux);color:var(--creme);font-family:var(--body);font-weight:300;font-size:clamp(.95rem,.88rem + .3vw,1.08rem);line-height:1.62;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.nowrap{white-space:nowrap}
h1,h2,h3,.tagline{text-wrap:balance}
p{text-wrap:pretty;hyphens:manual;overflow-wrap:normal;word-break:normal}
strong,b{font-weight:300}
:focus-visible{outline:2px solid var(--rose);outline-offset:4px}

/* Titres : Gaultier Display */
.display{font-family:var(--display);font-weight:1000;font-variation-settings:"wght" 1000,"wdth" 500;text-transform:uppercase;letter-spacing:0;line-height:1}

/* ---------- Curseur rond ---------- */
@media (hover:hover) and (pointer:fine){html.has-cursor, html.has-cursor *{cursor:none !important}}
.cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:999;border-radius:50%;opacity:0}
.cursor{width:40px;height:40px;margin:-20px 0 0 -20px;border:1.5px solid var(--rose);transition:opacity .3s,width .35s,height .35s,margin .35s,background-color .35s,border-color .35s}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--rose);transition:opacity .3s,background-color .3s}
html.has-cursor .cursor, html.has-cursor .cursor-dot{opacity:1}
.cursor.is-hover{width:74px;height:74px;margin:-37px 0 0 -37px;background:rgba(254,183,174,.18)}
.cursor.on-light{border-color:var(--bordeaux)}
.cursor.on-light.is-hover{background:rgba(73,16,18,.1)}
.cursor-dot.on-light{background:var(--bordeaux)}
.cursor.is-down{width:28px;height:28px;margin:-14px 0 0 -14px}

/* ---------- Menu ---------- */
.burger{position:fixed;top:calc(env(safe-area-inset-top,0px) + 16px);left:16px;z-index:60;width:52px;height:52px;border:0;background:transparent;display:grid;place-content:center;gap:5px;color:var(--creme);transition:color .3s}
.burger span{display:block;width:36px;height:1.5px;background:currentColor;transition:transform .45s,opacity .3s}
.burger.scrolled{color:var(--rose)}
.burger.on-light{color:var(--bordeaux)}
.menu-open .burger{color:var(--rose)}
.menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-open .burger span:nth-child(2),.menu-open .burger span:nth-child(3){opacity:0}
.menu-open .burger span:nth-child(4){transform:translateY(-13px) rotate(-45deg)}
.nav{position:fixed;inset:0;z-index:55;background:var(--bordeaux);display:flex;flex-direction:column;justify-content:center;padding:max(90px,10vh) 8vw;clip-path:circle(0% at 42px 42px);transition:clip-path .85s cubic-bezier(.7,0,.2,1),visibility 0s .85s;visibility:hidden;overflow-y:auto}
.menu-open .nav{clip-path:circle(150% at 42px 42px);visibility:visible;transition:clip-path .85s cubic-bezier(.7,0,.2,1)}
.nav a{font-family:var(--display);font-variation-settings:"wght" 1000,"wdth" 615;color:var(--rose);text-decoration:none;text-transform:uppercase;font-size:clamp(1.6rem,7.4vw,4.8rem);line-height:1.12;white-space:nowrap;width:max-content;max-width:100%;transition:transform .4s, color .3s}
.nav a:hover{transform:translateX(14px);color:var(--creme)}
.nav .nav-meta{margin-top:2.5rem;display:flex;flex-direction:column;gap:1.1rem;font-family:var(--body);font-size:.9rem;letter-spacing:.06em}
.nav .nav-meta a{font-family:var(--body);font-variation-settings:normal;font-size:inherit;text-transform:none;color:var(--creme);line-height:1.4;white-space:normal;display:flex;flex-direction:column;gap:.15rem}
.nav .nav-meta small{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rose)}
.nav .nav-meta strong{font-size:1.15rem;white-space:nowrap;letter-spacing:.04em}
.nav .nav-meta a:hover{transform:none;color:var(--rose)}

/* ---------- Hero ---------- */
.hero{position:relative;height:100svh;min-height:540px;overflow:hidden;display:grid;place-items:center;text-align:center}
.hero-bg{position:absolute;inset:-8% 0 0;background:url(../assets/img/hero-pont-reformer.jpg) 50% 46%/cover no-repeat;will-change:transform}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(60,14,15,.18),rgba(60,14,15,0) 40%,rgba(60,14,15,.35))}
.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:100%;padding:0 1.25rem}
.byline{font-weight:300;font-size:clamp(.72rem,.6rem + .5vw,1.05rem);letter-spacing:.2em;text-transform:uppercase;color:var(--rose);text-shadow:0 1px 12px rgba(60,14,15,.55);margin-bottom:clamp(1rem,4vh,2.5rem)}
.logo{width:min(78vw,620px);animation:float 7s ease-in-out infinite}
.logo svg{width:100%;height:auto;fill:var(--rose-logo);filter:drop-shadow(0 6px 30px rgba(60,14,15,.25))}
.scroll-hint{position:absolute;z-index:3;bottom:calc(30px + env(safe-area-inset-bottom,0px));left:50%;translate:-50% 0;width:28px;height:46px;border:1.5px solid var(--creme);border-radius:20px;opacity:.85}
.scroll-hint::before{content:"";position:absolute;left:50%;top:9px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--rose);animation:scrolldot 2.2s ease-in-out infinite}
@keyframes scrolldot{0%{transform:translateY(0);opacity:0}25%{opacity:1}80%{transform:translateY(20px);opacity:0}100%{opacity:0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-1.5%,2.5%) rotate(-2deg)}}

/* ---------- Blocs bordeaux ---------- */
.band{position:relative;background:var(--bordeaux)}
.intro{overflow:visible}
.intro-clip{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.wave{position:absolute;left:34.4%;top:-2.4%;width:78%;color:var(--bordeaux-deep);animation:drift 14s ease-in-out infinite;transform-origin:20% 20%}
.wave svg{width:100%;height:auto;display:block}
.bump{position:absolute;left:50%;top:0;width:clamp(90px,8.3vw,160px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:var(--bordeaux);z-index:1}
.split{position:relative;z-index:2;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,6rem);align-items:center;padding:clamp(4.5rem,10vw,8rem) clamp(1.25rem,6vw,4rem)}
.h2{font-family:var(--display);font-variation-settings:"wght" 1000,"wdth" 500;text-transform:uppercase;color:var(--rose);font-size:clamp(1.5rem,1.05rem + 1.9vw,2.6rem);line-height:1.02;margin-bottom:1.4rem}
.prose{max-width:56ch}
.prose p+p{margin-top:1.1em}
.tagline{font-family:var(--display);font-variation-settings:"wght" 1000,"wdth" 500;text-transform:uppercase;color:var(--rose);font-size:.9rem;letter-spacing:.01em;margin-top:1.8rem !important}
.photo{position:relative;overflow:hidden;box-shadow:0 34px 60px -30px rgba(0,0,0,.65)}
.photo img{width:100%;height:100%;object-fit:cover}
.intro .photo{aspect-ratio:3/4}
.floaty{animation:float 8s ease-in-out infinite}

/* ---------- Galerie ---------- */
.gallery{background:var(--creme);padding:clamp(2.5rem,5vw,3.2rem) 0}
.gallery-track{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.75rem,2.7vw,1.5rem)}
.gallery figure{aspect-ratio:2/3;overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.gallery figure:first-child img{object-position:62% 55%}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figure:nth-child(2){animation:float 9s ease-in-out infinite;animation-delay:-3s}

/* ---------- À propos ---------- */
.about{overflow:hidden}
.about .split{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.portrait-wrap{position:relative;padding-bottom:1.5rem}
.portrait-wrap .photo{aspect-ratio:2/3}
.about-word{position:absolute;left:-12%;bottom:0;font-family:var(--display);font-variation-settings:"wght" 1000,"wdth" 615;font-size:clamp(3.2rem,1.8rem + 5.5vw,7rem);line-height:.8;color:var(--rose);text-transform:uppercase;z-index:2;pointer-events:none}
.signature{display:block;width:clamp(150px,18vw,245px);margin:1rem 0 0 auto;color:var(--rose)}
.signature svg{width:100%;height:auto;fill:currentColor}

/* ---------- Approche ---------- */
.approach{position:relative;min-height:min(92vh,780px);display:grid;place-items:center;text-align:center;overflow:hidden;padding:clamp(5rem,12vw,8rem) clamp(1.25rem,6vw,4rem)}
.approach-bg{position:absolute;inset:-15% 0;background:url(../assets/img/fond-reformer.jpg) 50% 62%/cover no-repeat;will-change:transform}
.approach::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at center,rgba(60,14,15,.66),rgba(60,14,15,.42) 75%)}
.approach-inner{position:relative;z-index:2;max-width:48rem}
.approach .h2{color:var(--creme);margin-bottom:.7rem}
.approach h3{font-family:var(--display);font-variation-settings:"wght" 1000,"wdth" 500;text-transform:uppercase;color:var(--creme);font-size:1.05rem;margin:2.2rem 0 .4rem}
.approach p{color:var(--creme);text-shadow:0 1px 16px rgba(0,0,0,.45)}
.approach .tagline{font-size:clamp(.9rem,.82rem + .35vw,1.1rem);margin-top:2.2rem !important;color:var(--creme)}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--creme);color:var(--bordeaux)}
.contact .photo{box-shadow:none;min-height:min(86vh,720px)}
.contact .photo img{position:absolute;inset:0;object-position:50% 35%}
.contact-card{align-self:center;padding:clamp(3rem,8vw,6rem) clamp(1.5rem,7vw,6rem)}
.contact h2{font-family:var(--display);font-variation-settings:"wght" 1000,"wdth" 615;text-transform:uppercase;font-size:clamp(2.1rem,1.4rem + 2.8vw,3.4rem);line-height:1;padding-bottom:.55rem;border-bottom:1.5px solid var(--bordeaux);display:inline-block;margin-bottom:1.2rem}
.contact address{font-style:normal;font-size:clamp(1.1rem,.98rem + .55vw,1.45rem);line-height:1.35}
.contact .lines a{text-decoration:none;background:linear-gradient(var(--bordeaux),var(--bordeaux)) 0 100%/0 1.5px no-repeat;transition:background-size .4s}
.contact .lines a:hover{background-size:100% 1.5px}
.resa{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.25rem}
.btn{display:inline-flex;white-space:nowrap;align-items:center;gap:.6rem;padding:1rem 1.6rem;border-radius:999px;background:var(--bordeaux);color:var(--creme);text-decoration:none;font-family:var(--display);font-variation-settings:"wght" 1000,"wdth" 500;text-transform:uppercase;font-size:.85rem;letter-spacing:.02em;transition:transform .3s, background-color .3s}
.btn:hover{transform:translateY(-3px);background:var(--bordeaux-deep)}
.insta{display:inline-flex;white-space:nowrap;align-items:center;gap:.55rem;text-decoration:none;font-size:1rem}
.insta svg{width:22px;height:22px;flex:none}
.insta span{background:linear-gradient(var(--bordeaux),var(--bordeaux)) 0 100%/0 1.5px no-repeat;transition:background-size .4s}
.insta:hover span{background-size:100% 1.5px}
footer{background:var(--bordeaux);color:var(--rose);text-align:center;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;padding:1.6rem 1rem calc(1.6rem + env(safe-area-inset-bottom,0px))}

/* ---------- Apparitions au scroll ---------- */
.js .reveal{opacity:0;transform:translateY(40px);transition:opacity 1.1s ease, transform 1.3s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.15s}.reveal.d2{transition-delay:.3s}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .split,.about .split{grid-template-columns:1fr;gap:2.75rem}
  .intro .photo{max-width:440px;margin:0 auto;width:100%}
  .portrait-wrap{max-width:360px;margin:0 auto;width:100%}
  .about-word{left:-4%}
  .prose{max-width:none}
  .wave{left:10%;top:0;width:150%}
  .gallery-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 1.25rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .gallery-track::-webkit-scrollbar{display:none}
  .gallery figure{flex:0 0 72%;scroll-snap-align:center}
  .gallery figure:nth-child(2){animation:none}
  .contact{grid-template-columns:1fr}
  .contact .photo{min-height:0;aspect-ratio:4/5;order:2}
  .approach{min-height:0}
}
@media (max-width: 480px){
  .contact-card{padding:5.5rem 1.25rem 3rem}
  .btn{padding:.9rem 1.15rem;font-size:.78rem;letter-spacing:0}
  .burger{left:8px;top:calc(env(safe-area-inset-top,0px) + 8px)}
  .logo{width:86vw}
  .signature{margin:1.2rem auto 0}
}
@media (max-width: 345px){
  .btn{font-size:.72rem;padding:.85rem 1rem;gap:.45rem}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .js .reveal{opacity:1;transform:none}
}