/* ============================================================================
   edpems.fr — styles de la page. Ne définit aucune valeur : tout vient des jetons.
   ========================================================================= */

.skip {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--space-16));
  z-index: 20;
  background: var(--c-surface-raised);
  color: var(--c-ink-strong);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--c-line-field);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-standard);
}
.skip:focus { top: var(--space-4); }

/* --- en-tête -------------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--c-line); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-block: var(--space-4);
}
.brand img { height: clamp(44px, 4.5vw, 62px); width: auto; }
.site-header nav { display: flex; gap: var(--space-5); }
.site-header nav a {
  font-size: var(--text-small);
  color: var(--c-ink-muted);
  text-decoration: none;
}
.site-header nav a:hover { color: var(--c-ink-strong); }

/* --- hero ----------------------------------------------------------------- */
.hero { padding-block: var(--space-20) var(--space-16); }
.hero .display { margin-bottom: var(--space-6); }

/* --- sections ------------------------------------------------------------- */
.section { padding-block: var(--space-16); border-top: 1px solid var(--c-line); }
.section > .container > h2 { margin-bottom: var(--space-4); }
.section-intro { color: var(--c-ink-muted); margin-bottom: var(--space-10); }

.section--inverse {
  background: var(--c-surface-inverse);
  color: var(--c-ink-inverse);
  border-top-color: var(--c-surface-inverse);
}
.section--inverse .eyebrow,
.section--inverse p { color: var(--c-ink-inverse); }
.section--inverse h2,
.section--inverse h3 { color: var(--c-ink-inverse); }

/* --- réalisations --------------------------------------------------------- */
.works { display: grid; gap: var(--space-6); }
@media (min-width: 48rem) { .works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.work {
  background: var(--c-surface-raised);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.work-head { display: grid; gap: var(--space-1); }
.work-head .eyebrow { margin-bottom: 0; }
.work h3 { display: flex; align-items: center; gap: var(--space-3); margin-bottom: 0; }

/* Le point lumineux de la marque signale ce qui tourne. Une seule lumière,
   toujours la même, et elle veut dire quelque chose de vrai. */
.live {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-circle);
  background: var(--c-spark);
}

.facts { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.facts li { font-size: var(--text-small); color: var(--c-ink-muted); }
.facts li::marker { color: var(--c-accent); }

.work-link {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-small);
}

/* --- approche ------------------------------------------------------------- */
.approach { display: grid; gap: var(--space-8); margin-top: var(--space-10); }
@media (min-width: 48rem) { .approach { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.approach h3 { font-size: var(--text-h4); margin-bottom: var(--space-3); }

/* --- contact -------------------------------------------------------------- */
.contact { display: grid; gap: var(--space-2); margin-top: var(--space-8); }
@media (min-width: 30rem) {
  .contact { grid-template-columns: 8rem 1fr; align-items: baseline; }
}
.contact dt {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.contact dd { margin: 0; }

/* --- pied ----------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--c-line); padding-block: var(--space-12); }
.footer-inner { display: flex; align-items: center; gap: var(--space-5); }
.footer-mark { width: 56px; height: 56px; }
.footer-legal { margin: 0; color: var(--c-ink-muted); }

/* --- capture d'interface ---------------------------------------------------- */
.shot { margin: var(--space-10) 0 0; }
.shot img {
  width: 100%;
  height: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
}
.shot figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--c-ink-muted);
}

/* --- pied de page sur petit écran -------------------------------------------
   Mesuré : la baseline en corps « lead » fait 278 px pour 275 px disponibles à
   côté du poisson sur un écran de 390 px — elle déborde de trois pixels. On
   réduit la marque et le corps plutôt que d'empiler : la composition tient. */
@media (max-width: 30rem) {
  .footer-mark { width: 44px; height: 44px; }
  .site-footer .baseline { font-size: var(--text-small); }
  .footer-inner { gap: var(--space-4); }
  /* « Mentions légales » passe sur sa propre ligne, et le point médian qui la
     précédait disparaît — sinon il resterait orphelin en fin de ligne. */
  .footer-legal .sep { display: none; }
  .footer-legal .legal-link { display: block; }
}

@media (max-width: 22rem) {
  .footer-mark { width: 36px; height: 36px; }
  .site-footer .baseline { font-size: var(--text-caption); }
}