/* ==========================================================================
   QUARTA — feuille de style unique
   Toutes les valeurs sont exprimées en « px de maquette » (base 1440) via
   la variable --s. Sur desktop --s vaut 1px à 1440 de large et suit le
   viewport ; en dessous de 900 il repasse à 1px et la mise en page change.
   ========================================================================== */

@font-face {
  font-family: "ABC Marist";
  src: url("fonts/ABCMarist-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "ABC Diatype";
  src: url("fonts/ABCDiatype-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

/* --------------------------------------------------------------- tokens -- */

:root {
  /* 1 px de maquette.
     Trois contraintes : la largeur du viewport, sa hauteur (pour que le
     panneau ouvert tienne toujours à l'écran), et un plafond pour ne pas
     devenir géant en 4K. À 1440 x 1043, la formule redonne exactement 1px,
     donc la maquette d'origine est reproduite au pixel près. */
  --s: clamp(0.72px, min(0.069444vw, calc((100dvh - 100px) / 779)), 1.25px);

  --serif: "ABC Marist", Georgia, "Times New Roman", serif;
  --sans:  "ABC Diatype", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs:   calc(16.25 * var(--s));   /* corps de texte et sous-titres */
  --lh:   calc(18 * var(--s));      /* interlignage */
  --fs-mark: calc(51.2 * var(--s)); /* logotype */
  --track: -0.01em;                 /* interlettrage -1% */

  --panel-w:      calc(392 * var(--s));
  --panel-h:      calc(94 * var(--s));
  --panel-h-open: calc(779 * var(--s));

  /* Le vide restant sous le panneau ouvert est réparti 46% au-dessus,
     54% en dessous, comme dans la maquette. Sur un écran court le
     rectangle remonte donc de lui-même au lieu de déborder. */
  --panel-top: max(calc(28 * var(--s)),
                   calc((100dvh - var(--panel-h-open)) * 0.46));
  --pad:          calc(30 * var(--s));
  --pad-bottom:   calc(14 * var(--s));

  --page:     #ffffff;
  --panel-bg: #ffffff;
  --ink:      rgba(0, 0, 0, 0.7);
  --ink-full: rgba(0, 0, 0, 1);
  --ink-dim:  rgba(0, 0, 0, 0.3);
  --video-opacity: 0.1;

  --mark-track: -0.04em;             /* interlettrage du logotype */
  --mark-nudge: 0px;                 /* rattrapage optique du logotype */
  --hover: 0.45;                    /* opacité au survol du rectangle */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:  700ms;
}

.is-night {
  --page:     #000000;
  --panel-bg: #1e1e1e;
  --ink:      rgba(255, 255, 255, 0.7);
  --ink-full: rgba(255, 255, 255, 1);
  --ink-dim:  rgba(255, 255, 255, 0.3);
  --video-opacity: 1;
}

/* ----------------------------------------------------------------- base -- */

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs);
  line-height: var(--lh);
  letter-spacing: var(--track);
  text-align: center;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--dur) var(--ease);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: 1px solid var(--ink-full);
  outline-offset: calc(4 * var(--s));
}

/* ---------------------------------------------------------------- vidéo -- */

.bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--video-opacity);
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
  z-index: 0;
}

/* --------------------------------------------------------------- heure --- */

.clock {
  position: fixed;
  top: calc(30 * var(--s));
  right: calc(43 * var(--s));
  z-index: 2;
  color: var(--ink-dim);
  font-size: var(--fs);
  line-height: var(--lh);
  letter-spacing: var(--track);
  transition: color var(--dur) var(--ease), opacity 300ms var(--ease);
}

/* -------------------------------------------------------------- panneau -- */

.panel {
  position: fixed;
  top: var(--panel-top);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: var(--panel-w);
  height: var(--panel-h);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg);
  transition:
    height var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    opacity 300ms var(--ease);
}

.panel.is-open { height: var(--panel-h-open); }

/* Le bandeau du logotype : bouton d'ouverture, et zone de fermeture ensuite.
   Propriétés détaillées plutôt que le raccourci `flex` : WebKit rejette une
   déclaration raccourcie dont une valeur vient d'une variable, et le bouton
   retombait alors sur sa hauteur automatique, texte collé en haut.
   La hauteur est doublée en dur pour la même raison. */
.mark {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: var(--panel-h);
  height: var(--panel-h);
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: opacity 300ms var(--ease);
}

.mark__word {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-mark);
  line-height: 1;
  letter-spacing: var(--mark-track);
  font-variant-caps: small-caps;
  color: var(--ink);
  white-space: nowrap;
  /* Positionné plutôt que centré par la boîte de ligne : les navigateurs
     n'alignent pas le contenu d'un <button> de la même façon.
     Le dernier décalage est le rattrapage optique. */
  position: absolute;
  top: 50%;
  left: 50%;
  /* translateX rattrape l'interlettrage appliqué après la dernière lettre,
     qui décalerait sinon le mot d'un demi-cran vers la droite. */
  transform: translate(-50%, -50%)
             translate(calc(var(--mark-track) / 2), var(--mark-nudge));
}

@media (hover: hover) {
  /* Fermé, le rectangle entier réagit : fond compris, pas juste le mot. */
  .panel:not(.is-open):hover { opacity: var(--hover); }
  /* Ouvert, seul le bandeau du logotype signale qu'il referme. */
  .panel.is-open .mark:hover { opacity: var(--hover); }
}

/* --------------------------------------------------------------- contenu -- */

.sheet {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  display: flex;
  flex-direction: column;
  padding-top: calc(48 * var(--s));
  padding-right: var(--pad);
  padding-bottom: var(--pad-bottom);
  padding-left: var(--pad);
  overflow-y: auto;
  opacity: 0;
  transition: opacity 320ms var(--ease);
}

.panel.is-open .sheet {
  opacity: 1;
  transition: opacity 420ms var(--ease) 200ms;
}

.sheet p { margin: 0; }
.sheet p + p { margin-top: var(--lh); }

.label {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs);
  line-height: var(--lh);
  letter-spacing: var(--track);
  font-variant-caps: small-caps;
}

.prose { margin: 0; }

/* Le bloc bas est poussé contre le fond du panneau : l'espace variable de la
   maquette se répartit tout seul, y compris quand la hauteur change. */
.tail { margin-top: auto; }

.services + .contact { margin-top: calc(10 * var(--s)); }
.sheet .colophon {
  margin-top: calc(22 * var(--s));
  color: var(--ink-dim);
}

/* ----------------------------------------------------------------- liens -- */

.link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color 250ms var(--ease);
}

@media (hover: hover) {
  .link:hover { color: var(--ink-full); }
}

/* Les trois libellés sont empilés dans la même cellule : la largeur du bloc
   est celle du plus long, donc aucun décalage de mise en page au survol. */
.mail__stack {
  display: inline-grid;
  vertical-align: top;
}
.mail__state {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 220ms var(--ease);
}
.mail[data-state="idle"]   .mail__state[data-for="idle"],
.mail[data-state="mail"]   .mail__state[data-for="mail"],
.mail[data-state="copied"] .mail__state[data-for="copied"] { opacity: 1; }

/* ---------------------------------------------------------------- mobile -- */

@media (max-width: 900px) {
  :root {
    --s: 1px;
    --m: 16px;                       /* marge identique sur les quatre côtés */
    --panel-w: min(calc(100vw - 2 * var(--m)), 420px);
    --panel-h-open: calc(100dvh - 2 * var(--m));
    --panel-top: var(--m);
    --pad: 20px;
    --pad-bottom: 20px;
  }

  /* Les retours à la ligne dessinés pour 392px sont neutralisés : le texte
     se recompose selon la largeur réelle. Les paragraphes, eux, restent. */
  .lb { display: none; }
  .sheet p { text-wrap: pretty; }

  /* L'heure descend en bas à droite, sinon le panneau ouvert la recouvre. */
  .clock {
    top: auto;
    bottom: calc(var(--m) + env(safe-area-inset-bottom));
    right: var(--m);
  }
  .is-sheet-open .clock { opacity: 0; }
}

/* ------------------------------------------------------------ accessibilité */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}