/* =========================================================
   ANATOMIE — de quoi est fait ton téléphone
   ========================================================= */
body { overflow: hidden; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 480px; height: 100vh; height: 100dvh; }

/* ---------- le téléphone ---------- */
.stage { position: relative; min-height: 0; }
#phone { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.stage-ui { position: absolute; left: var(--pad); bottom: var(--pad); display: grid; gap: 10px; }
.stage-load { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transition: opacity .5s; }
.stage.ready .stage-load { opacity: 0; }
.explode { display: flex; align-items: center; gap: 10px; }
.explode input { width: 170px; accent-color: var(--blue); cursor: pointer; }

/* ---------- la colonne d'informations ---------- */
/* la colonne commence sous l'en-tête : rien ne défile sous les boutons du haut */
.info {
  min-height: 0; margin-top: 78px; height: calc(100% - 78px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 22px var(--pad) calc(var(--pad) + 10px);
  background: #0d0d0d; border-left: 1px solid var(--line); border-top: 1px solid var(--line);
}
.page-title { font-size: clamp(30px, 2.7vw, 42px); line-height: 0.92; }
.lede { margin-top: 16px; font-size: 17px; line-height: 1.5; color: #cfcfcf; }

.pieces { display: flex; flex-wrap: wrap; gap: 2px; margin: 28px 0 10px; }
.pieces button {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 6px 9px; border-radius: 2px;
  font-weight: 700; font-stretch: 75%; font-size: 17px; text-transform: uppercase; letter-spacing: 0.01em;
  transition: background .2s, color .2s;
}
.pieces button sup { font-family: var(--mono); font-size: 9px; font-weight: 400; color: var(--muted); }
.pieces button:hover, .pieces button.on { background: var(--blue); color: #fff; }
.pieces button:hover sup, .pieces button.on sup { color: rgba(255, 255, 255, 0.72); }
.piece-desc { font-size: 15px; line-height: 1.5; color: var(--muted); }

.mats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.mats button {
  height: 32px; padding: 0 14px; border: 1px solid var(--line); border-radius: 30px;
  font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em;
  transition: background .25s, color .25s, border-color .25s;
}
.mats button:hover, .mats button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.mat { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.mat-name { font-size: clamp(40px, 4.2vw, 64px); }
.mat-role { margin-top: 14px; font-size: 17px; line-height: 1.5; }
.globe-wrap { margin: 18px auto 8px; width: 100%; max-width: 380px; aspect-ratio: 1; }
#globe { display: block; width: 100%; height: 100%; }
.measure { line-height: 1.6; text-transform: none; letter-spacing: 0; }

.producers { list-style: none; display: grid; gap: 7px; margin-top: 12px; }
.producers li { display: grid; grid-template-columns: 118px minmax(0, 1fr) 54px; align-items: center; gap: 10px; font-size: 14px; }
.producers .pb { position: relative; height: 8px; background: rgba(255, 255, 255, 0.06); }
.producers .pb i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--w)); background: var(--blue); transition: transform .8s var(--ease-out); }
.producers b { font-family: var(--mono); font-size: 11px; font-weight: 500; text-align: right; }
.producers li.rest { color: var(--muted); }
.producers li.rest .pb i { background: #3d3d3d; }

.mat-fact { margin-top: 22px; font-size: 18px; line-height: 1.5; }
.sources { margin-top: 14px; line-height: 1.75; text-transform: none; letter-spacing: 0; }
.sources a { text-decoration: underline; text-underline-offset: 2px; }

.recycle { margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--line); }
.recycle-title { font-weight: 800; font-stretch: 125%; font-size: 22px; letter-spacing: -0.01em; text-transform: uppercase; }
.recycle p:not(.sources) { margin-top: 12px; font-size: 16px; line-height: 1.55; color: #cfcfcf; }

.tip {
  position: fixed; z-index: 30; left: 0; top: 0; pointer-events: none;
  background: var(--fg); color: var(--bg); padding: 6px 10px; border-radius: 20px; white-space: nowrap;
}

/* ---------- petits écrans : le téléphone en haut, les infos en dessous ---------- */
@media (max-width: 1000px) {
  body { overflow: auto; }
  .layout { display: block; height: auto; }
  .stage { height: 62vh; height: 62svh; }
  .info { margin-top: 0; height: auto; overflow: visible; border-left: 0; padding-top: calc(var(--pad) + 8px); }
  .top { background: linear-gradient(#0a0a0a 55%, rgba(10, 10, 10, 0)); }
}