/* leschmilblick.fr : une borne d arcade claire. Jaune, encre violette, magenta, ombres pixel. */
:root {
  --jaune: #ffd23f; --encre: #1b1035; --magenta: #e0218a; --magenta-f: #a3145f; --lilas: #f3eefc;
  --blanc: #ffffff; --gris: #5b5470; --filet: #ded6ee;
  --titre: 'Bungee', 'Impact', sans-serif; --texte: 'Cabin', 'Segoe UI', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--lilas); color: var(--encre); font: 400 1.1rem/1.7 var(--texte); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--magenta-f); text-underline-offset: .2em; }
a:hover { color: var(--magenta); }
:focus-visible { outline: 3px dashed var(--magenta); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; line-height: 1.15; letter-spacing: .01em; }
.sauter { position: absolute; left: -999px; } .sauter:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 9; }
.largeur { width: min(100% - 2rem, 66rem); margin-inline: auto; }
.pixel { width: 1.1em; height: 1.1em; fill: currentColor; shape-rendering: crispEdges; flex: none; }

/* en-tete jaune, cartouches a ombre pixel */
.fronton { background: var(--jaune); border-bottom: 4px solid var(--encre); }
.fronton__z { width: min(100% - 2rem, 66rem); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; }
.titre-jeu { font: 400 1.35rem/1 var(--titre); color: var(--encre); text-decoration: none; text-transform: uppercase; letter-spacing: .04em; text-shadow: 3px 3px 0 var(--magenta); margin: 0; }
.titre-jeu:hover { color: var(--encre); }
.cartouches { display: flex; flex-wrap: wrap; gap: .55rem; }
.cartouches a { display: inline-flex; align-items: center; gap: .4rem; background: var(--blanc); color: var(--encre); text-decoration: none; font: 700 .95rem/1 var(--texte); padding: .6rem .8rem; border: 3px solid var(--encre); box-shadow: 4px 4px 0 var(--encre); }
.cartouches a:hover, .cartouches a[aria-current] { background: var(--magenta); color: #fff; transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--encre); }

/* accueil */
.ecran-titre { width: min(100% - 2rem, 66rem); margin: 3rem auto 2.5rem; display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 880px) { .ecran-titre { grid-template-columns: 1fr 1fr; } }
.insert { font: 400 .9rem/1 var(--titre); color: var(--magenta); letter-spacing: .2em; text-transform: uppercase; margin: 0 0 .8rem; }
.ecran-titre h1 { font-size: clamp(2.2rem, 1.3rem + 4vw, 4rem); margin: 0 0 1rem; text-transform: uppercase; }
.ecran-titre p { font-size: 1.15rem; color: var(--gris); margin: 0; }
.tele { display: block; text-decoration: none; color: #fff; }
.tele__vitre { position: relative; display: block; border: 14px solid var(--encre); border-radius: 26px; overflow: hidden; background: var(--encre); box-shadow: 8px 8px 0 var(--magenta); }
.tele__vitre img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(1.1) contrast(1.05); }
.tele__vitre::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 2px, transparent 2px 4px); pointer-events: none; }
.tele__txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem 1.1rem; background: linear-gradient(transparent, rgba(27,16,53,.92)); font: 700 1.2rem/1.3 var(--texte); }
.tele__s { display: block; font: 400 .75rem/1 var(--titre); color: var(--jaune); margin-bottom: .4rem; letter-spacing: .1em; }
.tele__pied { display: block; width: 40%; height: 14px; margin: 0 auto; background: var(--encre); border-radius: 0 0 10px 10px; }
.tele:hover .tele__vitre { box-shadow: 8px 8px 0 var(--jaune); }
.manettes { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); }
.manettes a { display: flex; flex-direction: column; gap: .5rem; height: 100%; background: var(--blanc); border: 3px solid var(--encre); box-shadow: 5px 5px 0 var(--encre); padding: 1rem; color: var(--encre); text-decoration: none; }
.manettes a:hover { background: var(--jaune); }
.manettes .pixel { width: 2.2rem; height: 2.2rem; color: var(--magenta); }
.manettes span { font-weight: 700; line-height: 1.25; }
.manettes b { font: 400 .75rem/1 var(--titre); color: var(--gris); }
.bandeau-titre { display: inline-block; background: var(--encre); color: var(--jaune); font-size: 1.15rem; padding: .55rem .9rem; margin: 0 0 1rem; }
.scores { list-style: none; margin: 0 0 3rem; padding: 0; border: 3px solid var(--encre); background: var(--blanc); }
.scores li + li { border-top: 2px dashed var(--filet); }
.scores a { display: grid; grid-template-columns: 3rem 1fr; gap: .2rem 1rem; padding: .9rem 1rem; color: var(--encre); text-decoration: none; align-items: baseline; }
@media (min-width: 760px) { .scores a { grid-template-columns: 3rem 1fr 9rem 8rem; } }
.scores a:hover { background: var(--jaune); }
.scores__rang { font: 400 1.3rem/1 var(--titre); color: var(--magenta); grid-row: span 3; }
.scores__t, .scores__r, .scores__d { grid-column: 2; }
@media (min-width: 760px) { .scores__t, .scores__r, .scores__d { grid-column: auto; } }
@media (min-width: 760px) { .scores__rang { grid-row: auto; } }
.scores__t { font-weight: 700; line-height: 1.35; }
.scores__r { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; color: var(--gris); }
.scores__d { font-size: .85rem; color: var(--gris); }

/* article */
.niveau { margin-bottom: 2rem; }
.niveau__tete { padding: 2.5rem 0 1.5rem; }
.cartouche { display: inline-flex; align-items: center; gap: .4rem; background: var(--jaune); color: var(--encre); text-decoration: none; font-weight: 700; font-size: .9rem; padding: .45rem .7rem; border: 3px solid var(--encre); box-shadow: 3px 3px 0 var(--encre); }
.niveau h1 { font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3rem); margin: 1.1rem 0 .8rem; max-width: 26ch; }
.niveau__m { margin: 0; color: var(--gris); font-size: .95rem; }
.cadre-ecran { width: min(100% - 2rem, 52rem); margin: 0 auto 2.4rem; border: 12px solid var(--encre); border-radius: 22px; overflow: hidden; box-shadow: 8px 8px 0 var(--magenta); }
.cadre-ecran img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.niveau__texte { width: min(100% - 2rem, 44rem); margin-inline: auto; }
.niveau__texte > * { margin-block: 0 1.1em; }
.niveau__texte h2 { font-size: 1.45rem; margin: 2.1em 0 .7em; padding-left: .8rem; border-left: 8px solid var(--magenta); }
.niveau__texte h3 { font-family: var(--texte); font-weight: 700; font-size: 1.25rem; margin: 1.6em 0 .5em; }
.niveau__texte li { margin-bottom: .4em; }
.niveau__texte li::marker { color: var(--magenta); }
.niveau__texte table { width: 100%; border-collapse: collapse; background: var(--blanc); border: 3px solid var(--encre); font-size: 1rem; display: block; overflow-x: auto; }
.niveau__texte th { background: var(--encre); color: var(--jaune); text-align: left; }
.niveau__texte th, .niveau__texte td { padding: .65rem .85rem; border-bottom: 2px solid var(--filet); vertical-align: top; }
.niveau__texte blockquote { margin-inline: 0; background: var(--blanc); border: 3px solid var(--encre); padding: .8rem 1.1rem; }
.suivant { display: block; width: min(100% - 2rem, 44rem); margin: 2.5rem auto 0; background: var(--encre); color: #fff; text-decoration: none; padding: 1.1rem 1.3rem; font-weight: 700; box-shadow: 6px 6px 0 var(--jaune); }
.suivant span { display: block; font: 400 .8rem/1 var(--titre); color: var(--jaune); margin-bottom: .45rem; letter-spacing: .1em; }
.suivant:hover { color: #fff; box-shadow: 6px 6px 0 var(--magenta); }
.rubrique { display: grid; gap: .3rem; }
.rubrique__pixel .pixel { width: 3rem; height: 3rem; color: var(--magenta); }
.rubrique p { margin: 0; color: var(--gris); }

/* pied */
.game-over { background: var(--encre); color: #cfc6e4; margin-top: 3rem; }
.game-over__z { width: min(100% - 2rem, 66rem); margin-inline: auto; display: grid; gap: 2rem; padding: 2.8rem 0 2rem; }
@media (min-width: 800px) { .game-over__z { grid-template-columns: 2fr 1fr 1fr; } }
.titre-jeu--pied { color: var(--jaune); margin-bottom: .9rem; }
.game-over p { margin: 0; line-height: 1.6; max-width: 32rem; }
.game-over nav { display: flex; flex-direction: column; gap: .45rem; }
.game-over nav a { color: #fff; text-decoration: none; }
.game-over nav a:hover { color: var(--jaune); }
.game-over__t { font: 400 .8rem/1 var(--titre) !important; color: var(--magenta); letter-spacing: .1em; margin-bottom: .4rem !important; }
.game-over__bas { width: min(100% - 2rem, 66rem); margin: 0 auto !important; padding: 1rem 0 1.5rem; border-top: 2px dashed rgba(255,255,255,.2); font-size: .9rem; max-width: none !important; }
.game-over__bas a { color: #fff; }
body { overflow-wrap: break-word; }