/* ============================================================
   VOIDBELT — fondations partagees par toutes les pages
   Tokens, reset, chrome global (rails, pied de page, grain d'ecran)
   et le rythme d'entree (.rise). Chaque page importe ce fichier
   puis ajoute sa propre feuille pour sa mise en page.
   ============================================================ */

:root{
  --black:#0A0A0B;
  --ink:#141416;
  --bone:#EDE7DA;
  --orange:#FF4D00;
  --cyan:#5FEBF7;

  --txt:rgba(237,231,218,.96);
  --txt-2:rgba(237,231,218,.78);
  --txt-3:rgba(237,231,218,.60);
  --line:rgba(237,231,218,.20);
  --edge:2px;

  --fs-xs:clamp(10px, 1.00vmin, 16px);
  --fs-sm:clamp(11px, 1.15vmin, 18px);
  --fs-md:clamp(13px, 1.35vmin, 21px);

  --pad-x:clamp(16px, 2.0vmin, 34px);
}

*{box-sizing:border-box;margin:0;padding:0}

html{height:100%;-webkit-text-size-adjust:100%}

body{
  width:100%;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  background:var(--black);
  color:var(--txt);
  font-family:'Space Mono',ui-monospace,'Courier New',monospace;
  font-size:var(--fs-md);
  line-height:1.5;
  display:grid;
  grid-template-columns:minmax(0,100%);
  grid-template-rows:minmax(0,1fr) auto auto;
  position:relative;
  /* seuls les elements de contenu et de liens sont selectionnables */
  user-select:none;
  transition:opacity .22s ease, transform .22s ease;
}

body.page-leaving{ opacity:0; pointer-events:none }
body.page-leaving-next{ transform:translateY(-18px) }
body.page-leaving-previous{ transform:translateY(18px) }

.stage, .stripes, .footer{ min-width:0; max-width:100% }

/* ============================================================
   SCENE — une page, un seul contenu ; il occupe toute la place
   disponible et defile lui-meme si besoin.
   ============================================================ */

.stage{ position:relative; z-index:10; overflow:hidden; min-height:0 }

.view{
  position:relative; height:100%;
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(237,231,218,.25) transparent;
}
.view::-webkit-scrollbar{ width:8px }
.view::-webkit-scrollbar-thumb{ background:rgba(237,231,218,.22) }

.scan{
  position:fixed; inset:0; z-index:58; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply; opacity:.5;
}

/* ---------- rails lateraux (decoratifs) ---------- */

.rail{
  position:fixed; top:50%; transform:translateY(-50%); z-index:9;
  display:flex; flex-direction:column; gap:2em; align-items:center;
  font-size:var(--fs-xs); letter-spacing:.3em; color:var(--txt-2);
  pointer-events:none;
}
.rail-l{ left:1.6vmin }
.rail-r{ right:1.6vmin }
.rail .vert{ writing-mode:vertical-rl; text-orientation:mixed }
.rail-l .vert{ transform:rotate(180deg) }
.rail .bar{ width:1px; height:7em; background:var(--line) }
.rail .sq{ width:.7em; height:.7em; border:1px solid var(--txt-3) }
.rail .sq.fill{ background:var(--orange); border-color:var(--orange) }

/* ============================================================
   BAS DE PAGE — identique sur les trois pages
   ============================================================ */

.stripes{
  height:clamp(12px,1.5vmin,26px);
  background:repeating-linear-gradient(-45deg, var(--orange) 0 1.2em, var(--black) 1.2em 2.4em);
  border-top:var(--edge) solid var(--bone);
  position:relative; z-index:20;
}

.footer{
  position:relative; z-index:20;
  display:flex; align-items:stretch;
  border-top:var(--edge) solid var(--bone);
  background:rgba(10,10,11,.88);
  font-size:var(--fs-xs); letter-spacing:.2em; text-transform:uppercase;
  color:var(--txt-2);
}
.footer .cell{
  display:flex; align-items:center; gap:1.6em;
  padding:.95em var(--pad-x); border-right:1px solid var(--line); white-space:nowrap;
}
.footer .cell:last-child{ border-right:0; border-left:1px solid var(--line) }
.footer b{ font-weight:400; color:var(--orange) }

.ticker{ flex:1 1 0; min-width:0; overflow:hidden; position:relative; display:flex; align-items:center }
.ticker-track{
  display:flex; gap:4em; white-space:nowrap; padding-left:4em;
  animation:slide 46s linear infinite;
}
.ticker-track b{ font-weight:400; color:var(--txt-2) }
.ticker-track b::before{ content:"\25C6\00A0"; color:var(--orange) }
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- reglage de la bande-son : bouton, curseur, valeur ----------
   Present dans le pied de page des deux pages, et dans l'encart de
   l'accueil. */

.rvol{
  display:flex; align-items:center; gap:.5em; flex:none;
  padding:.3em .6em; border:1px solid var(--line); background:rgba(20,20,22,.9);
}
.rvol-b{
  display:flex; align-items:center; gap:.35em; flex:none;
  border:0; background:none; font:inherit; cursor:pointer; padding:0;
  font-size:.7em; letter-spacing:.16em; color:var(--txt-2);
}
.rvol-b i{ width:.62em; height:.62em; background:var(--cyan); transform:rotate(45deg) }
.rvol-b:hover{ color:var(--bone) }
.rvol-b.off{ color:var(--txt-3) }
.rvol-b.off i{ background:none; box-shadow:inset 0 0 0 1px var(--txt-3) }
.rvol-b.off span{ text-decoration:line-through }
.rvol-o{ min-width:3ch; text-align:right; font-size:.7em; color:var(--cyan); flex:none }
.rvol-b.off + .rvol-r + .rvol-o{ color:var(--txt-3) }

.rvol-r{
  -webkit-appearance:none; appearance:none;
  width:clamp(48px, 7vmin, 110px); height:1em; background:none; cursor:pointer; flex:none;
}
.rvol-r:focus{ outline:none }
.rvol-r::-webkit-slider-runnable-track{ height:2px; background:var(--line) }
.rvol-r::-moz-range-track{ height:2px; background:var(--line) }
.rvol-r::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; border:0; border-radius:0;
  width:.5em; height:1em; margin-top:-.5em; background:var(--cyan);
}
.rvol-r::-moz-range-thumb{ border:0; border-radius:0; width:.5em; height:1em; background:var(--cyan) }
.rvol-r:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 2px var(--orange) }
.rvol-r:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 2px var(--orange) }

/* variante nue, pour le pied de page qui a deja ses propres separateurs */
.rvol.bare{ border:0; background:none; padding:0; gap:.7em }
.footer .rvol-b, .footer .rvol-o{ font-size:1em; letter-spacing:.2em }
.footer .rvol-r{ width:clamp(44px, 6vmin, 90px) }

/* petite navigation entre les trois experiences, dans le pied de page */
.sitenav{ display:flex; align-items:center; gap:.9em }
.sitenav a{
  color:var(--txt-2); text-decoration:none; letter-spacing:.2em;
  border-bottom:1px solid transparent; transition:color .12s, border-color .12s;
}
.sitenav a:hover, .sitenav a:focus-visible{ color:var(--orange); border-color:var(--orange) }
.sitenav s{ text-decoration:none; color:var(--line) }

/* ============================================================
   ENTREES — apparition ordonnee des blocs au chargement
   ============================================================ */

@keyframes rise{
  from{ opacity:0; transform:translateY(16px) }
  to  { opacity:1; transform:none }
}
.rise{ opacity:0; animation:rise .65s cubic-bezier(.2,.7,.2,1) both }
.d1{ animation-delay:.02s } .d2{ animation-delay:.10s }
.d3{ animation-delay:.20s } .d4{ animation-delay:.32s } .d5{ animation-delay:.44s }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
  .rise{ opacity:1 !important; transform:none !important }
  body.page-leaving{ transform:none !important }
}

/* ============================================================
   ADAPTATIF — regles communes
   ============================================================ */

@media (max-width:1180px){ .rail{ display:none } }

@media (max-width:860px){
  .footer .cell:first-child{ display:none }
}