/* Boutisse, concept de démonstration. Toutes les cotes du bureau sont celles d'un écran de 1920 x 1080 :
   la scène (.stage) est dessinée à cette taille puis mise à l'échelle par --k, calculé en JS. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: block;
}
@font-face {
  font-family: "Hedvig";
  src: url("fonts/hedvig-serif-var-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}

:root {
  --stone: #E4E3DF;
  --basalt: #1A1917;
  --schist: #64625C;
  --joint: #BEBBB4;
  --cordeau: #2B59D8;
  --craie: #A9C4FF;

  --bg: var(--stone);
  --ink: var(--basalt);
  --ink2: var(--schist);
  --accent: var(--cordeau);
  --shell: #DCDBD7;
  --shell-line: var(--joint);
  --core: #EDECE9;
  --name: var(--schist);

  --k: 1;
  --ox: 0px;
  --oy: 0px;
  --ease-dark: cubic-bezier(.32,.72,0,1);
  color-scheme: light;
}
html.is-dark {
  --bg: var(--basalt);
  --ink: var(--stone);
  --ink2: #979693;
  --accent: var(--craie);
  --shell: #22211F;
  --shell-line: #3E3D3B;
  --core: #2A2927;
  --name: #979693;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--stone); -webkit-text-size-adjust: 100%; }
body {
  background: var(--stone);
  color: var(--basalt);
  font-family: "Hedvig", Georgia, serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
img { display: block; }
button { font: inherit; color: inherit; }
p, h1, h2, figure { margin: 0; }

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 50;
  background: var(--basalt); color: var(--stone); padding: 10px 14px;
  font: 450 15px/1.3 "Archivo", sans-serif; text-decoration: none;
}
.skip:focus { top: 16px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---------- La scène épinglée (S1, S2, S3) ---------- */

.scene { position: relative; height: calc(5400px * var(--k) + 100vh); }
.scene__pin {
  position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden;
  background: var(--bg);
  transition: background-color .9s var(--ease-dark);
}
.stage {
  position: absolute; left: var(--ox); top: var(--oy);
  width: 1920px; height: 1080px;
  transform: scale(var(--k)); transform-origin: 0 0;
  pointer-events: none;
}
.stage > * { pointer-events: auto; }
.stage--front { z-index: 3; }

/* La barre */
.bar { position: absolute; left: 0; top: 40px; width: 1920px; height: 32px; color: #fff; z-index: 4; }
.bar.is-ink { color: var(--ink); transition: color .9s var(--ease-dark); }
.bar a { color: inherit; text-decoration: none; }
.bar__brand {
  position: absolute; left: 96px; top: 7px;
  font: 600 21px/21px "Archivo", sans-serif; font-stretch: 125%; letter-spacing: -.01em;
}
.bar__nav a {
  position: absolute; top: 6px;
  font: 450 15px/20px "Archivo", sans-serif; letter-spacing: .01em;
}
.bar__nav a:nth-child(1) { left: 1118px; }
.bar__nav a:nth-child(2) { left: 1264px; }
.bar__nav a:nth-child(3) { left: 1410px; }
.bar__nav a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.bar__cta {
  position: absolute; right: 96px; top: -1px; height: 34px; padding: 0 16px;
  font: 450 15px/20px "Archivo", sans-serif; letter-spacing: .01em;
  background: transparent; color: inherit; cursor: pointer;
  border: 1px solid rgba(255,255,255,.7); border-radius: 2px;
  transition: background-color .25s, color .25s, border-color .25s;
}
.bar__cta:hover { background: #fff; color: var(--basalt); border-color: #fff; }
.bar.is-ink .bar__cta { border-color: color-mix(in srgb, var(--ink) 70%, transparent); }
.bar.is-ink .bar__cta:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* S1, la carrière */
.s1 { position: absolute; inset: 0; }
.s1__layer {
  position: absolute; left: 0; top: 0; width: 2400px; height: 1602px;
  transform-origin: 0 0; transform: translate(-480px, 0);
}
.s1__photo { position: absolute; left: 0; top: 0; width: 2400px; height: 1602px; }
.s1__coupe {
  position: absolute; left: 1744px; top: 392px; width: 560px; height: 280px;
  opacity: 0;
}
.s1__mask {
  position: absolute; left: 1744px; top: 392px; width: 560px; height: 280px;
  box-shadow: 0 0 0 3000px var(--stone); opacity: 0;
}
.s1__draw { position: absolute; left: 0; top: 0; width: 2400px; height: 1602px; overflow: visible; }
.s1__draw rect, .s1__draw .dim { fill: none; stroke: var(--craie); vector-effect: non-scaling-stroke; }
.s1__draw rect { stroke-width: 2; }
.s1__draw .dim { stroke-width: 1; }
.s1__draw text {
  fill: var(--craie); font: 500 16px "Archivo", sans-serif; font-variant-numeric: tabular-nums;
}
.s1__text { position: absolute; inset: 0; color: #fff; pointer-events: none; }
.s1__title {
  position: absolute; left: 92px; top: 177px; white-space: nowrap;
  font: 300 136px/.92 "Archivo", sans-serif; font-stretch: 125%; letter-spacing: -.04em;
}
.s1__intro {
  position: absolute; left: 96px; top: 480.35px; width: 500px; /* +0,35 : Chrome arrondit la ligne de base vers le bas, la 2e ligne tombait 1 px trop haut (mesuré le 09/11) */
  font-size: 19px; line-height: 1.55;
}
.s1__hint {
  position: absolute; right: 96px; top: 1029px; color: #fff;
  font: 450 14px/14px "Archivo", sans-serif; letter-spacing: .01em;
}

/* La toile et le calque des cotes, posés sur la scène */
.gl, .overlay {
  position: absolute; left: var(--ox); top: var(--oy);
  width: calc(1920px * var(--k)); height: calc(1080px * var(--k));
  pointer-events: none;
}
.gl { z-index: 1; visibility: hidden; }
.overlay { z-index: 2; overflow: visible; }
.overlay line, .overlay path, .overlay polyline { fill: none; stroke: var(--accent); stroke-width: 1; }
.overlay .cut { stroke-width: 2; }
.overlay text { fill: var(--accent); font: 500 16px "Archivo", sans-serif; font-variant-numeric: tabular-nums; }

/* S2 et S3, les textes */
.sec-title {
  font: 300 88px/.96 "Archivo", sans-serif; font-stretch: 125%; letter-spacing: -.035em;
  color: var(--ink); transition: color .9s var(--ease-dark);
}
.s2, .s3 { position: absolute; inset: 0; pointer-events: none; }
.s2 .sec-title, .s3 .sec-title { position: absolute; left: 92px; top: 176px; white-space: nowrap; opacity: 0; }
.captions { position: absolute; left: 96px; top: 400px; width: 420px; }
.caption {
  position: absolute; left: 0; top: 0; width: 420px; opacity: 0;
  font-size: 21px; line-height: 1.55; color: var(--ink); transition: color .9s var(--ease-dark);
}
.s3__text {
  position: absolute; left: 96px; top: 400px; width: 420px; opacity: 0;
  font-size: 21px; line-height: 1.55; color: var(--ink); transition: color .9s var(--ease-dark);
}

/* Le plateau d'échantillons, en double bord */
.tray {
  position: absolute; left: 96px; top: 560px; width: 346px; height: 410px;
  padding: 8px; border-radius: 20px; background: var(--shell);
  border: 1px solid var(--shell-line);
  opacity: 0; visibility: hidden; pointer-events: auto;
  transition: background-color .9s var(--ease-dark), border-color .9s var(--ease-dark);
}
.tray__core {
  position: relative; height: 100%; border-radius: 12px; background: var(--core);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  transition: background-color .9s var(--ease-dark), box-shadow .9s var(--ease-dark);
}
html.is-dark .tray__core { box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.swatch {
  position: absolute; width: 140px; padding: 0; margin: 0; border: 0; background: none;
  cursor: pointer; text-align: left;
}
/* Places dans la page : x 121 et 277, y 585 et 777 (coque 96,560 + bord 1 + marge 8 + marge 16) */
.swatch:nth-child(1) { left: 16px; top: 16px; }
.swatch:nth-child(2) { left: 172px; top: 16px; }
.swatch:nth-child(3) { left: 16px; top: 208px; }
.swatch:nth-child(4) { left: 172px; top: 208px; }
.swatch__img {
  display: block; width: 140px; height: 140px; border-radius: 4px; overflow: hidden;
  transition: transform .1s;
}
.swatch__img img { width: 140px; height: 140px; transition: transform .3s; }
.swatch:hover .swatch__img img { transform: scale(1.03); }
.swatch.is-press .swatch__img { transform: scale(.98); }
.swatch__name {
  display: block; margin-top: 8px;
  font: 450 15px/20px "Archivo", sans-serif; letter-spacing: .01em; color: var(--name);
  transition: color .3s;
}
.swatch:hover .swatch__name, .swatch[aria-pressed="true"] .swatch__name { color: var(--ink); }
.swatch:focus-visible { outline: none; }
.swatch:focus-visible .swatch__img { outline: 2px solid var(--accent); outline-offset: 4px; }
.swatch__ring {
  position: absolute; left: -4px; top: -4px; width: 148px; height: 148px; overflow: visible; pointer-events: none;
}
.swatch__ring rect {
  fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .4s cubic-bezier(.65,0,.35,1), stroke .9s var(--ease-dark);
}
.swatch[aria-pressed="true"] .swatch__ring rect { stroke-dashoffset: 0; }
.swatch.no-anim .swatch__ring rect { transition: none; }

/* ---------- S4, en place ---------- */
.s4 {
  position: relative; z-index: 5; margin-top: -100vh; margin-top: -100lvh;
  height: calc(1080px * var(--k)); background: var(--basalt); color: var(--stone); overflow: hidden;
}
.s4 > * { position: absolute; }
.s4__wrap { position: absolute; left: var(--ox); top: 0; width: 1920px; height: 1080px; transform: scale(var(--k)); transform-origin: 0 0; }
.s4 .sec-title { position: absolute; left: 92px; top: 120px; color: var(--stone); }
.s4__text { position: absolute; left: 96px; top: 236px; width: 420px; font-size: 19px; line-height: 1.55; color: #979693; }
.fig { position: absolute; }
.fig img { object-fit: cover; }
.fig figcaption { margin-top: 12px; font: 450 15px/20px "Archivo", sans-serif; letter-spacing: .01em; color: #979693; }
.fig--1 { left: 96px; top: 392px; }
.fig--1 img { width: 534px; height: 640px; }
.fig--2 { left: 826px; top: 120px; }
.fig--2 img { width: 414px; height: 621px; }
.fig--3 { left: 1410px; top: 360px; }
.fig--3 img { width: 414px; height: 621px; }

/* ---------- S5, le contact ---------- */
.s5 { position: relative; z-index: 5; height: calc(1080px * var(--k)); background: var(--basalt); color: var(--stone); overflow: hidden; }
.s5__wrap { position: absolute; left: var(--ox); top: 0; width: 1920px; height: 1080px; transform: scale(var(--k)); transform-origin: 0 0; }
.s5__photo { position: absolute; left: 0; top: 0; width: 960px; height: 1080px; overflow: hidden; }
.s5__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.s5 .sec-title { position: absolute; left: 1114px; top: 200px; color: var(--stone); white-space: nowrap; }
.s5__text { position: absolute; left: 1118px; top: 420px; width: 560px; font-size: 21px; line-height: 1.55; color: #979693; }
.s5__cta {
  position: absolute; left: 1118px; top: 580px; height: 44px; padding: 0 20px;
  background: var(--stone); color: var(--basalt); border: 0; border-radius: 2px; cursor: pointer;
  font: 450 15px/20px "Archivo", sans-serif; letter-spacing: .01em;
  transition: background-color .25s;
}
.s5__cta:hover { background: #fff; }
.s5__foot { position: absolute; left: 1118px; top: 900px; width: 700px; font: 450 15px/22px "Archivo", sans-serif; letter-spacing: .01em; color: #979693; }
.s5__foot p + p { margin-top: 6px; }

/* Le panneau du concept */
.note {
  max-width: 520px; padding: 32px; border: 1px solid #3E3D3B; border-radius: 4px;
  background: var(--basalt); color: var(--stone);
  font-size: 19px; line-height: 1.55;
}
.note::backdrop { background: rgba(26,25,23,.55); }
.note a { color: var(--craie); }
.note button {
  margin-top: 24px; height: 40px; padding: 0 18px; border: 1px solid rgba(228,227,223,.7); border-radius: 2px;
  background: transparent; color: var(--stone); cursor: pointer; font: 450 15px/20px "Archivo", sans-serif;
}
.note button:hover { background: var(--stone); color: var(--basalt); }

/* Le curseur du tournage */
.cursor { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .2s; display: none; }
html.film .cursor { display: block; }
html.film, html.film * { cursor: none !important; }

/* ---------- Mouvement réduit ---------- */
html.rm .scene__pin { position: relative; }
html.rm .stage--back { overflow: hidden; }
html.rm .caption { position: relative; opacity: 1; margin-bottom: 14px; }
html.rm .s2 .sec-title, html.rm .s3 .sec-title, html.rm .s3__text { opacity: 1; }
html.rm .tray { opacity: 1; visibility: visible; }
html.no-transition, html.no-transition * { transition: none !important; }

/* ---------- Téléphone ---------- */
@media (max-width: 759px) {
  .stage { width: 100%; height: 100%; transform: none; left: 0; top: 0; }
  .gl, .overlay { left: 0; top: 0; width: 100%; height: 100%; }
  .bar { width: 100%; top: 16px; }
  .bar__brand { left: 16px; }
  .bar__nav { display: none; }
  .bar__cta { right: 16px; }
  .s1__title { left: 16px; top: 72px; font-size: 44px; }
  .s1__intro { left: 16px; top: auto; bottom: 64px; width: auto; right: 16px; font-size: 17px; }
  .s1__hint { right: 16px; top: auto; bottom: 24px; }
  .sec-title { font-size: 36px; }
  .s2 .sec-title, .s3 .sec-title { left: 16px; top: auto; bottom: 168px; }
  .captions { left: 16px; right: 16px; width: auto; top: auto; bottom: 150px; }
  .caption { width: auto; right: 0; top: 8px; font-size: 17px; }
  .s3__text { left: 16px; right: 16px; width: auto; top: auto; bottom: 186px; font-size: 17px; }
  .s3 .sec-title { bottom: 250px; }
  .tray { left: 16px; right: 16px; width: auto; top: auto; bottom: 24px; height: 148px; padding: 6px; border-radius: 16px; }
  .tray__core { border-radius: 10px; }
  .swatch { width: 80px; }
  .swatch:nth-child(1) { left: 10px; top: 10px; }
  .swatch:nth-child(2) { left: calc(10px + 1 * (100% - 20px - 80px) / 3); top: 10px; }
  .swatch:nth-child(3) { left: calc(10px + 2 * (100% - 20px - 80px) / 3); top: 10px; }
  .swatch:nth-child(4) { left: calc(10px + 3 * (100% - 20px - 80px) / 3); top: 10px; }
  .swatch__img, .swatch__img img { width: 80px; height: 80px; }
  .swatch__name { font-size: 13px; line-height: 16px; margin-top: 6px; }
  .swatch__ring { width: 88px; height: 88px; }

  .s4 { height: auto; margin-top: -100lvh; padding: 72px 16px 56px; }
  .s4 > *, .s4__wrap { position: static; transform: none; width: auto; height: auto; }
  .s4 .sec-title, .s4__text, .fig { position: static; }
  .s4__text { width: auto; margin: 16px 0 40px; font-size: 17px; }
  .fig { margin-bottom: 40px; transform: none !important; }
  .fig img, .fig--1 img, .fig--2 img, .fig--3 img { width: 100%; height: auto; aspect-ratio: 358 / 537; }
  .fig--1 img { aspect-ratio: 358 / 429; }

  .s5 { height: auto; }
  .s5__wrap { position: static; transform: none; width: auto; height: auto; }
  .s5__photo { position: relative; width: 100%; height: 60vh; }
  .s5__body { padding: 40px 16px 48px; }
  .s5 .sec-title, .s5__text, .s5__cta, .s5__foot { position: static; width: auto; }
  .s5__text { margin: 16px 0 28px; font-size: 17px; }
  .s5__foot { margin-top: 48px; font-size: 14px; }
}