/* ÊTRE DANS LA PEAU — home, mise en page plein écran (« stages »)
   Noir & blanc éditorial, grandes images, très grands textes. Couleur réservée au nuage de lieux.
   Fonts : Nitti (titres, mono) Light/Regular/Bold ; Nitti Grotesk (corps).
   Prod : woff2 + licence webfont (Bold Monday). */

@font-face{font-family:'Nitti';src:url('fonts/Nitti-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Nitti';src:url('fonts/Nitti-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Nitti';src:url('fonts/Nitti-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}

@font-face{font-family:'Nitti Grotesk';src:url('fonts/NittiGrotesk-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Nitti Grotesk';src:url('fonts/NittiGrotesk-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Nitti Grotesk';src:url('fonts/NittiGrotesk-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Nitti Grotesk';src:url('fonts/NittiGrotesk-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap;}

:root{
  --ink:#15171c;
  --night:#101116;
  --paper:#ffffff;
  --grey:#6c6c74;
  --cloud-word:#8a8a91;   /* mots du nuage au repos : clair mais ~3.5:1 (grand texte) */
  --hair:#e3e3e6;
  --header-h:60px;
  --maxw:1180px;
  --gut:clamp(22px,5vw,80px);
  --font-mono:'Nitti','Nitti Typewriter',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --font-grotesk:'Nitti Grotesk',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --accent:var(--ink);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-grotesk);font-weight:400;font-synthesis:none;
  font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
a{color:inherit;}

/* ---------- Header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:30;border-bottom:1px solid transparent;transition:background-color .3s ease,border-color .3s ease;}
.logo{display:block;text-align:center;text-decoration:none;padding:18px var(--gut);
  font-family:var(--font-mono);font-weight:400;font-size:.82rem;letter-spacing:.34em;color:var(--paper);transition:color .3s ease;}
.site-header.scrolled{background:var(--paper);border-bottom-color:var(--hair);}
.site-header.scrolled .logo{color:var(--ink);}

/* ---------- Stage (section plein écran) ---------- */
.stage{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(90px,14vh,160px);overflow:hidden;}
.stage-inner{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);}
.stage-inner.wide{max-width:1340px;}
.stage.dark{color:var(--paper);}

.stage-bg{position:absolute;inset:0;z-index:0;background-color:var(--night);
  background-image:
    linear-gradient(rgba(8,8,10,.45),rgba(8,8,10,.45)),
    radial-gradient(circle, rgba(255,255,255,.07) 1.5px, transparent 1.7px);
  background-size:cover, 26px 26px;background-position:center;}
.stage-bg.dots{background-size:cover, 16px 16px;}
.stage-bg[data-ph]::after{content:attr(data-ph);position:absolute;left:var(--gut);bottom:26px;
  font-family:var(--font-mono);font-weight:300;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);}

/* ---------- Très grands titres ---------- */
.mega{font-family:var(--font-mono);font-weight:700;text-transform:uppercase;
  line-height:.92;letter-spacing:-.012em;margin:0;
  font-size:clamp(1.85rem,4.4vw,3.5rem);color:var(--paper);}
.mega.ink{color:var(--ink);}
.mega.centered{text-align:center;}

/* Sections de lecture (prose) */
.section{padding-block:clamp(80px,12vh,150px);}
.prose{max-width:64ch;margin-top:1.8rem;}
.prose p{font-size:clamp(1.1rem,1.45vw,1.3rem);line-height:1.72;margin:0 0 1.3rem;color:#2a2c33;}
.sub-title{font-family:var(--font-mono);font-weight:700;text-transform:uppercase;letter-spacing:-.005em;line-height:1.06;font-size:clamp(1.3rem,2.4vw,2rem);color:var(--ink);margin:2.8rem 0 .4rem;}
.section .object-grid{margin-top:clamp(2.2rem,4vw,3.6rem);}
.hero-sub{margin:1.8rem 0 0;max-width:48ch;font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.5;color:rgba(255,255,255,.82);}
.proof-intro{text-align:center;max-width:50ch;margin:1rem auto 2.6rem;font-size:clamp(1.1rem,1.7vw,1.35rem);line-height:1.55;color:#2a2c33;}

.kicker{font-family:var(--font-mono);font-weight:300;font-size:.82rem;letter-spacing:.32em;text-transform:uppercase;color:var(--grey);margin:0 0 1.8rem;}
.kicker.light{color:rgba(255,255,255,.7);}

/* paragraphes : plus grands et plus larges */
.lead-big{font-size:clamp(1.25rem,2.4vw,2rem);line-height:1.36;max-width:42ch;margin:2rem 0 0;color:rgba(255,255,255,.84);}
.lead-big.ink,.manifesto .lead-big{color:#34363d;}

.overline{font-family:var(--font-mono);font-weight:300;font-size:.82rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin:0 0 1.4rem;}
.overline.centered{text-align:center;}
.overline.light{color:rgba(255,255,255,.62);}

/* ---------- Hero ---------- */
.hero .mega{font-size:clamp(2.2rem,6vw,5.2rem);max-width:18ch;}
.scroll-cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:1;
  text-decoration:none;font-size:1.4rem;color:rgba(255,255,255,.75);
  width:46px;height:46px;display:grid;place-items:center;border-radius:50%;animation:bob 2.4s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

/* ---------- Image pleine ---------- */
.image-full{justify-content:flex-end;}
.stage-caption{font-family:var(--font-mono);font-weight:300;font-size:clamp(1.15rem,2.4vw,1.9rem);letter-spacing:.01em;color:var(--paper);margin:0;max-width:30ch;}

/* ---------- Objets (grands visuels) ---------- */
.object-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,32px);}
.object-grid.two{grid-template-columns:repeat(2,1fr);gap:clamp(22px,3.2vw,52px);}
.ph-img{position:relative;background:#f2f2f4;border:1px solid var(--hair);overflow:hidden;}
.ph-img.tall{aspect-ratio:4/5;max-height:calc(100vh - 220px);}
.ph-img[data-ph]::after{content:attr(data-ph);position:absolute;inset:auto 0 0 0;padding:16px 18px;
  font-family:var(--font-mono);font-weight:300;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);}
.ph-img::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle, #dddde1 1.4px, transparent 1.6px);background-size:22px 22px;opacity:.7;}

/* ---------- Preuve : chiffres géants ---------- */
.proof .stats-big{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,5vw,60px);text-align:center;}
.proof .stats-big li{display:flex;flex-direction:column;align-items:center;}
.stat-num{font-family:var(--font-mono);font-weight:700;line-height:.9;font-size:clamp(4.5rem,15vw,12rem);}
.stat-unit{font-family:var(--font-mono);font-weight:700;font-size:clamp(1.4rem,3vw,2.4rem);margin-top:.1rem;}
.stat-label{font-size:1.1rem;color:#34363d;margin-top:1.4rem;max-width:20ch;line-height:1.4;}
.source{text-align:center;font-family:var(--font-mono);font-weight:300;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-top:clamp(2.4rem,5vw,4rem);}

/* ---------- Citation monumentale ---------- */
.quote{justify-content:center;}
.mega-quote{margin:0;max-width:26ch;font-weight:300;line-height:1.1;
  font-size:clamp(2.1rem,5.6vw,4.8rem);color:var(--paper);}
.mega-quote cite{display:block;margin-top:1.8rem;font-family:var(--font-mono);font-weight:300;font-style:normal;
  font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.65);}

/* ---------- Sur-mesure détail ---------- */
.custom-detail .object-grid{margin-top:clamp(2.4rem,4vw,3.8rem);}
.aside{color:var(--grey);font-size:1rem;border-top:1px solid var(--hair);padding-top:1.4rem;margin-top:3rem;max-width:70ch;}

/* ---------- Nuage de lieux (mots + carte centrale) ---------- */
.cloud{transition:background-color .5s ease;padding-block:0;background-color:#f4f4f5;}
/* La section tient dans l'écran, header compris : l'image prend l'espace restant */
.cloud > .stage-inner{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;
  padding-top:calc(var(--header-h) + clamp(12px,2.5vh,30px));padding-bottom:clamp(16px,3vh,40px);gap:clamp(.9rem,2vh,1.8rem);}
.cloud .cloud-scene{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;
  gap:clamp(.9rem,2vh,1.8rem);margin:0;width:100%;max-width:1100px;align-self:center;}
.cloud .venue-center{flex:1;min-height:0;display:flex;flex-direction:column;}
.cloud .venue-mockup{flex:1;min-height:180px;height:auto;}
.cloud .venue-line{flex:0 0 auto;margin-top:clamp(.6rem,1.5vh,1.1rem);}
.cloud .mega{margin-bottom:1.1rem;}
.cloud-intro{text-align:center;color:#34363d;max-width:56ch;margin:0 auto;font-size:clamp(1.05rem,1.7vw,1.35rem);}
.cloud-scene{display:flex;flex-direction:column;align-items:center;gap:clamp(1.6rem,3vw,2.6rem);
  max-width:1100px;margin:clamp(1.4rem,2.5vw,2.4rem) auto 0;}
.venue-cloud{list-style:none;margin:0;padding:0;text-align:center;max-width:1000px;line-height:1.55;}
.venue-cloud li{display:inline;}
.venue-btn{appearance:none;background:none;border:none;cursor:pointer;display:inline-block;
  padding:6px 12px;margin:1px;
  font-family:var(--font-mono);font-weight:400;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.05rem,1.9vw,1.7rem);line-height:1.35;color:var(--cloud-word);transition:color .2s ease;}
.venue-btn:hover,.venue-btn:focus-visible,.venue-btn.is-active{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;}
.venue-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.venue-center{width:100%;text-align:center;}
.venue-mockup{position:relative;width:100%;height:clamp(340px,66vh,820px);border:1px solid var(--accent);display:grid;place-items:center;
  background:#fafafa;transition:border-color .4s ease,background-color .4s ease;}
.venue-mockup .ph-tag{font-family:var(--font-mono);font-weight:300;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--hair);padding:6px 11px;background:var(--paper);}
.venue-line{margin:1.2rem 0 0;font-size:1.05rem;line-height:1.4;color:var(--ink);min-height:2.8em;}

/* ---------- CTA (bloc noir) ---------- */
.cta{text-align:center;background:var(--ink);}
.cta .mega{margin:0 auto 1.6rem;}
.cta-lead{max-width:52ch;margin:0 auto 2.8rem;color:rgba(255,255,255,.8);font-size:clamp(1.1rem,1.9vw,1.4rem);}
.cta-actions{display:flex;flex-wrap:wrap;gap:18px 30px;justify-content:center;align-items:center;}
.braille-sep{width:58px;height:18px;margin:0 auto 2.4rem;background-image:radial-gradient(circle, currentColor 1.8px, transparent 2px);background-size:14px 9px;opacity:.6;}

/* ---------- Boutons ---------- */
.btn{display:inline-block;text-decoration:none;padding:17px 34px;border:2px solid var(--ink);border-radius:2px;
  font-family:var(--font-mono);font-weight:700;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  transition:background-color .2s ease,color .2s ease;}
.btn:hover{background:var(--ink);color:var(--paper);}
.btn.light{border-color:var(--paper);color:var(--paper);}
.btn.light:hover{background:var(--paper);color:var(--ink);}
.tel{text-decoration:none;font-family:var(--font-mono);font-size:1rem;letter-spacing:.08em;color:#34363d;}
.tel.light{color:rgba(255,255,255,.8);}

/* ---------- Footer ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);}
.site-footer{padding-block:clamp(56px,9vh,110px);}
.baseline{font-family:var(--font-mono);font-weight:400;text-transform:uppercase;letter-spacing:.1em;font-size:1.05rem;margin:0 0 2.8rem;}
.foot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;color:var(--grey);font-size:.9rem;line-height:1.7;}
.foot-grid a{color:var(--grey);text-decoration:none;border-bottom:1px solid var(--hair);}
.foot-grid a:hover{color:var(--ink);}

/* ---------- Focus clavier ---------- */
a:focus-visible,.btn:focus-visible,.scroll-cue:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px;}
.dark a:focus-visible,.btn.light:focus-visible{outline-color:var(--paper);}

/* ---------- Reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease;}
.js [data-reveal].is-visible{opacity:1;transform:none;}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  body{font-size:17px;}
  .object-grid,.object-grid.two{grid-template-columns:1fr;}
  .ph-img.tall{aspect-ratio:16/11;}
  .proof .stats-big{grid-template-columns:1fr;gap:clamp(36px,9vw,60px);}
  .stat-num{font-size:clamp(5rem,34vw,11rem);}
  .cloud .venue-mockup{min-height:150px;}
  .foot-grid{grid-template-columns:1fr;}
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important;}
  .js [data-reveal]{opacity:1;transform:none;transition:none;}
}