@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* =============================================================================
FARACS STUDIO Combines: style.css, about.css, portfolio.css, contact.css
Background reference: style.css
============================================================================= */

:root {
  --sumi: #0e0e0e;
  --sumi-warm: #150808;
  --bone: #f4f1ea;
  --hanko: #9a0002;
  --hanko-deep: #3a0001;
  --cinnabar: #dc4035;
  --ash: #888884;
  --graphite: #4e4e50;
  --header-safe: 180px;
  --footer-safe: 120px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  background: var(--sumi);
  color: var(--bone);
  font-family: "Inter", sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  cursor: none;
}
body.menu-open {
  overflow: hidden;
}
a {
  color: inherit;
  text-decoration: none;
  cursor: none;
}
button {
  border: none;
  background: none;
  color: inherit;
  cursor: none;
}
img {
  display: block;
  max-width: 100%;
}
::selection {
  background: var(--cinnabar);
  color: var(--bone);
}

/* =============================================================================
BACKGROUND - STYLE.CSS REFERENCE
============================================================================= */

#faracs-maze{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
  z-index:0;
  opacity:.95;
  transition:
  filter .5s ease,
  opacity .5s ease;
}

/* =============================================================================
FARACS ATMOSPHERE
============================================================================= */

.ambient-glow{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
  radial-gradient(
  circle at 70% 18%,
  rgba(154,0,2,.18),
  transparent 38%
  ),
  radial-gradient(
  circle at 30% 75%,
  rgba(220,64,53,.08),
  transparent 42%
  );
  mix-blend-mode:screen;
  opacity:.9;
  animation:
  ambientPulse 8s ease-in-out infinite;
}
.vignette{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:
  radial-gradient(
  circle,
  transparent 58%,
  rgba(0,0,0,.42) 100%
  );
}
@keyframes ambientPulse{
  0%{
    opacity:.75;
  }
  50%{
    opacity:1;
  }
  100%{
    opacity:.75;
  }
}

/* =============================================================================
CUSTOM CURSOR
============================================================================= */

#faracs-cursor {
  position: fixed;
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  transition:
  transform 0.14s ease,
  opacity 0.2s ease;
}
#faracs-cursor svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0 10px rgba(154, 0, 2, 0.45));
}
#faracs-cursor svg path {
  transition: fill 0.2s ease;
}
#faracs-cursor.hover {
  transform: translate(-50%, -50%) scale(1.12) rotate(-10deg);
}
#faracs-cursor.hover svg path {
  fill: var(--cinnabar);
}

/* =============================================================================
GLOBAL ATOMS
============================================================================= */

.faracs-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--hanko);
  border-radius: 3px;
}
.meta-dot {
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--hanko);
  border-radius: 50%;
}
main,
.site-logo,
.menu-toggle,
.fullscreen-menu {
  position: relative;
}
main {
  position: relative;
  z-index: 1;
}

/* =============================================================================
FARACS GLOBAL SAFE AREAS
Invisible fixed zones used as layout references for all pages.
============================================================================= */

html::before,
html::after{
  content:"";
  position:fixed;
  left:0;
  width:100%;
  pointer-events:none;
  visibility:hidden;
  z-index:-1;
}
html::before{
  top:0;
  height:var(--header-safe);
}
html::after{
  bottom:0;
  height:var(--footer-safe);
}

/* =============================================================================
LOGO + INTRO STATES
============================================================================= */

body.intro-loading .site-logo{
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
body.intro-loading .site-logo img{
  height:620px;
}
.site-logo{
  position:fixed;
  top:220px;
  left:95px;
  z-index:99998;
  transform:translate(0,0);
  transition:
  top 1.35s cubic-bezier(.16,1,.3,1),
  left 1.35s cubic-bezier(.16,1,.3,1),
  transform 1.35s cubic-bezier(.16,1,.3,1);
}
.site-logo img{
  height:550px;
  width:auto;
  display:block;
  transition:
  height 1.35s cubic-bezier(.16,1,.3,1),
  opacity .22s ease;
}

/* APRÈS INTRO */
.site-logo.intro-done{
  top:220px;
  left:95px;
  transform:translate(0,0);
}

/* HEADER COMPACT */
.site-logo.scrolled{
  top:28px;
  left:32px;
}
.site-logo.scrolled img{
  height:200px;
}
/* SKIP INTRO ON RELOAD */
html.no-intro body.intro-loading .site-logo,
html.no-intro body.intro-loading .site-logo.intro-done,
html.no-intro body.intro-loading .site-logo.scrolled{
  top:28px;
  left:32px;
  transform:none;
  transition:none !important;
  animation:none !important;
}

html.no-intro body.intro-loading .site-logo img{
  height:200px;
  transition:none !important;
  animation:none !important;
}

/* AUTRES PAGES */
body:not(.page-home) .site-logo,
body:not(.page-home) .site-logo.intro-done,
body:not(.page-home) .site-logo.scrolled{
  top:28px;
  left:32px;
  transform:none;
}
body:not(.page-home) .site-logo img,
body:not(.page-home) .site-logo.scrolled img{
  height:200px;
  width:auto;
}

/* =============================================================================
MENU
============================================================================= */

.menu-toggle {
  position: fixed;
  top: 34px;
  right: 34px;
  width: 42px;
  height: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: var(--hanko);
  border-radius: 7px;
  z-index: 999999;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.45);
  transition:
  transform 0.25s ease,
  background 0.25s ease;
}
.menu-toggle:hover {
  background: var(--cinnabar);
  transform: scale(1.08);
}
.menu-toggle span {
  width: 18px;
  height: 2px;
  background: var(--bone);
  border-radius: 20px;
  transition:
  transform 0.3s ease,
  opacity 0.3s ease;
}
.menu-toggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.fullscreen-menu {
  position: fixed;
  inset: 0;
  background: rgba(14, 14, 14, 0.97);
  backdrop-filter: blur(12px);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s ease;
  z-index: 99990;
}
.fullscreen-menu.active {
  opacity: 1;
  visibility: visible;
}
.fullscreen-menu ul {
  list-style: none;
  text-align: center;
}
.fullscreen-menu li {
  margin: 28px 0;
}
.fullscreen-menu a {
  font-family: "Anton", sans-serif;
  font-size: clamp(64px, 9vw, 140px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  transition:
  color 0.3s ease,
  transform 0.3s ease;
}
.fullscreen-menu a:hover {
  color: var(--cinnabar);
  transform: translateX(8px);
}

/* =============================================================================
GLOBAL DIVIDER + CTA
============================================================================= */

.divider,
.faracs-divider {
  position: relative;
  width: 100%;
  height: 1px;
  margin: 0 auto;
  background: rgba(154, 0, 2, 0.28);
  overflow: hidden;
}
.faracs-divider {
  width: calc(100% - 64px);
  margin: 0 auto 90px auto;
  background: rgba(244, 241, 234, 0.06);
}
.divider::before,
.faracs-divider::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, transparent 0%, rgba(220, 64, 53, 1) 50%, transparent 100%);
  box-shadow: 0 0 16px rgba(154, 0, 2, 0.38);
}
.divider.in-view::before,
.faracs-divider.in-view::before,
.faracs-divider.is-visible::before {
  animation: dividerScan 1.1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* =============================================================================
FARACS BUTTON SYSTEM
============================================================================= */

.faracs-btn,
.exit-cta,
body.page-home .portfolio-header a,
body.page-home .home-cta .exit-cta,
body.page-about .exit-cta,
body.page-portfolio .exit-cta,
body.page-contact .send-button,
.signal-arrival-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:20px 30px;
  border:1px solid rgba(244,241,234,.12);
  background:rgba(255,255,255,.03);
  color:var(--bone);
  text-decoration:none;
  font-family:"JetBrains Mono", monospace;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  position:relative;
  overflow:visible;
  transition:
  transform .3s ease,
  border-color .3s ease,
  background .3s ease,
  color .3s ease;
}
.faracs-btn:hover,
.exit-cta:hover,
body.page-home .portfolio-header a:hover,
body.page-home .home-cta .exit-cta:hover,
body.page-about .exit-cta:hover,
body.page-portfolio .exit-cta:hover,
body.page-contact .send-button:hover,
.signal-arrival-back:hover{
  transform:translateY(-4px);
  border-color:var(--cinnabar);
  background:rgba(154,0,2,.08);
  color:var(--bone);
}
.faracs-btn .arrow,
.exit-cta .arrow,
body.page-home .portfolio-header a .arrow,
body.page-home .home-cta .arrow,
body.page-about .exit-cta .arrow,
body.page-portfolio .exit-cta .arrow,
.signal-arrival-back .arrow{
  transition:transform .3s ease;
}
.faracs-btn:hover .arrow,
.exit-cta:hover .arrow,
body.page-home .portfolio-header a:hover .arrow,
body.page-home .home-cta .exit-cta:hover .arrow,
body.page-about .exit-cta:hover .arrow,
body.page-portfolio .exit-cta:hover .arrow,
.signal-arrival-back:hover .arrow{
  transform:translateX(8px);
}

/* Layout-only button spacing */
body.page-home .home-cta .exit-cta{
  margin-top:48px;
}
body.page-contact .send-button{
  margin-top:20px;
}
body.page-contact .send-button .faracs-dot{
  width:8px;
  height:8px;
  margin-left:0;
  position:relative;
  bottom:0;
}
.signal-arrival-back{
  opacity:0;
  animation:signalFadeUp .8s ease 1.9s forwards;
}

/* =============================================================================
PAGE: HOME / STUDIO
============================================================================= */

/* =========================================
FULLSCREEN MENU
========================================= */

body.page-home .fullscreen-menu{
  position: fixed;
  inset: 0;
  background: rgba(14, 14, 14, 0.97);
  backdrop-filter: blur(12px);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.4s ease;
  z-index: 99990;
}
body.page-home .fullscreen-menu.active{
  opacity: 1;
  visibility: visible;
}
body.page-home .fullscreen-menu ul{
  list-style: none;
  text-align: center;
}
body.page-home .fullscreen-menu li{
  margin: 28px 0;
}
body.page-home .fullscreen-menu a{
  font-family: 'Anton', sans-serif;
  font-size: clamp(64px, 9vw, 140px);
  text-transform: uppercase;
  line-height: 0.9;
  transition: 0.3s ease;
}
body.page-home .fullscreen-menu a:hover{
  color: #DC4035;
}

/* =========================================
MANIFESTO
========================================= */

body.page-home .manifesto{
  min-height:100vh;
  padding:250px 120px 60px 500px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  max-width:1400px;
  opacity:0;
  transform:translateY(30px);
  pointer-events:none;
  transition:
  opacity .8s ease,
  transform 1s cubic-bezier(.16,1,.3,1);
}
body.page-home.intro-finished .manifesto{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* MEME STYLE QUE PORTFOLIO */
body.page-home .portfolio-kicker{
  font-family:"JetBrains Mono", monospace;
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cinnabar);
  margin-bottom:28px;
  opacity:0;
  animation:
  fadeUp .8s ease .3s forwards;
}
body.page-home .manifesto-thesis{
  font-family:'Anton', sans-serif;
  font-size:clamp(56px, 7vw, 112px);
  line-height:.95;
  letter-spacing:-.035em;
  font-weight:400;
  color:#F4F1EA;
  margin-bottom:36px;
}
body.page-home .manifesto-thesis .faracs-dot{
  width:14px;
  height:14px;
  margin-left:-2px;
  position:relative;
  bottom:0;
}
body.page-home .manifesto-rule{
  width:48px;
  height:2px;
  background:#9A0002;
  margin-bottom:28px;
}
body.page-home .manifesto-lines{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:36px;
}
body.page-home .manifesto-line{
  font-family:'JetBrains Mono', monospace;
  font-size:clamp(16px, 1.35vw, 20px);
  line-height:1.55;
}
body.page-home .manifesto-line .faracs-dot{
  width:7px;
  height:7px;
  margin-left:4px;
  position:relative;
  bottom:1px;
}
body.page-home .manifesto-resolution{
  font-family:'Anton', sans-serif;
  font-size:clamp(28px, 3.2vw, 48px);
  line-height:1;
  letter-spacing:-.025em;
  font-weight:400;
}
body.page-home .manifesto-resolution .faracs-dot{
  width:10px;
  height:10px;
  margin-left:5px;
  position:relative;
  bottom:0;
}

/* =========================================
FARACS DIVIDER
========================================= */

body.page-home .faracs-divider{
  position:relative;
  width:calc(100% - 64px);
  height:1px;
  margin:0 auto 90px auto;
  overflow:hidden;
  background:rgba(244,241,234,.06);
}

/* =========================================
HOME - PORTFOLIO HEADER
========================================= */

/* =========================================
HOME - Derniers Projets HEADER
========================================= */

body.page-home .portfolio-header{
  display:grid;
  grid-template-columns:
  1fr auto;
  align-items:center;
  margin-bottom:10px;
  width:100%;
}
body.page-home .portfolio-header a{
  margin-left:auto;
}
body.page-home .portfolio-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:"Anton", sans-serif;
  font-size:clamp(32px, 3.5vw, 52px);
  line-height:1;
  letter-spacing:-0.025em;
  font-weight:400;
  color:var(--bone);
}
body.page-home .portfolio-title .faracs-dot{
  width:10px;
  height:10px;
  margin-left:8px;
  position:relative;
  bottom:-18px;
}
body.page-home .portfolio-title::before{
  display:none;
}

/* =============================================================================
Derniers projets (Home)
============================================================================= */

.featured-project {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 60px;
  padding: 40px 0 0;
  align-items: center;
  transition: transform 0.4s ease;
}
.featured-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(244, 241, 234, 0.03);
  border: 1px solid rgba(244, 241, 234, 0.08);
}
.featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.15);
  transition:
  transform 0.6s ease,
  filter 0.6s ease;
}
.featured-project:hover .featured-image img {
  transform: scale(1.03);
  filter: grayscale(0);
}
.featured-info {
  max-width: 100%;
}
.featured-info .project-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.6);
}
.featured-info .project-meta span:first-child {
  color: #DC4035;
}
.featured-title {
  font-family: "Anton", sans-serif;
  font-size: clamp(48px, 5.5vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 400;
  color: #F4F1EA;
  margin-bottom: 10px;
}
.featured-title .faracs-dot {
  width: 12px;
  height: 12px;
  margin-left: 2px;
  position: relative;
  bottom: 0px;
}
.featured-description {
  font-size: 16px;
  line-height: 1.6;
  color: #F4F1EA;
  opacity: 0.8;
  max-width: 50ch;
  margin-bottom: 32px;
}
.featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(154, 0, 2, 0.4);
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #F4F1EA;
  transition:
  color 0.3s ease,
  border-color 0.3s ease;
}
.featured-cta .arrow {
  transition: transform 0.3s ease;
}
.featured-project:hover .featured-cta {
  color: #DC4035;
  border-color: #DC4035;
}
.featured-project:hover .featured-cta .arrow {
  transform: translateX(6px);
}

/* =============================================================================
MINI THUMBS
============================================================================= */

.mini-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 22px;
}
.mini-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(244, 241, 234, 0.03);
  border: 1px solid rgba(244, 241, 234, 0.08);
  transition:
  transform 0.4s ease,
  border-color 0.4s ease;
}
.mini-thumb:hover {
  transform: translateY(-4px);
  border-color: rgba(220, 64, 53, 0.4);
}
.mini-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.3);
  transition:
  filter 0.4s ease,
  transform 0.6s ease;
}
.mini-thumb:hover img {
  transform: scale(1.03);
  filter: grayscale(0);
}
.mini-thumb .project-meta {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  background: rgba(14, 14, 14, 0.78);
  backdrop-filter: blur(4px);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #F4F1EA;
}
.mini-thumb .project-meta .meta-dot {
  width: 3px;
  height: 3px;
}

/* =============================================================================
HOME - Ce qu'on peut explorer
============================================================================= */

body.page-home .home-practice{
  position:relative;
  width:min(1280px, calc(100% - 64px));
  margin:90px auto;
  padding:80px;
  display:block;
  overflow:hidden;
  --glass-x:50%;
  --glass-y:50%;
  border:1px solid rgba(154,0,2,.16);
  background:
  linear-gradient(
  180deg,
  rgba(255,255,255,.014),
  rgba(255,255,255,.005)
  );
  backdrop-filter:blur(14px);
  border-radius:32px;
}

/* HANKO GLOW */
body.page-home .home-practice::before{
  content:"";
  position:absolute;
  width:620px;
  height:620px;
  right:-220px;
  top:-260px;
  background:
  radial-gradient(
  760px circle,
  rgba(154,0,2,.10),
  rgba(154,0,2,.035) 34%,
  transparent 72%
  );
  filter:blur(28px);
  opacity:.8;
  pointer-events:none;
}

/* GLASS REFLECTION — CURSOR */
body.page-home .home-practice::after{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  background:
  radial-gradient(
  700px circle at var(--glass-x) var(--glass-y),
  rgba(255,255,255,.09) 0%,
  rgba(255,255,255,.028) 20%,
  rgba(255,255,255,.008) 36%,
  transparent 64%
  ),
  linear-gradient(
  160deg,
  rgba(255,255,255,.025) 0%,
  rgba(255,255,255,.008) 22%,
  transparent 42%
  ),
  linear-gradient(
  -12deg,
  transparent 64%,
  rgba(154,0,2,.02) 100%
  );
  filter:
  blur(24px);
  transform:
  translateZ(0)
  scale(1.04);
  will-change:
  transform,
  opacity;
  opacity:0;
  mix-blend-mode:screen;
  transition:
  opacity .24s ease;
}
body.page-home .home-practice:hover::after{
  opacity:.38;
}

/* CONTENT */
body.page-home .home-practice .section-label{
  display:none;
}
body.page-home .home-practice .section-content{
  position:relative;
  z-index:2;
  max-width:none;
  width:100%;
}
body.page-home .home-practice .section-content h3{
  font-family:"Anton", sans-serif;
  font-size:clamp(32px, 3.5vw, 52px);
  line-height:1;
  letter-spacing:-0.025em;
  font-weight:400;
  color:var(--bone);
  margin-bottom:20px;
  display:flex;
  align-items:flex-end;
  gap:8px;
}
body.page-home .home-practice .section-content h3 .faracs-dot{
  width:10px;
  height:10px;
  margin-left: 0px;
  position:relative;
  bottom:3px;
  flex-shrink:0;
}
body.page-home .home-practice .practice-list{
  display:grid;
  grid-template-columns:
  repeat(4, 1fr);
  gap:80px;
  width:100%;
  margin-top:6px;
}
body.page-home .home-practice .practice-item{
  padding-top:35px;
  margin-top:20px;
  border-top:
  1px solid rgba(154,0,2,.3);
}
body.page-home .home-practice .practice-item h4{
  font-family:
  "JetBrains Mono",
  monospace;
  font-size:
  clamp(18px, 1.3vw, 22px);
  font-weight:400;
  line-height:1.15;
  letter-spacing:.25em;
  text-transform:none;
  color:var(--bone);
  margin-bottom:18px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
body.page-home .home-practice .practice-item h4 .num{
  display:none;
}
body.page-home .home-practice .practice-item p{
  font-size:15px;
  line-height:1.75;
  opacity:.62;
  max-width:28ch;
}

/* =============================================================================
HOME - RED ATMOSPHERE ONLY
============================================================================= */

body.page-home::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
  radial-gradient(
  circle at 72% 18%,
  rgba(154,0,2,.14),
  transparent 38%
  ),
  radial-gradient(
  circle at 28% 78%,
  rgba(220,64,53,.06),
  transparent 44%
  );
  mix-blend-mode:screen;
  opacity:.75;
}

/* =============================================================================
HOME MOBILE
============================================================================= */

@media (max-width: 900px) {
  .featured-project {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 0;
  }
  .featured-image {
    aspect-ratio: 4 / 3;
  }
  .mini-thumbs {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 10px;
  }
  body.page-home .home-practice .practice-list{
    grid-template-columns:1fr;
    gap:40px;
  }
}

/* PROJECT META */
body.page-home .project-info{
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;
}
body.page-home .project-meta{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
body.page-home .project-meta span{
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #F4F1EA;
  opacity: 0.92;
}
body.page-home .meta-dot{
  width: 4px;
  height: 4px;
  background: #9A0002;
  border-radius: 1px;
  opacity: 0.95;
}

/* READABILITY */
body.page-home .project-card::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45%;
  background:
  linear-gradient(
  to top,
  rgba(14,14,14,.88),
  rgba(14,14,14,.15),
  transparent
  );
  pointer-events: none;
  z-index: 2;
}

/* =========================================
HOME CTA — RESTORE
========================================= */

/* =============================================================================
HOME CTA
============================================================================= */

body.page-home .home-cta{
  width:min(1280px, calc(100% - 64px));
  margin:40px auto 0;
  padding:40px 0 120px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
body.page-home .home-cta h2{
  margin:0;
  font-family:'Anton', sans-serif;

  /* MEME TAILLE QUE HERO */
  font-size:clamp(48px, 6.5vw, 108px);
  line-height:1;
  letter-spacing:-.035em;
  font-weight:400;
  color:#F4F1EA;
  max-width:18ch;

  /* évite les coupes */
  padding-bottom:.08em;
  overflow:visible;
}
body.page-home .home-cta h2 .faracs-dot{
  width:14px;
  height:14px;
  margin-left:4px;
  position:relative;
  bottom:0;
  flex-shrink:0;
}
body.page-home .home-cta p{
  margin-top:24px;
  max-width:620px;
  font-family:'Inter', sans-serif;
  font-size:20px;
  line-height:1.7;
  color:rgba(244,241,234,.82);
}
body.page-home .home-cta .exit-cta{
  margin-top:48px;
}

/* =============================================================================
MENU TOGGLE
============================================================================= */

body.page-about .menu-toggle{
  position: fixed;
  top: 24px;
  right: 24px;
  width: 42px;
  height: 42px;
  background: var(--hanko);
  border-radius: 8px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition:
  transform 0.3s ease,
  background 0.3s ease;
}
body.page-about .menu-toggle:hover{
  transform: scale(1.05);
  background: var(--cinnabar);
}
body.page-about .menu-toggle span{
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--bone);
  transition:
  transform 0.3s ease,
  opacity 0.3s ease;
}
body.page-about .menu-toggle.active span:nth-child(1){
  transform:
  translateY(6px)
  rotate(45deg);
}
body.page-about .menu-toggle.active span:nth-child(2){
  opacity: 0;
}
body.page-about .menu-toggle.active span:nth-child(3){
  transform:
  translateY(-6px)
  rotate(-45deg);
}

/* =============================================================================
FULLSCREEN MENU
============================================================================= */

body.page-about .fullscreen-menu{
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.96);
  backdrop-filter: blur(12px);
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
  opacity 0.4s ease,
  visibility 0.4s ease;
}
body.page-about .fullscreen-menu.active{
  opacity: 1;
  visibility: visible;
}
body.page-about .fullscreen-menu ul{
  list-style: none;
  text-align: center;
}
body.page-about .fullscreen-menu li + li{
  margin-top: 24px;
}
body.page-about .fullscreen-menu a{
  font-family: "Anton", sans-serif;
  font-size: clamp(64px, 9vw, 140px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  transition:
  color 0.3s ease,
  transform 0.3s ease;
}
body.page-about .fullscreen-menu a:hover{
  color: var(--cinnabar);
  transform: translateX(8px);
}

/* =============================================================================
MAIN
============================================================================= */

body.page-about main{
  position: relative;
  z-index: 6;
  max-width: 1200px;
  margin: 0 auto;
  padding:
  260px
  60px
  120px;
}

/* =============================================================================
ABOUT SECTION
============================================================================= */

/* =============================================================================
ABOUT SECTION
============================================================================= */

body.page-about .about-hero{
  margin-bottom:120px;
}
body.page-about .portfolio-kicker{
  font-family:"JetBrains Mono", monospace;
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--cinnabar);
  margin-bottom:28px;
  opacity:0;
  animation:
  fadeUp .8s ease .3s forwards;
}
body.page-about .about-statement{
  font-family:"Anton", sans-serif;
  font-size:clamp(48px, 6.5vw, 108px);

  /* FIX */
  line-height:1.10;
  letter-spacing:-.035em;
  font-weight:400;
  color:var(--bone);
  margin-bottom:48px;
  max-width:18ch;

  /* évite les lettres coupées */
  padding-bottom:.08em;
  overflow:visible;
  clip-path:inset(0 100% 0 0);
  animation:
  clipReveal 1s cubic-bezier(.16,1,.3,1)
  .6s forwards;
}
body.page-about .about-statement .faracs-dot{
  width:14px;
  height:14px;
  margin-left:10px;
  position:relative;
  bottom:0;
}
body.page-about .about-rule{
  width:48px;
  height:2px;
  background:var(--hanko);
  margin-bottom:28px;
  transform:scaleX(0);
  transform-origin:left;
  animation:
  ruleReveal .6s ease
  1.4s forwards;
}
body.page-about .about-intro{
  font-family:"JetBrains Mono", monospace;
  font-size:clamp(16px, 1.35vw, 20px);
  line-height:1.55;
  font-weight:400;
  color:var(--bone);
  opacity:0;
  max-width:56ch;
  animation:
  fadeUp .8s ease
  1.7s forwards;
}
body.page-about .about-intro b{
  font-weight:500;
  color:var(--bone);
}

/* =============================================================================
ABOUT SECTIONS
============================================================================= */

body.page-about .about-section{
  padding:80px 0;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  align-items:start;
  position:relative;
}
body.page-about .section-label,
body.page-about .hidden-label,
body.page-about .empty-label{
  display:none;
}
body.page-about .section-label::before,
body.page-about .hidden-label::before,
body.page-about .empty-label::before{
  display:none;
}
body.page-about .section-content{
  max-width:none;
  margin:0;
  padding:0;
}
body.page-about .section-content h3{
  font-family:"Anton", sans-serif;
  font-size:clamp(32px, 3.5vw, 52px);
  line-height:1;
  letter-spacing:-.025em;
  font-weight:400;
  color:var(--bone);
  margin:0 0 28px 0;
  padding:0;
}
body.page-about .section-content h3 .faracs-dot{
  width:10px;
  height:10px;
  margin-left:8px;
  position:relative;
  bottom:0px;
}
body.page-about .section-content p{
  font-size:16px;
  line-height:1.65;
  color:var(--bone);
  opacity:.85;
  margin:0 0 18px 0;
  padding:0;
  max-width:60ch;
}
body.page-about .section-content p:last-child{
  margin-bottom:0;
}

/* =============================================================================
PRACTICE LIST
============================================================================= */

body.page-about .practice-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px 60px;
  margin-top:12px;
}
body.page-about .practice-item{
  border-top:1px solid rgba(154,0,2,.3);
  padding-top:18px;
}
body.page-about .practice-item h4{
  font-family:"JetBrains Mono", monospace;
  font-size:13px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--bone);
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:10px;
}
body.page-about .practice-item h4 .num{
  color:var(--cinnabar);
  font-weight:500;
}
body.page-about .practice-item p{
  font-size:14px;
  line-height:1.55;
  color:var(--bone);
  opacity:.7;
  margin:0;
}

/* =============================================================================
BEHIND SECTION
============================================================================= */

body.page-about .behind{
  padding:80px 0;
  display:grid;

  /* TEXTE | PHOTO */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:80px;
  row-gap:0;
  align-items:stretch;
}

/* =============================================================================
TEXT
============================================================================= */

body.page-about .behind .section-content{
  grid-column:1;
  width:100%;
  max-width:none;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
body.page-about .about-text-block{
  width:100%;
  max-width:100%;
}
body.page-about .about-text-block + .about-text-block{
  margin-top:110px;
}

/* =============================================================================
PHOTO
============================================================================= */

body.page-about .behind-photo{
  grid-column:2;
  position:relative;
  width:100%;
  height:100%;
  min-height:620px;
  overflow:hidden;
  background:
  linear-gradient(
  135deg,
  #1a1a1a,
  #2a2a2a
  );
  display:flex;
  align-items:center;
  justify-content:center;
}
body.page-about .behind-photo img{
  width:100%;
  height:100%;

  /* PAS DE DÉFORMATION */
  object-fit:contain;
  object-position:center;
  display:block;
}

/* =============================================================================
PHOTO LABEL (comme portfolio index)
============================================================================= */

body.page-about .corner-mark{
  position:absolute;
  left:20px;
  bottom:20px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  background:
  rgba(14,14,14,.78);
  backdrop-filter:
  blur(4px);
  font-family:
  "JetBrains Mono",
  monospace;
  font-size:10px;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bone);
}
body.page-about .corner-mark .meta-dot{
  width:4px;
  height:4px;
  background:var(--hanko);
  border-radius:1px;
  flex-shrink:0;
}

/* =============================================================================
MOBILE
============================================================================= */

@media (max-width:900px){
  body.page-about .behind{
    grid-template-columns:1fr;
    gap:60px;
  }
  body.page-about .behind .section-content{
    grid-column:1;
  }
  body.page-about .behind-photo{
    grid-column:1;
    min-height:auto;
    height:auto;
  }
}

/* =============================================================================
CLIENTS LIST
============================================================================= */

body.page-about .clients-list{
  margin-top:12px;
  border-top:1px solid rgba(154,0,2,.3);
}
body.page-about .client-row{
  display:grid;
  grid-template-columns:60px 1fr 120px 80px;
  align-items:center;
  padding:18px 0;
  border-bottom:1px solid rgba(244,241,234,.06);
  font-family:"JetBrains Mono", monospace;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bone);
  transition:
  color .3s ease,
  padding-left .3s ease;
}
body.page-about .client-row:hover{
  color:var(--cinnabar);
  padding-left:8px;
}
body.page-about .client-row .num{
  color:var(--cinnabar);
  opacity:.7;
}
body.page-about .client-row .type{
  color:var(--ash);
  font-size:11px;
}
body.page-about .client-row .year{
  color:var(--ash);
  text-align:right;
  font-size:11px;
}

/* =============================================================================
DIVIDER
============================================================================= */

body.page-about .divider{
  position:relative;
  width:100%;
  height:1px;
  margin:0 auto;
  background:rgba(154,0,2,.28);
  overflow:hidden;
}
body.page-about .divider::before{
  content:"";
  position:absolute;
  inset:0;
  transform:scaleX(0);
  transform-origin:left;
  background:
  linear-gradient(
  90deg,
  transparent 0%,
  rgba(220,64,53,1) 50%,
  transparent 100%
  );
  box-shadow:0 0 16px rgba(154,0,2,.38);
}
body.page-about .divider.in-view::before{
  animation:
  dividerScan 1.1s cubic-bezier(.77,0,.175,1)
  forwards;
}
@media (max-width:900px){
  body.page-about .behind{
    grid-template-columns:1fr;
    gap:60px;
  }
  body.page-about .behind-photo{
    grid-column:1;
    height:auto;
    min-height:auto;
  }
}

/* =============================================================================
EXIT
============================================================================= */

body.page-about .exit{
  margin-top:-10px;
  padding:120px 0 60px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:36px;
}
body.page-about .exit-title{
  font-family:"Anton", sans-serif;

  /* MEME TAILLE QUE HERO */
  font-size:clamp(48px, 6.5vw, 108px);
  line-height:1;
  letter-spacing:-.035em;
  font-weight:400;
  color:var(--bone);

  /* évite les coupes */
  padding-bottom:.08em;
  overflow:visible;
  max-width:18ch;
}
body.page-about .exit-title .faracs-dot{
  width:14px;
  height:14px;
  margin-left:4px;
  position:relative;
  bottom:0;
}

/* =============================================================================
PAGE: PORTFOLIO
============================================================================= */

/* =============================================================================
MENU
============================================================================= */

body.page-portfolio .menu-toggle{
  position: fixed;
  top: 24px;
  right: 24px;
  width: 42px;
  height: 42px;
  background: var(--hanko);
  border-radius: 8px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition:
  transform 0.3s ease,
  background 0.3s ease;
}
body.page-portfolio .menu-toggle:hover{
  transform: scale(1.05);
  background: var(--cinnabar);
}
body.page-portfolio .menu-toggle span{
  width: 18px;
  height: 2px;
  background: var(--bone);
  border-radius: 999px;
  transition:
  transform 0.3s ease,
  opacity 0.3s ease;
}
body.page-portfolio .menu-toggle.active span:nth-child(1){
  transform:
  translateY(6px)
  rotate(45deg);
}
body.page-portfolio .menu-toggle.active span:nth-child(2){
  opacity: 0;
}
body.page-portfolio .menu-toggle.active span:nth-child(3){
  transform:
  translateY(-6px)
  rotate(-45deg);
}
body.page-portfolio .fullscreen-menu{
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.96);
  backdrop-filter: blur(12px);
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
  opacity 0.4s ease,
  visibility 0.4s ease;
}
body.page-portfolio .fullscreen-menu.active{
  opacity: 1;
  visibility: visible;
}
body.page-portfolio .fullscreen-menu ul{
  list-style: none;
  text-align: center;
}
body.page-portfolio .fullscreen-menu li + li{
  margin-top: 24px;
}
body.page-portfolio .fullscreen-menu a{
  font-family: "Anton", sans-serif;
  font-size: clamp(64px, 9vw, 140px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  transition:
  color 0.3s ease,
  transform 0.3s ease;
}
body.page-portfolio .fullscreen-menu a:hover{
  color: var(--cinnabar);
  transform: translateX(8px);
}

/* =============================================================================
MAIN
============================================================================= */

body.page-portfolio main{
  position: relative;
  z-index: 6;
  max-width: 1320px;
  margin: 0 auto;
  padding:
  260px
  60px
  120px;
}

/* =============================================================================
HERO
============================================================================= */

body.page-portfolio .portfolio-hero{
  max-width: 840px;
  margin-bottom: 130px;
}
body.page-portfolio .portfolio-kicker{
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cinnabar);
  margin-bottom: 28px;
  opacity: 0;
  animation:
  fadeUp 0.8s ease 0.3s forwards;
}
body.page-portfolio .portfolio-title{
  font-family:"Anton", sans-serif;

  /* MEME TAILLE QUE ABOUT et index */
  font-size:clamp(48px, 6.5vw, 108px);
  line-height:1;
  letter-spacing:-.035em;
  font-weight:400;
  color:var(--bone);
  margin-bottom:48px;
  max-width:18ch;
  padding-bottom:.08em;
  overflow:visible;
  clip-path:inset(0 100% 0 0);
  animation:
  clipReveal 1s cubic-bezier(.16,1,.3,1)
  .5s forwards;
}
body.page-portfolio .portfolio-title .faracs-dot{
  width:14px;
  height:14px;
  margin-left:10px;
  position:relative;
  bottom:0;
}
body.page-portfolio .portfolio-rule{
  width: 48px;
  height: 2px;
  background: var(--hanko);
  margin-bottom: 32px;
  transform: scaleX(0);
  transform-origin: left;
  animation:
  ruleReveal 0.6s ease 1.3s forwards;
}
body.page-portfolio .portfolio-intro{
  font-size: 19px;
  line-height: 1.55;
  max-width: 58ch;
  opacity: 0;
  animation:
  fadeUp 0.8s ease 1.6s forwards;
}

/* =============================================================================
DIVIDER
============================================================================= */

body.page-portfolio .divider{
  position: relative;
  width: 100%;
  height: 1px;
  margin: 0 auto;
  background: rgba(154, 0, 2, 0.28);
  overflow: hidden;
}
body.page-portfolio .divider::before{
  content: "";
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  background:
  linear-gradient(
  90deg,
  transparent 0%,
  rgba(220, 64, 53, 1) 50%,
  transparent 100%
  );
  box-shadow:
  0 0 16px rgba(154, 0, 2, 0.38);
}
body.page-portfolio .divider.in-view::before{
  animation:
  dividerScan 1.1s cubic-bezier(0.77, 0, 0.175, 1)
  forwards;
}

/* =============================================================================
PORTFOLIO GRID
============================================================================= */

body.page-portfolio .portfolio-grid{
  padding: 110px 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 120px;
  gap: 18px;
}
body.page-portfolio .project-card{
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background: rgba(244, 241, 234, 0.03);
  border: 1px solid rgba(244, 241, 234, 0.08);
  grid-column: span 6;
  grid-row: span 4;
  transition:
  transform 0.45s ease,
  border-color 0.45s ease,
  box-shadow 0.45s ease;
}
body.page-portfolio .project-card:hover{
  transform: translateY(-6px);
  border-color: rgba(220, 64, 53, 0.45);
  box-shadow:
  0 0 80px rgba(154, 0, 2, 0.22);
}
body.page-portfolio .project-large{
  grid-column: span 12;
  grid-row: span 5;
  min-height: 620px;
}
body.page-portfolio .project-wide{
  grid-column: span 6;
  grid-row: span 4;
}
body.page-portfolio .project-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.78;
  filter:
  grayscale(0.2)
  contrast(1.04);
  transition:
  transform 0.8s ease,
  opacity 0.45s ease,
  filter 0.45s ease;
}
body.page-portfolio .project-card:hover img{
  transform: scale(1.04);
  opacity: 0.92;
  filter:
  grayscale(0)
  contrast(1.08);
}
body.page-portfolio .project-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px;
  background:
  linear-gradient(
  to top,
  rgba(14, 14, 14, 0.92) 0%,
  rgba(14, 14, 14, 0.58) 36%,
  rgba(14, 14, 14, 0.08) 72%
  );
}
body.page-portfolio .project-meta{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  width:fit-content;
  padding:7px 11px;
  margin-bottom:18px;
  background:rgba(14,14,14,.78);
  backdrop-filter:blur(4px);
  font-family:"JetBrains Mono", monospace;
  font-size:10px;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bone);
}
body.page-portfolio .project-meta .meta-dot{
  width:4px;
  height:4px;
  background:var(--hanko);
  border-radius:1px;
}
body.page-portfolio .project-overlay h2{
  font-family: "Anton", sans-serif;
  font-size: clamp(42px, 5vw, 86px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 400;
  color: var(--bone);
  margin-bottom: 18px;
}
body.page-portfolio .project-overlay h2 .faracs-dot{
  width: 10px;
  height: 10px;
  margin-left: 8px;
  position: relative;
  bottom: 0px;
}
body.page-portfolio .project-overlay p{
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(244, 241, 234, 0.78);
}

/* =============================================================================
EXIT
============================================================================= */

body.page-portfolio .portfolio-exit{
  padding:
  120px
  0
  60px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:36px;
}
body.page-portfolio .portfolio-exit h2{
  font-family:"Anton", sans-serif;

  /* MEME TAILLE QUE HERO */
  font-size:clamp(48px, 6.5vw, 108px);
  line-height:1;
  letter-spacing:-.035em;
  font-weight:400;
  color:var(--bone);
  max-width:18ch;

  /* évite les coupes */
  padding-bottom:.08em;
  overflow:visible;
}
body.page-portfolio .portfolio-exit h2 .faracs-dot{
  width:14px;
  height:14px;
  margin-left:4px;
  position:relative;
  bottom:0;
}

/* =============================================================================
MENU
============================================================================= */

body.page-contact .menu-toggle{
  position: fixed;
  top: 24px;
  right: 24px;
  width: 42px;
  height: 42px;
  background: var(--hanko);
  border-radius: 8px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition:
  transform 0.3s ease,
  background 0.3s ease;
}
body.page-contact .menu-toggle:hover{
  transform: scale(1.05);
  background: var(--cinnabar);
}
body.page-contact .menu-toggle span{
  width: 18px;
  height: 2px;
  background: var(--bone);
  border-radius: 999px;
  transition:
  transform 0.3s ease,
  opacity 0.3s ease;
}
body.page-contact .menu-toggle.active span:nth-child(1){
  transform:
  translateY(6px)
  rotate(45deg);
}
body.page-contact .menu-toggle.active span:nth-child(2){
  opacity: 0;
}
body.page-contact .menu-toggle.active span:nth-child(3){
  transform:
  translateY(-6px)
  rotate(-45deg);
}
body.page-contact .fullscreen-menu{
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.96);
  backdrop-filter: blur(12px);
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition:
  opacity 0.4s ease,
  visibility 0.4s ease;
}
body.page-contact .fullscreen-menu.active{
  opacity: 1;
  visibility: visible;
}
body.page-contact .fullscreen-menu ul{
  list-style: none;
  text-align: center;
}
body.page-contact .fullscreen-menu li + li{
  margin-top: 24px;
}
body.page-contact .fullscreen-menu a{
  font-family: "Anton", sans-serif;
  font-size: clamp(64px, 9vw, 140px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  transition:
  color 0.3s ease,
  transform 0.3s ease;
}
body.page-contact .fullscreen-menu a:hover{
  color: var(--cinnabar);
  transform: translateX(8px);
}

/* =============================================================================
MAIN
============================================================================= */

body.page-contact main{
  position: relative;
  z-index: 6;
  max-width: 1200px;
  margin: 0 auto;
  padding:
  260px
  60px
  120px;
}

/* =============================================================================
HERO
============================================================================= */

body.page-contact .contact-hero{
  max-width: 760px;
  margin-bottom: 130px;
}
body.page-contact .contact-kicker{
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cinnabar);
  margin-bottom: 28px;
  opacity: 0;
  animation:
  fadeUp 0.8s ease 0.3s forwards;
}
body.page-contact .contact-title{
  font-family:"Anton", sans-serif;
  font-size:clamp(48px, 6.5vw, 108px);
  line-height:1;
  letter-spacing:-.035em;
  font-weight:400;
  color:var(--bone);
  margin-bottom:48px;
  max-width:18ch;
  padding-bottom:.08em;
  overflow:visible;
  clip-path:inset(0 100% 0 0);
  animation:
  clipReveal 1s cubic-bezier(.16,1,.3,1)
  .5s forwards;
}
body.page-contact .contact-title .faracs-dot{
  width:14px;
  height:14px;
  margin-left:4px;
  position:relative;
  bottom:0;
}
body.page-contact .contact-rule{
  width:48px;
  height:2px;
  background:var(--hanko);
  margin-bottom:32px;
  transform:scaleX(0);
  transform-origin:left;
  animation:
  ruleReveal 0.6s ease 1.3s forwards;
}
body.page-contact .contact-intro{
  font-size:19px;
  line-height:1.55;
  max-width:58ch;
  opacity:0;
  animation:
  fadeUp 0.8s ease 1.6s forwards;
}

/* =============================================================================
DIVIDER
============================================================================= */

body.page-contact .divider{
  position:relative;
  width:100%;
  height:1px;
  margin:0 auto;
  background:rgba(154, 0, 2, 0.28);
  overflow:hidden;
}
body.page-contact .divider::before{
  content:"";
  position:absolute;
  inset:0;
  transform:scaleX(0);
  transform-origin:left;
  background:
  linear-gradient(
  90deg,
  transparent 0%,
  rgba(220,64,53,1) 50%,
  transparent 100%
  );
  box-shadow:0 0 16px rgba(154,0,2,.38);
}
body.page-contact .divider.in-view::before{
  animation:
  dividerScan 1.1s cubic-bezier(.77,0,.175,1)
  forwards;
}

/* =============================================================================
FORM SECTION
============================================================================= */

body.page-contact .contact-section{
  padding:100px 0 40px;
  display:block;
}
body.page-contact .contact-form{
  width:min(920px, 100%);
  margin:0 auto;
}
body.page-contact .contact-side{
  max-width:none;
}
body.page-contact .contact-side h3{
  font-family:"Anton", sans-serif;
  font-size:clamp(32px, 3.5vw, 52px);
  line-height:1;
  letter-spacing:-.025em;
  font-weight:400;
  color:var(--bone);
  margin:0 0 28px 0;
  padding:0;
}
body.page-contact .contact-side h3 .faracs-dot{
  width:10px;
  height:10px;
  margin-left:8px;
  position:relative;
  bottom:0;
}
body.page-contact .section-label{
  display:none;
}
body.page-contact .section-label::before{
  display:none;
}
body.page-contact .contact-side p{
  font-size:16px;
  line-height:1.65;
  color:var(--bone);
  opacity:.85;
  margin:0 0 18px 0;
  padding:0;
  max-width:60ch;
}
body.page-contact .contact-side p:last-of-type{
  margin-bottom:0;
}
body.page-contact .contact-form{
  padding:64px 58px;
  background:rgba(14,14,14,.58);
  border:1px solid rgba(244,241,234,.08);
  border-radius:72px;
  backdrop-filter:blur(10px);
  box-shadow:
  0 0 120px rgba(0,0,0,.22),
  inset 0 0 80px rgba(255,255,255,.01);
}
body.page-contact .contact-form label{
  display:block;
  margin-bottom:32px;
}
body.page-contact .contact-form span{
  display:block;
  margin-bottom:14px;
  font-family:"JetBrains Mono", monospace;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.18em;
  opacity:.82;
}
body.page-contact .contact-form input,
body.page-contact .contact-form textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(244,241,234,.72);
  color:var(--bone);
  font-family:"Inter", sans-serif;
  font-size:16px;
  padding:8px 0;
  outline:none;
}
body.page-contact .contact-form textarea{
  height:150px;
  resize:none;
  line-height:2;
  border-bottom:none;
  background-image:
  repeating-linear-gradient(
  to bottom,
  transparent 0,
  transparent 31px,
  rgba(244,241,234,.25) 32px,
  rgba(244,241,234,.25) 33px
  );
}
@media (max-width:900px){
  body.page-contact .contact-section{
    grid-template-columns:1fr;
    gap:60px;
  }
  body.page-contact .contact-form{
    padding:44px 32px;
    border-radius:42px;
  }
}
body.page-contact .send-button{
  margin-top:20px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:"JetBrains Mono", monospace;
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bone);
  transition:
  opacity .3s ease,
  transform .3s ease;
}
body.page-contact .send-button .arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  top:8px;
  transition:
  transform .3s ease;
}
body.page-contact .send-button .faracs-dot{
  width:8px;
  height:8px;
  margin-left:0;
  position:relative;
  bottom:0;
}
body.page-contact .send-button:hover{
  opacity:.7;
}
body.page-contact .send-button:hover .arrow{
  transform:translateX(6px);
}

/* =============================================================================
KEYFRAMES
============================================================================= */

@keyframes glowReveal{
  to{
    opacity:1;
  }
}
@keyframes clipReveal{
  from{
    clip-path:inset(0 100% 0 0);
  }
  to{
    clip-path:inset(0 0 0 0);
  }
}
@keyframes ruleReveal{
  from{
    transform:scaleX(0);
  }
  to{
    transform:scaleX(1);
  }
}
@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:.88;
    transform:translateY(0);
  }
}
@keyframes dividerScan {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}
@keyframes mazeSignalPulse {
  0% { filter: brightness(1); }
  45% {
    filter: brightness(1.45) drop-shadow(0 0 18px rgba(220, 64, 53, 0.45));
  }
  100% { filter: brightness(1); }
}

/* =============================================================================
SIGNAL ARRIVAL
============================================================================= */

.signal-arrival {
  position: fixed;
  inset: 0;
  z-index: 999998;
  background: rgba(14, 14, 14, 0.97);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
  opacity 0.6s ease,
  visibility 0.6s ease;
}
.signal-arrival[data-state="visible"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.signal-arrival-inner {
  text-align: center;
  max-width: 900px;
  padding: 0 32px;
}
.signal-arrival-title {
  font-family: "Anton", sans-serif;
  font-size: clamp(80px, 12vw, 200px);
  line-height: 0.86;
  letter-spacing: -0.05em;
  font-weight: 400;
  color: var(--bone);
  margin-bottom: 36px;
  clip-path: inset(0 100% 0 0);
  animation:
  signalTitleReveal 1.1s cubic-bezier(0.16, 1, 0.3, 1)
  0.5s forwards;
}
.signal-arrival-title .faracs-dot {
  width: 18px;
  height: 18px;
  margin-left: 16px;
  position: relative;
  bottom: 14px;
}
.signal-arrival-subtitle {
  font-family: "JetBrains Mono", monospace;
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0;
  margin-bottom: 64px;
  animation: signalFadeUp 0.8s ease 1.4s forwards;
}

/* Hide logo + menu while overlay is up */
body.signal-received .site-logo,
body.signal-received .menu-toggle {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* Pulse the maze on arrival */
body.signal-received #faracs-maze {
  animation: signalMazePulse 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes signalTitleReveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes signalFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 0.88;
    transform: translateY(0);
  }
}
@keyframes signalMazePulse {
  0% {
    filter: brightness(1);
  }
  30% {
    filter:
    brightness(1.8)
    drop-shadow(0 0 24px rgba(220, 64, 53, 0.6));
  }
  100% {
    filter: brightness(1);
  }
}
body.page-home .portfolio-preview{
  position:relative;
  width:min(1280px, calc(100% - 64px));
  margin:0 auto;
  padding:10px 0 120px;
  overflow:hidden;
  transition:
  padding .22s ease,
  transform .22s ease;
}
body.page-home .portfolio-preview.scrolled{
  padding:20px 0 120px;
}
body:hover #faracs-maze{
  filter:
  brightness(1.08)
  drop-shadow(
  0 0 12px
  rgba(154,0,2,.12)
  );
}

/* =============================================================================
TARGETED ASH TEXT UPDATES
============================================================================= */

body.page-home .manifesto-line,
body.page-about .about-intro,
body.page-portfolio .portfolio-intro,
body.page-contact .contact-intro{
  color: var(--ash);
}

/* =============================================================================
FOOTER
============================================================================= */

.site-footer{
  width:min(1280px, calc(100% - 64px));
  margin:0 auto;
  padding:60px 0 36px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:
  1px solid rgba(244,241,234,.08);
  position:relative;
  z-index:5;
}
.footer-left p{
  margin:0;
  font-family:
  "JetBrains Mono",
  monospace;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ash);
}
.footer-linkedin{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ash);
  transition:
  color .35s ease,
  transform .35s ease;
}
.footer-linkedin svg{
  width:24px;
  height:24px;
  display:block;
}
.footer-linkedin:hover{
  color:var(--cinnabar);
  transform:
  translateY(-2px);
}
@media (max-width:900px){
  .site-footer{
    padding:32px 0;
    flex-direction:column;
    gap:24px;
  }
}

/* =============================================================================
   FARACS — MOBILE FIX V12 (CLEAN)
   À coller à la TOUTE FIN de faracsstudio.css
   N'affecte que les écrans ≤ 900px — le desktop n'est jamais touché.
   ============================================================================= */

@media (max-width: 900px) {

  /* ----- Base : empêche le scroll horizontal, désactive le curseur custom ----- */
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    cursor: auto !important;
  }

  a,
  button {
    cursor: pointer !important;
  }

  #faracs-cursor {
    display: none !important;
  }

  #faracs-maze {
    opacity: .95 !important;
  }

  .ambient-glow {
    opacity: .65 !important;
  }

  /* ----- Logo : passe en flux normal, taille raisonnable, ne couvre plus rien ----- */
  .site-logo,
  .site-logo.intro-done,
  .site-logo.scrolled,
  body.intro-loading .site-logo,
  body:not(.page-home) .site-logo,
  body:not(.page-home) .site-logo.intro-done,
  body:not(.page-home) .site-logo.scrolled,
  html.no-intro body.intro-loading .site-logo,
  html.no-intro body.intro-loading .site-logo.intro-done,
  html.no-intro body.intro-loading .site-logo.scrolled {
    position: relative !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    width: 64px !important;
    height: auto !important;
    margin: 18px 0 0 20px !important;
    transform: none !important;
    z-index: 20 !important;
    opacity: 1 !important;
    transition: none !important;
    pointer-events: auto !important;
  }

  .site-logo img,
  .site-logo.scrolled img,
  body.intro-loading .site-logo img,
  body:not(.page-home) .site-logo img,
  body:not(.page-home) .site-logo.scrolled img,
  html.no-intro body.intro-loading .site-logo img {
    display: block !important;
    width: 64px !important;
    max-width: 64px !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  /* ----- Bouton menu ----- */
  .menu-toggle,
  body.page-about .menu-toggle,
  body.page-portfolio .menu-toggle,
  body.page-contact .menu-toggle {
    position: fixed !important;
    top: 20px !important;
    right: 18px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    z-index: 999999 !important;
  }

  /* ----- Conteneur principal ----- */
  main,
  body.page-about main,
  body.page-portfolio main,
  body.page-contact main,
  body.page-project-wait main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 48px 24px 80px !important;
    overflow: hidden !important;
  }

  body.page-home .manifesto {
    min-height: auto !important;
    max-width: none !important;
    padding: 48px 24px 90px !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  /* ----- Kickers (petits intitulés mono) ----- */
  body.page-home .portfolio-kicker,
  body.page-about .portfolio-kicker,
  body.page-portfolio .portfolio-kicker,
  body.page-contact .contact-kicker,
  body.page-project-wait .portfolio-kicker {
    font-size: 10px !important;
    letter-spacing: .20em !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    min-height: auto !important;
  }

  /* ----- Gros titres ----- */
  body.page-home .manifesto-thesis,
  body.page-about .about-statement,
  body.page-portfolio .portfolio-title,
  body.page-contact .contact-title,
  body.page-project-wait .wait-title,
  body.page-home .home-cta h2,
  body.page-about .exit-title,
  body.page-portfolio .portfolio-exit h2 {
    font-size: clamp(28px, 8.8vw, 40px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.02em !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    padding-top: .04em !important;
    padding-bottom: .10em !important;
    overflow: visible !important;
    hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  /* ----- Titres secondaires / sections ----- */
  .featured-title,
  body.page-home .portfolio-title,
  body.page-home .home-practice .section-content h3,
  body.page-about .section-content h3,
  body.page-contact .contact-side h3,
  body.page-portfolio .project-overlay h2 {
    font-size: clamp(24px, 7.8vw, 34px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.02em !important;
    overflow: visible !important;
  }

  /* ----- Le point rouge (faracs-dot) : reste petit et aligné ----- */
  .faracs-dot,
  body.page-home .manifesto-thesis .faracs-dot,
  body.page-about .about-statement .faracs-dot,
  body.page-portfolio .portfolio-title .faracs-dot,
  body.page-contact .contact-title .faracs-dot,
  body.page-project-wait .wait-title .faracs-dot,
  body.page-home .home-cta h2 .faracs-dot,
  body.page-about .exit-title .faracs-dot,
  body.page-portfolio .portfolio-exit h2 .faracs-dot,
  .featured-title .faracs-dot,
  .signal-arrival-title .faracs-dot {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    border-radius: 1px !important;
    margin-left: 6px !important;
    vertical-align: baseline !important;
    position: relative !important;
    bottom: .03em !important;
    transform: none !important;
  }

  /* ----- Dots manquants : <h3> services + titre portfolio accueil ----- */
  body.page-home .home-practice .section-content h3 .faracs-dot,
  body.page-home .portfolio-title .faracs-dot {
    display: inline-block !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    border-radius: 1px !important;
    margin-left: 6px !important;
    vertical-align: baseline !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: .03em !important;
    transform: none !important;
  }

  /* ----- Textes courants ----- */
  body.page-home .manifesto-line,
  body.page-about .about-intro,
  body.page-portfolio .portfolio-intro,
  body.page-contact .contact-intro,
  body.page-project-wait .wait-intro,
  body.page-home .home-cta p,
  body.page-about .section-content p,
  body.page-contact .contact-side p {
    font-size: 15px !important;
    line-height: 1.72 !important;
    max-width: 100% !important;
  }

  /* ----- Séparateurs & largeurs de sections ----- */
  .faracs-divider,
  body.page-home .faracs-divider {
    width: calc(100% - 48px) !important;
    margin: 0 auto 56px !important;
  }

  body.page-home .home-practice,
  body.page-home .portfolio-preview,
  body.page-home .home-cta {
    width: calc(100% - 48px) !important;
  }

  /* ----- Section services ----- */
  body.page-home .home-practice {
    margin: 56px auto !important;
    padding: 32px 22px !important;
    border-radius: 22px !important;
  }

  body.page-home .home-practice .practice-list,
  body.page-about .practice-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    margin-top: 28px !important;
  }

  body.page-home .home-practice .practice-item {
    padding-top: 22px !important;
    margin-top: 0 !important;
  }

  body.page-home .home-practice .practice-item h4 {
    font-size: 17px !important;
    letter-spacing: .18em !important;
    line-height: 1.25 !important;
    display: block !important;
  }

  body.page-home .home-practice .practice-item p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
  }

  /* ----- Aperçu portfolio (accueil) ----- */
  body.page-home .portfolio-preview {
    padding: 0 0 80px !important;
  }

  body.page-home .portfolio-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 22px !important;
  }

  .featured-project {
    display: block !important;
    padding: 28px 0 0 !important;
  }

  .featured-image {
    aspect-ratio: 4 / 3 !important;
    margin-bottom: 26px !important;
  }

  .featured-description {
    font-size: 15px !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
  }

  .mini-thumbs {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .mini-thumb {
    aspect-ratio: 4 / 3 !important;
  }

  /* ----- Page About ----- */
  body.page-about .about-hero,
  body.page-portfolio .portfolio-hero,
  body.page-contact .contact-hero {
    max-width: 100% !important;
    margin-bottom: 78px !important;
  }

  body.page-about .behind {
    display: block !important;
    padding: 56px 0 !important;
  }

  body.page-about .behind-photo {
    margin-top: 48px !important;
    height: auto !important;
    min-height: auto !important;
  }

  /* ----- Grille portfolio (page dédiée) ----- */
  body.page-portfolio .portfolio-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 22px !important;
    padding: 70px 0 !important;
  }

  body.page-portfolio .project-card,
  body.page-portfolio .project-large,
  body.page-portfolio .project-wide {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 420px !important;
    aspect-ratio: auto !important;
  }

  body.page-portfolio .project-card img {
    height: 100% !important;
    object-fit: cover !important;
  }

  body.page-portfolio .project-overlay {
    padding: 22px !important;
  }

  body.page-portfolio .project-overlay p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* ----- Page Contact ----- */
  body.page-contact .contact-section {
    padding: 70px 0 30px !important;
  }

  body.page-contact .contact-form {
    width: 100% !important;
    padding: 34px 24px !important;
    border-radius: 28px !important;
  }

  body.page-contact .contact-form span {
    font-size: 11px !important;
    letter-spacing: .18em !important;
  }

  body.page-contact .contact-form input,
  body.page-contact .contact-form textarea {
    font-size: 15px !important;
  }

  /* ----- Popup "Envoyé !" ----- */
  .signal-arrival-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 24px !important;
  }

  .signal-arrival-title {
    font-size: clamp(48px, 15vw, 66px) !important;
    line-height: 1.14 !important;
    letter-spacing: -.035em !important;
    padding-bottom: .24em !important;
    margin-bottom: 28px !important;
    overflow: visible !important;
  }

  .signal-arrival-subtitle {
    font-size: 11px !important;
    line-height: 1.6 !important;
    letter-spacing: .20em !important;
    margin-bottom: 42px !important;
  }

  /* ----- Footer ----- */
  .site-footer {
    width: calc(100% - 48px) !important;
    padding: 42px 0 34px !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  .footer-left p {
    text-align: center !important;
    font-size: 10px !important;
    letter-spacing: .2em !important;
  }
}

/* =============================================================================
   PETITS ÉCRANS (≤ 390px) — ajustements fins
   ============================================================================= */

@media (max-width: 390px) {

  .site-logo,
  .site-logo.intro-done,
  .site-logo.scrolled,
  body:not(.page-home) .site-logo,
  body:not(.page-home) .site-logo.scrolled {
    width: 58px !important;
    margin-left: 18px !important;
  }

  .site-logo img,
  .site-logo.scrolled img,
  body:not(.page-home) .site-logo img {
    width: 58px !important;
    max-width: 58px !important;
  }

  main,
  body.page-about main,
  body.page-portfolio main,
  body.page-contact main,
  body.page-project-wait main {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }

  body.page-home .manifesto-thesis,
  body.page-about .about-statement,
  body.page-portfolio .portfolio-title,
  body.page-contact .contact-title,
  body.page-project-wait .wait-title,
  body.page-home .home-cta h2,
  body.page-about .exit-title,
  body.page-portfolio .portfolio-exit h2 {
    font-size: clamp(24px, 8vw, 34px) !important;
  }

  .featured-title,
  body.page-home .portfolio-title,
  body.page-home .home-practice .section-content h3,
  body.page-about .section-content h3,
  body.page-contact .contact-side h3,
  body.page-portfolio .project-overlay h2 {
    font-size: clamp(22px, 7vw, 30px) !important;
  }

  .faracs-dot,
  body.page-home .manifesto-thesis .faracs-dot,
  body.page-about .about-statement .faracs-dot,
  body.page-portfolio .portfolio-title .faracs-dot,
  body.page-contact .contact-title .faracs-dot,
  body.page-project-wait .wait-title .faracs-dot,
  body.page-home .home-cta h2 .faracs-dot,
  body.page-about .exit-title .faracs-dot,
  body.page-portfolio .portfolio-exit h2 .faracs-dot,
  .featured-title .faracs-dot,
  .signal-arrival-title .faracs-dot {
    width: 7px !important;
    height: 7px !important;
    min-width: 7px !important;
    min-height: 7px !important;
  }
}
/* =============================================================================
   FARACS — FIX SMALL DESKTOP / TABLET LANDSCAPE
   Empêche le logo de manger le texte entre 901px et 1280px
============================================================================= */

@media (min-width: 901px) and (max-width: 1280px) {

  body.page-home .site-logo,
  body.page-home .site-logo.intro-done {
    top: 190px;
    left: 48px;
  }

  body.page-home .site-logo img,
  body.page-home .site-logo.intro-done img {
    height: clamp(320px, 34vw, 430px);
  }

  body.page-home .manifesto {
    padding: 230px 70px 60px clamp(360px, 42vw, 470px);
    max-width: 1180px;
  }

  body.page-home .manifesto-thesis {
    font-size: clamp(54px, 6.4vw, 88px);
  }

  body.page-home .manifesto-resolution {
    font-size: clamp(28px, 3vw, 42px);
  }
}

/* Encore plus prudent pour les écrans bas en hauteur */
@media (min-width: 901px) and (max-height: 760px) {

  body.page-home .site-logo,
  body.page-home .site-logo.intro-done {
    top: 160px;
  }

  body.page-home .site-logo img,
  body.page-home .site-logo.intro-done img {
    height: clamp(280px, 32vw, 380px);
  }

  body.page-home .manifesto {
    padding-top: 190px;
  }
}
/* =============================================================================
   FARACS — RESPONSIVE LOGO ADAPTIVE PATCH V3
   Objectif : garder l'animation originale, mais empêcher le logo de couvrir le texte
   sur les laptops / tablettes paysage / écrans desktop plus petits.
============================================================================= */

@media (min-width: 901px) {

  /* État normal après l'intro : le logo reste grand, mais sa taille devient
     proportionnelle à l'écran au lieu d'être bloquée à 550px partout. */
  body.page-home .site-logo.intro-done:not(.scrolled),
  body.page-home:not(.intro-loading) .site-logo:not(.scrolled) {
    top: clamp(130px, 18vh, 220px) !important;
    left: clamp(36px, 7.4vw, 95px) !important;
    transform: none !important;
  }

  body.page-home .site-logo.intro-done:not(.scrolled) img,
  body.page-home:not(.intro-loading) .site-logo:not(.scrolled) img {
    height: clamp(280px, 38vw, 550px) !important;
    max-height: calc(100vh - 190px) !important;
    width: auto !important;
  }

  /* État scroll : celui-ci doit toujours gagner. C'est lui qui évite que le logo
     reste énorme au-dessus des sections suivantes. */
  body.page-home .site-logo.scrolled,
  body.page-home .site-logo.intro-done.scrolled,
  html.no-intro body.page-home .site-logo.scrolled,
  html.no-intro body.page-home .site-logo.intro-done.scrolled {
    position: fixed !important;
    top: clamp(20px, 3vw, 28px) !important;
    left: clamp(20px, 3vw, 32px) !important;
    transform: none !important;
    z-index: 99998 !important;
  }

  body.page-home .site-logo.scrolled img,
  body.page-home .site-logo.intro-done.scrolled img,
  html.no-intro body.page-home .site-logo.scrolled img,
  html.no-intro body.page-home .site-logo.intro-done.scrolled img {
    height: clamp(112px, 13.5vw, 200px) !important;
    max-height: 26vh !important;
    width: auto !important;
  }

  /* La première section garde une zone de respiration à gauche tant que le logo
     est grand. Sur très grands écrans, on conserve le rendu original. */
  body.page-home .manifesto {
    padding-left: clamp(360px, 42vw, 500px) !important;
    padding-right: clamp(70px, 8vw, 120px) !important;
  }
}

/* Laptops/tablettes paysage : zone la plus problématique. */
@media (min-width: 901px) and (max-width: 1280px) {
  body.page-home .manifesto {
    padding-top: clamp(190px, 24vh, 250px) !important;
    padding-left: clamp(330px, 40vw, 455px) !important;
  }

  body.page-home .manifesto-thesis {
    font-size: clamp(52px, 6.4vw, 88px) !important;
  }

  body.page-home .manifesto-resolution {
    font-size: clamp(28px, 3vw, 42px) !important;
  }
}

/* Écrans larges mais peu hauts : on réduit encore l'état grand logo. */
@media (min-width: 901px) and (max-height: 760px) {
  body.page-home .site-logo.intro-done:not(.scrolled),
  body.page-home:not(.intro-loading) .site-logo:not(.scrolled) {
    top: clamp(105px, 15vh, 160px) !important;
  }

  body.page-home .site-logo.intro-done:not(.scrolled) img,
  body.page-home:not(.intro-loading) .site-logo:not(.scrolled) img {
    height: clamp(250px, 32vw, 390px) !important;
    max-height: calc(100vh - 170px) !important;
  }

  body.page-home .manifesto {
    padding-top: clamp(165px, 22vh, 210px) !important;
  }
}

/* Sécurité ultime : si un autre navigateur applique les règles dans un ordre
   inattendu, le logo scrollé ne pourra jamais reprendre la taille du logo intro. */
body.page-home .site-logo.scrolled img {
  height: clamp(112px, 13.5vw, 200px) !important;
}

/* =============================================================================
   FARACS — LAPTOP/TABLET LANDSCAPE LOGO FLOW PATCH
   Sur les écrans sous 1500px type laptop/tablette paysage, le logo ne reste plus fixed.
   Il se comporte comme sur mobile : il vit dans la page, puis disparaît au scroll.
   Desktop large conservé intact.
============================================================================= */

@media (min-width: 901px) and (max-width: 1500px) {

  body.page-home:not(.intro-loading) .site-logo,
  body.page-home:not(.intro-loading) .site-logo.intro-done,
  body.page-home:not(.intro-loading) .site-logo.scrolled,
  body.page-home:not(.intro-loading) .site-logo.intro-done.scrolled,
  html.no-intro body.page-home .site-logo,
  html.no-intro body.page-home .site-logo.intro-done,
  html.no-intro body.page-home .site-logo.scrolled,
  html.no-intro body.page-home .site-logo.intro-done.scrolled {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    width: clamp(78px, 8vw, 108px) !important;
    height: auto !important;
    margin: clamp(68px, 6vh, 86px) 0 clamp(34px, 5vh, 58px) clamp(32px, 3.2vw, 48px) !important;
    transform: none !important;
    z-index: 30 !important;
    transition: none !important;
    pointer-events: auto !important;
  }

  body.page-home:not(.intro-loading) .site-logo img,
  body.page-home:not(.intro-loading) .site-logo.intro-done img,
  body.page-home:not(.intro-loading) .site-logo.scrolled img,
  body.page-home:not(.intro-loading) .site-logo.intro-done.scrolled img,
  html.no-intro body.page-home .site-logo img,
  html.no-intro body.page-home .site-logo.intro-done img,
  html.no-intro body.page-home .site-logo.scrolled img,
  html.no-intro body.page-home .site-logo.intro-done.scrolled img {
    width: clamp(78px, 8vw, 108px) !important;
    max-width: clamp(78px, 8vw, 108px) !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    transition: none !important;
  }

  body.page-home .manifesto {
    min-height: auto !important;
    max-width: none !important;
    padding: clamp(42px, 6vh, 76px) clamp(40px, 5vw, 72px) clamp(88px, 11vh, 130px) !important;
  }

  body.page-home .manifesto-thesis {
    font-size: clamp(52px, 7.2vw, 88px) !important;
  }

  body.page-home .manifesto-resolution {
    font-size: clamp(30px, 3.5vw, 44px) !important;
  }
}

/* =============================================================================
   FARACS — GLOBAL LAPTOP/TABLET LOGO FLOW PATCH
   Applies the same safe logo behaviour to every page, not only the homepage.
   Under 1500px wide, the logo is part of the page flow so it scrolls away
   naturally and cannot sit above titles/content.
============================================================================= */

@media (min-width: 901px) and (max-width: 1500px) {

  body:not(.intro-loading) .site-logo,
  body:not(.intro-loading) .site-logo.intro-done,
  body:not(.intro-loading) .site-logo.scrolled,
  body:not(.intro-loading) .site-logo.intro-done.scrolled,
  body:not(.page-home) .site-logo,
  body:not(.page-home) .site-logo.intro-done,
  body:not(.page-home) .site-logo.scrolled,
  body:not(.page-home) .site-logo.intro-done.scrolled,
  html.no-intro body .site-logo,
  html.no-intro body .site-logo.intro-done,
  html.no-intro body .site-logo.scrolled,
  html.no-intro body .site-logo.intro-done.scrolled {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    width: clamp(78px, 8vw, 108px) !important;
    height: auto !important;
    margin: clamp(68px, 6vh, 86px) 0 clamp(34px, 5vh, 58px) clamp(32px, 3.2vw, 48px) !important;
    transform: none !important;
    z-index: 30 !important;
    transition: none !important;
    pointer-events: auto !important;
  }

  body:not(.intro-loading) .site-logo img,
  body:not(.intro-loading) .site-logo.intro-done img,
  body:not(.intro-loading) .site-logo.scrolled img,
  body:not(.intro-loading) .site-logo.intro-done.scrolled img,
  body:not(.page-home) .site-logo img,
  body:not(.page-home) .site-logo.intro-done img,
  body:not(.page-home) .site-logo.scrolled img,
  body:not(.page-home) .site-logo.intro-done.scrolled img,
  html.no-intro body .site-logo img,
  html.no-intro body .site-logo.intro-done img,
  html.no-intro body .site-logo.scrolled img,
  html.no-intro body .site-logo.intro-done.scrolled img {
    width: clamp(78px, 8vw, 108px) !important;
    max-width: clamp(78px, 8vw, 108px) !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    transition: none !important;
  }

  body:not(.page-home) main,
  body:not(.page-home) .page-shell,
  body:not(.page-home) .project-page,
  body:not(.page-home) .portfolio-page,
  body:not(.page-home) .about-page,
  body:not(.page-home) .contact-page {
    padding-top: 0 !important;
  }
}

/* =============================================================================
   FARACS — INTERMEDIATE SCREENS LOGO ANIMATION STABILITY PATCH
   Fixes the laptop/tablet-landscape jump/bug caused by the desktop intro state.
   Between 901px and 1500px, the logo now behaves like mobile from the first frame:
   it is in the page flow, keeps a stable size, and scrolls away naturally.
   Large desktop animation remains untouched above 1500px.
============================================================================= */

@media (min-width: 901px) and (max-width: 1500px) {

  body.intro-loading .site-logo,
  body.intro-loading .site-logo.intro-done,
  body.intro-loading .site-logo.scrolled,
  body:not(.intro-loading) .site-logo,
  body:not(.intro-loading) .site-logo.intro-done,
  body:not(.intro-loading) .site-logo.scrolled,
  body:not(.intro-loading) .site-logo.intro-done.scrolled,
  body:not(.page-home) .site-logo,
  body:not(.page-home) .site-logo.intro-done,
  body:not(.page-home) .site-logo.scrolled,
  body:not(.page-home) .site-logo.intro-done.scrolled,
  html.no-intro body .site-logo,
  html.no-intro body .site-logo.intro-done,
  html.no-intro body .site-logo.scrolled,
  html.no-intro body .site-logo.intro-done.scrolled {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    width: clamp(78px, 8vw, 108px) !important;
    height: auto !important;
    margin: clamp(68px, 6vh, 86px) 0 clamp(34px, 5vh, 58px) clamp(32px, 3.2vw, 48px) !important;
    transform: none !important;
    z-index: 30 !important;
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
    pointer-events: auto !important;
  }

  body.intro-loading .site-logo img,
  body.intro-loading .site-logo.intro-done img,
  body.intro-loading .site-logo.scrolled img,
  body:not(.intro-loading) .site-logo img,
  body:not(.intro-loading) .site-logo.intro-done img,
  body:not(.intro-loading) .site-logo.scrolled img,
  body:not(.intro-loading) .site-logo.intro-done.scrolled img,
  body:not(.page-home) .site-logo img,
  body:not(.page-home) .site-logo.intro-done img,
  body:not(.page-home) .site-logo.scrolled img,
  body:not(.page-home) .site-logo.intro-done.scrolled img,
  html.no-intro body .site-logo img,
  html.no-intro body .site-logo.intro-done img,
  html.no-intro body .site-logo.scrolled img,
  html.no-intro body .site-logo.intro-done.scrolled img {
    display: block !important;
    width: clamp(78px, 8vw, 108px) !important;
    max-width: clamp(78px, 8vw, 108px) !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
  }
}


/* =============================================================================
FINAL RESPONSIVE SAFETY PASS
Prevents accidental horizontal overflow without changing the art direction.
============================================================================= */

*, *::before, *::after{
  box-sizing:border-box;
}

html,
body{
  max-width:100%;
  overflow-x:hidden;
}

img,
video,
svg{
  max-width:100%;
}

iframe{
  max-width:100%;
  border:0;
}

@media (max-width: 900px){
  main{
    width:100%;
    max-width:100%;
  }

  .site-logo{
    left:18px;
  }

  .menu-toggle{
    right:18px;
  }

  .project-card,
  .featured-project,
  .mini-thumb{
    max-width:100%;
  }
}

@media (max-width: 560px){
  h1,
  h2{
    overflow:visible;
    word-break:normal;
  }

  .exit-cta{
    max-width:100%;
  }
}