/* Style « 3D cubes » (voxel, façon Blockbench) — chargé APRÈS style.css sur les pages du site général.
   Pas chargé sur /staff/, /couronne/ ni /strategie/ (style Game of Thrones).
   Principe : chaque bloc est un cube vu de 3/4 : face du dessus plus claire, côté droit et dessous plus sombres. */
:root{
  --bg:#10262b;--bg2:#132d33;--card:#18363d;--card2:#1f424a;--field:#0b1c20;--line:#264a52;
  --sky:#1f4248;
  --side:#08171a;         /* côté sombre des cubes */
  --side-sand:#8a6a37;    /* côté des cubes de sable */
  --hi:rgba(255,255,255,.07);
  --r:3px;
}
body{background:var(--bg)}

/* Un « cube » : face avant + dessus clair + côtés extrudés en bas à droite */
.card,.post,.live-card,.store,.community,.chat,.stats-in,.callout,.toc,.table-wrap{
  border-radius:var(--r);border:0;
  box-shadow:inset 0 3px 0 var(--hi),inset 0 -3px 0 rgba(0,0,0,.22),
    1px 1px 0 var(--side),2px 2px 0 var(--side),3px 3px 0 var(--side),4px 4px 0 var(--side),5px 5px 0 var(--side),6px 6px 0 var(--side);
  transition:transform .12s,box-shadow .12s;
}
.card:hover,.post:hover,.live-card:hover{
  transform:translate(-2px,-2px);
  box-shadow:inset 0 3px 0 var(--hi),inset 0 -3px 0 rgba(0,0,0,.22),
    1px 1px 0 var(--side),2px 2px 0 var(--side),3px 3px 0 var(--side),4px 4px 0 var(--side),5px 5px 0 var(--side),6px 6px 0 var(--side),7px 7px 0 var(--side),8px 8px 0 var(--side);
}
.post.pin{border:0;box-shadow:inset 0 5px 0 var(--rope),inset 0 -3px 0 rgba(0,0,0,.22),
  1px 1px 0 var(--side),2px 2px 0 var(--side),3px 3px 0 var(--side),4px 4px 0 var(--side),5px 5px 0 var(--side),6px 6px 0 var(--side)}
.c-body .card{background:var(--card2)}
.post-video{border-radius:2px;border:0}

/* Boutons : blocs qui s'enfoncent (dessous + côté) */
.btn{border-radius:3px;box-shadow:inset 0 2px 0 rgba(255,255,255,.18),3px 4px 0 rgba(0,0,0,.5)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:inset 0 2px 0 rgba(255,255,255,.18),4px 5px 0 rgba(0,0,0,.5)}
.btn:active{transform:translate(3px,4px);box-shadow:inset 0 2px 0 rgba(255,255,255,.18),0 0 0 rgba(0,0,0,.5)}
.btn-play{box-shadow:inset 0 2px 0 rgba(255,255,255,.22),3px 4px 0 #1d5a30}
.btn-play:hover{box-shadow:inset 0 2px 0 rgba(255,255,255,.22),4px 5px 0 #1d5a30}
.btn-play:active{box-shadow:inset 0 2px 0 rgba(255,255,255,.22),0 0 0 #1d5a30}
.btn-sand{box-shadow:inset 0 2px 0 rgba(255,255,255,.35),3px 4px 0 var(--side-sand)}
.btn-discord{box-shadow:inset 0 2px 0 rgba(255,255,255,.2),3px 4px 0 #2c3488}
.btn-ghost,.btn-x{border:0;background:var(--card2)}
.btn-x{background:#05090b}
.filters button{border:0;border-radius:3px;box-shadow:inset 0 2px 0 var(--hi),3px 3px 0 var(--side)}
.filters button[aria-pressed="true"]{box-shadow:inset 0 2px 0 rgba(255,255,255,.35),3px 3px 0 var(--side-sand)}

/* Titres en relief, comme le logo (lettres sable extrudées) */
.hero h1{text-shadow:0 2px 0 #071417,0 4px 0 #071417,0 6px 0 #071417,0 10px 18px rgba(0,0,0,.35)}
.hero h1 span{text-decoration:none;color:var(--sand);text-shadow:0 2px 0 var(--side-sand),0 4px 0 var(--side-sand),0 6px 0 #5e4622,0 10px 18px rgba(0,0,0,.4)}
h2{text-shadow:0 2px 0 var(--side),0 4px 0 var(--side)}
.final h2{text-shadow:0 2px 0 var(--sand2)}
.page-head h1{text-shadow:0 2px 0 var(--side),0 4px 0 var(--side),0 6px 0 var(--side)}

/* Petits cubes isométriques (puce des sur-titres) */
.eyebrow:before,.center .eyebrow:after{
  width:12px;height:12px;background:var(--rope);
  box-shadow:2px 2px 0 var(--rope2),3px 3px 0 #7c3d22;
}
.dot{box-shadow:2px 2px 0 #1d5a30}

/* Étapes numérotées et icônes : des cubes */
.step:before{border-radius:2px;box-shadow:inset 0 3px 0 rgba(255,255,255,.35),2px 2px 0 var(--sand2),4px 4px 0 var(--side-sand)}
.card .ico{border-radius:2px;background:var(--card2);box-shadow:inset 0 3px 0 var(--hi),3px 3px 0 var(--side),5px 5px 0 var(--side)}
.c-body .card .ico{background:var(--card)}

/* Lettres du jeu = petits cubes */
.tile{border-radius:2px}
.tile.g{box-shadow:inset 0 3px 0 rgba(255,255,255,.22),0 4px 0 #1d5a30}
.tile.y{box-shadow:inset 0 3px 0 rgba(255,255,255,.25),0 4px 0 #9c7d1f}
.tile.x{box-shadow:inset 0 3px 0 rgba(255,255,255,.12),0 4px 0 #10303c}
.board .row{margin-bottom:2px}
.phone{border-radius:10px;border-color:#24464f;box-shadow:inset 0 0 0 2px #2c5560,6px 6px 0 var(--side),12px 12px 0 rgba(0,0,0,.25);transform:rotate(1.5deg)}
.phone:before{border-radius:0;background:#2c5560}

/* Chiffres en direct */
.live-card b{text-shadow:0 3px 0 var(--side)}
.stat{background:var(--bg2)}

/* Bandeau final : gros bloc de sable */
.final{border-radius:var(--r);box-shadow:inset 0 4px 0 rgba(255,255,255,.35),inset 0 -4px 0 rgba(0,0,0,.12),
  3px 3px 0 var(--sand2),6px 6px 0 var(--side-sand),9px 9px 0 var(--side-sand),12px 12px 0 #5e4622}
@media(max-width:860px){.final{box-shadow:inset 0 4px 0 rgba(255,255,255,.35),3px 3px 0 var(--sand2),6px 6px 0 var(--side-sand),8px 8px 0 #5e4622}}

/* Navigation : barre en bloc */
.top{background:var(--bg);border-bottom:0;box-shadow:0 3px 0 var(--line),0 6px 0 var(--side)}
.links a.on{box-shadow:0 3px 0 var(--rope)}

/* Sections alternées : très léger motif de cubes isométriques */
.alt{border:0;background-color:var(--bg2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.035' stroke-width='1.5'%3E%3Cpath d='M28 2 54 17v30L28 62 2 47V17z'/%3E%3Cpath d='M2 17 28 32 54 17M28 32v30'/%3E%3C/g%3E%3C/svg%3E");
  box-shadow:inset 0 3px 0 var(--side),inset 0 -3px 0 var(--side)}

/* L'île en voxels (img/ile-3d*.webp, rendue en 3D) : fondue dans le fond en haut et en bas */
.horizon.vox{aspect-ratio:3/1;max-height:none;image-rendering:auto;margin-top:-40px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 82%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 82%,transparent 100%)}
.hero .horizon-sea{display:none}
@media(max-width:600px){.horizon.vox{aspect-ratio:3/2;object-position:center;margin-top:0}}
.c-head .horizon.vox{margin-top:-10px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 25%);mask-image:linear-gradient(to bottom,transparent 0,#000 25%)}
.community{background:var(--card)}
.c-head{background:var(--sky)}

/* FAQ : chaque question posée comme une rangée de blocs */
.faq details{border-bottom:0;box-shadow:0 3px 0 var(--line);margin-bottom:6px}
.faq summary:after{font-family:var(--f-pixel)}

/* Pages légales / secondaires */
.prose code{border-radius:2px}
.toc,.callout{border:0}
.callout{box-shadow:inset 4px 0 0 var(--sand),3px 3px 0 var(--side),5px 5px 0 var(--side)}

/* Pied de page : socle sombre */
footer{border-top:0;box-shadow:inset 0 3px 0 var(--line)}

@media(prefers-reduced-motion:reduce){.card,.post,.live-card{transition:none}.card:hover,.post:hover,.live-card:hover{transform:none}}
.c-head .horizon.vox{max-width:none}
/* Barre du haut : le logo ne chevauche plus les liens sur les écrans moyens */
.brand{flex-shrink:0}
@media(max-width:1360px){.links{gap:14px}.links a{font-size:14px}}
@media(max-width:1180px){.links a[href="montage/"],.links a[href="../montage/"]{display:none}}
.card .btn-discord,.card .btn-play{color:#fff}
.top .wrap{max-width:1320px;gap:32px}