/* Accueil */
.heros { min-height: min(920px, calc(100svh - 102px)); }
.heros__grille { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.heros .ident { font-size: clamp(56px, 8.4vw, 132px); }
.heros .heros__devise { font-size: clamp(20px, 2.1vw, 28px); }

/* Le texte de loi, en miroir, qui défile derrière : l'envers du code */
.loi-miroir {
  position: absolute; top: 0; bottom: 0; right: 0; width: 64%; overflow: hidden; transform: scaleX(-1);
  mask-image: linear-gradient(270deg, transparent, #000 30%, #000 80%, transparent), linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
  mask-composite: intersect; -webkit-mask-composite: source-in;
}
.loi-miroir__piste { padding: 0 32px; color: var(--os); opacity: .085; font: 500 15px/2.15 var(--f-mono); text-align: justify; animation: loi-monte 160s linear infinite; }
.loi-miroir__piste b { color: var(--rouge); font-weight: 700; opacity: 1; }
@keyframes loi-monte { to { transform: translateY(-50%); } }
.lampe { position: absolute; inset: 0; background: radial-gradient(circle at 74% 48%, rgba(201, 162, 75, .13), transparent 38%); }

/* Le bureau : une pile de pièces et la pièce du moment */
.bureau { position: relative; padding: 18px 0 0; }
.bureau__pile, .bureau__pile::before { position: absolute; left: 4%; right: 4%; top: 30px; bottom: 54px; background: #cfc6b2; transform: rotate(-3.5deg); box-shadow: 0 20px 60px rgba(0, 0, 0, .55); }
.bureau__pile::before { content: ""; left: 0; right: 0; top: 0; bottom: 0; background: #dbd2bf; transform: rotate(5deg); }
.piece-doc {
  position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 440px; padding: clamp(24px, 3vw, 36px);
  background: var(--papier); color: var(--encre); text-decoration: none; transform: rotate(1.2deg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 0 80px rgba(120, 95, 50, .14);
}
.piece-doc::before { /* fibres du papier */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .6' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
.piece-doc.entre { animation: piece-entre .8s var(--ease) both; }
.piece-doc.sort { animation: piece-sort .6s ease-in both; }
@keyframes piece-entre { from { opacity: 0; transform: translate(60px, -20px) rotate(7deg); } }
@keyframes piece-sort { to { opacity: 0; transform: translate(-80px, 30px) rotate(-6deg); } }
.piece-doc.choc { animation: piece-choc .35s ease-out; }
@keyframes piece-choc { 30% { transform: rotate(1.2deg) translateY(3px) scale(.995); } }
.piece-doc__tete { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--encre); font: 700 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.piece-doc__tete span:first-child { color: var(--rouge); }
.piece-doc__titre { margin: 22px 0 0; font: 400 clamp(36px, 4vw, 60px)/.95 var(--f-titre); text-transform: uppercase; overflow-wrap: anywhere; }
.piece-doc__sous { margin: 10px 0 0; font: 800 17px/1.35 var(--f-texte); min-height: 1.35em; }
.piece-doc__corps { margin: 20px 0 0; font: 500 15px/1.9 var(--f-mono); }
.piece-doc__corps .m { opacity: 0; transition: opacity .25s; }
.piece-doc__corps .m.v { opacity: 1; }
.piece-doc__corps .m.chiffre { position: relative; z-index: 0; }
.piece-doc__corps .m.chiffre::before { /* le surligneur rouge */
  content: ""; position: absolute; z-index: -1; left: -2px; right: -2px; top: .15em; bottom: .05em; background: var(--rouge);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.piece-doc__corps .m.chiffre.surligne { color: var(--os); transition: color .2s .15s; }
.piece-doc__corps .m.chiffre.surligne::before { transform: scaleX(1); }
.piece-doc__corps .m.cav { position: relative; }
.piece-doc__corps .m.cav::after { /* la barre de caviardage */
  content: ""; position: absolute; left: -2px; right: -2px; top: .1em; bottom: 0; background: var(--encre);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.piece-doc__corps .m.cav.noir::after { transform: scaleX(1); }
.piece-doc__pied { margin-top: auto; padding-top: 18px; display: flex; justify-content: space-between; gap: 12px; border-top: 1px dashed rgba(26, 23, 20, .4); font: 700 11px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #5c554a; }
.piece-doc__pied .voir { color: var(--encre); }
.piece-doc:hover .piece-doc__pied .voir { color: var(--rouge); }
.piece-doc__tampon { position: absolute; right: 26px; bottom: 64px; font-size: 15px; mix-blend-mode: multiply; opacity: 0; transform: rotate(-9deg) scale(2.2); }
.piece-doc__tampon.pose { animation: tampon-pose .32s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes tampon-pose { to { opacity: .9; transform: rotate(-9deg) scale(1); } }

.bureau__compteur { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; margin-top: 26px; color: var(--cendre); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.bureau__compteur b { color: var(--os); }
.bureau__barre { flex: 1; height: 2px; background: var(--acier-2); }
.bureau__barre i { display: block; height: 100%; width: 0; background: var(--rouge); }
.bureau__suivant { width: 34px; height: 34px; border: 1px solid var(--acier-2); background: none; color: var(--os); font: 400 20px/1 var(--f-texte); cursor: pointer; }
.bureau__suivant:hover { border-color: var(--rouge); color: var(--rouge); }

@media (max-width: 980px) {
  .heros__grille { grid-template-columns: 1fr; }
  .loi-miroir { width: 100%; }
  .loi-miroir__piste { opacity: .06; }
  .lampe { background: radial-gradient(circle at 50% 75%, rgba(201, 162, 75, .12), transparent 45%); }
  .piece-doc { min-height: 430px; }
}

.section--addition { padding: 56px 0 72px; border-top: 0; }

.modes-mini { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; }
.modes-mini li { padding: 10px 14px; border: 1px solid var(--acier-2); font-weight: 800; font-size: 15px; }
.modes-mini .mono { color: var(--rouge); font-size: 11px; margin-right: 6px; }

.affiche-jeu { display: block; text-decoration: none; }
.affiche-jeu__cadre { position: relative; border: 1px solid var(--acier); background: radial-gradient(ellipse at 70% 30%, rgba(215, 25, 42, .22), transparent 60%), var(--noir-2); transition: border-color .3s, transform .5s var(--ease); }
.affiche-jeu:hover .affiche-jeu__cadre { border-color: var(--rouge); transform: rotate(-.6deg) scale(1.01); }
.affiche-jeu__corps { position: relative; padding: clamp(28px, 4vw, 48px); min-height: 360px; overflow: hidden; }
.affiche-jeu__corps::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(236, 230, 218, .035) 0 1px, transparent 1px 4px);
}
.affiche-jeu__titre { position: relative; font: 400 clamp(72px, 10vw, 140px)/.85 var(--f-titre); text-transform: uppercase; color: var(--os); }
.affiche-jeu__script { position: relative; margin: 26px 0 0; color: var(--cendre); font: 500 15px/1.7 var(--f-mono); }
.affiche-jeu .tampon { position: relative; margin-top: 28px; font-size: 13px; }
.affiche-jeu__pied { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--acier); color: var(--cendre); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

.voir-tout { margin-top: 40px; text-align: center; }

.section--officieux .chapeau { color: #4d473e; }
.section--officieux .bouton--fantome { color: var(--encre); }
.traduction-demo__aide { margin: 0 0 14px; color: #6d665a; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }