/* ============================================
   Marc-Henri — composition architecturale
   ============================================ */

:root{
  --void:   10 9 13;     /* fond, noir chaud */
  --paper:  240 236 227; /* blanc papier, texte */
  --rust:   178 58 46;   /* rouge brique */
  --ink:    58 91 140;   /* bleu acier */
  --ochre:  214 158 58;  /* ocre */
  --line:   140 134 120; /* trait de construction */

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

body{
  background: rgb(var(--void));
  color: rgb(var(--paper));
  font-family:'Space Grotesk', sans-serif;
  overflow-x:hidden;
  cursor: default;
}

::selection{
  background: rgb(var(--rust) / .5);
  color: rgb(var(--paper));
}

/* ---------- fond quadrillage ---------- */

.grid-bg{
  position: fixed; inset:0;
  z-index: 0;
  background-image:
    linear-gradient(rgb(var(--line) / .09) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--line) / .09) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events:none;
}

.grain{
  position: fixed; inset:0; z-index: 5;
  pointer-events:none;
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- calques de formes ---------- */

.shape-layer{
  position: fixed; inset:0;
  pointer-events:none;
}
.shape-layer--back{ z-index: 1; }   /* sous le texte (z-index 2) */
.shape-layer--front{ z-index: 3; }  /* au-dessus du texte */

.shape{
  position:absolute;
  will-change: transform;
}

/* arrière : anneau, ligne de plomb, losange */

.shape--ring{
  width: 52vmax; height: 52vmax;
  top: -14vmax; left: -14vmax;
  border-radius: 50%;
  border: 1.5px solid rgb(var(--ink) / .55);
}

.shape--line{
  width: 1px; height: 160vh;
  top: -10vh; left: 68%;
  background: rgb(var(--line) / .3);
}

.shape--diamond{
  width: 16vmax; height: 16vmax;
  bottom: 4vh; right: 6vw;
  border: 1.5px solid rgb(var(--ochre) / .6);
  transform: rotate(45deg);
}

/* avant : volet, éclipse, anneau d'accent, point */

.shape--bar{
  width: 100vw; height: 15vh;
  top: 50%; left: 0;
  background: rgb(var(--rust));
  transform: translate(-140%, -50%);
}

.shape--eclipse{
  width: 140vw; height: 140vw;
  top: 50%; left: 0;
  border-radius: 50%;
  background: rgb(var(--ink));
  transform: translate(-160%, -50%);
}

.shape--ring2{
  width: 14vmax; height: 14vmax;
  border-radius: 50%;
  border: 3px solid rgb(var(--ochre));
  top: 50%; left: 50%;
}

.shape--dot{
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgb(var(--paper));
  top: 50%; left: 50%;
}

main{ position:relative; z-index: 2; }

/* ---------- header ---------- */

.mark{
  position: fixed;
  top: 2rem; left: 2rem;
  z-index: 6;
  display:flex; align-items:center; gap:.6rem;
  font-family:'Space Mono', monospace;
  font-size: .75rem;
  letter-spacing: .15em;
  opacity: .7;
}
.mark i{ width: 22px; height: 1px; background: currentColor; opacity:.6; }

/* ---------- hero ---------- */

.hero{
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  padding: 2rem;
}

.hero__plate{
  background: rgb(var(--void) / .72);
  border-top: 1px solid rgb(var(--line) / .4);
  border-bottom: 1px solid rgb(var(--line) / .4);
  padding: 1.4rem 2.4rem;
}

.name{
  font-family:'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 10.5vw, 8rem);
  line-height: .95;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.name__dash{ opacity:.45; margin: 0 .06em; font-weight:400; }

.hero__cue{
  position:absolute;
  bottom: 3rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
  font-family:'Space Mono', monospace;
  font-size: .7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity: .55;
  animation: fadein 1s 1s var(--ease) both;
}
.hero__cue i{
  width:1px; height: 2.6rem;
  background: currentColor;
  overflow:hidden;
  position:relative;
}
.hero__cue i::after{
  content:'';
  position:absolute;
  top:-100%; left:0; width:100%; height:100%;
  background: rgb(var(--paper));
  animation: drip 1.8s ease-in-out infinite;
}
@keyframes drip{
  0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; }
}
@keyframes fadein{ to{ opacity:.55; } }

/* ---------- passage (respiration architecturale) ---------- */

.passage{
  min-height: 90vh;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding: 3rem;
}

.passage__annot{
  font-family:'Space Mono', monospace;
  font-size: .7rem;
  letter-spacing: .15em;
  opacity: .35;
  text-transform: uppercase;
}

/* ---------- citation ---------- */

.quote{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 3rem;
  text-align:center;
}

.quote__plate{
  max-width: 54rem;
  background: rgb(var(--void) / .72);
  border-left: 2px solid rgb(var(--rust));
  padding: 1rem 2.6rem;
  text-align:left;
}

.quote__mark{
  font-family:'Instrument Serif', serif;
  font-style: italic;
  font-size: 3.5rem;
  line-height: 1;
  color: rgb(var(--rust));
  margin-bottom: -.4rem;
}

.quote__text{
  font-family:'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(1.4rem, 3.1vw, 2.2rem);
  line-height: 1.35;
  color: rgb(var(--paper) / .92);
}

/* ---------- finale ---------- */

.finale{
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 1.4rem;
  text-align:center;
}

.finale__badge{
  position: relative;
  width: 9rem; height: 9rem;
  display:flex; align-items:center; justify-content:center;
}

.finale__compass{
  position:absolute; inset:0;
  width:100%; height:100%;
  fill:none;
  stroke: rgb(var(--paper) / .5);
  stroke-width: 1.2;
}

.finale__mark{
  font-family:'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: .04em;
  position: relative;
}

.finale__url{
  font-family:'Space Mono', monospace;
  font-size:.75rem;
  letter-spacing:.15em;
  color: rgb(var(--paper) / .5);
}

/* ---------- responsive ---------- */

@media (max-width: 640px){
  .mark{ top:1.2rem; left:1.2rem; }
  .name{ letter-spacing: -.02em; }
  .quote__plate{ padding: .8rem 1.4rem; border-left-width: 2px; }
  .shape--ring{ width: 90vmax; height: 90vmax; top:-25vmax; left:-30vmax; }
  .shape--diamond{ width: 26vmax; height: 26vmax; }
}

/* ---------- accessibilité : mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.3s !important; }
  .shape{ transform:none !important; opacity:.25; }
  .shape--bar, .shape--eclipse{ display:none; }
}