/* Moi — typographies et encadré hérités directement de la section web. */
.moi {
  --moi-toolbar: 0px;
  --moi-space-y: clamp(6.5em, 12svh, 8em);
  --moi-portrait-h: clamp(20em, calc(100svh - var(--moi-toolbar) - 2 * var(--moi-space-y)), 44em);
  --moi-portrait-w: calc(var(--moi-portrait-h) * .361391694);
  --moi-copy-w: min(36em, 48vw);
  position: relative; isolation: isolate; overflow: clip;
  min-height: calc(100vh - var(--moi-toolbar));
  min-height: calc(100svh - var(--moi-toolbar));
  display: flex; flex-direction: column; justify-content: center;
  padding-block: var(--moi-space-y); background: var(--paper); color: var(--ink);
}
.admin-bar .moi { --moi-toolbar: 32px; }
@media (max-width: 782px) { .admin-bar .moi { --moi-toolbar: 46px; } }
.moi__stars { z-index: 0; }
.moi__trail { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: visible; }
.moi__emoji {
  position: absolute; top: 0; left: 0; white-space: nowrap;
  color: #fff; background: var(--red); padding: .12em .25em .18em;
  font: 700 clamp(18px, 1.7vw, 32px)/1.2 var(--font-body);
  user-select: none; pointer-events: none; will-change: transform;
}
.moi__layout {
  position: relative; z-index: 2; width: 100%;
  display: grid; align-items: center;
  /* Les trois espaces horizontaux sont réellement identiques. */
  grid-template-columns: minmax(0, 1fr) var(--moi-portrait-w) minmax(0, 1fr) var(--moi-copy-w) minmax(0, 1fr);
  gap: 0; padding: 0; margin: 0;
}
.moi__visual {
  position: relative; z-index: 1; grid-column: 2; grid-row: 1;
  margin: 0; display: grid; place-items: center; min-width: 0; padding: 0;
}
/* Une zone de souris élargie sans ajouter d’espace dans la grille. */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .moi__visual::before { content: ''; position: absolute; inset-block: -1.25em; inset-inline: calc(-1 * clamp(2em, 5vw, 6em)); }
}
.moi__portrait {
  position: relative; z-index: 1; overflow: hidden;
  height: var(--moi-portrait-h); width: var(--moi-portrait-w);
  aspect-ratio: 322 / 891; max-width: 100%;
}
.moi__portrait img, .moi__portrait canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  pointer-events: none; user-select: none;
}
/* Même cadrage que le canvas, y compris avant le chargement du JS. */
.moi__portrait img { left: -18.012422%; top: -5.723906%; width: 124.223602%; height: 114.702581%; max-width: none; object-fit: fill; }
.moi__portrait img:not(:first-child) { opacity: 0; }
.moi__portrait canvas { opacity: 0; }
.moi__portrait.is-ready img { opacity: 0; }
.moi__portrait.is-ready canvas { opacity: 1; }
.moi__content { position: relative; z-index: 2; grid-column: 4; grid-row: 1; min-width: 0; align-self: center; }
.moi__title.web-projects__title { font-size: clamp(26px, 2.3vw, 44px); white-space: nowrap; margin: 0 0 .8em; }
.moi__copy.web-projects__intro { padding: 0; }
.moi__copy.web-projects__intro p { font-family: var(--font-body); font-weight: 400; font-size: 1.15em; line-height: 1.25; }
.moi__copy p + p { margin-top: 1em; }
.moi__cv-link { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: .15em; text-decoration-thickness: .08em; }
.moi__cv-link:hover, .moi__cv-link:focus-visible { color: var(--red); }
@media (max-width: 991px) {
  .moi__title.web-projects__title { font-size: 2em; white-space: normal; }
}
@media (max-width: 767px) {
  .moi { --moi-portrait-h: clamp(300px, calc(100svh - var(--moi-toolbar) - 2 * var(--moi-space-y)), 663px); }
  .moi__layout { grid-template-columns: minmax(0, 1fr); padding-inline: 8.333%; gap: var(--moi-space-y); }
  .moi__visual { grid-column: 1; grid-row: 1; }
  .moi__content { grid-column: 1; grid-row: 2; }
  .moi__title.web-projects__title { font-size: clamp(30px, 7.8vw, 48px); margin-bottom: .8em; }
}
@media (prefers-reduced-motion: reduce) { .moi__trail { display: none; } }