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

/* ── Variables globales ── */
:root {
  /* Thème */
  --color-bg:           #0c0c0c;
  --color-text:         #e8e8e8;
  --color-muted:        rgba(232, 232, 232, 0.25);
  --color-divider:      rgba(232, 232, 232, 0.12);
  --theme-footer-bg:    #ea5239;
  --theme-footer-fg:    #000000;

  /* Grille */
  --padding:            40px;
  --col-gap:            40px;
  --cols:               4;

  /* Footer */
  --footer-height:      12dvh;
  --footer-pad-v:       20px;

  /* Typographie */
  --font-main:          'Space Mono', monospace;
  --font-size:          0.85rem;
  --line-height:        1.1rem;

  /* Transitions */
  --transition-border:  border-color 0.2s ease;
  --transition-color:   color 0.2s ease;
}

/* ── Base ── */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: var(--font-size);
  font-weight: 400;
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Liens globaux ── */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: var(--transition-border), var(--transition-color);
}

a:hover {
  border-bottom-color: rgba(232, 232, 232, 0.5);
}

a:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ═══════════════════════════════════════
   GRILLE PARTAGÉE
   ═══════════════════════════════════════ */
header,
footer,
.page-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--col-gap);
  padding-left:  var(--padding);
  padding-right: var(--padding);
}

/* ═══════════════════════════════════════
   HEADER / NAV
   ═══════════════════════════════════════ */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding-top:    var(--padding);
  padding-bottom: 0;
  z-index: 10;
  pointer-events: none;
  will-change: transform;
}

.nav-col {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  pointer-events: all;
}

.nav-col:nth-child(3) {
  justify-content: flex-end;
}

.nav-col--right {
  justify-content: flex-end;
}

.nav-logo,
.nav-link {
  font-family: var(--font-main);
  font-size: 1.618rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-text);
  border-bottom: 1px solid transparent;
  transition: var(--transition-border), var(--transition-color);
}

.nav-logo:hover,
.nav-link:hover {
  border-bottom-color: rgba(232, 232, 232, 0.5);
}

.nav-logo:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ═══════════════════════════════════════
   INDICATION DE SCROLL
   ═══════════════════════════════════════ */
.scroll-hint {
  position: fixed;
  left: 50%;
  top: calc((100vh - var(--footer-height)) / 2);
  transform: translate(-50%, -50%);
  font-family: var(--font-main);
  font-size: calc(var(--font-size) * 2);
  line-height: var(--line-height);
  color: rgba(232, 232, 232, 0.75);
  z-index: 5;
  pointer-events: none;
  animation: Blink 36s ease-in-out;
}

@supports (height: 100dvh) {
  .scroll-hint {
    top: calc((100dvh - var(--footer-height)) / 2);
  }
}

.scroll-hint .chevron {
  display: inline-block;
  transform: rotate(90deg);
}

@keyframes Blink {
  0%       { opacity: 1; }
  0.6944%  { opacity: 0; }
  1.6667%  { opacity: 1; }
  4.1667%  { opacity: 1; }
  4.8611%  { opacity: 0; }
  5.8333%  { opacity: 1; }
  8.3333%  { opacity: 1; }
  9.0278%  { opacity: 0; }
  10%      { opacity: 1; }
  12.5%    { opacity: 1; }
  13.1944% { opacity: 0; }
  14.1667% { opacity: 1; }
  16.6667% { opacity: 1; }
  17.3611% { opacity: 0; }
  18.3333% { opacity: 1; }
  20.8333% { opacity: 1; }
  21.5278% { opacity: 0; }
  22.5%    { opacity: 1; }
  25%      { opacity: 1; }
  25.6944% { opacity: 0; }
  26.6667% { opacity: 1; }
  29.1667% { opacity: 1; }
  29.8611% { opacity: 0; }
  30.8333% { opacity: 1; }
  33.3333% { opacity: 1; }
  34.0278% { opacity: 0; }
  35%      { opacity: 1; }
  37.5%    { opacity: 1; }
  38.1944% { opacity: 0; }
  39.1667% { opacity: 1; }
  41.6667% { opacity: 1; }
  42.3611% { opacity: 0; }
  43.3333% { opacity: 1; }
  45.8333% { opacity: 1; }
  46.5278% { opacity: 0; }
  47.5%    { opacity: 1; }
  50%      { opacity: 1; }
  50.6944% { opacity: 0; }
  51.6667% { opacity: 1; }
  54.1667% { opacity: 1; }
  54.8611% { opacity: 0; }
  55.8333% { opacity: 1; }
  58.3333% { opacity: 1; }
  59.0278% { opacity: 0; }
  60%      { opacity: 1; }
  62.5%    { opacity: 1; }
  63.1944% { opacity: 0; }
  64.1667% { opacity: 1; }
  66.6667% { opacity: 1; }
  67.3611% { opacity: 0; }
  68.3333% { opacity: 1; }
  70.8333% { opacity: 1; }
  71.5278% { opacity: 0; }
  72.5%    { opacity: 1; }
  75%      { opacity: 1; }
  75.6944% { opacity: 0; }
  76.6667% { opacity: 1; }
  79.1667% { opacity: 1; }
  79.8611% { opacity: 0; }
  80.8333% { opacity: 1; }
  83.3333% { opacity: 1; }
  84.0278% { opacity: 0; }
  85%      { opacity: 1; }
  87.5%    { opacity: 1; }
  88.1944% { opacity: 0; }
  89.1667% { opacity: 1; }
  91.6667% { opacity: 1; }
  92.3611% { opacity: 0; }
  93.3333% { opacity: 1; }
  95.8333% { opacity: 1; }
  96.5278% { opacity: 0; }
  97.5%    { opacity: 1; }
  100%     { opacity: 1; }
}

.scroll-hint--stopped {
  animation: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--footer-height);
  padding-top:    var(--footer-pad-v);
  padding-bottom: var(--footer-pad-v);
  background: var(--theme-footer-bg);
  color: var(--theme-footer-fg);
  z-index: 10;
  pointer-events: all;
  will-change: transform;
}

.footer-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-col:first-child {
  justify-content: flex-start;
}

.footer-logo {
  height: calc(var(--footer-height) - var(--footer-pad-v) * 2);
  width: auto;
  display: block;
  filter: brightness(0);
}

.footer-col:nth-child(3) {
  align-items: flex-start;
  justify-content: space-between;
}

.footer-col:nth-child(3) address {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-col:nth-child(3) .email-copy,
.footer-col:nth-child(3) .phone-call {
  display: inline-block;
}

.footer-col:last-child {
  align-items: flex-end;
  justify-content: space-between;
  text-align: right;
}

.footer-col-top,
.footer-col-bottom {
  display: flex;
  flex-direction: column;
  align-items: inherit;
}

.footer-col p,
.footer-col address {
  font-style: normal;
  color: var(--theme-footer-fg);
}

.footer-col a {
  color: var(--theme-footer-fg);
  border-bottom: 1px solid transparent;
  transition: var(--transition-border), var(--transition-color);
}

.footer-col a:hover {
  border-bottom-color: rgba(0, 0, 0, 0.4);
}

.footer-col a:focus-visible {
  outline: 2px solid var(--theme-footer-fg);
  outline-offset: 3px;
  border-radius: 1px;
}

.email-copy::before { content: "hello[at]zero-quatre.ch"; }
.phone-call::before { content: "+41 79 130 65 95"; }

.email-copy,
.phone-call {
  cursor: pointer;
  display: inline-block;
  color: var(--theme-footer-fg);
  border-bottom: 1px solid transparent;
  transition: var(--transition-border), var(--transition-color);
  text-decoration: none;
}

.email-copy:hover,
.phone-call:hover {
  border-bottom-color: rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════
   RESPONSIVE — filet de sécurité
   ═══════════════════════════════════════ */
@media (max-width: 1024px) {
  :root {
    --padding: 32px;
    --col-gap: 24px;
  }
}

@media (max-width: 950px) {
  :root {
    --padding:       20px;
    --col-gap:       12px;
    --cols:          2;
    --footer-height: 30dvh;
    --footer-pad-v:  16px;
    --font-size:     0.85rem;
    --line-height:   1rem;
  }

  .scroll-hint {
    width: 50vw;
    max-width: 50vw;
    white-space: nowrap;
    font-size: 4vw; /* à ajuster selon la longueur du texte */
    text-align: center;
  }

  .nav-col:nth-child(2) {
    display: none;
  }

  footer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
  }

  .footer-col {
    width: 100%;
  }

  .footer-col:nth-child(2) {
    display: none;
  }

  .footer-col:last-child {
    align-items: flex-start;
    text-align: left;
  }

  .footer-logo {
    height: 60px;
  }
}

@media (max-width: 480px) {
  :root {
    --footer-height: 34dvh;
    --font-size:     0.8rem;
  }

  .footer-logo {
    height: 40px;
  }
}

/* ─────────────────────────────────────────
   Vidéo portfolio
   ───────────────────────────────────────── */

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

#portfolioVideo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(100vh - var(--footer-height));
  object-fit: cover;
  object-position: center;
  z-index: 1;
  display: block;
  background: var(--color-bg);
}

@supports (height: 100dvh) {
  #portfolioVideo {
    height: calc(100dvh - var(--footer-height));
  }
}