/* Hauteur minimale de l'écran ; sous 900 × 560 la page grandit et défile.
   Au-dessus, elle est figée à la hauteur de la fenêtre (bloc « Ordinateur ») */
body {
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
  font-family: 'Source Sans 3', sans-serif;
}

.content {
  position: relative;
  z-index: 1;
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  padding: 60px 60px 60px 100px;
  max-width: 660px;
}

/* ── Grille décorative (non interactive, comme une vidéo en fond) ── */
.side-grid {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Voile blanc derrière le menu : une vitrine sombre ou chargée (logo Relay,
   Passage Secret) qui passe sous WORKS / ABOUT / CONTACT reste discrète */
.side-grid::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 560px;
  height: 300px;
  background: radial-gradient(
    ellipse 100% 100% at 100% 0%,
    rgba(var(--bg-rgb), 0.94) 0%,
    rgba(var(--bg-rgb), 0.92) 60%,
    rgba(var(--bg-rgb), 0.5) 85%,
    rgba(var(--bg-rgb), 0) 100%
  );
}

/* Fondu blanc à la jonction entre le texte et la grille, pour une
   transition progressive plutôt qu'une coupe nette. */
.side-grid-fade {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 660px;
  width: 460px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    var(--bg) 0%,
    rgba(var(--bg-rgb), 0.9) 20%,
    rgba(var(--bg-rgb), 0.55) 50%,
    rgba(var(--bg-rgb), 0.15) 80%,
    transparent 100%
  );
}

.side-grid-inner {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  will-change: transform;
  background: var(--bg);   /* sous la grille : aucun jour blanc entre les cases */
  filter: grayscale(1);
}

.side-grid .cell {
  /* pas de filet : les cases se touchent (comme Works) */
  opacity: 0.1;
  position: relative;
  overflow: hidden;
}

.side-grid .project-cell {
  opacity: 0.32;
}

.side-grid .cell-media-bg {
  position: absolute;
  inset: 0;
  /* la case a le ratio de la capture (side-grid.js) : cover ne coupe rien */
  background-color: var(--case);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.identity h1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 10px;
}

.role {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--txt);
}

.bio {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bio p {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--ink-2);
}

.bio em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}

.bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 20px 28px;
}

/* 16px entre l'adresse et « copier », et zone de clic agrandie sans changer le
   dessin : 10px en haut et en bas (moitié de l'écart entre deux rangées) */
.contact-grid p.contact-value {
  gap: 16px;
}

.contact-grid .contact-link,
.copier-lien {
  position: relative;
}

.contact-grid .contact-link::after,
.copier-lien::after {
  content: "";
  position: absolute;
  inset: -10px -6px;
}

/* Les liens se suffisent : plus de micro-libellés (about-texte.md) */
.contact-grid .contact-value {
  font-size: 16px;
}

.copier-lien {
  padding: 0;
  border: 0;
  background: none;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 15px;
  color: var(--gris);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-link:focus-visible,
.copier-lien:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 4px;
}

.contact-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* .contact-label, .contact-value, .contact-link, .link-icon, .copy-btn :
   composant email partagé avec les pages projet, déplacé dans shared.css */

.available {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

/* ═══ Arrivée sur About (motion-transitions.md 5) ═══
   Le nom monte ligne par ligne dans un masque, puis les blocs arrivent.
   --entree = 0 en accès direct, 380 ms après un passage (posé par passage.js) ;
   tant que l'aplat ne s'est pas mis à se refermer, tout attend (passage-attente). */
.identity h1 .masque {
  display: block;
  clip-path: inset(-0.4em -0.2em -0.14em -0.2em);
}

.identity h1 .l {
  display: block;
}

html.js .identity h1 .l {
  animation: about-monte 0.9s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--entree, 0ms) + var(--i, 0) * 90ms);
}

html.js .a-rv {
  animation: about-texte 0.8s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--entree, 0ms) + 250ms + var(--i, 0) * 90ms);
}

html.js .side-grid {
  animation: about-grille 0.6s ease both;
  animation-delay: var(--entree, 0ms);
}

html.passage-attente .identity h1 .l,
html.passage-attente .a-rv,
html.passage-attente .side-grid {
  animation-play-state: paused;
}

@keyframes about-monte {
  from { transform: translateY(105%); }
  to   { transform: none; }
}

@keyframes about-texte {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes about-grille {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .identity h1 .l,
  html.js .a-rv,
  html.js .side-grid {
    animation: about-grille 0.25s linear both;
    animation-delay: 0s;
  }
}

/* ═══ Ordinateur (≥ 900 × 560) : la page tient en un écran, sans défilement ═══
   (demande de Clément, 2026-10-03). Le nom passe sur une ligne, la colonne de
   texte s'élargit (moins de lignes) et tailles, interlignes et marges suivent la
   hauteur de la fenêtre (vh). Seuil de hauteur : en dessous de 560px la page
   reprend un défilement naturel plutôt que de couper du texte. */
@media (min-width: 900px) and (min-height: 560px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  body {
    min-height: 0;
  }

  .content {
    height: 100vh;
    min-height: 0;
    max-width: min(820px, 72vw);
    gap: clamp(12px, 3vh, 34px);
    padding: clamp(24px, 6vh, 64px) 60px clamp(24px, 6vh, 64px) 100px;
  }

  .side-grid-fade {
    left: min(820px, 72vw);
  }

  .identity h1 {
    font-size: clamp(34px, min(4vw, 7.4vh), 60px);
    line-height: 1.05;
    margin-bottom: clamp(4px, 1vh, 10px);
  }

  /* Les deux mots côte à côte : le masque reste un bloc pour l'animation */
  .identity h1 .masque {
    display: inline-block;
  }

  .role {
    font-size: clamp(15px, 2.3vh, 18px);
  }

  .bio {
    gap: clamp(6px, 1.5vh, 16px);
  }

  .bio p {
    font-size: clamp(14px, 2.4vh, 17px);
    line-height: clamp(1.4em, calc(1em + 0.6vh), 1.65em);
  }

  .bottom {
    gap: clamp(8px, 1.5vh, 16px);
  }

  .available {
    font-size: clamp(16px, 2.3vh, 18px);
  }
}

/* ═══ Mobile (< 768) : la page défile, le contenu commence sous le header ═══
   (avant : hauteur fixée à l'écran et contenu centré, le haut était coupé à 390) */
@media (max-width: 767px) {
  body {
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  header,
  .theme-nav {
    position: absolute;
  }

  .content {
    height: auto;
    min-height: 100vh;
    justify-content: flex-start;
    padding: 190px 20px 64px;
    max-width: none;
  }

  .side-grid,
  .side-grid-fade {
    display: none;
  }
}