/*
 * Polices auto-hébergées (licence SIL OFL) : Pirata One, Barlow et Barlow Condensed.
 * Aucune requête vers un service externe, et le rendu est le même dans OBS.
 */
@font-face {
    font-family: "Pirata One"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/assets/fonts/hf-pirata-one-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: "Pirata One"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/assets/fonts/hf-pirata-one-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("/assets/fonts/hf-barlow-condensed-latin-500-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("/assets/fonts/hf-barlow-condensed-latin-ext-500-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("/assets/fonts/hf-barlow-condensed-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("/assets/fonts/hf-barlow-condensed-latin-ext-600-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("/assets/fonts/hf-barlow-condensed-latin-700-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
    src: url("/assets/fonts/hf-barlow-condensed-latin-ext-700-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap;
    src: url("/assets/fonts/hf-barlow-condensed-latin-800-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: swap;
    src: url("/assets/fonts/hf-barlow-condensed-latin-ext-800-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/assets/fonts/hf-barlow-latin-400-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
    src: url("/assets/fonts/hf-barlow-latin-ext-400-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("/assets/fonts/hf-barlow-latin-500-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("/assets/fonts/hf-barlow-latin-ext-500-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
    font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("/assets/fonts/hf-barlow-latin-600-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
    src: url("/assets/fonts/hf-barlow-latin-ext-600-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/*
 * Bingo Hellfest : une feuille de style à part.
 *
 * Rien ici ne dépend de app.css. L'idée : un mur de béton sombre, sur lequel
 * on a scotché un flyer photocopié. Les noms de groupes sont composés comme
 * sur une affiche de festival, en capitales étroites séparées par des barres.
 * Le rouge sang ne sert qu'à une chose : ce qui a été trouvé.
 */

:root {
    --coal:     #14100f;
    --soot:     #211a18;
    --bone:     #e8ddc6;
    --bone-dim: #b9ad96;
    --ink:      #17110f;
    --blood:    #b1161d;
    --oxblood:  #5c0c10;
    --ash:      #9d9186;
    --ligne:    rgba(232, 221, 198, .18);

    --f-display: "Pirata One", "UnifrakturCook", Georgia, serif;
    --f-cond:    "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
    --f-texte:   "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Grain : du bruit fractal, noir pour le papier, clair pour le mur. */
    --grain-papier: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .06 0 0 0 0 .04 0 0 0 .42 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --grain-mur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .91 0 0 0 0 .87 0 0 0 0 .78 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    --col: min(72rem, 100% - 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }

.hf {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--bone);
    font: 400 1.0625rem/1.55 var(--f-texte);
    background-color: var(--coal);
    background-image:
        radial-gradient(90% 60% at 50% -10%, rgba(140, 22, 28, .26), transparent 70%),
        radial-gradient(120% 80% at 50% 120%, rgba(0, 0, 0, .6), transparent 60%),
        var(--grain-mur);
    -webkit-font-smoothing: antialiased;
}

:where(.hf) a { color: inherit; }
.hf :focus-visible { outline: 3px solid var(--bone); outline-offset: 3px; }

.hf-saut {
    position: absolute; left: .75rem; top: -4rem;
    background: var(--bone); color: var(--ink); padding: .5rem .9rem; z-index: 10;
}
.hf-saut:focus { top: .75rem; }

/* ---------------------------------------------------------------- barre */

.hf-bar {
    width: var(--col);
    margin: 0 auto;
    padding: 1.1rem 0 1rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 2rem;
    border-bottom: 1px solid var(--ligne);
}

.hf-logo {
    display: inline-flex; align-items: center; gap: .55rem;
    text-decoration: none;
}
.hf-logo__mot {
    font: 400 2.2rem/1 var(--f-display);
    letter-spacing: .01em;
}
.hf-logo__bingo {
    font: 800 1.15rem/1 var(--f-cond);
    background: var(--blood); color: var(--bone);
    padding: .2em .5em .25em;
    transform: rotate(-4deg);
    box-shadow: 2px 3px 0 var(--oxblood);
}

.hf-menu { display: flex; gap: 1.6rem; }
.hf-menu a {
    font: 600 1.3rem/1 var(--f-cond);
    text-decoration: none;
    padding: .35rem 0 .3rem;
    border-bottom: 3px solid transparent;
    color: var(--bone-dim);
}
.hf-menu a:hover { color: var(--bone); }
.hf-menu a[aria-current="page"] { color: var(--bone); border-bottom-color: var(--blood); }

.hf-joueur {
    display: flex; align-items: center; gap: .6rem;
    font: 600 1.1rem/1 var(--f-cond);
    justify-self: end;
}
.hf-joueur img, .hf-joueur__initiale {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--bone);
}
.hf-joueur__initiale {
    display: grid; place-items: center; background: var(--soot);
    font: 700 1rem/1 var(--f-cond);
}

/* -------------------------------------------------------------- boutons */

.hf-btn {
    display: inline-block;
    font: 800 1.25rem/1 var(--f-cond);
    background: var(--bone); color: var(--ink);
    padding: .75em 1.3em .8em;
    border: 0; cursor: pointer; text-decoration: none;
    box-shadow: 4px 4px 0 var(--blood);
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s;
}
.hf-btn:hover { background: #fff6e0; transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--blood); }
.hf-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--blood); }
.hf-btn--petit { font-size: 1.05rem; padding: .55em 1em .6em; box-shadow: 3px 3px 0 var(--blood); }

/* ------------------------------------------------------------- squelette */

.hf-main { flex: 1; width: var(--col); margin: 0 auto; padding: clamp(1.8rem, 4vw, 3.4rem) 0 4rem; }

.hf-fiche {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.hf-titre {
    margin: 0 0 1rem;
    font: 400 clamp(2.9rem, 7vw, 5rem)/.92 var(--f-display);
    letter-spacing: .005em;
    text-wrap: balance;
}
.hf-titre--page { font-size: clamp(2.6rem, 6vw, 4rem); margin-bottom: 1.2rem; }

.hf-h2 { margin: 2.6rem 0 1rem; font: 400 2rem/1 var(--f-display); }

.hf-chapo { max-width: 34rem; margin: 0 0 1.6rem; color: var(--bone-dim); font-size: 1.15rem; }

.hf-statut {
    display: grid; gap: .15rem;
    max-width: 34rem;
    margin: 0 0 2rem;
    padding: .9rem 1.1rem 1rem 1.3rem;
    background: var(--soot);
    border-left: 6px solid var(--blood);
}
.hf-statut b { font: 700 1.45rem/1.1 var(--f-cond); }
.hf-statut span { color: var(--bone-dim); }
.hf-statut time { color: var(--bone); font-weight: 600; font-variant-numeric: tabular-nums; }
.hf-statut--clos { border-left-color: var(--ash); }

.hf-connexion { max-width: 34rem; display: grid; gap: 1.1rem; justify-items: start; }
.hf-connexion p { margin: 0; color: var(--bone-dim); }

.hf-suite { margin: 2rem 0 0; }

/* ------------------------------------------------------------ recherche */

.hf-recherche { max-width: 34rem; }
.hf-recherche label { display: block; font: 700 1.35rem/1 var(--f-cond); margin-bottom: .5rem; }
.hf-recherche input {
    width: 100%;
    font: 600 1.7rem/1.2 var(--f-cond);
    color: var(--bone);
    background: transparent;
    border: 0; border-bottom: 3px solid var(--bone);
    padding: .35rem .1rem .45rem;
    border-radius: 0;
    -webkit-appearance: none; appearance: none;
}
.hf-recherche input::placeholder { color: var(--ash); opacity: 1; }
.hf-recherche input:focus { outline: none; border-bottom-color: var(--blood); box-shadow: 0 4px 0 -1px var(--blood); }
.hf-recherche input::-webkit-search-cancel-button { filter: invert(.85); }

.hf-msg { min-height: 1.6rem; margin: .5rem 0 0; font-size: .98rem; color: var(--bone-dim); }
.hf-msg.is-erreur { color: #ff9a8f; }

.hf-res { list-style: none; margin: .3rem 0 0; padding: 0; }
.hf-res li {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--ligne);
}
.hf-res__pic {
    width: 3.2rem; height: 3.2rem; border-radius: 50%; overflow: hidden;
    display: grid; place-items: center;
    background: #26201e; border: 2px solid var(--ligne);
    font: 800 1.5rem/1 var(--f-cond); color: var(--ash);
}
.hf-res__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hf-res__nom { font: 700 1.5rem/1.1 var(--f-cond); }
.hf-res__genre { display: block; font: 400 .9rem/1.2 var(--f-texte); color: var(--ash); }
.hf-add {
    font: 800 1.1rem/1 var(--f-cond);
    padding: .55em 1em .6em;
    color: var(--bone); background: transparent;
    border: 2px solid var(--bone); cursor: pointer;
    transition: background-color .12s, color .12s, border-color .12s;
}
.hf-add:hover:not(:disabled) { background: var(--blood); border-color: var(--blood); }
.hf-add:disabled { cursor: default; color: var(--ash); border-color: var(--ligne); }

/* ---------------------------------------------------------------- flyer */

.hf-droite { position: relative; padding-top: .6rem; }

.hf-flyer-wrap {
    position: relative;
    transform: rotate(-1.1deg);
    filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .6));
    animation: hf-colle .55s cubic-bezier(.2, .9, .3, 1.2) both;
}
.hf-flyer-wrap--seul { max-width: 30rem; margin-top: 1.5rem; }

/* Deux morceaux de scotch, hors du papier pour ne pas être découpés avec lui. */
.hf-flyer-wrap::before, .hf-flyer-wrap::after {
    content: ""; position: absolute; top: -.85rem; z-index: 2;
    width: 5.6rem; height: 1.7rem;
    background: rgba(214, 200, 165, .55);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.hf-flyer-wrap::before { left: 8%;  transform: rotate(-5deg); }
.hf-flyer-wrap::after  { right: 8%; transform: rotate(4deg); }

.hf-flyer {
    position: relative;
    padding: 2rem 1.7rem 3.4rem;
    color: var(--ink);
    background-color: var(--bone);
    background-image: var(--grain-papier), linear-gradient(172deg, rgba(255, 255, 255, .35), transparent 40%, rgba(120, 90, 40, .12));
    /* Le bas est déchiré. */
    clip-path: polygon(0 0, 100% 0, 100% 96.2%, 97% 98%, 93.5% 96.6%, 89% 98.4%, 84.5% 96.9%, 80% 98.1%,
        75% 96.4%, 70.5% 98.2%, 66% 96.8%, 61% 98.3%, 56.5% 96.7%, 52% 98%, 47% 96.5%, 42.5% 98.3%,
        38% 96.9%, 33% 98.1%, 28.5% 96.6%, 24% 98.2%, 19% 96.8%, 14.5% 98.2%, 10% 96.5%, 5% 98%, 0 96.6%);
}

.hf-flyer__tete {
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 4px double var(--ink);
    padding-bottom: .5rem;
}
.hf-flyer__tete h2 { margin: 0; font: 400 2.5rem/1 var(--f-display); }
.hf-flyer__compte { margin: 0; font: 700 1.5rem/1 var(--f-cond); font-variant-numeric: tabular-nums; }
.hf-flyer__compte span { opacity: .6; }
.hf-flyer__par { margin: .5rem 0 0; font: 500 1.1rem/1.2 var(--f-cond); opacity: .7; }

/* La programmation, en flux continu comme sur une affiche : du texte en ligne,
   qui passe à la ligne aux espaces, avec une barre entre deux groupes. */
.hf-lineup {
    list-style: none; margin: 1.1rem 0 0; padding: 0;
    font: 800 1.4rem/1.08 var(--f-cond);
    text-transform: uppercase; letter-spacing: .01em;
    overflow-wrap: anywhere;
}
.hf-act { display: inline; }
.hf-act:nth-child(-n+3) { font-size: clamp(1.9rem, 4vw, 2.4rem); }
.hf-act:nth-child(n+4):nth-child(-n+8) { font-size: 1.7rem; }
.hf-act::after { content: " / "; font-weight: 500; opacity: .45; white-space: pre; }
.hf-act:last-child::after { content: none; }

.hf-name { padding: 0 .12em; transition: background-color .2s, color .2s; }

.hf-act.is-hit .hf-name {
    display: inline-block; max-width: 100%;
    background: var(--blood); color: var(--bone);
    padding: 0 .22em;
    transform: rotate(-1.2deg);
    box-shadow: 2px 2px 0 var(--oxblood);
}

.hf-x {
    vertical-align: .12em;
    margin-left: .2rem;
    width: 1.5rem; height: 1.5rem; padding: 0;
    font: 700 1.05rem/1 var(--f-texte);
    color: var(--ink); background: rgba(23, 17, 15, .1);
    border: 0; border-radius: 50%; cursor: pointer;
}
.hf-x:hover { background: var(--blood); color: var(--bone); }
@media (hover: hover) {
    .hf-x { opacity: 0; }
    .hf-act:hover .hf-x, .hf-x:focus-visible { opacity: 1; }
}

/* Un groupe qu'on vient d'ajouter se tamponne. */
.hf-act.is-nouveau .hf-name { animation: hf-tampon .38s cubic-bezier(.3, 1.6, .5, 1); }

.hf-vide { margin: 1.2rem 0 0; font: italic 400 1.05rem/1.4 var(--f-texte); opacity: .75; }
.hf-page .hf-vide { color: var(--bone-dim); }

/* Une encoche par place : pleine quand elle est prise. */
.hf-tally { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 1.6rem; }
.hf-tally span { width: 13px; height: 22px; border: 2px solid var(--ink); opacity: .55; }
.hf-tally span.is-plein { background: var(--blood); border-color: var(--blood); opacity: 1; }

.hf-flyer__pied { margin: .8rem 0 0; font: 600 1.2rem/1.2 var(--f-cond); }

.hf-stamp {
    position: absolute; right: -.4rem; bottom: 3.6rem; z-index: 3;
    margin: 0; padding: .1em .45em .15em;
    font: 400 1.9rem/1 var(--f-display);
    color: var(--blood);
    border: 4px solid var(--blood);
    outline: 2px solid var(--blood); outline-offset: 3px;
    transform: rotate(-11deg);
    opacity: .9;
    mix-blend-mode: multiply;
    background: rgba(232, 221, 198, .55);
}
.hf-stamp[hidden] { display: none; }

/* --------------------------------------------------------------- pages */

.hf-page { max-width: 46rem; }
.hf-page--texte { max-width: 42rem; }

.hf-annonces h2 { margin: 0 0 .8rem; font: 700 1.35rem/1 var(--f-cond); }
.hf-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.hf-chips li {
    font: 800 1.15rem/1 var(--f-cond); text-transform: uppercase;
    background: var(--bone); color: var(--ink);
    padding: .4em .7em .45em;
}
.hf-chips li.is-dernier { background: var(--blood); color: var(--bone); transform: rotate(-1.5deg); box-shadow: 3px 3px 0 var(--oxblood); }

.hf-rang { list-style: none; margin: 0; padding: 0; }
.hf-ligne {
    display: grid; grid-template-columns: 3.2rem 40px 1fr auto; align-items: center; gap: 0 1rem;
    padding: .7rem .9rem .7rem .4rem;
    border-bottom: 1px solid var(--ligne);
    border-left: 5px solid transparent;
}
.hf-ligne.is-podium { border-left-color: var(--blood); background: linear-gradient(90deg, rgba(177, 22, 29, .16), transparent 70%); }
.hf-ligne.is-moi { background: var(--soot); }
.hf-ligne__rang { font: 400 2.2rem/1 var(--f-display); text-align: center; }
.hf-ligne img, .hf-ligne__initiale { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bone); }
.hf-ligne__initiale { display: grid; place-items: center; background: var(--soot); font: 700 1.1rem/1 var(--f-cond); }
.hf-ligne__qui { display: grid; min-width: 0; }
.hf-ligne__qui a, .hf-ligne__qui b { font: 700 1.5rem/1.1 var(--f-cond); overflow-wrap: anywhere; text-decoration: none; }
.hf-ligne__qui a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.hf-ligne__qui small { color: var(--ash); font-size: .92rem; }
.hf-ligne__pts { font: 500 1.1rem/1 var(--f-cond); color: var(--bone-dim); white-space: nowrap; }
.hf-ligne__pts b { font: 400 2.2rem/1 var(--f-display); color: var(--bone); margin-right: .1rem; }

.hf-barres { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.hf-barres li { display: grid; grid-template-columns: minmax(7rem, 14rem) 1fr 2.2rem; align-items: center; gap: .8rem; }
.hf-barres__nom { font: 700 1.25rem/1.1 var(--f-cond); text-transform: uppercase; overflow-wrap: anywhere; }
.hf-barres__barre { display: block; height: 14px; width: var(--w); background: var(--bone-dim); min-width: 6px; }
.hf-barres li.is-hit .hf-barres__barre { background: var(--blood); }
.hf-barres__nb { font: 700 1.2rem/1 var(--f-cond); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- pied */

.hf-pied { width: var(--col); margin: 0 auto; padding: 1.4rem 0 2rem; border-top: 1px solid var(--ligne); }
.hf-pied p { margin: 0; font-size: .9rem; color: var(--ash); max-width: 40rem; }

/* ----------------------------------------------------------- animations */

@keyframes hf-colle {
    from { transform: translateY(-1.6rem) rotate(2.6deg); opacity: 0; }
    to   { transform: rotate(-1.1deg); opacity: 1; }
}
@keyframes hf-tampon {
    from { transform: scale(1.35); background-color: var(--blood); color: var(--bone); }
    to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .hf-flyer-wrap, .hf-act.is-nouveau .hf-name { animation: none; }
    .hf-btn, .hf-add { transition: none; }
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 56rem) {
    .hf-fiche { grid-template-columns: minmax(0, 1fr); }
    .hf-droite { max-width: 30rem; }
}

@media (max-width: 42rem) {
    .hf-bar { grid-template-columns: 1fr auto; row-gap: .8rem; }
    .hf-menu { grid-column: 1 / -1; grid-row: 2; gap: 1.3rem; }
    .hf-ligne { grid-template-columns: 2.4rem 36px 1fr auto; gap: 0 .7rem; }
    .hf-ligne img, .hf-ligne__initiale { width: 36px; height: 36px; }
    .hf-ligne__rang, .hf-ligne__pts b { font-size: 1.8rem; }
    .hf-barres li { grid-template-columns: 1fr 2.2rem; }
    .hf-barres__barre { grid-column: 1 / -1; grid-row: 2; }
    .hf-stamp { right: .2rem; font-size: 1.5rem; }
}

/* ===================================================================== bingo */

/* La pastille : sur combien de grilles se trouve un groupe. */
.hf-pastille {
    display: inline-grid; place-items: center;
    min-width: 1.35em; height: 1.35em; padding: 0 .3em;
    margin-left: .3rem; vertical-align: .18em;
    font: 800 .62em/1 var(--f-cond); letter-spacing: 0;
    color: var(--bone); background: var(--blood);
    border-radius: 999px;
}
.hf-pastille.is-zero { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; opacity: .5; }

.hf-page.hf-bingo { max-width: none; }

.hf-jetons { margin: 1.6rem 0 0; }
.hf-jetons__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.hf-jetons__tete .hf-h2 { margin: 0 0 .8rem; }
.hf-jetons__total { margin: 0; font: 600 1.3rem/1 var(--f-cond); color: var(--bone-dim); }
.hf-jetons__total b { font: 400 2.6rem/1 var(--f-display); color: var(--bone); }
.hf-jetons__aide { margin: 1rem 0 .7rem; color: var(--bone-dim); max-width: 44rem; }

.hf-jetons__pile { display: flex; flex-wrap: wrap; gap: .6rem; }
.hf-jeton {
    display: grid; place-items: center;
    width: 3rem; height: 3rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #d02a2f, var(--blood) 55%, var(--oxblood));
    box-shadow: 0 3px 0 #3a0b0e, inset 0 0 0 3px rgba(255, 255, 255, .12);
    transition: transform .2s, opacity .2s;
}
.hf-jeton i { font: 400 1.7rem/1 var(--f-display); font-style: normal; color: var(--bone); }
.hf-jeton.is-pris { background: transparent; box-shadow: inset 0 0 0 2px var(--ligne); opacity: .8; }
.hf-jeton.is-pris i { color: var(--ash); opacity: .4; }


.hf-plateau { display: grid; grid-template-columns: minmax(13rem, 17rem) 1fr; gap: clamp(1.2rem, 3vw, 2.6rem); align-items: start; margin-top: 1.6rem; }

.hf-palette { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); display: flex; flex-direction: column; }
.hf-palette .hf-h2 { margin: 0 0 .5rem; }
.hf-palette__aide { margin: 0 0 .7rem; font-size: .95rem; color: var(--bone-dim); min-height: 2.8em; }
.hf-palette__liste { list-style: none; margin: 0; padding: 0; overflow: auto; display: grid; gap: .4rem; }

.hf-pion {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .45rem .7rem; cursor: grab; user-select: none;
    background: #221b19; border: 2px solid var(--ligne);
    font: 700 1.2rem/1.1 var(--f-cond); text-transform: uppercase; letter-spacing: .01em;
    transition: border-color .12s, background-color .12s, transform .12s;
}
.hf-pion:hover { border-color: var(--bone-dim); }
.hf-pion.is-main { border-color: var(--bone); background: var(--blood); transform: translateX(.3rem); }
.hf-pion.is-hit .hf-name { text-decoration: underline; text-decoration-color: var(--blood); text-underline-offset: .2em; }
.hf-pion .hf-pastille { margin: 0; vertical-align: 0; font-size: .85rem; flex: none; }
.hf-pion.is-main .hf-pastille { background: var(--bone); color: var(--blood); }

.hf-grilles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr)); gap: 1.6rem; align-items: start; }

.hf-grille {
    padding: 1rem 1rem .9rem;
    background: #1c1614; border: 2px solid var(--ligne);
    display: grid; gap: .8rem;
}
.hf-grille.is-complete { border-color: #d9a441; box-shadow: 0 0 0 2px rgba(217, 164, 65, .25), 0 0 28px rgba(217, 164, 65, .18); }
.hf-grille__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.hf-grille__tete h3 { margin: 0; font: 800 1.35rem/1 var(--f-cond); text-transform: uppercase; letter-spacing: .03em; }
.hf-grille__pts { margin: 0; font: 600 1.1rem/1 var(--f-cond); color: var(--bone-dim); }
.hf-grille__pts b { font: 400 2rem/1 var(--f-display); color: var(--bone); }

.hf-plan { display: grid; grid-template-columns: repeat(var(--c), minmax(0, 1fr)); gap: 5px; }

.hf-case {
    position: relative; display: grid; place-items: center; text-align: center;
    min-height: 4.4rem; padding: .35rem .3rem;
    background: #130f0e; border: 2px dashed #4a3f3b;
    font: 800 1rem/1.05 var(--f-cond); text-transform: uppercase; overflow-wrap: anywhere; hyphens: auto;
    transition: background-color .12s, border-color .12s, transform .12s;
}
.hf-case.is-plein { border-style: solid; border-color: #6a5a54; background: #2a211e; }
.hf-case.is-hit { background: var(--blood); border-color: var(--bone); color: var(--bone); box-shadow: 2px 2px 0 var(--oxblood); }
.hf-case.is-survol { border-color: var(--bone); background: #3a1417; }
.hf-bingo.a-main .hf-case[role="button"]:hover { border-color: var(--bone); background: #3a1417; cursor: copy; }
.hf-case__nom { display: block; }
.hf-case__x {
    position: absolute; top: 2px; right: 2px; width: 1.4rem; height: 1.4rem; padding: 0;
    font: 700 1rem/1 var(--f-texte); color: var(--bone); background: rgba(0, 0, 0, .45);
    border: 0; border-radius: 50%; cursor: pointer; opacity: 0;
}
.hf-case:hover .hf-case__x, .hf-case__x:focus-visible, .hf-case:focus-within .hf-case__x { opacity: 1; }
@media (hover: none) { .hf-case__x { opacity: .8; } }

.hf-grille__detail { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--bone-dim); word-spacing: .1em; }
.hf-rendre {
    justify-self: start; padding: .4em .9em .45em;
    font: 700 1rem/1 var(--f-cond); color: var(--bone-dim); background: transparent;
    border: 1.5px solid var(--ligne); cursor: pointer;
}
.hf-rendre:hover { color: var(--bone); border-color: var(--bone); }

@media (max-width: 860px) {
    .hf-plateau { grid-template-columns: 1fr; }
    .hf-palette { position: static; max-height: none; }
    .hf-palette__liste { display: flex; flex-wrap: wrap; max-height: 14rem; }
    .hf-case { min-height: 3.6rem; font-size: .9rem; }
}

.hf-page--voir { max-width: none; }
.hf-grilles--lecture { margin-top: 1.4rem; }

.hf-grille__detail { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.hf-grille__detail span { white-space: nowrap; }
.hf-grille__detail b { font-weight: 700; }
.hf-grille__detail .is-gain { color: var(--bone); }

/* ============================================================ navigation */

.hf-menu { flex-wrap: wrap; gap: .4rem 1.5rem; }
@media (max-width: 900px) {
    .hf-bar { grid-template-columns: 1fr auto; row-gap: .7rem; }
    .hf-menu { grid-column: 1 / -1; grid-row: 2; gap: .3rem 1.2rem; }
}

/* ============================================================== accueil */

.hf-main--plein { width: 100%; max-width: none; padding: 0; }

.hf-hero {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: calc(100vh - 5.2rem); min-height: calc(100svh - 5.2rem);
    display: grid; place-items: center; text-align: center;
    background:
        radial-gradient(70% 55% at 50% 100%, rgba(150, 24, 18, .55), transparent 70%),
        linear-gradient(#0d0808, #170b0a 60%, #240c0b);
}
.hf-hero__braises { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

.hf-hero__centre { position: relative; z-index: 2; padding: 2rem 1.2rem 3rem; display: grid; justify-items: center; gap: .3rem; }

.hf-hero__avant {
    margin: 0; font: 700 clamp(.95rem, 2vw, 1.25rem)/1 var(--f-cond);
    letter-spacing: .5em; text-indent: .5em; text-transform: uppercase; color: var(--bone-dim);
}

.hf-hero__titre {
    margin: .2rem 0 0; display: flex; justify-content: center;
    font: 400 clamp(4.6rem, 18vw, 13rem)/.95 var(--f-display);
    color: var(--bone);
}
.hf-hero__titre span {
    display: inline-block;
}

.hf-hero__filet { display: flex; align-items: center; gap: .9rem; width: min(30rem, 78vw); margin: 1.1rem 0 .5rem; }
.hf-hero__filet i { flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--blood)); }
.hf-hero__filet i:first-child { transform-origin: 100% 50%; }
.hf-hero__filet i:last-child { transform-origin: 0 50%; background: linear-gradient(270deg, transparent, var(--blood)); }
.hf-hero__filet b { width: .8rem; height: .8rem; background: var(--blood); rotate: 45deg; box-shadow: 0 0 18px 3px rgba(220, 40, 30, .7); }

.hf-hero__bingo { margin: 1.1rem 0 0; }
.hf-hero__bingo span {
    display: inline-block; font: 800 clamp(1.5rem, 4vw, 2.6rem)/1 var(--f-cond); letter-spacing: .12em; text-indent: .12em; text-transform: uppercase;
    background: var(--blood); color: var(--bone); padding: .22em .7em .28em; rotate: -3deg;
    box-shadow: 4px 5px 0 var(--oxblood), 0 0 34px rgba(190, 30, 24, .5);
}

@keyframes hf-lettre { from { opacity: 0; transform: translateY(.45em) scale(.9); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes hf-braise {
    0%, 100% { text-shadow: 0 0 .12em rgba(255, 90, 40, .15), 0 0 .5em rgba(190, 30, 24, .25); }
    50%      { text-shadow: 0 0 .1em rgba(255, 140, 60, .5), 0 0 .55em rgba(220, 50, 30, .7), 0 .06em .9em rgba(120, 10, 10, .8); }
}
@keyframes hf-monte { from { opacity: 0; transform: translateY(.8rem); } to { opacity: 1; transform: none; } }
@keyframes hf-filet { to { transform: scaleX(1); } }
@keyframes hf-pouls { 0%, 100% { scale: 1; } 50% { scale: 1.35; } }
@keyframes hf-lueur { 0%, 100% { opacity: .75; scale: .96; } 50% { opacity: 1; scale: 1.05; } }
@keyframes hf-tampon-accueil { from { opacity: 0; transform: scale(2.4) rotate(8deg); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .hf-hero *, .hf-hero *::before { animation: none !important; }
    .hf-hero__filet i { transform: none; }
}

/* ============================================================== set list */

.hf-rond {
    position: relative; display: grid; place-items: center; overflow: hidden;
    width: 100%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #3a2c28, #1c1412);
    border: 3px solid var(--bone-dim);
    font: 400 2.2rem/1 var(--f-display); color: var(--bone-dim);
}
.hf-rond img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hf-rond--petit { width: 2.8rem; flex: none; border-width: 2px; font-size: 1.4rem; }

.hf-chercheur { max-width: 38rem; }
.hf-chercheur label { display: block; font: 700 1.35rem/1 var(--f-cond); margin-bottom: .5rem; }
.hf-chercheur__champ { position: relative; }
.hf-chercheur input {
    width: 100%; font: 600 1.7rem/1.2 var(--f-cond); color: var(--bone);
    background: rgba(255, 255, 255, .04); border: 2px solid var(--bone-dim);
    padding: .55rem .9rem .6rem; border-radius: 0; -webkit-appearance: none; appearance: none;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.hf-chercheur input::placeholder { color: var(--ash); opacity: 1; }
.hf-chercheur input:focus { outline: none; border-color: var(--bone); background: rgba(255, 255, 255, .07); box-shadow: 0 4px 0 -1px var(--blood); }

.hf-chercheur__liste {
    position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
    margin: 0; padding: .3rem; list-style: none;
    max-height: min(26rem, 60vh); overflow: auto;
    background: #1b1412; border: 2px solid var(--bone);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .65), 5px 5px 0 var(--blood);
}
.hf-resultat {
    display: flex; align-items: center; gap: .8rem; padding: .45rem .6rem; cursor: pointer;
    border: 2px solid transparent;
}
.hf-resultat.is-actif { background: var(--blood); border-color: var(--bone); }
.hf-resultat.is-deja { opacity: .5; }
.hf-resultat__txt { flex: 1; min-width: 0; display: grid; }
.hf-resultat__nom { font: 700 1.35rem/1.1 var(--f-cond); text-transform: uppercase; }
.hf-resultat__genre { font: 400 .85rem/1.2 var(--f-texte); color: var(--bone-dim); }
.hf-resultat.is-actif .hf-resultat__genre { color: var(--bone); opacity: .85; }
.hf-resultat__etat { flex: none; font: 700 .9rem/1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--ash); }
.hf-resultat.is-actif .hf-resultat__etat { color: var(--bone); }

.hf-h2--liste { display: flex; align-items: baseline; gap: .8rem; }
.hf-compte-liste b { font: 700 1.5rem/1 var(--f-cond); background: var(--blood); padding: .15em .55em .2em; border-radius: 999px; }

.hf-vignettes {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(7.4rem, 1fr)); gap: 1.6rem 1rem;
}
.hf-vignette { display: grid; justify-items: center; gap: .55rem; text-align: center; }
.hf-vignette__rond { position: relative; width: 6.4rem; transition: transform .2s cubic-bezier(.3, 1.5, .5, 1); }
.hf-vignette:hover .hf-vignette__rond { transform: translateY(-4px) scale(1.05); }
.hf-vignette__nom { font: 800 1.1rem/1.05 var(--f-cond); text-transform: uppercase; overflow-wrap: anywhere; }
.hf-vignette.is-hit .hf-rond { border-color: var(--blood); box-shadow: 0 0 0 3px rgba(177, 22, 29, .35), 0 0 22px rgba(177, 22, 29, .6); }
.hf-vignette.is-nouveau .hf-vignette__rond { animation: hf-pop .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hf-pop { from { transform: scale(.2) rotate(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }

.hf-vignette__rond .hf-pastille, .hf-pion-rond__rond .hf-pastille {
    position: absolute; top: -.2rem; right: -.2rem; margin: 0; vertical-align: 0;
    min-width: 1.7rem; height: 1.7rem; font-size: 1rem; border: 2px solid #17110f; z-index: 2;
}
.hf-vignette__x {
    position: absolute; left: -.2rem; top: -.2rem; width: 1.7rem; height: 1.7rem; padding: 0; z-index: 2;
    font: 700 1.1rem/1 var(--f-texte); color: var(--bone); background: #17110f; border: 2px solid var(--bone-dim);
    border-radius: 50%; cursor: pointer; opacity: 0; transition: opacity .12s, background-color .12s;
}
.hf-vignette:hover .hf-vignette__x, .hf-vignette__x:focus-visible { opacity: 1; }
.hf-vignette__x:hover { background: var(--blood); }
@media (hover: none) { .hf-vignette__x { opacity: .9; } }

/* ============================================================== boutique */

.hf-rayon, .hf-sac, .hf-cartes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

.hf-article {
    display: grid; justify-items: start; gap: .5rem; padding: 1.1rem;
    background: #1c1614; border: 2px solid var(--ligne);
    transition: border-color .15s, transform .15s;
}
.hf-rayon .hf-article:hover { border-color: var(--bone-dim); transform: translateY(-2px); }
.hf-article__nom { font: 800 1.9rem/1 var(--f-cond); letter-spacing: .02em; }
.hf-article__info { color: var(--bone-dim); font-size: .95rem; }
.hf-article .hf-btn { margin-top: .4rem; }
.hf-article__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: .4rem; }

.hf-mini { display: grid; grid-template-columns: repeat(var(--c), 1fr); gap: 3px; width: 100%; max-width: 9.5rem; margin-bottom: .3rem; }
.hf-mini i { aspect-ratio: 1; background: #2c2220; border: 1px solid #4a3f3b; }
.hf-mini i.is-plein { background: #7a6a63; border-color: #8c7a72; }
.hf-mini i.is-hit { background: var(--blood); border-color: var(--bone); }

/* ================================================================ bingo */

.hf-bingo__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }

.hf-carte { margin: 0; }
.hf-carte__bouton {
    width: 100%; display: grid; justify-items: start; gap: .4rem; padding: 1.1rem; text-align: left; cursor: pointer;
    color: var(--bone); font: inherit; background: #1c1614; border: 2px solid var(--ligne);
    transition: border-color .15s, transform .15s, background-color .15s;
}
.hf-carte__bouton:hover { border-color: var(--bone); background: #241b18; transform: translateY(-3px); }
.hf-carte.is-complete .hf-carte__bouton { border-color: #d9a441; box-shadow: 0 0 24px rgba(217, 164, 65, .16); }
.hf-carte__nom { font: 800 1.5rem/1 var(--f-cond); text-transform: uppercase; letter-spacing: .03em; }
.hf-carte__info { color: var(--bone-dim); font-size: .92rem; }
.hf-carte__pts { font: 600 1.1rem/1 var(--f-cond); color: var(--bone-dim); }
.hf-carte__pts b { font: 400 2rem/1 var(--f-display); color: var(--bone); }
.hf-carte__ouvrir { font: 800 1.1rem/1 var(--f-cond); color: var(--bone); border-bottom: 2px solid var(--blood); padding-bottom: .15rem; }

.hf-retour { margin: 0 0 1rem; }
.hf-lien { background: none; border: 0; padding: .2rem 0; color: var(--bone-dim); font: 700 1.2rem/1 var(--f-cond); cursor: pointer; border-bottom: 2px solid transparent; }
.hf-lien:hover { color: var(--bone); border-bottom-color: var(--blood); }

.hf-atelier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 22rem); gap: clamp(1.2rem, 3vw, 2.6rem); align-items: start; }
.hf-atelier__grille { padding: 1rem 1rem .9rem; background: #1c1614; border: 2px solid var(--ligne); display: grid; gap: .8rem; }
.hf-atelier__grille.is-complete { border-color: #d9a441; box-shadow: 0 0 0 2px rgba(217, 164, 65, .25), 0 0 28px rgba(217, 164, 65, .18); }
.hf-atelier__grille .hf-grille__tete h2 { margin: 0; font: 800 1.5rem/1 var(--f-cond); text-transform: uppercase; letter-spacing: .03em; }
.hf-atelier__liste { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); display: flex; flex-direction: column; }
.hf-atelier__liste .hf-h2 { margin: 0 0 .5rem; }

.hf-plan--grand { gap: 7px; }
.hf-plan--grand .hf-case { min-height: 6.2rem; gap: .25rem; align-content: center; }
.hf-rond--case { width: 2.6rem; border-width: 2px; font-size: 1.2rem; }
.hf-case .hf-case__nom { font-size: .95rem; }

.hf-ronds { list-style: none; margin: 0; padding: .6rem .3rem .3rem; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: 1.1rem .6rem; }
.hf-pion-rond { display: grid; justify-items: center; gap: .35rem; text-align: center; cursor: grab; user-select: none; }
.hf-pion-rond__rond { position: relative; width: 4.4rem; transition: transform .18s cubic-bezier(.3, 1.5, .5, 1), filter .15s; }
.hf-pion-rond:hover:not(.is-ici) .hf-pion-rond__rond { transform: scale(1.1); }
.hf-pion-rond__rond .hf-rond { font-size: 1.7rem; }
.hf-pion-rond__nom { font: 800 .95rem/1.05 var(--f-cond); text-transform: uppercase; overflow-wrap: anywhere; }
.hf-pion-rond.is-main .hf-rond { border-color: var(--bone); box-shadow: 0 0 0 4px var(--blood), 0 0 24px rgba(177, 22, 29, .8); }
.hf-pion-rond.is-ici { cursor: default; opacity: .38; }
.hf-pion-rond.is-ici .hf-rond { filter: grayscale(1); }
.hf-pion-rond__rond .hf-pastille { top: -.3rem; right: -.3rem; min-width: 1.5rem; height: 1.5rem; font-size: .9rem; }

@media (max-width: 900px) {
    .hf-atelier { grid-template-columns: 1fr; }
    .hf-atelier__liste { position: static; max-height: none; }
    .hf-plan--grand .hf-case { min-height: 5rem; }
}

/* ===================================================== messages d'accueil */

.hf-hero__centre { width: min(46rem, 100%); }

.hf-annonce {
    margin-top: 1.8rem; padding: 1.4rem 1.6rem 1.5rem; text-align: left;
    background: rgba(16, 9, 8, .72); border: 2px solid rgba(232, 221, 198, .28);
    border-left: 6px solid var(--blood);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .5);
}
.hf-annonce h2 { margin: 0 0 .5rem; font: 400 2rem/1 var(--f-display); }
.hf-annonce p { margin: .5rem 0 0; color: var(--bone-dim); }
.hf-annonce--court { text-align: center; border-left-width: 2px; padding: 1rem 1.4rem; }
.hf-annonce--court p { margin: 0; font: 600 1.3rem/1.3 var(--f-cond); letter-spacing: .02em; color: var(--bone); }

.hf-annonce__etapes { margin: .9rem 0 0; padding: 0; list-style: none; display: grid; gap: .45rem; counter-reset: etape; }
.hf-annonce__etapes li { counter-increment: etape; display: flex; gap: .7rem; align-items: baseline; color: var(--bone-dim); }
.hf-annonce__etapes li::before {
    content: counter(etape); flex: none; display: inline-grid; place-items: center;
    width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--blood); color: var(--bone);
    font: 800 1rem/1 var(--f-cond);
}
.hf-annonce__etapes b { color: var(--bone); font-family: var(--f-cond); font-size: 1.15rem; letter-spacing: .02em; text-transform: uppercase; }
.hf-annonce__live { color: var(--bone) !important; }
.hf-annonce__live b { font-weight: 700; }

.hf-annonce__compte { display: flex; align-items: baseline; gap: .7rem; margin-top: .8rem !important; }
.hf-annonce__compte span { font: 700 1.1rem/1 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); }
.hf-annonce__compte time { font: 400 clamp(2rem, 6vw, 3.2rem)/1 var(--f-display); color: var(--bone); font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(220, 50, 30, .6); }

.hf-annonce__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.2rem !important; }
.hf-btn--clair { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 2px var(--bone), 4px 4px 0 var(--oxblood); }
.hf-btn--clair:hover { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 2px var(--bone), 6px 6px 0 var(--oxblood); }

.hf-hero--avant .hf-hero__bingo span { letter-spacing: .3em; text-indent: .3em; }


/* Deux présentateurs : NOIZ TV × LE_BLOC_ */
.hf-hero__avant { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .15rem .9rem; letter-spacing: .32em; text-indent: 0; }
.hf-hero__avant b { font-weight: 800; color: var(--bone); letter-spacing: .3em; }
.hf-hero__avant i { font-style: normal; color: var(--blood); font-size: 1.2em; letter-spacing: 0; text-shadow: 0 0 14px rgba(220, 40, 30, .8); }
.hf-hero__avant span { flex-basis: 100%; margin-top: .35rem; font-weight: 600; letter-spacing: .5em; text-indent: .5em; }
.hf-annonce__bientot { margin: 0 0 .3rem !important; font: 400 clamp(2rem, 6vw, 3rem)/1 var(--f-display) !important; }
.hf-hero--avant .hf-hero__bingo span { letter-spacing: .12em; text-indent: .12em; }


/* ================================================================ grunge
 * Une couche d'ambiance sur tout le site : fournaise, braises, grain de
 * pellicule, rayures, papier abîmé. Rien de tout ça n'est indispensable :
 * « réduire les animations » coupe le mouvement et ne laisse que les textures.
 */

.hf-bar, .hf-main, .hf-pied { position: relative; z-index: 1; }

/* ---- le fond fixe, derrière tout */
.hf-fond { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hf-fond > * { position: absolute; display: block; }

.hf-fond__lave {
    left: -10%; right: -10%; bottom: -12vh; height: 62vh;
    background:
        radial-gradient(55% 80% at 50% 100%, rgba(200, 36, 22, .42), transparent 70%),
        radial-gradient(30% 50% at 18% 100%, rgba(255, 110, 30, .22), transparent 70%),
        radial-gradient(30% 50% at 84% 100%, rgba(255, 90, 30, .2), transparent 70%);
    animation: hf-respire 6s ease-in-out infinite;
}

#hf-braises-fond { inset: 0; width: 100%; height: 100%; opacity: .9; }

.hf-fond__grain {
    inset: -60%;
    background-image: var(--grain-mur); background-size: 220px;
    opacity: .9; animation: hf-pellicule .9s steps(1) infinite;
}
.hf-fond__vignette { inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .45) 100%); }

/* ---- la barre : une mèche qui brûle sous le menu */
.hf-bar { border-bottom: 0; }
.hf-bar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--blood) 18%, #ff7a2a 32%, var(--blood) 46%, rgba(232, 221, 198, .25) 70%, transparent);
    background-size: 220% 100%;
    box-shadow: 0 0 12px rgba(177, 22, 29, .7);
    animation: hf-meche 7s linear infinite;
}
.hf-menu a { transition: color .15s, text-shadow .15s, border-color .15s; }
.hf-menu a:hover { text-shadow: 0 0 14px rgba(220, 50, 30, .85); border-bottom-color: var(--oxblood); }

/* ---- les titres : encre, braise et un peu de grésillement */
/* ---- papier abîmé : cartes, grilles, encadrés */
.hf-grille, .hf-carte__bouton, .hf-atelier__grille, .hf-statut, .hf-palette {
    background-image:
        var(--grain-mur),
        radial-gradient(circle at 88% 8%, rgba(120, 16, 18, .3), transparent 42%),
        radial-gradient(circle at 4% 98%, rgba(0, 0, 0, .55), transparent 52%);
    box-shadow: inset 0 0 36px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .55);
}
.hf-grille.is-complete { box-shadow: inset 0 0 36px rgba(0, 0, 0, .45), 0 0 0 2px rgba(217, 164, 65, .25), 0 0 28px rgba(217, 164, 65, .18); }
.hf-carte.is-complete .hf-carte__bouton { box-shadow: inset 0 0 36px rgba(0, 0, 0, .45), 0 0 24px rgba(217, 164, 65, .16); }
.hf-carte__bouton { transition: border-color .15s, transform .18s, background-color .15s, box-shadow .2s; }
.hf-carte__bouton:hover { box-shadow: inset 0 0 36px rgba(0, 0, 0, .4), 0 10px 30px rgba(177, 22, 29, .28); }

/* ---- les groupes annoncés prennent feu */
.hf-case.is-hit {
    background-image: linear-gradient(0deg, rgba(255, 150, 40, .5), transparent 75%);
    animation: hf-braise 2.4s ease-in-out infinite;
}
.hf-case.is-hit:nth-child(3n) { animation-delay: -.8s; }
.hf-case.is-hit:nth-child(3n+1) { animation-delay: -1.6s; }
.hf-mini i.is-hit { animation: hf-braise 2.4s ease-in-out infinite; }
.hf-vignette.is-hit .hf-rond { animation: hf-braise-rond 2.2s ease-in-out infinite; }
.hf-barres li.is-hit .hf-barres__barre { background: linear-gradient(90deg, var(--blood), #ff7a2a); box-shadow: 0 0 12px rgba(255, 90, 30, .6); }
.hf-act.is-hit .hf-name { text-shadow: 0 0 14px rgba(177, 22, 29, .7); }

/* ---- classement : le podium brûle */
.hf-ligne { position: relative; transition: background-color .2s; }
.hf-ligne:hover { background-color: rgba(177, 22, 29, .1); }
.hf-ligne.is-podium::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, var(--blood), #ff7a2a 40%, transparent 85%);
    animation: hf-braise-ligne 2.2s ease-in-out infinite;
}
.hf-rang > .is-podium:first-child .hf-ligne__rang { color: #ffb347; text-shadow: 0 0 20px rgba(255, 120, 30, .9), 0 0 4px rgba(255, 200, 100, .8); }
.hf-rang > .is-podium .hf-ligne__rang { text-shadow: 0 0 14px rgba(177, 22, 29, .8); }

/* ---- boutons : on les tamponne */
.hf-btn { transition: transform .12s, box-shadow .12s; }
.hf-btn:hover { transform: translate(-1px, -2px) rotate(-.7deg); }
.hf-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--blood); }
.hf-annonce { box-shadow: 0 24px 50px rgba(0, 0, 0, .5), inset 0 0 40px rgba(0, 0, 0, .5); }

/* ---- pied : la même mèche, éteinte */
.hf-pied { border-top: 0; }
.hf-pied::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 221, 198, .3) 30%, rgba(177, 22, 29, .6) 70%, transparent);
}

/* ---- images clés */
@keyframes hf-respire { 0%, 100% { opacity: .75; transform: scaleY(.95); } 50% { opacity: 1; transform: scaleY(1.08); } }
@keyframes hf-pellicule {
    0% { transform: translate(0, 0); } 17% { transform: translate(-4%, 3%); } 34% { transform: translate(3%, -5%); }
    51% { transform: translate(-6%, -2%); } 68% { transform: translate(5%, 4%); } 85% { transform: translate(-2%, 6%); }
}
@keyframes hf-meche { to { background-position: -220% 0; } }
@keyframes hf-neon {
    0%, 6%, 9%, 52%, 55%, 100% { opacity: 1; }
    7% { opacity: .55; } 8% { opacity: .9; } 53% { opacity: .6; } 54% { opacity: 1; }
}
@keyframes hf-braise { 0%, 100% { box-shadow: 2px 2px 0 var(--oxblood), 0 0 6px rgba(255, 90, 30, .35); } 50% { box-shadow: 2px 2px 0 var(--oxblood), 0 0 20px rgba(255, 110, 40, .85); } }
@keyframes hf-braise-rond { 0%, 100% { box-shadow: 0 0 0 3px rgba(177, 22, 29, .35), 0 0 14px rgba(177, 22, 29, .5); } 50% { box-shadow: 0 0 0 3px rgba(255, 90, 30, .5), 0 0 30px rgba(255, 110, 40, .9); } }
@keyframes hf-braise-ligne { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

@media (max-width: 860px) {
    .hf-fond__grain { animation-duration: 1.4s; }
}

@media (prefers-reduced-motion: reduce) {
    .hf-fond *, .hf-bar::after, .hf-case.is-hit, .hf-mini i.is-hit, .hf-vignette.is-hit .hf-rond,
    .hf-ligne.is-podium::after, .hf-rang .hf-ligne__rang { animation: none !important; }
}


/* ================================================== accueil : l'essentiel, centré */
.hf-annonce {
    margin-top: 1.6rem; padding: 0; text-align: center;
    background: none; border: 0; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
}
.hf-annonce p { margin: 0; }
.hf-annonce__titre { font: 400 clamp(2rem, 6vw, 3.2rem)/1.05 var(--f-display); color: var(--bone); }
.hf-annonce__live { margin-top: .7rem !important; font: 600 clamp(1.1rem, 2.6vw, 1.4rem)/1.3 var(--f-cond); letter-spacing: .03em; color: var(--bone-dim) !important; }
.hf-annonce__live b { color: var(--bone); }
.hf-annonce__actions { justify-content: center; align-items: center; margin-top: 1.6rem !important; }
.hf-lien-clair { font: 700 1.2rem/1 var(--f-cond); color: var(--bone-dim); text-decoration: none; padding: .3rem .1rem; border-bottom: 2px solid transparent; }
.hf-lien-clair:hover { color: var(--bone); border-bottom-color: var(--blood); }

.hf-compte { display: flex; justify-content: center; align-items: flex-start; gap: clamp(.6rem, 2.6vw, 1.8rem); margin-top: 1.4rem; }
.hf-compte__bloc { display: grid; justify-items: center; gap: .35rem; min-width: clamp(3.6rem, 14vw, 8rem); }
.hf-compte__bloc[hidden] { display: none; }
.hf-compte__bloc b { font: 400 clamp(3.4rem, 13vw, 8rem)/.9 var(--f-display); color: var(--bone); font-variant-numeric: tabular-nums; text-shadow: 0 0 .3em rgba(190, 30, 24, .55); }
.hf-compte__bloc i { font: 700 clamp(.8rem, 2vw, 1.1rem)/1 var(--f-cond); font-style: normal; letter-spacing: .22em; text-indent: .22em; text-transform: uppercase; color: var(--bone-dim); }


/* ============================================================== fenêtres
 * Plus jamais de fenêtre du navigateur : une boîte à elle, dans l'ambiance.
 */
.hf-modal {
    position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1.2rem;
    background: rgba(6, 3, 3, .8); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    animation: hf-fondu .16s ease-out;
}
.hf-modal__boite {
    width: min(30rem, 100%); text-align: center; padding: 2rem 1.7rem 1.8rem;
    color: var(--bone); border: 2px solid rgba(232, 221, 198, .3); border-top: 6px solid var(--blood);
    background: var(--grain-mur), radial-gradient(90% 70% at 50% 0, rgba(150, 22, 26, .38), transparent 70%), #18100f;
    box-shadow: 0 0 0 1px #000, 0 30px 80px rgba(0, 0, 0, .75), 0 0 60px rgba(170, 25, 25, .22);
}
.hf-modal__titre { margin: 0; font: 400 clamp(1.9rem, 6vw, 2.5rem)/1.05 var(--f-display); }
.hf-modal__texte { margin: .8rem 0 0; color: var(--bone-dim); font-size: 1.1rem; line-height: 1.45; }
.hf-modal__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.2rem; margin-top: 1.8rem; }
@keyframes hf-fondu { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hf-modal { animation: none; } }

/* ============================================================== centrage */
.hf-page { margin-inline: auto; }
.hf-titre--page, .hf-h2, .hf-chapo, .hf-vide, .hf-msg, .hf-statut, .hf-suite, .hf-jetons__aide { text-align: center; }
.hf-chapo, .hf-jetons__aide, .hf-statut { margin-inline: auto; }
.hf-statut { border-left: 0; border-top: 6px solid var(--blood); }
.hf-statut--clos { border-top-color: var(--ash); }
.hf-connexion { justify-items: center; }
.hf-connexion, .hf-recherche, .hf-chercheur { margin-inline: auto; text-align: center; }
.hf-recherche input, .hf-chercheur input { text-align: center; }
.hf-jetons__tete { justify-content: center; gap: 1.4rem; }
.hf-jetons__pile, .hf-chips { justify-content: center; }
.hf-bingo__tete { flex-direction: column; align-items: center; gap: .3rem; }
.hf-rayon, .hf-sac, .hf-cartes { grid-template-columns: repeat(auto-fit, minmax(15rem, 18rem)); justify-content: center; }
.hf-grilles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 28rem)); justify-content: center; }
.hf-vignettes { grid-template-columns: repeat(auto-fit, minmax(7.4rem, 8.4rem)); justify-content: center; }
.hf-retour { text-align: center; }
.hf-atelier__liste .hf-h2, .hf-palette__aide { text-align: center; }
.hf-fiche { max-width: 66rem; margin-inline: auto; align-items: center; }
.hf-fiche > section:first-child { text-align: center; display: grid; justify-items: center; }
.hf-fiche .hf-chapo { max-width: 32rem; }
.hf-fiche .hf-recherche { width: 100%; }
.hf-flyer-wrap { margin-inline: auto; }
.hf-annonces h2 { text-align: center; }
.hf-pied p { margin-inline: auto; text-align: center; }
.hf-article { justify-items: center; text-align: center; }
.hf-article__actions { justify-content: center; }


/* ================================================================ boutique */
.hf-boutique { max-width: 70rem; }

.hf-jetons { margin: 0 0 2.2rem; display: grid; justify-items: center; gap: .8rem; }
.hf-jetons__pile { justify-content: center; gap: .7rem; }
.hf-jetons__total { margin: 0; font: 700 1.25rem/1 var(--f-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); }
.hf-jetons__total b { font: 400 2.4rem/1 var(--f-display); color: var(--bone); letter-spacing: 0; margin-right: .1em; }

.hf-vitrine { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; }

.hf-vitrine .hf-rayon { grid-template-columns: repeat(auto-fit, 13.5rem); justify-content: center; gap: 1.3rem; }

.hf-format {
    display: grid; grid-template-rows: 7.6rem auto auto auto; justify-items: center; align-items: center; gap: .55rem;
    height: 100%; padding: 1.2rem 1rem 1.3rem; text-align: center; list-style: none;
    background-image: var(--grain-mur), radial-gradient(circle at 88% 8%, rgba(120, 16, 18, .3), transparent 42%), radial-gradient(circle at 4% 98%, rgba(0, 0, 0, .55), transparent 52%);
    background-color: #1c1614; border: 2px solid var(--ligne);
    box-shadow: inset 0 0 36px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(0, 0, 0, .55);
    cursor: default; color: var(--bone);
    transition: border-color .15s, box-shadow .2s;
}
.hf-format.a-des { border-color: rgba(232, 221, 198, .55); box-shadow: inset 0 0 36px rgba(0, 0, 0, .45), 0 0 26px rgba(177, 22, 29, .28); }
.hf-format__apercu { display: grid; place-items: center; width: 100%; height: 100%; }
.hf-format__apercu .hf-mini { width: 6.2rem; }
.hf-format__nom { font: 800 2rem/1 var(--f-cond); letter-spacing: .04em; }
.hf-format__info { color: var(--bone-dim); font-size: .92rem; }

.hf-compteur { display: flex; align-items: center; justify-content: center; gap: .9rem; margin-top: .4rem; }
.hf-compteur__n { min-width: 2.2ch; font: 400 2.6rem/1 var(--f-display); color: var(--bone); font-variant-numeric: tabular-nums; }
.hf-recap {
    position: sticky; top: 1rem; padding: 1.3rem 1.2rem 1.4rem; display: grid; gap: .9rem; justify-items: stretch; text-align: center;
    background-image: var(--grain-mur), radial-gradient(circle at 88% 8%, rgba(120, 16, 18, .3), transparent 50%);
    background-color: #1c1614; border: 2px solid var(--ligne); border-top: 6px solid var(--blood);
    box-shadow: inset 0 0 36px rgba(0, 0, 0, .5);
}
.hf-recap__titre { margin: 0; font: 400 2rem/1 var(--f-display); }
.hf-recap__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.hf-recap__ligne { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .2rem; border-bottom: 1px solid var(--ligne); font: 700 1.25rem/1 var(--f-cond); letter-spacing: .03em; text-align: left; }
.hf-recap__ligne b { font: 400 1.7rem/1 var(--f-display); color: var(--bone); }
.hf-recap .hf-vide { margin: 0; }
.hf-recap__total { margin: 0; font: 700 1rem/1.2 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); }
.hf-recap .hf-btn { justify-self: center; }

@media (max-width: 900px) {
    .hf-vitrine { grid-template-columns: minmax(0, 1fr); }
    .hf-recap { position: static; max-width: 26rem; width: 100%; margin-inline: auto; }
}
@media (max-width: 480px) {
    .hf-vitrine .hf-rayon { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
    .hf-format { padding-inline: .6rem; }
    .hf-format__nom { font-size: 1.7rem; }
    .hf-format__info { font-size: .82rem; }
    .hf-compteur { gap: .5rem; }
    .hf-pm { width: 2.5rem; height: 2.5rem; }
}

/* La fenêtre « quelle grille retirer ? » */
.hf-modal__boite--large { width: min(38rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; }
.hf-choix { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .8rem; text-align: left; }
.hf-choix__ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .8rem; background: rgba(0, 0, 0, .35); border: 1px solid var(--ligne); }
.hf-choix__ligne .hf-mini { width: 4.6rem; }
.hf-choix__txt { display: grid; gap: .2rem; min-width: 0; }
.hf-choix__txt b { font: 800 1.3rem/1.1 var(--f-cond); text-transform: uppercase; letter-spacing: .03em; }
.hf-choix__txt span { color: var(--bone-dim); font-size: .92rem; }
.hf-choix__txt em { color: var(--bone-dim); font-size: .85rem; overflow-wrap: anywhere; }
@media (max-width: 480px) { .hf-choix__ligne { grid-template-columns: auto minmax(0, 1fr); } .hf-choix__ligne .hf-btn { grid-column: 1 / -1; } }


/* ================================================================ boutons
 * Comme sur les affiches du festival : un aplat rouge aux bords usés,
 * passé au rouleau. La forme est dessinée par ::before, à travers le filtre
 * SVG #hf-use (bords qui tremblent, petites usures) ; le texte reste net.
 */
.hf-btn, .hf-add, .hf-rendre, .hf-pm {
    --fond: #df1f28;
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    padding: .85em 1.6em .9em;
    font: 800 1.2rem/1 var(--f-cond); letter-spacing: .05em; text-indent: 0; text-transform: uppercase;
    text-decoration: none; white-space: nowrap; text-shadow: none;
    color: #f7ecd6; background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer;
    transition: transform .12s, color .15s, opacity .15s;
}
.hf-btn::before, .hf-add::before, .hf-rendre::before, .hf-pm::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--fond); border: 0; border-radius: 7px;
    filter: url(#hf-use);
    transition: background-color .15s;
}
.hf-btn:hover, .hf-add:hover:not(:disabled), .hf-rendre:hover, .hf-pm:hover:not(:disabled) { --fond: #f2333b; transform: translateY(-1px); background: none; box-shadow: none; color: #fff6e4; }
.hf-btn:active, .hf-add:active:not(:disabled), .hf-rendre:active, .hf-pm:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.hf-btn:focus-visible, .hf-add:focus-visible, .hf-rendre:focus-visible, .hf-pm:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; }
.hf-btn:disabled, .hf-btn[aria-disabled="true"], .hf-add:disabled, .hf-pm:disabled { opacity: .38; cursor: default; transform: none; }

/* Le contour : un trait rouge tracé à la main. */
.hf-btn--clair, .hf-add, .hf-rendre, .hf-pm:first-child { color: var(--bone); }
.hf-btn--clair::before, .hf-add::before, .hf-rendre::before, .hf-pm:first-child::before {
    background: transparent; border: 2px solid var(--fond);
}
.hf-btn--clair:hover::before, .hf-add:hover:not(:disabled)::before, .hf-rendre:hover::before, .hf-pm:first-child:hover:not(:disabled)::before {
    background: rgba(223, 31, 40, .16);
}

.hf-btn--petit, .hf-add, .hf-rendre { font-size: 1rem; padding: .7em 1.15em .75em; }
.hf-btn--petit::before, .hf-add::before, .hf-rendre::before { border-radius: 6px; }

.hf-pm { width: 2.7rem; height: 2.7rem; padding: 0 0 .08em; font-size: 1.7rem; }
.hf-pm::before { border-radius: 6px; }
@media (max-width: 480px) { .hf-pm { width: 2.45rem; height: 2.45rem; } }

/* ================================================================ liste */
.hf-page.hf-setlist { max-width: 62rem; }
.hf-setlist .hf-chercheur { max-width: none; width: 100%; }
.hf-setlist .hf-chercheur input { text-align: left; }

/* La liste des résultats : dix au plus, à sa hauteur, défilante si besoin. */
.hf-chercheur__liste, .hf-res { text-align: left; }
.hf-chercheur__liste { max-height: min(40rem, 70vh); }

/* ============================================================ défilement */
.hf, .hf * { scrollbar-width: thin; scrollbar-color: #b1161d rgba(0, 0, 0, .3); }
.hf ::-webkit-scrollbar { width: 10px; height: 10px; }
.hf ::-webkit-scrollbar-track { background: rgba(0, 0, 0, .3); }
.hf ::-webkit-scrollbar-thumb { background: linear-gradient(#d21c24, #7a0b11); border: 2px solid #1b1412; border-radius: 6px; }
.hf ::-webkit-scrollbar-thumb:hover { background: #e2262d; }

.hf-setlist .hf-chercheur { justify-self: stretch; }
.hf-h2--liste { justify-content: center; }


/* La pastille ne s'affiche pas à zéro. */
.hf-pastille[hidden] { display: none; }

/* Boutique : le maximum de points possible, en tête du résumé. */
.hf-recap__max { margin: -.2rem 0 .2rem; display: grid; justify-items: center; gap: .25rem; }
.hf-recap__max b { font: 400 2.8rem/1 var(--f-display); color: var(--bone); text-shadow: 0 0 .3em rgba(190, 30, 24, .5); font-variant-numeric: tabular-nums; }
.hf-recap__max span { font: 700 .95rem/1 var(--f-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-dim); }
.hf-recap__max[hidden] { display: none; }

/* ============================================================== set list */
.hf-sl { align-items: start; }
.hf-sl__gauche { display: grid; justify-items: center; text-align: center; min-width: 0; }
.hf-sl .hf-chapo { max-width: 36rem; }
.hf-sl .hf-chapo b { color: var(--bone); font-weight: 600; }

.hf-sl__etapes { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .4rem 0 1rem; }
.hf-sl__etape {
    display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .9rem .65rem;
    font: 800 1.05rem/1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--bone-dim);
    background: rgba(0, 0, 0, .3); border: 0; border-bottom: 3px solid transparent; cursor: pointer;
    transition: color .15s, border-color .15s, background-color .15s;
}
.hf-sl__etape:hover { color: var(--bone); }
.hf-sl__etape b { font-weight: 700; color: var(--ash); font-variant-numeric: tabular-nums; }
.hf-sl__num { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: .9rem; color: var(--bone); background: rgba(232, 221, 198, .14); }
.hf-sl__etape.is-actif { color: var(--bone); border-bottom-color: #df1f28; background: rgba(223, 31, 40, .12); }
.hf-sl__etape.is-actif .hf-sl__num { background: #df1f28; }
.hf-sl__etape.is-complet b { color: var(--bone); }
.hf-sl__etape.is-complet .hf-sl__num::after { content: ""; }

.hf-sl__aide { margin: 0 0 1rem; color: var(--bone-dim); min-height: 1.5em; }

.hf-sl__artistes {
    list-style: none; margin: 0; padding: .2rem .4rem .4rem 0; width: 100%;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .5rem;
    max-height: min(34rem, 62vh); overflow: auto;
}
.hf-sl__artiste {
    width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem;
    padding: .45rem .7rem .45rem .45rem; text-align: left; cursor: pointer; color: var(--bone);
    background: rgba(28, 22, 20, .85); border: 2px solid var(--ligne);
    transition: border-color .15s, background-color .15s, opacity .15s;
}
.hf-sl__artiste:hover:not(:disabled) { border-color: var(--bone-dim); background: #241b18; }
.hf-sl__artiste:disabled { cursor: default; }
.hf-sl__artiste.is-choisi { border-color: #df1f28; background: rgba(223, 31, 40, .16); }
.hf-sl__nom { font: 800 1.15rem/1.1 var(--f-cond); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: anywhere; }
.hf-sl__marque { display: flex; align-items: center; gap: .35rem; }
.hf-sl__tag { font: 700 .72rem/1 var(--f-cond); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--bone-dim); padding: .25em .45em; border: 1px solid var(--ligne); white-space: nowrap; }
.hf-sl__artiste.is-tete .hf-sl__tag { color: var(--bone); border-color: rgba(232, 221, 198, .5); }
.hf-sl__rien { grid-column: 1 / -1; padding: 1rem; color: var(--bone-dim); font-style: italic; text-align: center; }

/* La pièce : ce sur quoi on parie. */
.hf-piece {
    display: inline-grid; place-items: center; flex: none; width: 1.35em; height: 1.35em; border-radius: 50%;
    font: 400 .8em/1 var(--f-display); color: #5a3a08;
    background: radial-gradient(circle at 35% 30%, #fff1b8, #e0ad45 45%, #96661a 100%);
    box-shadow: inset 0 0 0 2px rgba(90, 58, 8, .35), 0 1px 2px rgba(0, 0, 0, .5);
    vertical-align: middle;
}

/* Le flyer : les têtes d'affiche en gros, les coups de cœur en dessous. */
.hf-sl__bloc { margin: 1.1rem 0 .3rem; font: 800 .9rem/1 var(--f-cond); letter-spacing: .22em; text-transform: uppercase; opacity: .6; }
.hf-sl__lineup .hf-act { font-size: 1.45rem; }
.hf-sl__lineup--tete .hf-act { font-size: clamp(1.8rem, 3.6vw, 2.3rem); }
.hf-sl__lineup .hf-act .hf-piece { margin-left: .25em; font-size: .6em; }
.hf-sl__lineup .hf-x { margin-left: .2em; }
.hf-sl__trou { margin: .2rem 0 0; font: italic 500 1.05rem/1.2 var(--f-cond); opacity: .45; }
.hf-sl__trou[hidden] { display: none; }
.hf-sl__pied { display: flex; align-items: center; gap: .4rem; margin-top: 1.2rem; padding-top: .7rem; border-top: 2px solid rgba(23, 17, 15, .25); }

@media (max-width: 860px) {
    .hf-sl__artistes { max-height: none; overflow: visible; padding-right: 0; }
}

/* Set list : le nom sur une ligne, l'étiquette dessous ; des onglets plus compacts. */
.hf-sl__artiste { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; row-gap: .3rem; }
.hf-sl__artiste > .hf-rond { grid-row: 1 / span 2; }
.hf-sl__marque { justify-self: start; min-height: 0; }
.hf-sl__marque:empty { display: none; }
.hf-sl__artiste:has(.hf-sl__marque:empty) > .hf-rond { grid-row: auto; }
.hf-sl__etapes { gap: .35rem; }
.hf-sl__etape { font-size: .92rem; letter-spacing: .03em; padding: .55rem .7rem .6rem; gap: .4rem; }
.hf-sl__duo { white-space: nowrap; }

/* Bingo : toutes les cartes de grilles à la même taille, aperçu dans un cadre fixe. */
.hf-cartes { grid-template-columns: repeat(auto-fit, 14rem); justify-content: center; align-items: stretch; }
.hf-carte { display: flex; }
.hf-carte__bouton { height: 100%; justify-items: center; text-align: center; grid-template-rows: 7.6rem auto auto auto auto; align-content: start; }
.hf-carte__apercu { display: grid; place-items: center; width: 100%; height: 7.6rem; }
.hf-carte__apercu .hf-mini { width: 6.4rem; margin: 0; }
@media (max-width: 480px) { .hf-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ============================================================= hell-list */
.hf-hl { max-width: 74rem; margin: 0 auto; }
.hf-hl__tete { text-align: center; }
.hf-hl__tete .hf-chapo b { color: var(--bone); font-weight: 600; }
.hf-hl__corps { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; margin-top: .6rem; }
.hf-hl__choix { display: grid; justify-items: center; text-align: center; min-width: 0; }

/* Les tuiles photo */
.hf-hl__tuiles { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr)); gap: .7rem; }
.hf-tuile {
    position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; cursor: pointer;
    color: var(--bone); background: #1c1614; border: 2px solid var(--ligne); text-align: left;
    transition: border-color .15s, box-shadow .2s;
}
.hf-tuile:disabled { cursor: default; }
.hf-tuile__img { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 35%, #3a1412, #140e0d 75%); }
.hf-tuile__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(.45) contrast(1.1) brightness(.72); transition: transform .35s ease, filter .25s, opacity .25s; }
.hf-tuile__img.a-photo img { opacity: 1; }
.hf-tuile__img-init { font: 400 3.4rem/1 var(--f-display); color: rgba(232, 221, 198, .35); }
.hf-tuile__img.a-photo .hf-tuile__img-init { display: none; }
.hf-tuile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(10, 6, 6, .92)); pointer-events: none; }
.hf-tuile__nom { position: absolute; z-index: 1; left: .55rem; right: .55rem; bottom: .5rem; font: 800 1.05rem/1.05 var(--f-cond); letter-spacing: .02em; text-transform: uppercase; text-shadow: 0 2px 6px #000; overflow-wrap: anywhere; }
.hf-tuile__tag { position: absolute; z-index: 1; top: .45rem; left: .45rem; padding: .25em .45em; font: 800 .68rem/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; background: rgba(10, 6, 6, .78); border: 1px solid rgba(232, 221, 198, .4); }
.hf-tuile.is-tete .hf-tuile__tag { background: #df1f28; border-color: #df1f28; }
.hf-tuile > .hf-piece { position: absolute; z-index: 1; top: .4rem; right: .4rem; font-size: 1.15rem; }
.hf-tuile__coche { position: absolute; z-index: 1; top: .4rem; right: .4rem; display: none; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; font: 800 1rem/1 var(--f-cond); background: #df1f28; color: var(--bone); }
.hf-tuile.is-choisi:not(.is-pari) .hf-tuile__coche { display: grid; }
.hf-tuile:hover:not(:disabled) { border-color: var(--bone-dim); }
.hf-tuile:hover:not(:disabled) .hf-tuile__img img { transform: scale(1.06); filter: grayscale(.1) contrast(1.1) brightness(.9); }
.hf-tuile.is-choisi { border-color: #df1f28; box-shadow: 0 0 0 1px #df1f28, 0 0 22px rgba(223, 31, 40, .35); }
.hf-tuile.is-choisi .hf-tuile__img img { filter: none; }
.hf-tuile.is-pari { border-color: #d9a441; box-shadow: 0 0 0 1px #d9a441, 0 0 22px rgba(217, 164, 65, .3); }
.hf-tuile:focus-visible { outline: 3px solid var(--bone); outline-offset: 2px; }

/* Le tableau : six cases par rubrique */
.hf-hl__tableau {
    position: sticky; top: 1rem; padding: 1.3rem 1.2rem 1.4rem; display: grid; gap: .5rem;
    background-image: var(--grain-mur), radial-gradient(circle at 88% 6%, rgba(120, 16, 18, .35), transparent 50%);
    background-color: #1a1312; border: 2px solid var(--ligne); border-top: 6px solid #df1f28;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, .5);
}
.hf-hl__titre { margin: 0; text-align: center; font: 400 2.3rem/1 var(--f-display); }
.hf-hl__par { margin: 0 0 .4rem; text-align: center; font: 600 1rem/1 var(--f-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-dim); }
.hf-hl__rubrique { margin: .7rem 0 .2rem; font: 800 .82rem/1 var(--f-cond); letter-spacing: .24em; text-transform: uppercase; color: var(--bone-dim); display: flex; align-items: center; gap: .6rem; }
.hf-hl__rubrique::after { content: ""; flex: 1; height: 1px; background: var(--ligne); }
.hf-hl__cases { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.hf-hl__case { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .6rem; padding: .25rem .2rem; min-height: 2.6rem; }
.hf-hl__rond { position: relative; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; overflow: hidden; background: #2a1d1b; border: 2px solid rgba(232, 221, 198, .7); flex: none; }
.hf-hl__rond img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.hf-hl__rond.a-photo img { opacity: 1; }
.hf-hl__rond-init { font: 400 1.2rem/1 var(--f-display); }
.hf-hl__rond.a-photo .hf-hl__rond-init { display: none; }
.hf-hl__rond--vide { border: 2px dashed rgba(232, 221, 198, .25); background: none; font: 800 1rem/1 var(--f-cond); color: rgba(232, 221, 198, .35); }
.hf-hl__nom { font: 800 1.1rem/1.1 var(--f-cond); letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; }
.hf-hl__nom--vide { font-weight: 600; font-style: italic; text-transform: none; letter-spacing: 0; color: rgba(232, 221, 198, .3); }
.hf-hl__cases--tete .hf-hl__rond { width: 2.9rem; height: 2.9rem; }
.hf-hl__cases--tete .hf-hl__nom:not(.hf-hl__nom--vide) { font-size: 1.3rem; }
.hf-hl__case.is-pari .hf-hl__rond { border-color: #d9a441; box-shadow: 0 0 10px rgba(217, 164, 65, .5); }
.hf-hl__case.is-pari .hf-hl__nom { color: #f1d38a; }
.hf-hl__case.is-hit .hf-hl__rond { border-color: #df1f28; box-shadow: 0 0 12px rgba(223, 31, 40, .7); }
.hf-hl__x { width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--bone-dim); font: 700 1.1rem/1 var(--f-texte); cursor: pointer; opacity: .55; }
.hf-hl__x:hover { opacity: 1; background: rgba(223, 31, 40, .3); color: var(--bone); }
.hf-hl__pieces { margin: .8rem 0 .3rem; padding-top: .8rem; border-top: 1px solid var(--ligne); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem; font: 700 .95rem/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); }
.hf-hl__pieces span { flex-basis: 100%; text-align: center; margin-top: .4rem; }
.hf-hl__pieces .hf-piece { font-size: 1.15rem; }
.hf-piece.is-libre { background: none; color: transparent; box-shadow: inset 0 0 0 2px rgba(217, 164, 65, .35); }
.hf-hl__affiche { width: 100%; margin-top: .6rem; }

@media (max-width: 900px) {
    .hf-hl__corps { grid-template-columns: minmax(0, 1fr); }
    .hf-hl__tableau { position: static; max-width: 30rem; width: 100%; margin-inline: auto; }
}
@media (max-width: 480px) { .hf-hl__tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================================================================ affiche
 * Un collage, pas une grille : la première tête d'affiche en fond plein cadre,
 * les autres en lambeaux de photos inclinés qui se chevauchent, les noms sur
 * des coups de pinceau, les coups de cœur en taches d'encre. Tout est mesuré
 * en largeur d'affiche (cqw) : la composition reste la même à toute taille.
 */
.hf-sans-defilement { overflow: hidden; }
.hf-affiche-fond {
    position: fixed; inset: 0; z-index: 120; overflow: auto; padding: 4.2rem 1rem 2.5rem;
    background: rgba(4, 2, 2, .94); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    animation: hf-fondu .2s ease-out;
}
.hf-affiche-barre { position: fixed; z-index: 2; top: .9rem; right: 1rem; }

.hf-affiche-cadre { container-type: inline-size; width: min(44rem, 100%); margin: 0 auto; }
.hf-affiche {
    position: relative; isolation: isolate; overflow: hidden; height: 166cqw;
    color: var(--bone);
    background:
        radial-gradient(60cqw 40cqw at 50% 100%, rgba(150, 20, 16, .5), transparent 70%),
        linear-gradient(#120b0a, #0b0706);
    box-shadow: 0 0 0 1px #000, 0 40px 120px rgba(0, 0, 0, .85);
}
.hf-affiche > * { position: absolute; }

/* Le fond : la première tête d'affiche, immense, à moitié dissoute. */
.hf-affiche__fond { inset: 0 0 auto; height: 92cqw; z-index: 0; opacity: .5; }
.hf-affiche__fond .hf-af__img { width: 100%; height: 100%; -webkit-mask-image: linear-gradient(#000 35%, transparent 96%); mask-image: linear-gradient(#000 35%, transparent 96%); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.hf-affiche__fond .hf-af__img img { filter: grayscale(1) contrast(1.8) brightness(.9) blur(1px); }

/* Grain, rayures et éclaboussures par-dessus tout. */
.hf-affiche__grain { inset: 0; z-index: 30; pointer-events: none; background-image: var(--grain-mur), var(--grain-mur); background-size: 180px, 460px; mix-blend-mode: screen; }
.hf-affiche__tache { z-index: 1; pointer-events: none; width: var(--t); aspect-ratio: 1; left: var(--x); top: var(--y); rotate: var(--r);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='3' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='34'/%3E%3C/filter%3E%3Cg fill='%23b3141a' filter='url(%23f)'%3E%3Ccircle cx='100' cy='100' r='42'/%3E%3Ccircle cx='160' cy='62' r='9'/%3E%3Ccircle cx='38' cy='150' r='7'/%3E%3Ccircle cx='150' cy='158' r='5'/%3E%3Ccircle cx='46' cy='48' r='4'/%3E%3Ccircle cx='178' cy='120' r='3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    opacity: .55; mix-blend-mode: screen; }

/* L'en-tête */
.hf-affiche__haut { inset: 4cqw 0 auto; z-index: 12; text-align: center; }
.hf-affiche__pres { margin: 0; font: 800 max(10px, 2.2cqw)/1 var(--f-cond); letter-spacing: .55em; text-indent: .55em; color: var(--bone-dim); }
.hf-affiche__titre {
    margin: .5cqw 0 0; font: 400 21cqw/.86 var(--f-display); letter-spacing: -.01em;
    color: var(--bone); text-shadow: 0 0 .2em rgba(200, 30, 24, .6), 0 .04em 0 #4a0709;
    rotate: -3deg;
}
.hf-affiche__sous { margin: 1.4cqw 0 0; font: 700 max(10px, 2.7cqw)/1 var(--f-cond); letter-spacing: .3em; text-transform: uppercase; color: var(--bone); }
.hf-affiche__sous b { color: #ff3d44; }

/* Les photos */
.hf-af__img {
    position: relative; isolation: isolate; display: grid; place-items: center; overflow: hidden; width: 100%;
    background: radial-gradient(circle at 50% 35%, #4a1714, #160c0b 75%);
}
.hf-af__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(1) contrast(1.65) brightness(1.05); }
.hf-af__img.a-photo img { opacity: 1; }
.hf-af__img::before { content: ""; position: absolute; inset: 0; z-index: 2; background: #d8262a; mix-blend-mode: multiply; opacity: .9; }
.hf-af__img::after { content: ""; position: absolute; inset: 0; z-index: 3; background-image: var(--grain-papier); background-size: 140px; mix-blend-mode: multiply; }
.hf-af__img-init { position: relative; z-index: 1; font: 400 14cqw/1 var(--f-display); color: rgba(232, 221, 198, .45); }
.hf-af__img.a-photo .hf-af__img-init { display: none; }

/* Les têtes d'affiche : des lambeaux déchirés, posés de travers. */
.hf-af-tete { z-index: var(--z, 5); left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: calc(var(--w) * 1cqw); rotate: calc(var(--r) * 1deg); margin: 0; }
.hf-af-tete .hf-af__img {
    aspect-ratio: 4 / 5;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.07' numOctaves='4' seed='5'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='9'/%3E%3C/filter%3E%3Cpath d='M5 6 L95 3 L96 118 L4 121 Z' filter='url(%23d)'/%3E%3C/svg%3E") 0 0 / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.07' numOctaves='4' seed='5'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='9'/%3E%3C/filter%3E%3Cpath d='M5 6 L95 3 L96 118 L4 121 Z' filter='url(%23d)'/%3E%3C/svg%3E") 0 0 / 100% 100%;
    filter: drop-shadow(0 1.2cqw 2cqw rgba(0, 0, 0, .7));
}
.hf-af-tete:nth-of-type(even) .hf-af__img { scale: -1 1; }
.hf-af-tete:nth-of-type(even) .hf-af__img img, .hf-af-tete:nth-of-type(even) .hf-af__img-init { scale: -1 1; }

/* Les noms, sur un coup de pinceau. */
.hf-af__nom {
    position: absolute; z-index: 20; left: 50%; bottom: 4%; translate: -50% 0; rotate: calc(var(--rn, -3) * 1deg);
    padding: .18em .45em .22em; width: max-content; max-width: 125%; text-align: center; isolation: isolate;
    font: 800 calc(var(--fn, 4.4) * 1cqw)/1 var(--f-cond); letter-spacing: .02em; text-transform: uppercase;
    color: var(--bone); text-shadow: 0 .06em 0 rgba(0, 0, 0, .6);
}
.hf-af__nom::before {
    content: ""; position: absolute; inset: 0 -.15em; z-index: -1; background: #c4161d;
    border-radius: .1em; filter: url(#hf-use);
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 6%, #000 92%, transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 6%, #000 92%, transparent 100%);
}

/* Les coups de cœur : des taches d'encre éparpillées. */
.hf-affiche__coeurs-t { left: 5cqw; top: 119cqw; z-index: 12; margin: 0; rotate: -8deg; font: 400 8cqw/1 var(--f-display); color: var(--bone); text-shadow: 0 0 .3em rgba(0, 0, 0, .9); }
.hf-af-coeur { z-index: 8; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: calc(var(--w) * 1cqw); rotate: calc(var(--r) * 1deg); margin: 0; --fn: 2.9; }
.hf-af-coeur .hf-af__img {
    aspect-ratio: 1;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='d' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' numOctaves='3' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='14'/%3E%3CfeGaussianBlur stdDeviation='1.2'/%3E%3C/filter%3E%3Ccircle cx='50' cy='50' r='40' filter='url(%23d)'/%3E%3C/svg%3E") 0 0 / 100% 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='d' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' numOctaves='3' seed='11'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='14'/%3E%3CfeGaussianBlur stdDeviation='1.2'/%3E%3C/filter%3E%3Ccircle cx='50' cy='50' r='40' filter='url(%23d)'/%3E%3C/svg%3E") 0 0 / 100% 100%;
}
.hf-af-coeur .hf-af__img::before { background: #c92327; opacity: .8; }
.hf-af-coeur .hf-af__nom { bottom: -2%; }
.hf-af-coeur .hf-af__nom::before { background: #1a0d0c; box-shadow: none; }

/* Un pari : de l'or, et un sceau. */
.hf-affiche .is-pari .hf-af__img::before { background: #d9a03a; opacity: .88; }
.hf-affiche .is-pari .hf-af__nom { color: #1d1206; text-shadow: none; }
.hf-affiche .is-pari .hf-af__nom::before { background: #e3b04f; }
.hf-af__sceau { position: absolute; z-index: 22; top: -2%; right: -3%; display: grid; justify-items: center; gap: .3cqw; rotate: 12deg; }
.hf-af__sceau .hf-piece { font-size: max(16px, 4.4cqw); box-shadow: inset 0 0 0 .3cqw rgba(90, 58, 8, .35), 0 0 2.4cqw rgba(240, 190, 80, .6), 0 .6cqw 1.2cqw rgba(0, 0, 0, .6); }
.hf-af__sceau i { font: 800 max(8px, 1.6cqw)/1 var(--f-cond); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: #f6d27c; text-shadow: 0 1px 2px #000; }
.hf-af-coeur .hf-af__sceau { top: 2%; right: 4%; }
.hf-af-coeur .hf-af__sceau .hf-piece { font-size: max(13px, 3.2cqw); }

.hf-affiche__vide { z-index: 12; left: 0; right: 0; text-align: center; font: italic 600 4cqw/1 var(--f-cond); color: rgba(232, 221, 198, .4); }
.hf-affiche__bas { left: 0; right: 0; bottom: 3.4cqw; z-index: 12; display: flex; align-items: center; justify-content: center; gap: 1.2cqw; font: 700 max(10px, 2.3cqw)/1 var(--f-cond); letter-spacing: .24em; text-transform: uppercase; color: var(--bone-dim); }
.hf-affiche__bas .hf-piece { font-size: max(14px, 3.2cqw); }

/* Les deux grands noms se posent au milieu de leur photo : le bas est recouvert par les autres lambeaux. */
.hf-af-tete.is-grand .hf-af__nom { bottom: auto; top: 50%; }

/* Hell-List : la colonne de droite redevient une petite affiche papier. */
.hf-hl__papier { position: sticky; top: 1rem; display: grid; gap: 1.6rem; }
.hf-hl__papier .hf-flyer-wrap { margin: 0; }
.hf-hl__papier .hf-hl__affiche { justify-self: center; }
.hf-sl__pied { flex-wrap: wrap; justify-content: center; }
.hf-sl__pied > span:not(.hf-piece) { flex-basis: 100%; text-align: center; }
.hf-sl__pied .hf-piece.is-libre { box-shadow: inset 0 0 0 2px rgba(90, 58, 8, .4); }
@media (max-width: 900px) { .hf-hl__papier { position: static; max-width: 30rem; width: 100%; margin-inline: auto; } }

/* Affiche : on garde les vraies couleurs des photos, juste réchauffées de rouge. */
.hf-af__img img { filter: grayscale(.3) contrast(1.25) saturate(1.15) brightness(1); }
.hf-af__img::before { opacity: .35; }
.hf-affiche__fond .hf-af__img img { filter: grayscale(.4) contrast(1.4) brightness(.85) blur(1px); }
.hf-af-coeur .hf-af__img::before { opacity: .3; }
.hf-affiche .is-pari .hf-af__img::before { opacity: .42; }

/* ============================================================== catalogue */
.hf-cat { margin-top: 3.4rem; padding-top: 2rem; border-top: 1px solid var(--ligne); text-align: center; }
.hf-cat .hf-chapo { margin-bottom: 1.2rem; }
.hf-cat__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-bottom: 1rem; }
.hf-cat__chip {
    padding: .55rem .9rem .6rem; font: 800 .95rem/1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase;
    color: var(--bone-dim); background: rgba(0, 0, 0, .3); border: 0; border-bottom: 3px solid transparent; cursor: pointer;
    transition: color .15s, background-color .15s, border-color .15s;
}
.hf-cat__chip:hover { color: var(--bone); }
.hf-cat__chip.is-actif { color: var(--bone); background: rgba(223, 31, 40, .14); border-bottom-color: #df1f28; }
.hf-cat__outils { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .8rem 1.4rem; }
.hf-cat__q { width: min(22rem, 100%); padding: .55rem .8rem; font: 600 1.15rem/1.2 var(--f-cond); color: var(--bone); background: rgba(255, 255, 255, .04); border: 2px solid var(--ligne); border-radius: 0; }
.hf-cat__q:focus { outline: none; border-color: var(--bone-dim); }
.hf-cat__masquer { display: inline-flex; align-items: center; gap: .45rem; color: var(--bone-dim); cursor: pointer; }
.hf-cat__masquer input { accent-color: #df1f28; width: 1.05rem; height: 1.05rem; }
.hf-cat__total { margin: .8rem 0 1rem; min-height: 1.2em; font: 700 .9rem/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--ash); }
.hf-cat__grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.2rem, 1fr)); gap: .7rem; text-align: left; }
.hf-tuile__fans { display: block; margin-top: .2rem; font: 600 .78rem/1 var(--f-cond); letter-spacing: .06em; text-transform: none; color: var(--bone-dim); }
.hf-tuile--cat .hf-tuile__tag { background: rgba(10, 6, 6, .78); border-color: rgba(232, 221, 198, .3); color: var(--bone-dim); max-width: calc(100% - 3rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-tuile__ajout {
    position: absolute; z-index: 1; top: .4rem; right: .4rem; display: grid; place-items: center; width: 1.8rem; height: 1.8rem;
    border-radius: 50%; font: 800 1.3rem/1 var(--f-cond); color: var(--bone); background: rgba(10, 6, 6, .7); box-shadow: inset 0 0 0 2px rgba(232, 221, 198, .6);
    transition: background-color .15s, transform .15s;
}
.hf-tuile--cat:hover .hf-tuile__ajout { background: #df1f28; box-shadow: none; transform: scale(1.1); }
.hf-tuile--cat.is-deja { cursor: default; border-color: rgba(223, 31, 40, .6); }
.hf-tuile--cat.is-deja .hf-tuile__ajout { background: #df1f28; box-shadow: none; font-size: 1rem; }
.hf-tuile--cat.is-envoi { opacity: .6; }
.hf-cat__suite { display: flex; justify-content: center; gap: .4rem; padding: 1.6rem 0 .6rem; }
.hf-cat__suite[hidden] { display: none; }
.hf-cat__suite span { width: .55rem; height: .55rem; border-radius: 50%; background: #df1f28; opacity: .25; }
.hf-cat__suite.is-charge span { animation: hf-points 1s ease-in-out infinite; }
.hf-cat__suite.is-charge span:nth-child(2) { animation-delay: .15s; }
.hf-cat__suite.is-charge span:nth-child(3) { animation-delay: .3s; }
@keyframes hf-points { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (max-width: 480px) { .hf-cat__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ======================================================= accueil : entrée
 * L'apparition du texte de l'accueil, comme avant : la ligne des présentateurs
 * monte, le tampon BINGO claque, le filet se déroule, les lettres de
 * « Hellfest » se posent une à une, puis le message arrive. Pas de lueur derrière les
 * lettres, pas de rideau de flammes entre les pages.
 */
.hf-hero__avant { animation: hf-monte 1s .1s both; }
.hf-hero__bingo { animation: hf-tampon-accueil .7s .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.hf-hero__filet i { transform: scaleX(0); animation: hf-filet 1.1s .85s cubic-bezier(.2, .8, .2, 1) forwards; }
.hf-hero__filet b { animation: hf-pouls 2.4s 1.3s ease-in-out infinite; }
.hf-hero__titre span { animation: hf-lettre 1.1s calc(1.05s + var(--i) * .09s) cubic-bezier(.2, .9, .3, 1) both; }
.hf-hero .hf-annonce { animation: hf-monte .9s 2.2s both; }

@media (prefers-reduced-motion: reduce) {
    .hf-hero__avant, .hf-hero__titre span, .hf-hero__filet i, .hf-hero__filet b, .hf-hero__bingo, .hf-hero .hf-annonce { animation: none !important; }
    .hf-hero__filet i { transform: none; }
}

/* Liste : le bouton Catalogue en haut à droite. Catalogue : une page à part. */
.hf-liste__tete { position: relative; }
.hf-liste__catalogue { position: absolute; top: .9rem; right: 0; }
.hf-page.hf-catalogue { max-width: 72rem; text-align: center; }
.hf-catalogue__retour { position: absolute; top: 1.2rem; left: 0; }
.hf-cat__tri { display: inline-flex; gap: .3rem; }
.hf-cat__trier {
    padding: .5rem .8rem .55rem; font: 800 .9rem/1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase;
    color: var(--bone-dim); background: rgba(0, 0, 0, .3); border: 0; border-bottom: 3px solid transparent; cursor: pointer;
}
.hf-cat__trier:hover { color: var(--bone); }
.hf-cat__trier.is-actif { color: var(--bone); background: rgba(223, 31, 40, .14); border-bottom-color: #df1f28; }
@media (max-width: 640px) {
    .hf-liste__catalogue, .hf-catalogue__retour { position: static; display: inline-flex; margin: 0 auto .6rem; }
    .hf-liste__tete { display: flex; flex-direction: column; align-items: center; }
    .hf-liste__tete .hf-titre { order: -1; }
}


/* ================================================================ guichet
 * La boutique est un guichet de festival : une enseigne lumineuse, une vitre
 * derrière laquelle sont exposés les tickets (un par format de grille), et le
 * comptoir où l'on pose sa monnaie. À droite, le tableau de ses grilles.
 */
.hf-page.hf-boutique { max-width: 76rem; }
.hf-boutique__corps { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: clamp(1.4rem, 3vw, 2.4rem); align-items: start; margin-top: 2.2rem; }

.hf-guichet {
    position: relative; padding: 0 1.2rem;
    background: var(--grain-mur), repeating-linear-gradient(90deg, rgba(0, 0, 0, .2) 0 2px, transparent 2px 46px), linear-gradient(#3b2317, #22140d);
    border: 3px solid #1c110b; border-radius: 1.4rem 1.4rem .5rem .5rem;
    box-shadow: inset 0 0 0 2px rgba(232, 221, 198, .06), 0 24px 60px rgba(0, 0, 0, .6);
}

.hf-guichet__enseigne {
    position: relative; width: min(28rem, 94%); margin: -1.8rem auto 0; padding: .7rem 1rem .8rem; text-align: center;
    background: linear-gradient(#1c0e0b, #0f0807); border: 3px solid #b1161d; border-radius: .7rem;
    box-shadow: 0 0 0 3px #0f0807, 0 0 34px rgba(223, 31, 40, .45), inset 0 0 24px rgba(223, 31, 40, .25);
}
.hf-guichet__titre { margin: 0; font: 400 clamp(2.4rem, 5vw, 3.4rem)/1 var(--f-display); color: #ffe9d6; text-shadow: 0 0 .22em rgba(255, 70, 50, .9), 0 0 .6em rgba(223, 31, 40, .65); }
.hf-guichet__sous { margin: .35rem 0 0; font: 800 .82rem/1 var(--f-cond); letter-spacing: .24em; text-transform: uppercase; color: var(--bone-dim); }
.hf-guichet__ampoules {
    display: block; height: .7rem;
    background: radial-gradient(circle, #ffe3a0 0 .17rem, rgba(255, 185, 90, .4) .18rem .3rem, transparent .31rem) 50% 50% / 1.3rem .7rem repeat-x;
    filter: drop-shadow(0 0 4px rgba(255, 190, 90, .85));
}
.hf-guichet__ampoules:first-child { margin-bottom: .45rem; }
.hf-guichet__ampoules:last-child { margin-top: .5rem; }

.hf-guichet__vitre {
    margin-top: 1.3rem; padding: clamp(.9rem, 2.4vw, 1.5rem);
    background: linear-gradient(125deg, rgba(255, 255, 255, .07), transparent 32%), #140c0a;
    border: 2px solid #0d0806; border-radius: .4rem;
    box-shadow: inset 0 0 0 2px rgba(232, 221, 198, .07), inset 0 12px 34px rgba(0, 0, 0, .75);
}

.hf-guichet__comptoir {
    margin: 1.2rem -1.2rem 0; padding: .9rem 1.2rem 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.1rem;
    background: var(--grain-mur), linear-gradient(#4d2e1d, #2b1910); border-top: 3px solid #6a412a; border-radius: 0 0 .35rem .35rem;
    box-shadow: inset 0 3px 0 rgba(255, 220, 180, .08);
}
.hf-guichet__monnaie { font: 800 .85rem/1 var(--f-cond); letter-spacing: .22em; text-transform: uppercase; color: var(--bone-dim); }
.hf-guichet__comptoir .hf-jetons__pile { gap: .45rem; }
.hf-guichet__comptoir .hf-jeton { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; }
.hf-guichet__comptoir .hf-jetons__total b { font-size: 2rem; }

/* Les tickets : tous au même format. */
.hf-tickets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19.5rem), 1fr)); gap: 1.1rem; }
.hf-ticket { height: 10.6rem; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); transition: transform .18s, filter .2s; }
.hf-ticket:hover { transform: translateY(-3px); }
.hf-ticket.a-des { filter: drop-shadow(0 0 1px #c3161d) drop-shadow(0 0 12px rgba(223, 31, 40, .55)); }
.hf-ticket__papier {
    display: grid; grid-template-columns: minmax(0, 1fr) 4.6rem; height: 100%; overflow: hidden; color: #1b1210;
    background: var(--grain-papier), linear-gradient(105deg, #f1e6cf, #e0d0b0);
    border-radius: .5rem;
    -webkit-mask: radial-gradient(circle .6rem at calc(100% - 4.6rem) 0, transparent 98%, #000) top / 100% 51% no-repeat,
                  radial-gradient(circle .6rem at calc(100% - 4.6rem) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
    mask: radial-gradient(circle .6rem at calc(100% - 4.6rem) 0, transparent 98%, #000) top / 100% 51% no-repeat,
          radial-gradient(circle .6rem at calc(100% - 4.6rem) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}
.hf-ticket__corps { position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.hf-ticket__bandeau {
    display: flex; justify-content: space-between; gap: .6rem; padding: .4rem .9rem .42rem;
    font: 800 .78rem/1 var(--f-cond); letter-spacing: .22em; text-transform: uppercase; color: #f7ecd6; background: #c3161d;
}
.hf-ticket__serie { letter-spacing: .1em; opacity: .8; }
.hf-ticket__milieu { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .5rem .9rem .7rem; min-width: 0; }
.hf-ticket__infos { display: grid; gap: .12rem; text-align: left; }
.hf-ticket__label { font: 800 .72rem/1 var(--f-cond); letter-spacing: .3em; text-transform: uppercase; opacity: .6; }
.hf-ticket__format { font: 800 2.6rem/.95 var(--f-cond); letter-spacing: .01em; white-space: nowrap; }
.hf-ticket__detail { font: 600 .9rem/1.2 var(--f-cond); opacity: .75; white-space: nowrap; }
.hf-ticket__grille { flex: none; display: grid; place-items: center; width: 5.6rem; height: 5.6rem; }
.hf-ticket__grille .hf-mini { width: 5.4rem; margin: 0; gap: 2px; }
.hf-ticket__grille .hf-mini i { background: transparent; border: 1.5px solid rgba(27, 18, 16, .7); }
.hf-ticket__tampon {
    position: absolute; right: 6.4rem; bottom: .6rem; padding: .2rem .5rem .25rem; rotate: -11deg;
    font: 800 1rem/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase;
    color: #c3161d; border: 3px solid #c3161d; border-radius: .25rem; opacity: .85; mix-blend-mode: multiply;
}

.hf-ticket__talon {
    display: grid; justify-items: center; align-content: center; gap: .3rem; padding: .4rem .2rem;
    background: rgba(27, 18, 16, .06); border-left: 2px dashed rgba(27, 18, 16, .4);
}
.hf-ticket__pm {
    display: grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0 0 .08em; border: 0; border-radius: 50%; cursor: pointer;
    font: 800 1.35rem/1 var(--f-cond); color: #f7ecd6; background: #c3161d;
    transition: transform .12s, background-color .15s, opacity .15s;
}
.hf-ticket__pm:last-of-type { color: #1b1210; background: transparent; box-shadow: inset 0 0 0 2px #1b1210; }
.hf-ticket__pm:hover:not(:disabled) { transform: scale(1.1); }
.hf-ticket__pm:disabled { opacity: .28; cursor: default; }
.hf-ticket__pm:focus-visible { outline: 2px solid #1b1210; outline-offset: 2px; }
.hf-ticket__n { font: 400 1.7rem/1 var(--f-display); color: #1b1210; }
.hf-ticket__prix { font: 800 .62rem/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; opacity: .55; }

/* Le tableau de droite : ce que j'ai pris, et ce que je peux gagner. */
.hf-tableau { top: 1rem; }
.hf-recap__nom { display: inline-flex; align-items: baseline; gap: .5rem; }
.hf-recap__nom i { font: 600 1rem/1 var(--f-cond); font-style: normal; color: var(--bone-dim); }
.hf-recap__pts { font: 700 1.05rem/1 var(--f-cond); color: var(--bone); white-space: nowrap; }

@media (max-width: 960px) {
    .hf-boutique__corps { grid-template-columns: minmax(0, 1fr); }
    .hf-tableau { position: static; max-width: 30rem; width: 100%; margin-inline: auto; }
}
@media (max-width: 480px) {
    .hf-guichet { padding: 0 .6rem; }
    .hf-guichet__comptoir { margin-inline: -.6rem; }
    .hf-ticket__format { font-size: 2.2rem; }
    .hf-ticket__grille { width: 4.6rem; }
    .hf-ticket__grille .hf-mini { width: 4.4rem; }
    .hf-ticket__tampon { right: 5.8rem; }
}
/* Le tampon se pose sur la grille imprimée, pas sur le texte. */
.hf-ticket__tampon { right: 5.7rem; top: 3.4rem; bottom: auto; }
@media (max-width: 480px) { .hf-ticket__tampon { right: 5.2rem; } }
@media (max-width: 480px) { .hf-ticket__tampon { top: auto; bottom: .45rem; right: 4.9rem; font-size: .78rem; } }

/* ================================================================== toast */
.hf-toast {
    position: fixed; z-index: 140; left: 50%; bottom: 1.4rem; max-width: min(34rem, calc(100% - 2rem));
    padding: .75rem 1.1rem .8rem; translate: -50% 1rem; opacity: 0; pointer-events: none;
    font: 700 1.05rem/1.3 var(--f-cond); color: var(--bone); text-align: center;
    background: #2a0e0e; border: 2px solid #df1f28; border-radius: .4rem; box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
    transition: opacity .2s, translate .2s;
}
.hf-toast.is-visible { opacity: 1; translate: -50% 0; }

/* Boutique : « 1 / 6 » dans une seule police. */
.hf-guichet__comptoir .hf-jetons__total, .hf-guichet__comptoir .hf-jetons__total b {
    font: 800 1.9rem/1 var(--f-cond); letter-spacing: .02em; color: var(--bone); margin: 0;
}

/* ============================================================ bingo : tickets */
.hf-tickets--bingo { max-width: 66rem; margin: 1.2rem auto 0; }
.hf-ticket--bouton { width: 100%; padding: 0; border: 0; cursor: pointer; font: inherit; text-align: left; }
.hf-ticket--bouton:focus-visible { outline: 3px solid var(--bone); outline-offset: 3px; }
.hf-ticket__talon--ouvrir { align-content: center; gap: .5rem; color: #1b1210; }
.hf-ticket__fleche { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font: 800 1.5rem/1 var(--f-cond); color: #f7ecd6; background: #c3161d; transition: transform .15s; }
.hf-ticket--bouton:hover .hf-ticket__fleche { transform: translateX(3px); }
.hf-ticket__score { font-weight: 800; opacity: 1; color: #c3161d; }
.hf-ticket .hf-mini i.is-plein { background: rgba(27, 18, 16, .78); border-color: rgba(27, 18, 16, .85); }
.hf-ticket .hf-mini i.is-hit { background: #c3161d; border-color: #c3161d; animation: none; }

/* ======================================================= bingo : la grille */
.hf-atelier { grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); }
.hf-atelier__grille { container-type: inline-size; padding: 1.2rem; }
.hf-plan--grand {
    --cote: min(7.4rem, calc((100cqw - (var(--c) - 1) * .55rem) / var(--c)));
    grid-template-columns: repeat(var(--c), var(--cote)); justify-content: center; gap: .55rem;
}
.hf-plan--grand .hf-case {
    aspect-ratio: 1; min-height: 0; padding: .35rem; display: grid; place-items: center; align-content: center; gap: .3rem;
    background: radial-gradient(circle at 50% 38%, #251916, #130c0a 80%);
    border: 2px dashed rgba(232, 221, 198, .2); border-radius: .55rem; box-shadow: none;
    transition: border-color .15s, background-color .15s, transform .15s;
}
.hf-plan--grand .hf-case.is-plein { border-style: solid; border-color: rgba(232, 221, 198, .35); background: radial-gradient(circle at 50% 38%, #2e201c, #170f0d 80%); cursor: grab; }
.hf-plan--grand .hf-case.is-hit { border-color: #df1f28; background: radial-gradient(circle at 50% 38%, #4a1414, #1c0b0a 80%); }
.hf-plan--grand .hf-case.is-survol { border-color: var(--bone); border-style: solid; background: #3a1417; transform: scale(1.03); }
.hf-plan--grand .hf-case.is-source { opacity: .35; }
.hf-bingo .a-main .hf-plan--grand .hf-case:not(.is-source):hover { border-color: var(--bone); cursor: copy; }
.hf-plan--grand .hf-rond--case { width: 66%; border-width: 2px; font-size: calc(var(--cote) * .28); }
.hf-plan--grand .hf-case.is-hit .hf-rond--case { border-color: #ff4a50; box-shadow: 0 0 0 3px rgba(223, 31, 40, .35), 0 0 18px rgba(255, 60, 40, .7); }
.hf-plan--grand .hf-case__nom {
    max-width: 100%; font: 800 clamp(.62rem, calc(var(--cote) * .12), .9rem)/1.05 var(--f-cond); text-transform: uppercase; text-align: center;
    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
.hf-plan--grand .hf-case__x { top: .25rem; right: .25rem; }

/* La liste de droite : on peut y ramener un artiste de la grille. */
.hf-atelier__liste { border: 2px dashed transparent; border-radius: .6rem; padding: .4rem; transition: border-color .15s, background-color .15s; }
.hf-atelier__liste.is-retour { border-color: rgba(232, 221, 198, .3); cursor: pointer; }
.hf-atelier__liste.is-survol { border-color: var(--bone); background: rgba(223, 31, 40, .1); }
@media (max-width: 860px) {
    .hf-atelier { grid-template-columns: minmax(0, 1fr); }
    .hf-atelier__liste { position: static; max-height: none; }
    .hf-atelier__liste .hf-ronds { overflow: visible; }
}


/* ======================================================= boutique : panneau
 * Le titre de la page est sur l'enseigne. À gauche, dans la structure du
 * guichet, un panneau de papier punaisé : mes grilles et ce que je peux gagner.
 */
.hf-boutique .hf-guichet { margin-top: 2.4rem; }
.hf-guichet__titre { font-size: clamp(2.6rem, 6vw, 3.8rem); }
.hf-guichet__interieur { display: grid; grid-template-columns: 18.5rem minmax(0, 1fr); gap: 1.2rem; align-items: start; margin-top: 1.3rem; }
.hf-guichet__interieur .hf-guichet__vitre { margin-top: 0; }

.hf-panneau {
    position: relative; display: grid; gap: .55rem; justify-items: stretch; text-align: center;
    padding: 1.6rem 1.2rem 1.6rem; color: #1b1210; rotate: -1.2deg;
    background: var(--grain-papier), linear-gradient(170deg, #f2e7d0, #dfcfae);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .55), inset 0 0 40px rgba(120, 80, 40, .18);
    clip-path: polygon(0 0, 100% 0, 100% 97%, 94% 100%, 86% 97.5%, 77% 100%, 66% 98%, 55% 100%, 44% 97.5%, 33% 100%, 22% 98%, 11% 100%, 0 97.5%);
}
.hf-panneau__punaise {
    position: absolute; top: .55rem; width: .9rem; height: .9rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ff8a8a, #c3161d 55%, #6d0a0e);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .5);
}
.hf-panneau__punaise:first-child { left: .7rem; }
.hf-panneau__punaise:nth-child(2) { right: .7rem; }
.hf-panneau__titre { margin: 0; font: 400 2.3rem/1 var(--f-display); color: #1b1210; }
.hf-panneau__max { margin: .1rem 0 .4rem; padding-bottom: .7rem; border-bottom: 2px solid rgba(27, 18, 16, .2); display: grid; gap: .25rem; }
.hf-panneau__max b { font: 400 3rem/1 var(--f-display); color: #c3161d; font-variant-numeric: tabular-nums; }
.hf-panneau__max span { font: 800 .78rem/1.2 var(--f-cond); letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.hf-panneau__max[hidden] { display: none; }
.hf-panneau__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; text-align: left; }
.hf-panneau__ligne { display: flex; align-items: baseline; gap: .4rem; padding: .35rem 0; font: 700 1.15rem/1 var(--f-cond); }
.hf-panneau__ligne::after { content: ""; order: 1; flex: 1; border-bottom: 2px dotted rgba(27, 18, 16, .35); translate: 0 -.2rem; }
.hf-panneau__nom { display: inline-flex; align-items: baseline; gap: .35rem; }
.hf-panneau__nom b { font-weight: 800; font-size: 1.3rem; }
.hf-panneau__nom i { font-style: normal; font-weight: 600; opacity: .65; }
.hf-panneau__points { order: 2; font-weight: 800; white-space: nowrap; }
.hf-panneau__vide { margin: .4rem 0; font: italic 600 1.05rem/1.35 var(--f-cond); opacity: .6; }
.hf-panneau__vide[hidden] { display: none; }
.hf-panneau__total { margin: .3rem 0 .4rem; padding-top: .6rem; border-top: 2px solid rgba(27, 18, 16, .2); font: 800 .82rem/1.3 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.hf-panneau__total:empty { display: none; }
.hf-panneau .hf-btn { justify-self: center; }

@media (max-width: 960px) {
    .hf-guichet__interieur { grid-template-columns: minmax(0, 1fr); }
    .hf-panneau { order: 2; max-width: 24rem; width: 100%; justify-self: center; rotate: -.8deg; }
}


/* ================================================== menu fixe, défilement
 * Le menu reste en haut de l'écran sur toutes les pages. La barre de
 * défilement de la page est aux couleurs du bingo.
 */
.hf-html { scrollbar-color: #b1161d #120b0a; }
.hf-html::-webkit-scrollbar { width: 12px; height: 12px; }
.hf-html::-webkit-scrollbar-track { background: #120b0a; }
.hf-html::-webkit-scrollbar-thumb { background: linear-gradient(#d21c24, #7a0b11); border: 3px solid #120b0a; border-radius: 8px; }
.hf-html::-webkit-scrollbar-thumb:hover { background: #e2262d; }

.hf-bar { position: sticky; top: 0; z-index: 50; }
.hf-bar::before {
    content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw);
    background: rgba(16, 10, 9, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}

/* ================================================ bingo : la grille fixe
 * La grille reste à l'écran pendant qu'on fait défiler la page ; la colonne
 * des artistes s'allonge autant qu'il faut. La taille des cases tient compte
 * de la hauteur de l'écran, pour que la grille y tienne entière.
 */
.hf-atelier__grille { position: sticky; top: 5.6rem; }
.hf-atelier__liste { position: static; max-height: none; }
.hf-atelier__liste .hf-ronds { overflow: visible; max-height: none; }
.hf-plan--grand {
    --cote: min(7.4rem,
                calc((100cqw - (var(--c) - 1) * .55rem) / var(--c)),
                calc((100vh - 16rem - (var(--l, 4) - 1) * .55rem) / var(--l, 4)));
}
@media (max-width: 860px) {
    .hf-atelier__grille { position: static; }
    .hf-plan--grand { --cote: min(7.4rem, calc((100cqw - (var(--c) - 1) * .55rem) / var(--c))); }
}
/* Les blocs qui restent à l'écran se calent sous le menu fixe. */
.hf-hl__papier, .hf-tableau, .hf-palette { top: 5.6rem; }

/* Boutique : le panneau « Mes grilles » à droite de la vitre. */
.hf-guichet__interieur { grid-template-columns: minmax(0, 1fr) 18.5rem; }
.hf-panneau { order: 2; rotate: 1.2deg; }
@media (max-width: 960px) { .hf-guichet__interieur { grid-template-columns: minmax(0, 1fr); } .hf-panneau { rotate: .8deg; } }

/* Les ampoules de l'enseigne s'allument en chenillard, une sur deux. */
.hf-guichet__ampoules {
    background:
        radial-gradient(circle at .65rem 50%, #fff1c4 0 .17rem, rgba(255, 190, 90, .55) .18rem .32rem, transparent .33rem),
        radial-gradient(circle at 1.95rem 50%, #7a4a1c 0 .15rem, transparent .16rem);
    background-size: 2.6rem .7rem; background-repeat: repeat-x; background-position: 0 50%;
    animation: hf-chenillard 1.1s steps(2, jump-none) infinite;
}
.hf-guichet__ampoules:last-child { animation-direction: reverse; }
@keyframes hf-chenillard { from { background-position: 0 50%; } to { background-position: 1.3rem 50%; } }
@media (prefers-reduced-motion: reduce) { .hf-guichet__ampoules { animation: none; } }

/* Jamais de défilement horizontal : le fond du menu (qui déborde de toute la
   largeur de l'écran, barre de défilement comprise) et les éléments penchés
   sont coupés au bord de la page. « clip » ne gêne pas le menu fixe. */
.hf-html, .hf { overflow-x: clip; }
@supports not (overflow-x: clip) { .hf { overflow-x: hidden; } }

/* Bingo : le rond qu'on traîne, et la recherche dans mes artistes. */
.hf-fantome {
    position: fixed; top: -200px; left: -200px; z-index: -1; border-radius: 50%;
    display: grid; place-items: center; font: 400 2rem/1 var(--f-display); color: var(--bone);
    background: #2a1d1b center / cover no-repeat; border: 3px solid var(--bone);
}
.hf-l-q {
    width: 100%; margin: 0 0 .7rem; padding: .55rem .8rem; font: 600 1.1rem/1.2 var(--f-cond); color: var(--bone);
    background: rgba(255, 255, 255, .04); border: 2px solid var(--ligne); border-radius: 0;
}
.hf-l-q:focus { outline: none; border-color: var(--bone-dim); }

/* Bingo : le retour vers toutes les grilles, aligné à gauche. */
.hf-bingo .hf-retour { text-align: left; }
.hf-bingo__tete .hf-jetons__total[hidden], .hf-grille__pts[hidden] { display: none; }

/* ======================================================= guichet : métal
 * Retour à l'esprit Hellfest : un container de festival en tôle noire,
 * rivetée et rouillée, une enseigne au néon rouge, un grillage derrière les
 * tickets, des billets noirs imprimés rouge et os, un flyer photocopié
 * scotché à la place de la feuille punaisée, et un comptoir en tôle larmée.
 */
.hf-guichet {
    background:
        radial-gradient(40% 30% at 12% 18%, rgba(150, 64, 22, .32), transparent 70%),
        radial-gradient(30% 40% at 88% 70%, rgba(130, 52, 18, .28), transparent 70%),
        radial-gradient(25% 20% at 60% 8%, rgba(160, 70, 25, .22), transparent 70%),
        var(--grain-mur),
        repeating-linear-gradient(90deg, #171413 0 16px, #262120 16px 19px, #121010 19px 34px, #1d1918 34px 36px);
    border: 3px solid #0a0807; border-radius: .35rem;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .04), inset 0 0 60px rgba(0, 0, 0, .7), 0 24px 60px rgba(0, 0, 0, .65);
}
/* Rivets en haut et en bas, coulures de rouille. */
.hf-guichet::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background:
        radial-gradient(circle at 50% 50%, #8d7d74 0 .14rem, #3a302c .16rem .24rem, transparent .26rem) 0 .55rem / 2.4rem .6rem repeat-x,
        radial-gradient(circle at 50% 50%, #8d7d74 0 .14rem, #3a302c .16rem .24rem, transparent .26rem) 0 calc(100% - .55rem) / 2.4rem .6rem repeat-x;
}
.hf-guichet::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: .55;
    background:
        linear-gradient(rgba(150, 66, 24, .55), transparent 28%) 8% 0 / 5px 100% no-repeat,
        linear-gradient(rgba(150, 66, 24, .45), transparent 18%) 31% 0 / 3px 100% no-repeat,
        linear-gradient(rgba(150, 66, 24, .5), transparent 34%) 73% 0 / 4px 100% no-repeat,
        linear-gradient(rgba(150, 66, 24, .4), transparent 22%) 94% 0 / 3px 100% no-repeat;
}
.hf-guichet > * { position: relative; z-index: 1; }

/* L'enseigne : un néon rouge dans un caisson de métal boulonné. */
.hf-guichet__enseigne {
    background:
        radial-gradient(circle, #8d7d74 0 .13rem, #2b2421 .15rem .22rem, transparent .24rem) .5rem .5rem / calc(100% - 1rem) calc(100% - 1rem) no-repeat,
        radial-gradient(circle, #8d7d74 0 .13rem, #2b2421 .15rem .22rem, transparent .24rem) calc(100% - .5rem) .5rem / .5rem .5rem no-repeat,
        radial-gradient(circle, #8d7d74 0 .13rem, #2b2421 .15rem .22rem, transparent .24rem) .5rem calc(100% - .5rem) / .5rem .5rem no-repeat,
        radial-gradient(circle, #8d7d74 0 .13rem, #2b2421 .15rem .22rem, transparent .24rem) calc(100% - .5rem) calc(100% - .5rem) / .5rem .5rem no-repeat,
        linear-gradient(#0d0a09, #070505);
    border: 4px solid #2a2422; border-radius: .3rem;
    box-shadow: 0 0 0 2px #050404, inset 0 0 0 2px rgba(255, 50, 40, .55), inset 0 0 26px rgba(255, 30, 20, .35), 0 0 40px rgba(220, 30, 20, .4), 0 10px 26px rgba(0, 0, 0, .6);
}
.hf-guichet__titre { color: #ffd9d4; text-shadow: 0 0 .06em #fff, 0 0 .18em #ff3b30, 0 0 .45em #ff2418, 0 0 .9em rgba(255, 30, 20, .7); }
.hf-guichet__sous { color: #e9b3ad; }
.hf-guichet__ampoules {
    background:
        radial-gradient(circle at .65rem 50%, #ffb0a8 0 .12rem, #ff2a1f .13rem .2rem, rgba(255, 40, 30, .45) .21rem .33rem, transparent .34rem),
        radial-gradient(circle at 1.95rem 50%, #4a0d0a 0 .14rem, transparent .15rem);
    background-size: 2.6rem .7rem; background-repeat: repeat-x;
    filter: drop-shadow(0 0 4px rgba(255, 40, 30, .8));
}

/* Derrière les tickets : un grillage de guichet blindé. */
.hf-guichet__vitre {
    background:
        repeating-linear-gradient(45deg, rgba(170, 160, 150, .13) 0 1.5px, transparent 1.5px 16px),
        repeating-linear-gradient(-45deg, rgba(170, 160, 150, .13) 0 1.5px, transparent 1.5px 16px),
        radial-gradient(80% 60% at 50% 40%, #1a1312, #0b0807);
    border: 6px solid #241f1d; border-radius: .2rem;
    box-shadow: inset 0 0 0 1px #000, inset 0 12px 36px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .05);
}

/* Le comptoir : une plaque de tôle larmée. */
.hf-guichet__comptoir {
    background:
        radial-gradient(ellipse .55rem .18rem at 25% 30%, rgba(255, 255, 255, .09) 40%, transparent 42%) 0 0 / 1.4rem 1.4rem,
        radial-gradient(ellipse .18rem .55rem at 75% 75%, rgba(255, 255, 255, .09) 40%, transparent 42%) 0 0 / 1.4rem 1.4rem,
        linear-gradient(#2f2927, #1b1716);
    border-top: 3px solid #4a403b; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .06);
}

/* Les tickets : des billets noirs, imprimés rouge et os. */
.hf-ticket__papier {
    color: var(--bone);
    background: var(--grain-mur), radial-gradient(120% 90% at 20% 0, #241b19, #100c0b 70%);
    box-shadow: inset 0 0 0 1px rgba(232, 221, 198, .12);
}
.hf-ticket__bandeau { background: #b3141b; }
.hf-ticket__label { opacity: .55; }
.hf-ticket__format { font: 400 2.9rem/.9 var(--f-display); letter-spacing: .02em; color: var(--bone); }
.hf-ticket__detail { opacity: .7; }
.hf-ticket__grille .hf-mini i { border-color: rgba(232, 221, 198, .55); }
.hf-ticket .hf-mini i.is-plein { background: rgba(232, 221, 198, .78); border-color: rgba(232, 221, 198, .85); }
.hf-ticket .hf-mini i.is-hit { background: #e0262d; border-color: #ff6a6a; }
.hf-ticket__talon { background: rgba(255, 255, 255, .03); border-left-color: rgba(232, 221, 198, .3); position: relative; }
.hf-ticket__talon::after {
    content: ""; position: absolute; left: 50%; bottom: .45rem; translate: -50% 0; width: 2.8rem; height: .7rem; opacity: .4;
    background: repeating-linear-gradient(90deg, var(--bone) 0 1px, transparent 1px 3px, var(--bone) 3px 5px, transparent 5px 6px, var(--bone) 6px 7px, transparent 7px 10px);
}
.hf-ticket__pm:last-of-type { color: var(--bone); box-shadow: inset 0 0 0 2px rgba(232, 221, 198, .8); }
.hf-ticket__pm:focus-visible { outline-color: var(--bone); }
.hf-ticket__n { color: var(--bone); }
.hf-ticket__prix { color: var(--bone); }
.hf-ticket__tampon { color: #ff3d3d; border-color: #ff3d3d; mix-blend-mode: normal; opacity: .9; text-shadow: 0 0 8px rgba(255, 40, 30, .5); }
.hf-ticket__talon--ouvrir { color: var(--bone); }
.hf-ticket__score { color: #ff5a5f; }
.hf-ticket.a-des { filter: drop-shadow(0 0 1px #ff3d3d) drop-shadow(0 0 14px rgba(255, 40, 30, .5)); }

/* Le panneau « Mes grilles » : un flyer photocopié, scotché à l'arrache. */
.hf-panneau {
    background: var(--grain-papier), var(--grain-papier), linear-gradient(175deg, #ece9e2, #d3cec4);
    background-size: 160px, 90px, auto;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .6), inset 0 0 50px rgba(0, 0, 0, .18);
}
.hf-panneau__punaise {
    top: -.45rem; width: 4.4rem; height: 1.3rem; border-radius: 0;
    background: rgba(228, 220, 196, .62); box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
.hf-panneau__punaise:first-child { left: -.6rem; rotate: -14deg; }
.hf-panneau__punaise:nth-child(2) { right: -.6rem; rotate: 12deg; }
.hf-panneau__titre { font-size: 2.5rem; }
.hf-panneau__max b { color: #b3141b; }
/* Sur le fond sombre de la page Bingo, les billets noirs gardent un liseré. */
.hf-tickets--bingo .hf-ticket__papier { box-shadow: inset 0 0 0 1px rgba(232, 221, 198, .26), inset 0 0 30px rgba(0, 0, 0, .5); }
.hf-tickets--bingo .hf-ticket { filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .7)) drop-shadow(0 0 10px rgba(179, 20, 27, .25)); }
.hf-tickets--bingo .hf-ticket:hover { filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .7)) drop-shadow(0 0 16px rgba(255, 40, 30, .45)); }


/* ================================================== guichet : plus crade
 * Plus de lampes qui clignotent. Une tôle cabossée et sale, des stickers
 * à moitié arrachés, des billets tachés, et un néon fatigué : une lettre qui
 * grésille, une autre à moitié décrochée qui lâche parfois.
 */
.hf-guichet__ampoules { display: none; }

/* Tôle : bords cabossés, crasse qui remonte du bas, rayures. */
.hf-guichet {
    clip-path: polygon(0 1.2%, 3% 0, 18% .6%, 34% 0, 52% .9%, 70% 0, 86% .7%, 100% 0, 99.6% 22%, 100% 48%, 99.5% 76%, 100% 100%, 82% 99.4%, 60% 100%, 41% 99.3%, 22% 100%, 0 99.5%, .5% 70%, 0 41%, .4% 18%);
    padding-top: 2.6rem;
}
.hf-guichet::after {
    opacity: 1;
    background:
        linear-gradient(rgba(150, 66, 24, .5), transparent 30%) 8% 0 / 6px 100% no-repeat,
        linear-gradient(rgba(150, 66, 24, .4), transparent 20%) 31% 0 / 3px 100% no-repeat,
        linear-gradient(rgba(150, 66, 24, .45), transparent 36%) 73% 0 / 5px 100% no-repeat,
        linear-gradient(rgba(150, 66, 24, .35), transparent 24%) 94% 0 / 3px 100% no-repeat,
        repeating-linear-gradient(-28deg, transparent 0 140px, rgba(255, 255, 255, .05) 140px 141px, transparent 141px 230px),
        repeating-linear-gradient(17deg, transparent 0 190px, rgba(255, 255, 255, .04) 190px 191px, transparent 191px 310px),
        radial-gradient(70% 22% at 50% 102%, rgba(40, 22, 10, .85), transparent 70%),
        radial-gradient(30% 25% at 4% 60%, rgba(120, 50, 18, .35), transparent 70%),
        radial-gradient(22% 18% at 97% 30%, rgba(120, 50, 18, .3), transparent 70%);
}

/* L'enseigne, un peu de travers, la tôle autour salie. */
.hf-guichet__enseigne { margin-top: -.6rem; rotate: -.6deg; }

/* Le néon */
.hf-neon { display: inline-flex; justify-content: center; letter-spacing: .01em; }
.hf-neon__l { display: inline-block; position: relative; transition: color .05s; }
.hf-neon__l--faible { color: #e7a39b; text-shadow: 0 0 .1em #ff3b30, 0 0 .3em rgba(255, 36, 24, .55); }
.hf-neon__l--panne { animation: hf-panne 6.5s steps(1) infinite; }
.hf-neon__l--pend {
    transform-origin: 18% 6%; rotate: 17deg; translate: .02em .1em;
    animation: hf-pend 5.5s ease-in-out infinite;
}
.hf-neon__l.is-saccade { animation: hf-saccade .9s steps(1) 1; }
.hf-neon__l--pend.is-chute { animation: hf-chute 2.4s cubic-bezier(.3, .1, .3, 1) 1; }
/* Éteinte : le tube de verre se voit encore, sans lumière. */
@keyframes hf-panne {
    0%, 41%, 44%, 47%, 100% { color: #ffd9d4; text-shadow: 0 0 .06em #fff, 0 0 .18em #ff3b30, 0 0 .45em #ff2418, 0 0 .9em rgba(255, 30, 20, .7); }
    42%, 45%, 46% { color: #4a1c1a; text-shadow: none; }
}
@keyframes hf-saccade {
    0%, 30%, 55% { color: #4a1c1a; text-shadow: none; }
    15%, 40%, 70%, 100% { color: #ffd9d4; text-shadow: 0 0 .06em #fff, 0 0 .18em #ff3b30, 0 0 .45em #ff2418; }
}
@keyframes hf-pend { 0%, 100% { rotate: 16deg; } 50% { rotate: 19deg; } }
@keyframes hf-chute {
    0% { rotate: 17deg; }
    18% { rotate: 46deg; translate: .04em .22em; color: #4a1c1a; text-shadow: none; }
    30% { rotate: 34deg; }
    42% { rotate: 41deg; color: #ffd9d4; }
    60% { rotate: 22deg; }
    75% { rotate: 25deg; }
    100% { rotate: 17deg; }
}
@media (prefers-reduced-motion: reduce) { .hf-neon__l { animation: none !important; } }

/* Stickers à moitié arrachés sur la tôle */
.hf-sticker { position: absolute; z-index: 2; pointer-events: none; font-family: var(--f-cond); font-weight: 800; text-transform: uppercase; line-height: .95; }
.hf-sticker--noiz {
    top: 3.4rem; left: 1.6rem; width: 4.2rem; height: 4.2rem; display: grid; place-items: center; text-align: center;
    font-size: 1rem; letter-spacing: .06em; color: #f6e9d0; background: #b3141b; border-radius: 50%; rotate: -14deg;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .5), inset 0 0 0 3px rgba(0, 0, 0, .25);
    clip-path: polygon(0 0, 100% 0, 100% 62%, 84% 70%, 70% 66%, 58% 80%, 40% 74%, 26% 90%, 0 82%);
    filter: contrast(1.05) saturate(.85);
}
.hf-sticker--bloc {
    top: 4.6rem; right: 2rem; padding: .35rem .6rem .4rem; font-size: 1rem; letter-spacing: .08em;
    color: #111; background: #e9e1cf; rotate: 7deg; box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    clip-path: polygon(0 8%, 100% 0, 97% 100%, 72% 92%, 55% 100%, 3% 96%);
}
.hf-sticker--dechire {
    bottom: 5.6rem; left: .5rem; padding: .25rem .5rem; font-size: 1.4rem; letter-spacing: .12em;
    color: rgba(255, 255, 255, .55); background: rgba(10, 8, 7, .85); rotate: -82deg; transform-origin: left bottom;
    clip-path: polygon(0 0, 78% 0, 66% 40%, 74% 100%, 0 100%);
}

/* Billets usés : une auréole de café, des plis. */
.hf-ticket__corps::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(circle at 78% 72%, transparent 1.6rem, rgba(120, 70, 30, .22) 1.65rem 1.8rem, transparent 1.9rem),
        linear-gradient(98deg, transparent 47%, rgba(255, 255, 255, .05) 47.5%, rgba(0, 0, 0, .25) 48.5%, transparent 49.5%);
}
.hf-ticket:nth-child(even) .hf-ticket__corps::after {
    background:
        radial-gradient(ellipse 4rem 2rem at 18% 85%, rgba(90, 50, 20, .2), transparent 70%),
        linear-gradient(-84deg, transparent 61%, rgba(255, 255, 255, .05) 61.5%, rgba(0, 0, 0, .22) 62.5%, transparent 63.5%);
}

/* Le flyer : photocopie sale, pli au milieu, trace de doigt. */
.hf-panneau { filter: contrast(1.08); }
.hf-panneau::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(transparent 49%, rgba(0, 0, 0, .12) 49.6%, rgba(255, 255, 255, .25) 50.3%, transparent 51%),
        radial-gradient(ellipse 3rem 2rem at 82% 88%, rgba(60, 40, 30, .22), transparent 70%),
        radial-gradient(ellipse 5rem 1rem at 20% 8%, rgba(0, 0, 0, .12), transparent 70%);
}
@media (max-width: 640px) { .hf-sticker--dechire { display: none; } .hf-sticker--noiz { top: 2.6rem; left: .6rem; width: 3.4rem; height: 3.4rem; font-size: .8rem; } .hf-sticker--bloc { top: 3.2rem; right: .6rem; font-size: .8rem; } }

/* Le flyer : le papier déchiré est dessiné en dessous ; le scotch peut donc
   déborder du papier sans être coupé. */
.hf-panneau {
    isolation: isolate; clip-path: none; background: none; box-shadow: none;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6));
}
.hf-panneau::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(transparent 49%, rgba(0, 0, 0, .12) 49.6%, rgba(255, 255, 255, .25) 50.3%, transparent 51%),
        radial-gradient(ellipse 3rem 2rem at 82% 88%, rgba(60, 40, 30, .22), transparent 70%),
        radial-gradient(ellipse 5rem 1rem at 20% 8%, rgba(0, 0, 0, .12), transparent 70%),
        var(--grain-papier), var(--grain-papier), linear-gradient(175deg, #ece9e2, #d3cec4);
    background-size: auto, auto, auto, 160px, 90px, auto;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, .18);
    clip-path: polygon(0 0, 100% 0, 100% 97%, 94% 100%, 86% 97.5%, 77% 100%, 66% 98%, 55% 100%, 44% 97.5%, 33% 100%, 22% 98%, 11% 100%, 0 97.5%);
}
.hf-panneau::after { content: none; }
.hf-panneau__punaise { z-index: 2; }


/* Le guichet garde un cadre droit ; la lettre « q » ne pend plus en permanence. */
.hf-guichet { clip-path: none; }
.hf-neon__l--pend { rotate: none; translate: none; animation: none; }

/* Une lettre décrochée qui grésille. */
.hf-neon__l.is-morte { color: #3d1715 !important; text-shadow: none !important; }

/* Billets : un pli et une salissure différents sur chacun, plus d'auréole. */
.hf-ticket__corps::after,
.hf-ticket:nth-child(even) .hf-ticket__corps::after {
    background:
        radial-gradient(ellipse var(--tache-l, 4rem) var(--tache-h, 1.6rem) at var(--tache-x, 20%) var(--tache-y, 80%), rgba(110, 66, 30, var(--tache-o, .18)), transparent 70%),
        linear-gradient(var(--pli-a, 98deg), transparent calc(var(--pli-x, 48%) - .5%), rgba(255, 255, 255, .05) var(--pli-x, 48%), rgba(0, 0, 0, .24) calc(var(--pli-x, 48%) + 1%), transparent calc(var(--pli-x, 48%) + 2%));
}

/* Une lettre tombée : on peut l'attraper pour la remettre droite. */
.hf-neon__l.is-tombee { z-index: 2; cursor: grab; touch-action: none; animation: none; }
.hf-neon__l.is-tenue { cursor: grabbing; }

/* ===================================================== Hell-List : l'affiche de rêve */

.hf-reve-page { max-width: 78rem; }
.hf-reve-atelier { margin-top: .8rem; grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); }
.hf-reve-atelier .hf-hl__affiche { width: 100%; margin-top: .9rem; flex: none; }

.hf-reve {
    container-type: inline-size; position: relative; isolation: isolate; overflow: hidden;
    padding: clamp(1rem, 3cqw, 2rem) clamp(.8rem, 2.6cqw, 1.8rem) 1.2rem; text-align: center;
    background:
        radial-gradient(70% 40% at 50% 0%, rgba(160, 22, 18, .35), transparent 70%),
        radial-gradient(80% 30% at 50% 100%, rgba(120, 16, 12, .35), transparent 70%),
        linear-gradient(#140c0b, #0b0706);
    border: 1px solid #000; box-shadow: 0 0 0 1px rgba(232, 221, 198, .08), 0 24px 70px rgba(0, 0, 0, .7);
}
.hf-reve::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain-mur); background-size: 220px; mix-blend-mode: screen; opacity: .6; }

.hf-reve__pres { margin: 0; font: 800 clamp(.62rem, 1.6cqw, .85rem)/1 var(--f-cond); letter-spacing: .5em; text-indent: .5em; color: var(--bone-dim); }
.hf-reve__titre { margin: .1em 0 0; font: 400 clamp(3rem, 13cqw, 7rem)/.9 var(--f-display); color: var(--bone); text-shadow: 0 0 .2em rgba(200, 30, 24, .55), 0 .04em 0 #4a0709; rotate: -2deg; }
.hf-reve__sous { margin: .5rem 0 0; font: 700 clamp(.7rem, 1.9cqw, 1rem)/1 var(--f-cond); letter-spacing: .3em; text-transform: uppercase; color: var(--bone); }
.hf-reve__sous b { color: #ff3d44; }
.hf-reve__bas { margin: 1.2rem 0 0; font: 700 clamp(.65rem, 1.6cqw, .85rem)/1 var(--f-cond); letter-spacing: .35em; text-indent: .35em; text-transform: uppercase; color: var(--bone-dim); }

.hf-reve__etages { display: grid; gap: clamp(.8rem, 2.4cqw, 1.4rem); margin-top: clamp(1rem, 3cqw, 1.8rem); }
.hf-reve__etage { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.4rem, 1.4cqw, .9rem); }
.hf-reve__etage + .hf-reve__etage { padding-top: clamp(.8rem, 2.4cqw, 1.4rem); border-top: 1px solid rgba(223, 31, 40, .45); }

.hf-place {
    position: relative; display: grid; justify-items: center; align-content: center; gap: .45rem;
    min-width: 0; padding: .6rem .4rem; border: 2px dashed rgba(232, 221, 198, .2); border-radius: .5rem;
    cursor: pointer; transition: border-color .15s, background-color .15s, transform .15s;
}
.hf-place:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.hf-place.is-plein { border-color: transparent; cursor: grab; }
.hf-place.is-plein:hover { border-color: rgba(232, 221, 198, .18); }
.hf-place.is-survol { border: 2px solid var(--bone); background: rgba(177, 22, 29, .25); transform: scale(1.03); }
.hf-place.is-source { opacity: .35; }
.a-main .hf-place:not(.is-source):hover { border-color: var(--bone); background: rgba(177, 22, 29, .2); cursor: copy; }
.hf-place:hover .hf-case__x, .hf-place:focus-within .hf-case__x { opacity: 1; }
.hf-place .hf-case__x { top: .3rem; right: .3rem; z-index: 2; }

.hf-place__vide { font: 800 clamp(.7rem, 1.8cqw, .95rem)/1.1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: rgba(232, 221, 198, .3); }
.hf-place__nom { max-width: 100%; font: 800 1rem/1.05 var(--f-cond); text-transform: uppercase; letter-spacing: .02em; color: var(--bone); overflow-wrap: anywhere; text-shadow: 0 .06em 0 rgba(0, 0, 0, .7); }
.hf-place.is-hit .hf-place__nom { color: #ff5a5f; }
.hf-place .hf-place__rond { border-width: 2px; }
.hf-place.is-hit .hf-place__rond { border-color: #ff4a50; box-shadow: 0 0 0 3px rgba(223, 31, 40, .35), 0 0 18px rgba(255, 60, 40, .7); }

/* 1er étage : les têtes d'affiche, en énorme. */
.hf-place--1 { min-height: clamp(9rem, 30cqw, 15rem); }
.hf-place--1 .hf-place__rond { width: min(78%, 10rem); border-width: 3px; font-size: clamp(2rem, 8cqw, 4rem); }
.hf-place--1 .hf-place__nom { font-size: clamp(1rem, 4.4cqw, 2.1rem); color: #fff1ec; text-shadow: 0 0 .25em rgba(223, 31, 40, .8), 0 .06em 0 #4a0709; }
.hf-place--1 .hf-place__vide { font-size: clamp(.75rem, 2cqw, 1rem); }

/* 2e étage : plus petit. */
.hf-place--2 { min-height: clamp(6rem, 19cqw, 9.5rem); }
.hf-place--2 .hf-place__rond { width: min(52%, 5.4rem); font-size: clamp(1.4rem, 4.6cqw, 2.2rem); }
.hf-place--2 .hf-place__nom { font-size: clamp(.85rem, 2.7cqw, 1.3rem); }
.hf-place--2 .hf-place__vide { font-size: 1.6rem; font-weight: 400; }

/* Bas de l'affiche : seulement des noms. */
.hf-reve__etage--3 { gap: .35rem; }
.hf-place--3 { min-height: 2.6rem; padding: .35rem 1.4rem; }
.hf-place--3 .hf-place__nom { font-size: clamp(.75rem, 2.1cqw, 1rem); color: var(--bone-dim); }
.hf-place--3 .hf-place__vide { font-size: 1.2rem; font-weight: 400; }
.hf-place--3 .hf-case__x { top: 50%; translate: 0 -50%; }

@media (max-width: 900px) {
    .hf-reve-atelier { grid-template-columns: minmax(0, 1fr); }
    .hf-reve-atelier .hf-atelier__liste { position: static; max-height: none; }
}

/* L'affiche en grand : plus haute, avec le bas en noms. */
.hf-affiche--reve { height: 192cqw; }
.hf-affiche--reve .hf-af-tete.is-grand .hf-af__img { aspect-ratio: 4 / 5; }
.hf-affiche__petits {
    left: 6cqw; right: 6cqw; top: 166cqw; z-index: 12; margin: 0; text-align: center;
    font: 800 3.4cqw/1.5 var(--f-cond); letter-spacing: .03em; text-transform: uppercase; color: var(--bone);
    text-shadow: 0 .08em .3em rgba(0, 0, 0, .9);
}
.hf-affiche__petits i { margin: 0 .5em; font-style: normal; color: #df1f28; }
.hf-affiche__petits .is-annonce { color: #ff5a5f; }
.hf-reve__sous { margin: .7rem 0 0; font-size: clamp(.9rem, 2.6cqw, 1.35rem); letter-spacing: .26em; }

/* La lettre tombée, défectueuse : éteinte, il ne reste qu'un léger liseré lumineux sur un côté. */
.hf-neon__l.is-tombee.is-morte {
    color: #2e1312 !important;
    text-shadow: -1px 0 1px rgba(255, 70, 50, .5), -1px 0 .12em rgba(255, 40, 25, .22) !important;
}
.hf-neon__l.is-tombee.is-faible {
    color: #9b4a42 !important;
    text-shadow: 0 0 .08em rgba(255, 50, 30, .55), 0 0 .25em rgba(255, 30, 20, .25) !important;
}

/* ===================================================== Hell-List : la grande affiche (A4) */

/* Polices de l'affiche, auto-hébergées (SIL OFL ; Special Elite : Apache 2.0). Chargées seulement quand l'affiche s'ouvre. */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/hf-anton-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/hf-anton-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "New Rocker"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/hf-new-rocker-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "New Rocker"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/hf-new-rocker-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Rubik Dirt"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/hf-rubik-dirt-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Rubik Dirt"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/hf-rubik-dirt-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Special Elite"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/hf-special-elite-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Special Elite"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/hf-special-elite-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/hf-bebas-neue-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Bebas Neue"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/hf-bebas-neue-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

.hf-place__rang { font: 700 .72rem/1 var(--f-cond); letter-spacing: .16em; text-transform: uppercase; color: rgba(232, 221, 198, .45); }

/* Le cadre tient dans l'écran : sa hauteur (largeur × 1,414) ne dépasse pas la fenêtre. */
.hf-ga-cadre { width: min(40rem, 100%, calc((100vh - 6.5rem) * .7071)); }
.hf-ga { position: relative; isolation: isolate; overflow: hidden; height: 141.33cqw; background: #2a201d; box-shadow: 0 40px 120px rgba(0, 0, 0, .85); color: #f1ebde; }
.hf-ga > *, .hf-ga__affiche > * { position: absolute; margin: 0; }

/* Le papier blanc abîmé, coin haut-droit arraché */
.hf-ga__papier { inset: 1.17cqw; background: #f1ebde;
    clip-path: polygon(0 .5%, 30% 0, 62% .6%, 84% 0, 90% 2.4%, 95% 1.6%, 97% 4.5%, 100% 6%, 99.5% 30%, 100% 58%, 99.4% 82%, 100% 99.5%, 71% 100%, 44% 99.4%, 15% 100%, .4% 99.6%, 1% 71%, 0 44%, .8% 19%); }
.hf-ga__affiche { left: 3.33cqw; top: 3.67cqw; right: 3.33cqw; bottom: 3.67cqw; overflow: hidden; isolation: isolate;
    background: radial-gradient(55% 30% at 55% 30%, rgba(179, 20, 26, .35), transparent 75%), #0c0807; }
.hf-ga__scotch { width: 20cqw; height: 4.3cqw; background: rgba(232, 222, 196, .55); z-index: 5; }
.hf-ga__scotch.is-haut { left: 38cqw; top: 1cqw; rotate: -3deg; }
.hf-ga__scotch.is-bas { left: -3cqw; bottom: 5cqw; width: 16cqw; rotate: 42deg; }

/* Le bandeau 20 / 27 */
.hf-ga__bande { left: 3cqw; top: -2.7cqw; width: 6.67cqw; height: 145cqw; rotate: -1.4deg; z-index: 1;
    display: flex; flex-direction: column; align-items: center; overflow: hidden;
    background: #f1ebde; color: #0b0706; font: 400 5.67cqw/1 "Anton", var(--f-cond); }
.hf-ga__bande .is-creux { color: transparent; -webkit-text-stroke: .23cqw #0b0706; }

/* En-tête */
.hf-ga__pres { left: 12.67cqw; right: 2.33cqw; top: 2.33cqw; text-align: center; font: 400 1.83cqw/1 "Special Elite", monospace; letter-spacing: .32em; color: #b8ad9b; z-index: 3; }
.hf-ga__titre { left: 12.67cqw; right: 2.33cqw; top: 4.4cqw; text-align: center; font: 400 12.67cqw/1 var(--f-display); color: #e3272d; text-shadow: .5cqw .33cqw 0 rgba(241, 235, 222, .9); z-index: 3; }

/* Les 3 têtes d'affiche : photos rouges déchirées */
.hf-ga__tete { z-index: 2; }
.hf-ga__tete .hf-af__img { width: 100%; height: 100%;
    clip-path: polygon(2% 2%, 18% 0, 35% 1.5%, 52% 0, 70% 2%, 86% .5%, 99% 1%, 100% 20%, 98.4% 41%, 100% 62%, 98.8% 83%, 100% 99%, 80% 98%, 61% 100%, 43% 98.5%, 24% 100%, 6% 98%, 0 99%, 1.2% 77%, 0 55%, 1.6% 33%, 0 14%); }
.hf-ga__tete.is-g { left: 11.67cqw; top: 25cqw; width: 25cqw; height: 35.33cqw; rotate: -3deg; filter: brightness(.88); }
.hf-ga__tete.is-d { left: 66.33cqw; top: 23cqw; width: 25cqw; height: 35.33cqw; rotate: 2.5deg; filter: brightness(.88); }
.hf-ga__tete.is-c { left: 30.33cqw; top: 19.67cqw; width: 41.67cqw; height: 44.67cqw; z-index: 3; filter: drop-shadow(0 1.6cqw 3cqw rgba(0, 0, 0, .65)); }
.hf-ga__tete .hf-af__img img { filter: grayscale(1) contrast(1.7) brightness(1.05); }
.hf-ga__tete .hf-af__img::before { background: #e0242b; opacity: .92; }

/* Les noms des 3 : chacun sa police, sans numéro */
.hf-ga__n1 { left: 10cqw; right: 0; top: 61.33cqw; z-index: 4; text-align: center; white-space: nowrap;
    font: 400 14.6cqw/1 "Anton", var(--f-cond); letter-spacing: .015em; text-transform: uppercase; color: #f1ebde; text-shadow: .67cqw .5cqw 0 #b3141a; }
.hf-ga__duo { left: 12.67cqw; right: 2.33cqw; top: 78.33cqw; z-index: 4; display: flex; align-items: baseline; justify-content: center; gap: 3cqw; white-space: nowrap; }
.hf-ga__n2 { font: 400 7.6cqw/1 "New Rocker", var(--f-display); color: #e3272d; }
.hf-ga__n3 { font: 400 6cqw/1 "Rubik Dirt", var(--f-cond); text-transform: uppercase; letter-spacing: .02em; color: #f1ebde; }
.hf-ga__etoile { font: 400 2.67cqw/1 "Anton", sans-serif; color: #6e645a; }
.hf-ga__vide { left: 12cqw; right: 2cqw; top: 38cqw; text-align: center; font: italic 600 4cqw/1 var(--f-cond); color: rgba(241, 235, 222, .4); }

/* Les 6 : planche contact noir et blanc, penchée */
.hf-ga__planche { left: 11.67cqw; right: 1cqw; top: 91.33cqw; height: 18.67cqw; rotate: -1.5deg; z-index: 2;
    padding: 2.67cqw 2cqw; box-sizing: border-box; display: flex; justify-content: center; gap: 1.17cqw;
    background:
        repeating-linear-gradient(90deg, #d9d1c1 0 1.17cqw, transparent 1.17cqw 2.67cqw) 0 .67cqw / 100% 1.17cqw no-repeat,
        repeating-linear-gradient(90deg, #d9d1c1 0 1.17cqw, transparent 1.17cqw 2.67cqw) 0 calc(100% - .67cqw) / 100% 1.17cqw no-repeat,
        #0b0706;
    box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .6), inset 0 0 0 1px #2c2522; }
.hf-ga__cliche { position: relative; width: 12.6cqw; flex: none; }
.hf-ga__cliche .hf-af__img { height: 100%; background: linear-gradient(165deg, #6c665d, #2a2724); }
.hf-ga__cliche .hf-af__img img { filter: grayscale(1) contrast(1.35) brightness(1.08); }
.hf-ga__cliche .hf-af__img::before { content: none; }
.hf-ga__cliche .hf-af__img-init { font-size: 6cqw; color: rgba(241, 235, 222, .5); }
.hf-ga__noms6 { left: 13.67cqw; right: 3cqw; top: 110.67cqw; rotate: -1.5deg; z-index: 3; display: flex; justify-content: center; gap: 1.17cqw; text-align: center; }
.hf-ga__noms6 span { width: 12.6cqw; flex: none; font: 400 2.9cqw/1 "Bebas Neue", var(--f-cond); letter-spacing: .04em; color: #f1ebde; overflow-wrap: anywhere; }
.hf-ga__noms6 span:nth-child(even) { color: #e3272d; }

/* Les 9 */
.hf-ga__bas9 { left: 13.33cqw; right: 3cqw; top: 117cqw; z-index: 3; text-align: center; font: 600 2.4cqw/1.6 var(--f-cond); letter-spacing: .05em; text-transform: uppercase; color: #b8ad9b; }
.hf-ga__bas9 i { font-style: normal; color: #e3272d; }
.hf-ga .is-annonce { color: #ff5a5f; }

/* Pied */
.hf-ga__signe { left: 13.33cqw; bottom: 2.33cqw; z-index: 3; font: 400 2cqw/1 "Special Elite", monospace; letter-spacing: .14em; color: #f1ebde; }
.hf-ga__signe b { font-weight: 400; color: #e3272d; text-transform: uppercase; }
.hf-ga__tampon { right: 2.33cqw; bottom: 1.67cqw; z-index: 3; padding: .67cqw 1.5cqw; border: .42cqw solid #e3272d; color: #e3272d; text-align: center; rotate: -7deg; opacity: .9;
    font: 400 2.17cqw/1.1 "Bebas Neue", var(--f-cond); letter-spacing: .14em; text-transform: uppercase; }
.hf-ga .hf-affiche__grain { z-index: 6; }

/*
 * Le titre « Hellfest » de l'accueil retrouve ses braises : chaque lettre
 * rougeoie à son tour, comme un fer chauffé. (L'animation avait disparu :
 * une autre, plus loin, portait le même nom « hf-braise ».)
 */
.hf-hero__titre span {
    animation:
        hf-lettre 1.1s calc(1.05s + var(--i) * .09s) cubic-bezier(.2, .9, .3, 1) both,
        hf-braise-titre 3.6s calc(2.6s + var(--i) * .31s) ease-in-out infinite;
}
@keyframes hf-braise-titre {
    0%, 100% { text-shadow: 0 0 .12em rgba(255, 90, 40, .15), 0 0 .5em rgba(190, 30, 24, .25); }
    50%      { text-shadow: 0 0 .1em rgba(255, 140, 60, .5), 0 0 .55em rgba(220, 50, 30, .7), 0 .06em .9em rgba(120, 10, 10, .8); }
}
@media (prefers-reduced-motion: reduce) { .hf-hero__titre span { animation: none !important; } }

/* ===== Grande affiche : l'affiche prend toute l'image, un morceau de papier déchiré collé sur le côté droit */
.hf-ga__affiche { inset: 0; z-index: 1; }

/* Le papier : un bord arraché net et organique, une frange de fibres plus claires, une ombre portée sur l'affiche. */
.hf-ga__papier { inset: 0 0 0 auto; width: 11cqw; z-index: 3; clip-path: none; background: none; -webkit-mask: none; mask: none;
    filter: drop-shadow(-.35cqw 0 .5cqw rgba(0, 0, 0, .55)); }
.hf-ga__papier i { position: absolute; inset: 0; }
.hf-ga__fibres { background: rgba(250, 247, 238, .85); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 141' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-40%25' y='-5%25' width='180%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7 .3' numOctaves='5' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cg filter='url(%23d)'%3E%3Cpath d='M8.15 -4 L7.32 9 L9.72 21 L6.95 33 L9.17 46 L8.36 58 L6.88 71 L9.04 83 L6.78 96 L8.68 108 L6.94 121 L7.04 133 L8.64 146 L26 146 L26 -4 Z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 141' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-40%25' y='-5%25' width='180%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7 .3' numOctaves='5' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cg filter='url(%23d)'%3E%3Cpath d='M8.15 -4 L7.32 9 L9.72 21 L6.95 33 L9.17 46 L8.36 58 L6.88 71 L9.04 83 L6.78 96 L8.68 108 L6.94 121 L7.04 133 L8.64 146 L26 146 L26 -4 Z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100%; opacity: .9; }
.hf-ga__feuille { background:
        radial-gradient(120% 40% at 30% 20%, rgba(255, 255, 255, .35), transparent 70%),
        radial-gradient(90% 30% at 70% 75%, rgba(120, 100, 70, .12), transparent 70%),
        linear-gradient(90deg, #e2d9c6, #efe8da 35%, #f2ece0);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 141' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-40%25' y='-5%25' width='180%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.16 .06' numOctaves='5' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cg filter='url(%23d)'%3E%3Cpath d='M9.15 -4 L8.32 9 L10.72 21 L7.95 33 L10.17 46 L9.36 58 L7.88 71 L10.04 83 L7.78 96 L9.68 108 L7.94 121 L8.04 133 L9.64 146 L26 146 L26 -4 Z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 141' preserveAspectRatio='none'%3E%3Cfilter id='d' x='-40%25' y='-5%25' width='180%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.16 .06' numOctaves='5' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Cg filter='url(%23d)'%3E%3Cpath d='M9.15 -4 L8.32 9 L10.72 21 L7.95 33 L10.17 46 L9.36 58 L7.88 71 L10.04 83 L7.78 96 L9.68 108 L7.94 121 L8.04 133 L9.64 146 L26 146 L26 -4 Z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100%; }
.hf-ga__feuille::after { content: ""; position: absolute; inset: 0; background-image: var(--grain-papier); background-size: 160px; mix-blend-mode: multiply; opacity: .5; }

/* Les têtes d'affiche : comme avant les bords blancs (lambeaux légèrement déchirés, grandes, qui se chevauchent). */
.hf-ga__tete.is-g { left: 11.67cqw; top: 25cqw; width: 25cqw; height: 35.33cqw; filter: brightness(.88); }
.hf-ga__tete.is-d { left: 64cqw; top: 23cqw; width: 25cqw; height: 35.33cqw; filter: brightness(.88); }
.hf-ga__tete.is-c { left: 30.33cqw; top: 19.67cqw; width: 41.67cqw; height: 44.67cqw; }

/* Ordre des couches : affiche (photos < noms < tampon) < papier déchiré < bandeau < scotch. */
.hf-ga__n1, .hf-ga__duo { z-index: 5; }
.hf-ga__tampon { z-index: 7; }

/* Le bandeau 20/27 : du haut en bas de l'image, un peu décollé du bord gauche. */
.hf-ga__bande { left: 2.4cqw; top: -4cqw; height: 152cqw; z-index: 4; box-shadow: 0 0 1.4cqw rgba(0, 0, 0, .45); }

/* Le scotch : un ruban mat, un peu translucide, bords longs droits, bouts coupés en dents, légers plis, petite ombre. */
.hf-ga__scotch { z-index: 8; background: none; -webkit-mask: none; mask: none; filter: drop-shadow(0 .25cqw .35cqw rgba(0, 0, 0, .4)); }
.hf-ga__scotch i { position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 22%, transparent 78%, rgba(90, 70, 40, .12)),
        repeating-linear-gradient(97deg, rgba(255, 255, 255, .07) 0 .3cqw, transparent .3cqw 1.4cqw),
        linear-gradient(90deg, rgba(232, 222, 196, .78), rgba(242, 234, 212, .7) 50%, rgba(228, 217, 188, .8));
    clip-path: polygon(0 4%, 3% 18%, .5% 33%, 3.5% 50%, .5% 66%, 3% 82%, 0 96%, 100% 100%, 97.5% 85%, 99.5% 70%, 96.8% 52%, 99.5% 36%, 97% 18%, 100% 0); }
.hf-ga__scotch.is-haut { left: auto; right: -2.5cqw; top: 3.4cqw; width: 15cqw; height: 4.4cqw; rotate: 36deg; }
.hf-ga__scotch.is-bas { left: -2.5cqw; bottom: 2.5cqw; width: 15cqw; height: 4.4cqw; rotate: 40deg; }

/* Le contenu laisse la place au bandeau (à gauche) et au papier déchiré (à droite). */
.hf-ga__pres, .hf-ga__titre { left: 11cqw; right: 11cqw; }
.hf-ga__n1 { left: 11cqw; right: 9cqw; }
.hf-ga__duo { left: 11cqw; right: 11cqw; }
.hf-ga__planche { left: 11cqw; right: 9.5cqw; }
.hf-ga__cliche, .hf-ga__noms6 span { width: 11.6cqw; }
.hf-ga__noms6 { left: 13cqw; right: 11.5cqw; }
.hf-ga__bas9 { left: 12cqw; right: 12cqw; }
.hf-ga__signe { left: 14cqw; }
.hf-ga__tampon { right: 11.5cqw; }

/* Le bord arraché est tracé par le script (masque posé sur chaque calque). */
.hf-ga__fibres, .hf-ga__feuille { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.hf-ga__fibres { background: rgba(252, 249, 241, .92); }

/* Le scotch : un simple ruban plat, couleur papier, bouts déchirés. */
.hf-ga__scotch { filter: none; }
.hf-ga__scotch i { background: #e9e1cc; opacity: .92;
    clip-path: polygon(0 10%, 4% 24%, 1% 40%, 5% 55%, 0 72%, 3% 88%, 1% 100%, 99% 92%, 96% 78%, 100% 62%, 95.5% 47%, 99% 30%, 96% 15%, 100% 0); }

/* Le papier de droite : plus granuleux. */
.hf-ga__feuille::after { opacity: .85; background-size: 110px; }
.hf-ga__papier { filter: drop-shadow(-.25cqw 0 .35cqw rgba(0, 0, 0, .5)); }

/* Les photos des têtes d'affiche : contours fondus, rongés, grunge. */
.hf-ga__tete .hf-af__img { clip-path: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='7' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='4' seed='4' result='n'/%3E%3CfeComposite in='b' in2='n' operator='arithmetic' k1='0' k2='5.4' k3='3.6' k4='-5.4' result='c'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='9' result='g'/%3E%3CfeComposite in='c' in2='g' operator='arithmetic' k1='0' k2='1.5' k3='.9' k4='-.7'/%3E%3C/filter%3E%3Crect x='5' y='5' width='90' height='90' fill='%23fff' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='7' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='4' seed='4' result='n'/%3E%3CfeComposite in='b' in2='n' operator='arithmetic' k1='0' k2='5.4' k3='3.6' k4='-5.4' result='c'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='9' result='g'/%3E%3CfeComposite in='c' in2='g' operator='arithmetic' k1='0' k2='1.5' k3='.9' k4='-.7'/%3E%3C/filter%3E%3Crect x='5' y='5' width='90' height='90' fill='%23fff' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.hf-ga__tete.is-d .hf-af__img { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='7' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='4' seed='11' result='n'/%3E%3CfeComposite in='b' in2='n' operator='arithmetic' k1='0' k2='5.4' k3='3.6' k4='-5.4' result='c'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='16' result='g'/%3E%3CfeComposite in='c' in2='g' operator='arithmetic' k1='0' k2='1.5' k3='.9' k4='-.7'/%3E%3C/filter%3E%3Crect x='5' y='5' width='90' height='90' fill='%23fff' filter='url(%23f)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='7' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='4' seed='11' result='n'/%3E%3CfeComposite in='b' in2='n' operator='arithmetic' k1='0' k2='5.4' k3='3.6' k4='-5.4' result='c'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='16' result='g'/%3E%3CfeComposite in='c' in2='g' operator='arithmetic' k1='0' k2='1.5' k3='.9' k4='-.7'/%3E%3C/filter%3E%3Crect x='5' y='5' width='90' height='90' fill='%23fff' filter='url(%23f)'/%3E%3C/svg%3E"); }
.hf-ga__tete.is-c .hf-af__img { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='7' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='4' seed='19' result='n'/%3E%3CfeComposite in='b' in2='n' operator='arithmetic' k1='0' k2='5.4' k3='3.6' k4='-5.4' result='c'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='24' result='g'/%3E%3CfeComposite in='c' in2='g' operator='arithmetic' k1='0' k2='1.5' k3='.9' k4='-.7'/%3E%3C/filter%3E%3Crect x='5' y='5' width='90' height='90' fill='%23fff' filter='url(%23f)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='7' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='4' seed='19' result='n'/%3E%3CfeComposite in='b' in2='n' operator='arithmetic' k1='0' k2='5.4' k3='3.6' k4='-5.4' result='c'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='24' result='g'/%3E%3CfeComposite in='c' in2='g' operator='arithmetic' k1='0' k2='1.5' k3='.9' k4='-.7'/%3E%3C/filter%3E%3Crect x='5' y='5' width='90' height='90' fill='%23fff' filter='url(%23f)'/%3E%3C/svg%3E"); }

/* ===== Grande affiche, v6 */

/* Déchirure de droite plus étroite. */
.hf-ga__papier { width: 7cqw; }

/* Les têtes d'affiche : bien plus grandes, quitte à être mordues par le bandeau et le papier ; bords en papier déchiré. */
.hf-ga__tete.is-g { left: -1cqw; top: 19cqw; width: 36cqw; height: 46cqw; rotate: -3deg; }
.hf-ga__tete.is-d { left: 65cqw; top: 17cqw; width: 37cqw; height: 46cqw; rotate: 2.5deg; }
.hf-ga__tete.is-c { left: 21cqw; top: 14.5cqw; width: 58cqw; height: 54cqw; }
.hf-ga__titre, .hf-ga__pres { z-index: 6; }
.hf-ga__tete .hf-af__img { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-5' y='-5' width='110' height='110'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='5' seed='4' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='13' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeGaussianBlur in='d' stdDeviation='.45' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='7' result='n'/%3E%3CfeComposite in='b' in2='n' operator='arithmetic' k1='0' k2='5' k3='4' k4='-5.6'/%3E%3C/filter%3E%3Crect x='4' y='4' width='92' height='92' fill='%23fff' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-5' y='-5' width='110' height='110'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='5' seed='4' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='13' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeGaussianBlur in='d' stdDeviation='.45' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='7' result='n'/%3E%3CfeComposite in='b' in2='n' operator='arithmetic' k1='0' k2='5' k3='4' k4='-5.6'/%3E%3C/filter%3E%3Crect x='4' y='4' width='92' height='92' fill='%23fff' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.hf-ga__tete.is-d .hf-af__img { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-5' y='-5' width='110' height='110'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='5' seed='11' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='13' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeGaussianBlur in='d' stdDeviation='.45' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='14' result='n'/%3E%3CfeComposite in='b' in2='n' operator='arithmetic' k1='0' k2='5' k3='4' k4='-5.6'/%3E%3C/filter%3E%3Crect x='4' y='4' width='92' height='92' fill='%23fff' filter='url(%23f)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-5' y='-5' width='110' height='110'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='5' seed='11' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='13' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeGaussianBlur in='d' stdDeviation='.45' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='14' result='n'/%3E%3CfeComposite in='b' in2='n' operator='arithmetic' k1='0' k2='5' k3='4' k4='-5.6'/%3E%3C/filter%3E%3Crect x='4' y='4' width='92' height='92' fill='%23fff' filter='url(%23f)'/%3E%3C/svg%3E"); }
.hf-ga__tete.is-c .hf-af__img { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-5' y='-5' width='110' height='110'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='5' seed='19' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='13' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeGaussianBlur in='d' stdDeviation='.45' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='22' result='n'/%3E%3CfeComposite in='b' in2='n' operator='arithmetic' k1='0' k2='5' k3='4' k4='-5.6'/%3E%3C/filter%3E%3Crect x='4' y='4' width='92' height='92' fill='%23fff' filter='url(%23f)'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-5' y='-5' width='110' height='110'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='5' seed='19' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='13' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeGaussianBlur in='d' stdDeviation='.45' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='22' result='n'/%3E%3CfeComposite in='b' in2='n' operator='arithmetic' k1='0' k2='5' k3='4' k4='-5.6'/%3E%3C/filter%3E%3Crect x='4' y='4' width='92' height='92' fill='%23fff' filter='url(%23f)'/%3E%3C/svg%3E"); }
.hf-ga__n1 { top: 62cqw; }

/* Trame d'impression progressive : petits points, puis moyens, puis gros. */
.hf-ga__trame { position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: multiply; }
.hf-ga__trame i { position: absolute; inset: 0; background: radial-gradient(circle, #1a0706 var(--r), transparent calc(var(--r) + 8%)) 0 0 / var(--p) var(--p); }
.hf-ga__trame i:nth-child(1) { --p: .9cqw; --r: 22%; -webkit-mask: linear-gradient(var(--sens, 180deg), transparent 35%, #000 55%, transparent 72%); mask: linear-gradient(var(--sens, 180deg), transparent 35%, #000 55%, transparent 72%); }
.hf-ga__trame i:nth-child(2) { --p: 1.2cqw; --r: 34%; -webkit-mask: linear-gradient(var(--sens, 180deg), transparent 58%, #000 75%, transparent 90%); mask: linear-gradient(var(--sens, 180deg), transparent 58%, #000 75%, transparent 90%); }
.hf-ga__trame i:nth-child(3) { --p: 1.5cqw; --r: 46%; -webkit-mask: linear-gradient(var(--sens, 180deg), transparent 78%, #000 94%); mask: linear-gradient(var(--sens, 180deg), transparent 78%, #000 94%); }
.hf-ga__tete.is-d .hf-ga__trame { --sens: 270deg; }

/* Plus de tampon : le patch du joueur, sa photo de profil en écusson autocollant. */
.hf-ga__tampon { display: none; }
.hf-ga__patch { right: 5cqw; bottom: 3cqw; z-index: 7; width: 19cqw; display: grid; justify-items: center; rotate: -9deg;
    filter: drop-shadow(0 .6cqw .8cqw rgba(0, 0, 0, .6)); }
.hf-ga__patch-img { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
    background: #b3141a; color: #f1ebde; font: 400 9cqw/1 var(--f-display);
    border: 1.1cqw solid #f4efe4;
    box-shadow: inset 0 0 0 .55cqw #b3141a, inset 0 0 0 .8cqw rgba(0, 0, 0, .35); }
.hf-ga__patch-img::before { content: attr(data-init); }
.hf-ga__patch-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.1) saturate(.9); }
/* Les points de couture tout autour, comme un écusson brodé. */
.hf-ga__patch-img::after { content: ""; position: absolute; inset: .45cqw; border-radius: 50%; border: .3cqw dashed rgba(244, 239, 228, .85); }
.hf-ga__patch-nom { margin-top: -2.2cqw; padding: .5cqw 1.6cqw .6cqw; max-width: 24cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    background: #f4efe4; color: #0b0706; border-radius: .6cqw; font: 400 2.6cqw/1 "Bebas Neue", var(--f-cond); letter-spacing: .08em; text-transform: uppercase; position: relative; }
.hf-ga__signe { right: 28cqw; }

/* ===== Grande affiche, v7 */

/* Signature centrée en bas. */
.hf-ga__signe { left: 9cqw; right: 6cqw; text-align: center; }

/* La déchirure de droite, collée au bord. */
.hf-ga__papier { width: 4.6cqw; }

/* Trame d'impression plus marquée : de très fins points qui deviennent énormes. */
.hf-ga__trame { mix-blend-mode: multiply; }
.hf-ga__trame i:nth-child(1) { --p: .7cqw; --r: 18%; -webkit-mask: linear-gradient(var(--sens, 180deg), transparent 18%, #000 38%, transparent 55%); mask: linear-gradient(var(--sens, 180deg), transparent 18%, #000 38%, transparent 55%); }
.hf-ga__trame i:nth-child(2) { --p: 1.1cqw; --r: 36%; -webkit-mask: linear-gradient(var(--sens, 180deg), transparent 40%, #000 60%, transparent 78%); mask: linear-gradient(var(--sens, 180deg), transparent 40%, #000 60%, transparent 78%); }
.hf-ga__trame i:nth-child(3) { --p: 1.7cqw; --r: 58%; -webkit-mask: linear-gradient(var(--sens, 180deg), transparent 64%, #000 86%); mask: linear-gradient(var(--sens, 180deg), transparent 64%, #000 86%); }
.hf-ga__trame i { background: radial-gradient(circle, #0d0404 var(--r), transparent calc(var(--r) + 6%)) 0 0 / var(--p) var(--p); }

/* Le sticker du joueur : petit, usé, déchiré, troué et brûlé, couleur passée sur un côté, rayé. */
.hf-ga__patch { right: 8cqw; bottom: 6cqw; width: 12cqw; height: 12cqw; display: block; rotate: -11deg; filter: drop-shadow(0 .3cqw .4cqw rgba(0, 0, 0, .55));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-5' y='-5' width='110' height='110'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.07' numOctaves='4' seed='9' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='6' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeGaussianBlur in='d' stdDeviation='.5' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' seed='4' result='n'/%3E%3CfeComposite in='b' in2='n' operator='arithmetic' k1='0' k2='5' k3='4' k4='-5.6'/%3E%3C/filter%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='%23fff'/%3E%3Cpath d='M88 60 L101 52 L101 80 L84 74 L90 68 Z' fill='%23000'/%3E%3Ccircle cx='30' cy='72' r='5.5' fill='%23000'/%3E%3Ccircle cx='34' cy='75' r='3' fill='%23000'/%3E%3C/mask%3E%3Cg filter='url(%23f)'%3E%3Ccircle cx='50' cy='50' r='47.5' fill='%23fff' mask='url(%23m)'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-5' y='-5' width='110' height='110'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.07' numOctaves='4' seed='9' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='6' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeGaussianBlur in='d' stdDeviation='.5' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' seed='4' result='n'/%3E%3CfeComposite in='b' in2='n' operator='arithmetic' k1='0' k2='5' k3='4' k4='-5.6'/%3E%3C/filter%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='%23fff'/%3E%3Cpath d='M88 60 L101 52 L101 80 L84 74 L90 68 Z' fill='%23000'/%3E%3Ccircle cx='30' cy='72' r='5.5' fill='%23000'/%3E%3Ccircle cx='34' cy='75' r='3' fill='%23000'/%3E%3C/mask%3E%3Cg filter='url(%23f)'%3E%3Ccircle cx='50' cy='50' r='47.5' fill='%23fff' mask='url(%23m)'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.hf-ga__patch > span { position: absolute; inset: 1.5%; border-radius: 50%; }
.hf-ga__patch-img { display: grid; place-items: center; background: #b3141a; color: #f1ebde; font: 400 6cqw/1 var(--f-display);
    border: .9cqw solid #efe9dc; box-shadow: none; overflow: hidden; width: auto; aspect-ratio: auto; }
.hf-ga__patch-img::after { content: none; }
.hf-ga__patch-img img { filter: contrast(1.15) saturate(.85) sepia(.15); }
/* Couleur passée : une moitié délavée, presque grise. */
.hf-ga__patch-pale { background: linear-gradient(125deg, transparent 38%, #9b9b9b 72%); mix-blend-mode: saturation; }
.hf-ga__patch-pale::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(125deg, transparent 45%, rgba(245, 238, 222, .45) 85%); }
/* Rayures fines. */
.hf-ga__patch-rayures { background:
        linear-gradient(28deg, transparent 47%, rgba(255, 255, 255, .55) 47.6%, transparent 48.4%),
        linear-gradient(-14deg, transparent 61%, rgba(255, 255, 255, .45) 61.5%, transparent 62.2%),
        linear-gradient(71deg, transparent 33%, rgba(255, 255, 255, .4) 33.4%, transparent 34%),
        linear-gradient(8deg, transparent 72%, rgba(0, 0, 0, .35) 72.4%, transparent 73%);
    mix-blend-mode: screen; }
/* Brûlure autour du trou. */
.hf-ga__patch-brule { background: radial-gradient(circle at 31% 73%, transparent 6.5%, rgba(20, 8, 2, .95) 8%, rgba(70, 35, 10, .65) 12%, rgba(120, 70, 25, .25) 17%, transparent 22%); }
.hf-ga__patch-nom { display: none; }

/* Éditeur : les 3 têtes d'affiche numérotées. */
.hf-place__num { position: absolute; left: .45rem; top: .45rem; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
    background: var(--blood, #b3141a); color: #fff; font: 800 1rem/1 var(--f-cond); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); z-index: 2; }
.hf-place__rang { display: none; }

/* ===== Grande affiche, v8 */

/* La trame : moins de place (le dernier tiers seulement) et irrégulière (rongée par un bruit, inclinée comme une vraie trame). */
.hf-ga__trame { overflow: hidden; }
.hf-ga__trame i { inset: -25%; rotate: 15deg; }
.hf-ga__trame i:nth-child(1) { -webkit-mask: linear-gradient(var(--sens, 180deg), transparent 52%, #000 64%, transparent 76%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3' seed='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 -7 4.2'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 100% 100%; mask: linear-gradient(var(--sens, 180deg), transparent 52%, #000 64%, transparent 76%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3' seed='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 -7 4.2'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 100% 100%; -webkit-mask-composite: source-in; mask-composite: intersect; }
.hf-ga__trame i:nth-child(2) { -webkit-mask: linear-gradient(var(--sens, 180deg), transparent 62%, #000 72%, transparent 84%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 -7 4.2'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 100% 100%; mask: linear-gradient(var(--sens, 180deg), transparent 62%, #000 72%, transparent 84%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 -7 4.2'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 100% 100%; -webkit-mask-composite: source-in; mask-composite: intersect; }
.hf-ga__trame i:nth-child(3) { -webkit-mask: linear-gradient(var(--sens, 180deg), transparent 70%, #000 82%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3' seed='13'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 -7 4.2'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 100% 100%; mask: linear-gradient(var(--sens, 180deg), transparent 70%, #000 82%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3' seed='13'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 -7 4.2'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 100% 100%; -webkit-mask-composite: source-in; mask-composite: intersect; }

/* L'image centrale un peu plus petite : elle couvre moins les deux autres. */
.hf-ga__tete.is-c { left: 25cqw; top: 15cqw; width: 50cqw; height: 49cqw; }

/* Plus de signature : tout redescend un peu et le texte grandit. */
.hf-ga__signe { display: none; }
.hf-ga__n1 { top: 64.5cqw; }
.hf-ga__duo { top: 83.5cqw; gap: 3.5cqw; }
.hf-ga__etoile { font-size: 3cqw; }
.hf-ga__planche { top: 96.5cqw; height: 20cqw; }
.hf-ga__noms6 { top: 118.5cqw; }
.hf-ga__bas9 { top: 125.5cqw; left: 12cqw; right: 22cqw; font-size: 2.85cqw; line-height: 1.5; letter-spacing: .06em; color: #cfc4b2; }

/* Le sticker, plus bas. */
.hf-ga__patch { bottom: 2cqw; right: 7.5cqw; }

/* ===== Grande affiche, v9 : un titre avec de l'âme */
.hf-ga__pres { top: 2.2cqw; letter-spacing: .42em; color: #c9bda9; }
.hf-ga__titre { top: 4.6cqw; left: 9cqw; right: 5cqw; z-index: 6;
    font-size: 21cqw; line-height: .92; rotate: -3.5deg; color: #e3272d;
    /* Impression sérigraphiée : un repérage décalé couleur os, une ombre dure, une lueur de braise. */
    text-shadow: .55cqw .4cqw 0 #f1ebde, 1.25cqw 1.05cqw 0 rgba(0, 0, 0, .75), 0 0 4cqw rgba(255, 50, 30, .45);
    /* Encre usée : le titre est rongé par endroits. */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='0' y='0' width='300' height='100'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .7' numOctaves='3' seed='5' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .09' numOctaves='3' seed='12' result='b'/%3E%3CfeComposite in='a' in2='b' operator='arithmetic' k1='0' k2='1' k3='1.2' k4='-.35'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 9 -3.7'/%3E%3C/filter%3E%3Crect width='300' height='100' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='0' y='0' width='300' height='100'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .7' numOctaves='3' seed='5' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .09' numOctaves='3' seed='12' result='b'/%3E%3CfeComposite in='a' in2='b' operator='arithmetic' k1='0' k2='1' k3='1.2' k4='-.35'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 9 -3.7'/%3E%3C/filter%3E%3Crect width='300' height='100' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 100% 100%; }
/* Une lueur rouge derrière le titre, comme un projecteur dans la fumée. */
.hf-ga__affiche::before { content: ""; position: absolute; left: 10cqw; right: 6cqw; top: 2cqw; height: 26cqw; z-index: 0;
    background: radial-gradient(50% 55% at 50% 55%, rgba(200, 24, 18, .45), rgba(120, 10, 8, .18) 55%, transparent 75%); filter: blur(1.5cqw); pointer-events: none; }

/* Les têtes d'affiche descendent, quitte à passer sous le nom principal. */
.hf-ga__tete.is-g { top: 27cqw; }
.hf-ga__tete.is-d { top: 25cqw; }
.hf-ga__tete.is-c { top: 23.5cqw; height: 47cqw; }

/* La planche contact, un peu décalée à droite. */
.hf-ga__planche { left: 14.5cqw; right: 6cqw; }
.hf-ga__noms6 { left: 16.5cqw; right: 8cqw; }

/* ===== Grande affiche, v10 : le décor (fumée, braises, empreinte, barbelé, bracelet, rouille, tôle, talon) */

/* On remonte un peu le bas pour laisser dépasser le talon. */
.hf-ga__planche { top: 94cqw; }
.hf-ga__noms6 { top: 116cqw; }
.hf-ga__bas9 { top: 122.5cqw; left: 14cqw; right: 24cqw; }

/* Fumée rouge qui monte du bas. */
.hf-ga__fumee { left: -10cqw; right: -10cqw; bottom: -6cqw; height: 50cqw; z-index: 1; pointer-events: none;
    background:
        radial-gradient(40% 35% at 22% 85%, rgba(170, 30, 20, .32), transparent 70%),
        radial-gradient(45% 30% at 75% 92%, rgba(140, 22, 16, .3), transparent 70%),
        radial-gradient(60% 40% at 50% 100%, rgba(90, 80, 75, .25), transparent 70%);
    filter: blur(2cqw); }

/* Braises figées. */
.hf-ga__braises { inset: 0; z-index: 6; pointer-events: none; }
.hf-ga__braises i { position: absolute; border-radius: 50%;
    background: radial-gradient(circle, #fff1c2 0, #ffb347 30%, #ff4a1c 60%, transparent 72%);
    box-shadow: 0 0 .6cqw .15cqw rgba(255, 90, 30, .55); }

/* L'empreinte de rangers, poussiéreuse. */
.hf-ga__empreinte { left: 44cqw; top: 103cqw; width: 15cqw; height: 37cqw; z-index: 6; rotate: 24deg; color: #e6dac2; opacity: .2; pointer-events: none;
    mix-blend-mode: screen; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08' numOctaves='4' seed='21'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 4 -1.6'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08' numOctaves='4' seed='21'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 4 -1.6'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 100% 100%; }
.hf-ga__empreinte svg { display: block; width: 100%; height: 100%; }

/* Le barbelé, en travers du coin haut gauche. */
.hf-ga__barbele { left: -6cqw; top: 9cqw; width: 34cqw; height: 5.5cqw; rotate: -38deg; z-index: 7; pointer-events: none;
    filter: drop-shadow(0 .4cqw .4cqw rgba(0, 0, 0, .6)); }
.hf-ga__barbele svg { display: block; width: 100%; height: 100%; }

/* Le bracelet de festival, enroulé autour du coin bas gauche. */
.hf-ga__bracelet { left: -9cqw; bottom: 12cqw; width: 40cqw; height: 4.6cqw; rotate: 48deg; z-index: 8; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 .12cqw, transparent .12cqw .45cqw),
        repeating-linear-gradient(90deg, #a3121a 0 .3cqw, #b8161f .3cqw .6cqw);
    box-shadow: 0 .35cqw .5cqw rgba(0, 0, 0, .55), inset 0 .2cqw 0 rgba(255, 255, 255, .12), inset 0 -.2cqw 0 rgba(0, 0, 0, .3); }
.hf-ga__bracelet b { white-space: nowrap; font: 400 2.5cqw/1 "Bebas Neue", var(--f-cond); letter-spacing: .22em; color: #f4e9d2; opacity: .92; }
.hf-ga__clip { position: absolute; left: 58%; top: -.4cqw; bottom: -.4cqw; width: 3.4cqw; border-radius: .5cqw;
    background: linear-gradient(90deg, #1c1c1c, #3b3b3b 40%, #151515); box-shadow: 0 0 .3cqw rgba(0, 0, 0, .6); }

/* La rouille qui coule du scotch sur le papier. */
.hf-ga__rouille { right: .2cqw; top: 6cqw; width: 6cqw; height: 26cqw; z-index: 4; pointer-events: none; mix-blend-mode: multiply;
    background: linear-gradient(180deg, rgba(140, 62, 18, .85), rgba(120, 52, 16, .55) 45%, rgba(110, 48, 14, .25));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-5' y='-5' width='40' height='110'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' numOctaves='3' seed='3' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='3'/%3E%3CfeGaussianBlur stdDeviation='.6'/%3E%3C/filter%3E%3Cg filter='url(%23f)' fill='%23fff'%3E%3Cellipse cx='15' cy='8' rx='14' ry='7'/%3E%3Crect x='5' y='8' width='3' height='45' rx='1.5'/%3E%3Ccircle cx='6.5' cy='53' r='2.2'/%3E%3Crect x='13' y='8' width='2.4' height='72' rx='1.2'/%3E%3Ccircle cx='14.2' cy='80' r='1.9'/%3E%3Crect x='21' y='8' width='2' height='30' rx='1'/%3E%3Ccircle cx='22' cy='38' r='1.6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-5' y='-5' width='40' height='110'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.25' numOctaves='3' seed='3' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='3'/%3E%3CfeGaussianBlur stdDeviation='.6'/%3E%3C/filter%3E%3Cg filter='url(%23f)' fill='%23fff'%3E%3Cellipse cx='15' cy='8' rx='14' ry='7'/%3E%3Crect x='5' y='8' width='3' height='45' rx='1.5'/%3E%3Ccircle cx='6.5' cy='53' r='2.2'/%3E%3Crect x='13' y='8' width='2.4' height='72' rx='1.2'/%3E%3Ccircle cx='14.2' cy='80' r='1.9'/%3E%3Crect x='21' y='8' width='2' height='30' rx='1'/%3E%3Ccircle cx='22' cy='38' r='1.6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100%; }

/* La plaque de tôle rouillée sous le sticker, avec ses rivets. */
.hf-ga__plaque { right: 3cqw; bottom: -1.5cqw; width: 21cqw; height: 18cqw; rotate: 5deg; z-index: 6;
    background: linear-gradient(135deg, #6f6a64, #4b4642 55%, #3a3532);
    clip-path: polygon(2% 4%, 97% 0, 100% 96%, 0 100%);
    box-shadow: inset 0 0 1.5cqw rgba(0, 0, 0, .6); }
.hf-ga__plaque::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' numOctaves='5' seed='17'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 .9 .35  0 0 0 .45 .14  0 0 0 .15 .04  0 0 0 1.6 -.55'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 100% 100%; mix-blend-mode: hard-light; opacity: .95; }
.hf-ga__plaque i { position: absolute; z-index: 1; width: 1.4cqw; height: 1.4cqw; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #c9c2b8, #6d655d 55%, #2b2623); box-shadow: 0 .15cqw .2cqw rgba(0, 0, 0, .6); }
.hf-ga__plaque i:nth-child(1) { left: 7%; top: 9%; }
.hf-ga__plaque i:nth-child(2) { right: 7%; top: 7%; }
.hf-ga__plaque i:nth-child(3) { left: 6%; bottom: 10%; }
.hf-ga__plaque i:nth-child(4) { right: 8%; bottom: 8%; }
.hf-ga__patch { right: 7.5cqw; bottom: 2cqw; z-index: 7; }

/* Le talon de billet, qui dépasse en bas. */
.hf-ga__talon { left: 14cqw; bottom: -1.6cqw; width: 26cqw; height: 8cqw; rotate: -3deg; z-index: 6; box-sizing: border-box;
    padding: 1cqw 1.6cqw 1cqw 3cqw; display: grid; align-content: start; gap: .35cqw;
    background:
        radial-gradient(circle at 0 50%, transparent .9cqw, transparent .9cqw) ,
        linear-gradient(90deg, transparent 1.6cqw, rgba(0, 0, 0, .25) 1.6cqw, rgba(0, 0, 0, .25) 1.75cqw, transparent 1.75cqw),
        #e8dfc9;
    color: #1a1210; box-shadow: 0 .3cqw .6cqw rgba(0, 0, 0, .55);
    -webkit-mask: radial-gradient(circle at 0 2.2cqw, transparent .8cqw, #000 .85cqw); mask: radial-gradient(circle at 0 2.2cqw, transparent .8cqw, #000 .85cqw); }
.hf-ga__talon b { font: 400 2.7cqw/1 "Bebas Neue", var(--f-cond); letter-spacing: .12em; color: #b3141a; }
.hf-ga__talon span { font: 400 1.45cqw/1 "Special Elite", monospace; letter-spacing: .04em; text-transform: uppercase; }
.hf-ga__talon em { font: 400 1.5cqw/1 "Special Elite", monospace; font-style: normal; color: #6b5f52; }
.hf-ga__barbele { left: -9cqw; top: 5cqw; width: 30cqw; }
.hf-ga__talon { left: 27cqw; width: 25cqw; rotate: 2.5deg; }
.hf-ga__rouille { width: 7cqw; height: 30cqw; top: 7cqw; right: 0; mix-blend-mode: normal; opacity: .85; z-index: 5; }
.hf-ga__barbele { left: -7cqw; top: 7.5cqw; width: 32cqw; }
.hf-ga__talon { width: 29cqw; height: 9cqw; bottom: -1.2cqw; }
.hf-ga__talon span { white-space: nowrap; }

/* ===== Grande affiche, v11 */
.hf-ga__barbele, .hf-ga__plaque, .hf-ga__talon { display: none; }
.hf-ga__planche { top: 95cqw; }
.hf-ga__noms6 { top: 117cqw; }
.hf-ga__bas9 { top: 124cqw; }

/* L'empreinte : plus grande, plus discrète. */
.hf-ga__empreinte { left: 34cqw; top: 82cqw; width: 26cqw; height: 64cqw; rotate: 19deg; opacity: .1; }

/* La rouille : une tache rongée sous le scotch, quelques coulures fines et effilées, couleur oxydée variée. */
.hf-ga__rouille { right: 0; top: 5.5cqw; width: 11cqw; height: 30cqw; z-index: 5; opacity: .78; mix-blend-mode: normal; background: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-5' y='-5' width='50' height='110'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.18' numOctaves='4' seed='8' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='4' result='d'/%3E%3CfeGaussianBlur in='d' stdDeviation='.35' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' result='n'/%3E%3CfeComposite in='b' in2='n' operator='arithmetic' k1='0' k2='3' k3='1.6' k4='-1.9'/%3E%3C/filter%3E%3Cg filter='url(%23f)' fill='%23fff'%3E%3Cpath d='M2 4 C10 1 26 2 37 6 C36 10 30 12 24 11 C18 12 8 12 3 9 Z'/%3E%3Cpath d='M9 9 C9.6 20 9.2 34 8.6 46 C8.4 49 9.8 50 10 46 C10.4 34 10.6 20 10.6 9 Z'/%3E%3Cpath d='M17 10 C17.4 26 17 44 16.6 66 C16.5 70 18.2 70.5 18.2 66 C18.4 44 18.6 26 18.4 10 Z'/%3E%3Cpath d='M24 10 C24.3 16 24.2 22 23.9 27 C23.8 29.5 25 29.8 25.1 27 C25.2 22 25.2 16 25.1 10 Z'/%3E%3Cpath d='M30 9 C30.2 18 30 30 29.7 38 C29.6 40.5 30.8 40.8 30.9 38 C31 30 31 18 30.9 9 Z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-5' y='-5' width='50' height='110'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.18' numOctaves='4' seed='8' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='4' result='d'/%3E%3CfeGaussianBlur in='d' stdDeviation='.35' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' result='n'/%3E%3CfeComposite in='b' in2='n' operator='arithmetic' k1='0' k2='3' k3='1.6' k4='-1.9'/%3E%3C/filter%3E%3Cg filter='url(%23f)' fill='%23fff'%3E%3Cpath d='M2 4 C10 1 26 2 37 6 C36 10 30 12 24 11 C18 12 8 12 3 9 Z'/%3E%3Cpath d='M9 9 C9.6 20 9.2 34 8.6 46 C8.4 49 9.8 50 10 46 C10.4 34 10.6 20 10.6 9 Z'/%3E%3Cpath d='M17 10 C17.4 26 17 44 16.6 66 C16.5 70 18.2 70.5 18.2 66 C18.4 44 18.6 26 18.4 10 Z'/%3E%3Cpath d='M24 10 C24.3 16 24.2 22 23.9 27 C23.8 29.5 25 29.8 25.1 27 C25.2 22 25.2 16 25.1 10 Z'/%3E%3Cpath d='M30 9 C30.2 18 30 30 29.7 38 C29.6 40.5 30.8 40.8 30.9 38 C31 30 31 18 30.9 9 Z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100%; }
.hf-ga__rouille i { position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' seed='5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 .55 .35  0 0 0 .35 .12  0 0 0 .15 .03  0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 40% auto, linear-gradient(180deg, #7a3510 0%, #5c2a0e 30%, #6e3a14 60%, #3d1d08 100%);
    background-blend-mode: multiply; }

/* Le bracelet, plus réaliste : tissage fin, volume (il est rond autour du coin), ourlets cousus, impression un peu passée. */
.hf-ga__bracelet { height: 5.2cqw; left: -10cqw; bottom: 11cqw; width: 44cqw;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .45) 0, rgba(255, 255, 255, .14) 22%, rgba(255, 255, 255, .04) 45%, rgba(0, 0, 0, .1) 70%, rgba(0, 0, 0, .5) 100%),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 .08cqw, transparent .08cqw .22cqw),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 .08cqw, transparent .08cqw .24cqw),
        #9b1018;
    box-shadow: 0 .5cqw .8cqw rgba(0, 0, 0, .6); filter: none; }
.hf-ga__bracelet::before, .hf-ga__bracelet::after { content: ""; position: absolute; left: 0; right: 0; height: .14cqw;
    background: repeating-linear-gradient(90deg, rgba(255, 220, 210, .35) 0 .45cqw, transparent .45cqw .75cqw); }
.hf-ga__bracelet::before { top: .45cqw; }
.hf-ga__bracelet::after { bottom: .45cqw; }
.hf-ga__bracelet b { font-size: 2.3cqw; letter-spacing: .26em; color: #efe2c8; opacity: .78; text-shadow: 0 0 .05cqw rgba(239, 226, 200, .6); margin-right: 14cqw; }
.hf-ga__clip { left: 52%; top: -.55cqw; bottom: -.55cqw; width: 3.2cqw; border-radius: .7cqw;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 .15cqw, transparent .15cqw .5cqw),
        linear-gradient(90deg, #0e0e0e, #3a3a3a 35%, #222 60%, #0c0c0c);
    box-shadow: 0 .3cqw .4cqw rgba(0, 0, 0, .7), inset 0 .15cqw 0 rgba(255, 255, 255, .18); }
/* L'étiquette code-barres, collée sur le bracelet. */
.hf-ga__etiquette { position: absolute; right: 9cqw; top: .45cqw; bottom: .45cqw; width: 10.5cqw; display: grid; grid-template-rows: 1fr auto; padding: .25cqw .5cqw .15cqw;
    box-sizing: border-box; background: #eee6d4; box-shadow: inset 0 0 .3cqw rgba(0, 0, 0, .25); }
.hf-ga__etiquette svg { width: 100%; height: 100%; display: block; }
.hf-ga__etiquette small { font: 400 .95cqw/1 "Special Elite", monospace; letter-spacing: .08em; color: #15100e; text-align: center; margin-top: .1cqw; }
.hf-ga__rouille { opacity: .62; }

/* ===== Grande affiche, v12 */
.hf-ga__rouille, .hf-ga__bracelet, .hf-ga__scotch { display: none; }
.hf-ga__titre { right: 11cqw; }

/* Le code-barres du joueur, à la verticale en haut à droite, imprimé couleur os. */
.hf-ga__codebarres { right: 6.2cqw; top: 3cqw; width: 4.2cqw; height: 18cqw; z-index: 6; color: #e9e1d0; opacity: .9;
    display: grid; grid-template-columns: 1fr auto; gap: .35cqw; }
.hf-ga__codebarres svg { display: block; width: 100%; height: 100%; }
/* Les barres, couchées : on tourne le dessin pour qu'elles soient horizontales dans un code vertical. */
.hf-ga__codebarres svg { writing-mode: horizontal-tb; }
.hf-ga__codebarres small { writing-mode: vertical-rl; font: 400 1.25cqw/1 "Special Elite", monospace; letter-spacing: .14em; color: #e9e1d0; }

/* L'empreinte : encore plus grande, plus en biais, et à peine visible par endroits. */
.hf-ga__empreinte { left: 30cqw; top: 74cqw; width: 30cqw; height: 74cqw; rotate: 31deg; opacity: .085;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' numOctaves='4' seed='33'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 5 -2.7'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' numOctaves='4' seed='33'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 5 -2.7'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 100% 100%; }

/* Plis mal faits et papier chiffonné, sans excès. */
.hf-ga__plis { inset: 0; z-index: 6; pointer-events: none;
    background:
        /* un pli horizontal de travers, vers le milieu */
        linear-gradient(177.5deg, transparent 49.2%, rgba(255, 255, 255, .09) 49.55%, rgba(0, 0, 0, .32) 49.85%, rgba(0, 0, 0, .08) 50.4%, transparent 51%),
        /* un pli vertical pas droit, un peu à droite */
        linear-gradient(91.5deg, transparent 56.4%, rgba(0, 0, 0, .26) 56.8%, rgba(255, 255, 255, .07) 57.15%, transparent 57.8%),
        /* un coin replié puis rabattu, en bas à gauche */
        linear-gradient(42deg, transparent 13.4%, rgba(255, 255, 255, .08) 13.7%, rgba(0, 0, 0, .28) 14%, transparent 14.8%),
        /* une petite cassure en haut */
        linear-gradient(118deg, transparent 31%, rgba(0, 0, 0, .18) 31.3%, rgba(255, 255, 255, .05) 31.6%, transparent 32.1%) 0 0 / 100% 30% no-repeat; }
.hf-ga__plis::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 283' preserveAspectRatio='none'%3E%3Cfilter id='c' filterUnits='userSpaceOnUse' x='0' y='0' width='200' height='283'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .009' numOctaves='5' seed='14' result='t'/%3E%3CfeDiffuseLighting in='t' surfaceScale='7' lighting-color='%23ffffff'%3E%3CfeDistantLight azimuth='230' elevation='48'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.8' intercept='-.88'/%3E%3CfeFuncG type='linear' slope='1.8' intercept='-.88'/%3E%3CfeFuncB type='linear' slope='1.8' intercept='-.88'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='283' filter='url(%23c)'/%3E%3C/svg%3E") 0 0 / 100% 100%; mix-blend-mode: overlay; opacity: .32; }

.hf-ga__plis::after { mix-blend-mode: soft-light; opacity: .3; }
.hf-ga__codebarres { grid-template-columns: 1fr auto; width: 4.6cqw; }
.hf-ga__plis::after { mix-blend-mode: overlay; opacity: .45; }
.hf-ga__plis::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 283' preserveAspectRatio='none'%3E%3Cfilter id='c' filterUnits='userSpaceOnUse' x='0' y='0' width='200' height='283' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011 .009' numOctaves='5' seed='14' result='t'/%3E%3CfeDiffuseLighting in='t' surfaceScale='7' lighting-color='%23ffffff' result='l'%3E%3CfeDistantLight azimuth='230' elevation='48'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix in='l' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -2.2 0 0 0 1.55' result='o'/%3E%3CfeColorMatrix in='l' type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.8 0 0 0 -1.55' result='h'/%3E%3CfeMerge%3E%3CfeMergeNode in='o'/%3E%3CfeMergeNode in='h'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='200' height='283' filter='url(%23c)'/%3E%3C/svg%3E") 0 0 / 100% 100%; mix-blend-mode: normal; opacity: .5; }

/* Plis et froissé plus vrais : un seul relief (bruit + plis tracés), éclairé comme du papier. */
.hf-ga__plis { background: none; }
.hf-ga__plis::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 283' preserveAspectRatio='none'%3E%3Cfilter id='c' filterUnits='userSpaceOnUse' x='0' y='0' width='200' height='283' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .01' numOctaves='5' seed='14' result='t'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045 .04' numOctaves='3' seed='6' result='t2'/%3E%3CfeComposite in='t' in2='t2' operator='arithmetic' k1='0' k2='.8' k3='.32' k4='-.05' result='bruit'/%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='1.4' result='p'/%3E%3CfeComposite in='bruit' in2='p' operator='arithmetic' k1='0' k2='1' k3='1' k4='0' result='relief'/%3E%3CfeDiffuseLighting in='relief' surfaceScale='5.5' lighting-color='%23ffffff' result='l'%3E%3CfeDistantLight azimuth='225' elevation='50'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix in='l' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -2.3 0 0 0 1.6' result='o'/%3E%3CfeColorMatrix in='l' type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.9 0 0 0 -1.6' result='h'/%3E%3CfeMerge%3E%3CfeMergeNode in='o'/%3E%3CfeMergeNode in='h'/%3E%3C/feMerge%3E%3C/filter%3E%3Cg filter='url(%23c)'%3E%3Crect width='200' height='283' fill='%23000' fill-opacity='0'/%3E%3Cpath d='M-5.0 135.6 L10.0 135.8 L25.0 136.1 L40.0 136.2 L55.0 137.3 L70.0 137.2 L85.0 140.4 L100.0 139.6 L115.0 138.7 L130.0 140.1 L145.0 139.8 L160.0 142.7 L175.0 142.1 L190.0 143.3 L205.0 142.9' fill='none' stroke='%23fff' stroke-width='2.2' stroke-opacity='0.95'/%3E%3Cpath d='M117.2 -5.0 L115.1 16.0 L115.3 37.1 L115.1 58.2 L116.5 79.3 L115.7 100.4 L113.4 121.4 L114.9 142.5 L112.5 163.5 L113.5 184.7 L111.6 205.7 L110.8 226.8 L113.0 247.9 L110.6 268.9 L110.1 290.0' fill='none' stroke='%23fff' stroke-width='1.8' stroke-opacity='0.85'/%3E%3Cpath d='M-4.3 235.3 L-0.8 239.3 L2.0 244.0 L6.6 246.9 L9.6 251.4 L13.5 255.0 L16.4 259.5 L21.1 262.4 L24.4 266.6 L28.5 270.1 L32.0 274.0 L34.8 278.7 L38.5 282.5 L41.9 286.6 L45.5 290.5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-opacity='0.8'/%3E%3Cpath d='M39.3 -4.4 L46.7 3.4 L54.2 11.1 L60.2 20.0 L68.3 27.3 L74.8 35.8 L81.7 44.0 L89.5 51.5 L96.0 60.0' fill='none' stroke='%23fff' stroke-width='1.2' stroke-opacity='0.6'/%3E%3Cpath d='M150.1 190.3 L159.2 186.7 L168.2 182.9 L177.8 180.8 L186.3 175.8 L196.2 174.2 L204.8 169.5' fill='none' stroke='%23fff' stroke-width='1.1' stroke-opacity='0.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100%; mix-blend-mode: normal; opacity: .42; }

/* ===== Grande affiche, v14 : vieille affiche dessous, SOLD OUT, agrafes, lampe torche, tag au marqueur */
@font-face { font-family: "Permanent Marker"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/hf-permanent-marker-latin-400-normal.woff2") format("woff2"); }

.hf-affiche-barre { display: flex; gap: .5rem; }

/* Le coin arraché en bas à droite, et la vieille affiche jaune dessous. */
.hf-ga__dessous { right: 0; bottom: 0; width: 34cqw; height: 26cqw; z-index: 5; pointer-events: none; }
.hf-ga__dessous > i { position: absolute; inset: 0; }
.hf-ga__fibres-coin { background: #efe8da; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-10' y='-10' width='120' height='120'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='4' seed='21' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='9' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeGaussianBlur in='d' stdDeviation='.5' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='2' result='n'/%3E%3CfeComposite in='b' in2='n' operator='arithmetic' k1='0' k2='5' k3='4' k4='-5.6'/%3E%3C/filter%3E%3Cpath filter='url(%23f)' fill='%23fff' d='M104.5 -5 C82.5 14 72.5 26 60.5 40 C46.5 54 32.5 64 16.5 78 C10.5 84 4.5 92 -3.5 106 L106 106 L106 -5 Z'/%3E%3C/svg%3E") 0 0 / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-10' y='-10' width='120' height='120'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='4' seed='21' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='9' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeGaussianBlur in='d' stdDeviation='.5' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='2' result='n'/%3E%3CfeComposite in='b' in2='n' operator='arithmetic' k1='0' k2='5' k3='4' k4='-5.6'/%3E%3C/filter%3E%3Cpath filter='url(%23f)' fill='%23fff' d='M104.5 -5 C82.5 14 72.5 26 60.5 40 C46.5 54 32.5 64 16.5 78 C10.5 84 4.5 92 -3.5 106 L106 106 L106 -5 Z'/%3E%3C/svg%3E") 0 0 / 100% 100%; }
.hf-ga__vieille { overflow: hidden; background:
        linear-gradient(170deg, transparent 58%, #1f3f8f 58%, #1f3f8f 70%, transparent 70%),
        radial-gradient(120% 90% at 80% 20%, #f2cf4c, #d9a92c 70%);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-10' y='-10' width='120' height='120'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='4' seed='21' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='9' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeGaussianBlur in='d' stdDeviation='.5' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='2' result='n'/%3E%3CfeComposite in='b' in2='n' operator='arithmetic' k1='0' k2='5' k3='4' k4='-5.6'/%3E%3C/filter%3E%3Cpath filter='url(%23f)' fill='%23fff' d='M102 -5 C80 14 70 26 58 40 C44 54 30 64 14 78 C8 84 2 92 -6 106 L106 106 L106 -5 Z'/%3E%3C/svg%3E") 0 0 / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='-10' y='-10' width='120' height='120'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='4' seed='21' result='t'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='t' scale='9' xChannelSelector='R' yChannelSelector='G' result='d'/%3E%3CfeGaussianBlur in='d' stdDeviation='.5' result='b'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='2' result='n'/%3E%3CfeComposite in='b' in2='n' operator='arithmetic' k1='0' k2='5' k3='4' k4='-5.6'/%3E%3C/filter%3E%3Cpath filter='url(%23f)' fill='%23fff' d='M102 -5 C80 14 70 26 58 40 C44 54 30 64 14 78 C8 84 2 92 -6 106 L106 106 L106 -5 Z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
    box-shadow: inset .4cqw .4cqw 1.2cqw rgba(0, 0, 0, .45); }
.hf-ga__vieille::after { content: ""; position: absolute; inset: 0; background-image: var(--grain-papier); background-size: 120px; mix-blend-mode: multiply; opacity: .7; }
.hf-ga__vieille b { position: absolute; right: -1cqw; top: 3cqw; font: 400 13cqw/1 "Anton", var(--f-cond); color: #120d0b; letter-spacing: -.01em; rotate: -2deg; }
.hf-ga__vieille em { position: absolute; right: 2cqw; top: 17.4cqw; font: 400 3.2cqw/1 "Bebas Neue", var(--f-cond); font-style: normal; letter-spacing: .3em; color: #f2cf4c; rotate: -10deg; }
.hf-ga__vieille span { position: absolute; right: 1.5cqw; bottom: 1cqw; font: 400 1.7cqw/1 "Special Elite", monospace; color: #120d0b; }

/* Le tampon SOLD OUT, usé, en biais. */
.hf-ga__soldout { left: 12cqw; top: 59cqw; z-index: 6; padding: .6cqw 2cqw .4cqw; rotate: -13deg;
    font: 400 5.4cqw/1 "Anton", var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: #e3272d;
    border: .55cqw solid #e3272d; outline: .22cqw solid #e3272d; outline-offset: .45cqw; border-radius: .5cqw; opacity: .88;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='0' y='0' width='200' height='60'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5 .35' numOctaves='3' seed='9' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04' numOctaves='2' seed='4' result='b'/%3E%3CfeComposite in='a' in2='b' operator='arithmetic' k1='0' k2='1' k3='1' k4='-.3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 7 -3.1'/%3E%3C/filter%3E%3Crect width='200' height='60' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cfilter id='f' filterUnits='userSpaceOnUse' x='0' y='0' width='200' height='60'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5 .35' numOctaves='3' seed='9' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04' numOctaves='2' seed='4' result='b'/%3E%3CfeComposite in='a' in2='b' operator='arithmetic' k1='0' k2='1' k3='1' k4='-.3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 7 -3.1'/%3E%3C/filter%3E%3Crect width='200' height='60' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 100% 100%; }

/* Les agrafes. */
.hf-ga__agrafe { width: 4.6cqw; height: .75cqw; z-index: 8; border-radius: .2cqw;
    background: linear-gradient(180deg, #f1efe9, #9c9890 45%, #5e5a54 60%, #c9c5bd);
    box-shadow: 0 .25cqw .3cqw rgba(0, 0, 0, .65); }
.hf-ga__agrafe::before, .hf-ga__agrafe::after { content: ""; position: absolute; top: .1cqw; width: .45cqw; height: .55cqw; background: #2a2522; border-radius: .1cqw; }
.hf-ga__agrafe::before { left: -.15cqw; }
.hf-ga__agrafe::after { right: -.15cqw; }
.hf-ga__agrafe.is-a { left: 3.2cqw; top: 2.2cqw; rotate: -32deg; }
.hf-ga__agrafe.is-b { right: 3cqw; top: 2.4cqw; rotate: 24deg; }
.hf-ga__agrafe.is-c { left: 2.6cqw; bottom: 2.6cqw; rotate: 38deg; }

/* Le reflet de lampe torche, chaud, sur le haut droit. */
.hf-ga__torche { inset: 0; z-index: 6; pointer-events: none; mix-blend-mode: screen;
    background: radial-gradient(28cqw 24cqw at 70% 30%, rgba(255, 214, 160, .2), rgba(255, 190, 120, .07) 55%, transparent 75%); }
.hf-ga__torche::after { content: ""; position: absolute; inset: 0; mix-blend-mode: multiply;
    background: radial-gradient(90cqw 110cqw at 65% 32%, transparent 45%, rgba(0, 0, 0, .35) 100%); }

/* Le tag au marqueur blanc, griffonné près du sticker. */
.hf-ga__tag { right: 22cqw; bottom: 9cqw; z-index: 8; display: flex; align-items: flex-end; gap: .2cqw; color: #f4f1ea; rotate: -9deg; pointer-events: none; opacity: .93; }
.hf-ga__tag b { font: 400 4.6cqw/1 "Permanent Marker", var(--f-cond); letter-spacing: .02em; text-shadow: 0 0 .1cqw rgba(255, 255, 255, .4); }
.hf-ga__tag svg { width: 7cqw; height: 3.6cqw; margin-bottom: -1.4cqw; }
.hf-ga__soldout { top: 49cqw; left: 11cqw; }
.hf-ga__tag { right: 23cqw; bottom: 1.6cqw; }

/* ===== v15 : retour en arrière (plus de vieille affiche, SOLD OUT, agrafes, torche, tag) ; plis presque droits. */
.hf-ga__dessous, .hf-ga__soldout, .hf-ga__agrafe, .hf-ga__torche, .hf-ga__tag { display: none; }
.hf-ga__plis::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 283' preserveAspectRatio='none'%3E%3Cfilter id='c' filterUnits='userSpaceOnUse' x='0' y='0' width='200' height='283' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .01' numOctaves='5' seed='14' result='t'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045 .04' numOctaves='3' seed='6' result='t2'/%3E%3CfeComposite in='t' in2='t2' operator='arithmetic' k1='0' k2='.7' k3='.18' k4='0' result='bruit'/%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='.75' result='p'/%3E%3CfeComposite in='bruit' in2='p' operator='arithmetic' k1='0' k2='1' k3='1' k4='0' result='relief'/%3E%3CfeDiffuseLighting in='relief' surfaceScale='3.2' lighting-color='%23ffffff' result='l'%3E%3CfeDistantLight azimuth='225' elevation='50'/%3E%3C/feDiffuseLighting%3E%3CfeColorMatrix in='l' type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -2.3 0 0 0 1.6' result='o'/%3E%3CfeColorMatrix in='l' type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  1.9 0 0 0 -1.6' result='h'/%3E%3CfeMerge%3E%3CfeMergeNode in='o'/%3E%3CfeMergeNode in='h'/%3E%3C/feMerge%3E%3C/filter%3E%3Cg filter='url(%23c)'%3E%3Crect width='200' height='283' fill='%23000' fill-opacity='0'/%3E%3Cpath d='M-5.0 136.0 L30.0 136.9 L65.0 137.8 L100.0 138.8 L135.0 139.6 L170.0 140.8 L205.0 142.0' fill='none' stroke='%23fff' stroke-width='.6' stroke-opacity='0.95'/%3E%3Cpath d='M117.0 -5.0 L116.5 44.2 L115.0 93.3 L114.5 142.5 L114.0 191.7 L113.0 240.8 L112.0 290.0' fill='none' stroke='%23fff' stroke-width='1' stroke-opacity='0.85'/%3E%3Cpath d='M-5.0 236.0 L12.1 253.9 L28.9 272.1 L46.0 290.0' fill='none' stroke='%23fff' stroke-width='.9' stroke-opacity='0.8'/%3E%3Cpath d='M40.0 -5.0 L58.7 16.7 L77.2 38.4 L96.0 60.0' fill='none' stroke='%23fff' stroke-width='.7' stroke-opacity='0.6'/%3E%3Cpath d='M150.0 190.0 L168.3 183.3 L186.7 176.6 L205.0 170.0' fill='none' stroke='%23fff' stroke-width='.6' stroke-opacity='0.5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100%; }

.hf-ga__plis::after { opacity: .34; }

/* ===== v17 : un vrai papier froissé (texture générée : facettes cassées + plis nets, éclairés en biais). */
.hf-ga__plis::after { background: url("/assets/img/hf-papier-froisse.webp") 0 0 / 100% 100% no-repeat; mix-blend-mode: normal; opacity: .38; }
.hf-ga__plis::after { opacity: .45; }

/* ===== v19 : plus de froissé ; on revient aux plis du début, améliorés.
 * Chaque pli : une arête claire très fine, une ombre qui s'estompe d'un côté,
 * un léger creux de l'autre, et une intensité qui varie le long du pli. */
.hf-ga__plis { background: none; }
.hf-ga__plis::after { content: none; }
.hf-ga__plis i { position: absolute; inset: 0; }
/* Le pli horizontal, de travers, vers le milieu. */
.hf-ga__plis i:nth-child(1) {
    background: linear-gradient(177.5deg, transparent 48.6%, rgba(0, 0, 0, .1) 49.2%, rgba(255, 255, 255, .1) 49.5%, rgba(255, 255, 255, .03) 49.62%, rgba(0, 0, 0, .3) 49.75%, rgba(0, 0, 0, .14) 50.2%, rgba(0, 0, 0, .05) 50.9%, transparent 51.6%);
    -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, .55), #000 22%, rgba(0, 0, 0, .7) 48%, #000 70%, rgba(0, 0, 0, .45));
    mask: linear-gradient(90deg, rgba(0, 0, 0, .55), #000 22%, rgba(0, 0, 0, .7) 48%, #000 70%, rgba(0, 0, 0, .45)); }
/* Le pli vertical, pas tout à fait droit, un peu à droite. */
.hf-ga__plis i:nth-child(2) {
    background: linear-gradient(91.5deg, transparent 55.8%, rgba(0, 0, 0, .05) 56.3%, rgba(0, 0, 0, .24) 56.75%, rgba(255, 255, 255, .03) 56.88%, rgba(255, 255, 255, .09) 57%, rgba(0, 0, 0, .08) 57.35%, transparent 58%);
    -webkit-mask: linear-gradient(180deg, rgba(0, 0, 0, .4), #000 18%, rgba(0, 0, 0, .65) 45%, #000 64%, rgba(0, 0, 0, .5));
    mask: linear-gradient(180deg, rgba(0, 0, 0, .4), #000 18%, rgba(0, 0, 0, .65) 45%, #000 64%, rgba(0, 0, 0, .5)); }
/* Le coin replié puis rabattu, en bas à gauche. */
.hf-ga__plis i:nth-child(3) {
    background: linear-gradient(42deg, transparent 12.8%, rgba(0, 0, 0, .08) 13.3%, rgba(255, 255, 255, .09) 13.65%, rgba(0, 0, 0, .26) 13.95%, rgba(0, 0, 0, .08) 14.6%, transparent 15.2%); }
/* Une petite cassure en haut, qui s'arrête en chemin. */
.hf-ga__plis i:nth-child(4) {
    background: linear-gradient(118deg, transparent 30.6%, rgba(0, 0, 0, .16) 31.1%, rgba(255, 255, 255, .06) 31.4%, transparent 32%) 0 0 / 100% 30% no-repeat;
    -webkit-mask: linear-gradient(118deg, #000 18%, transparent 34%); mask: linear-gradient(118deg, #000 18%, transparent 34%); }

/* ============================================================ règles */
.hf-page.hf-regles { max-width: 60rem; }
.hf-regles .hf-chapo { margin-inline: auto; text-align: center; }
.hf-rg-bloc { margin-top: 2.8rem; }
.hf-rg-bloc .hf-h2 { margin: 0 0 1.1rem; }
.hf-rg-bloc h3 { margin: 0; font: 800 1.3rem/1.05 var(--f-cond); text-transform: uppercase; letter-spacing: .02em; }
.hf-rg-bloc p { margin: 0; color: var(--bone-dim); }

/* Comment jouer : quatre cartes numérotées. */
.hf-rg-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.hf-rg-etapes li {
    position: relative; display: grid; align-content: start; gap: .45rem;
    padding: 1.1rem 1rem 1.2rem; background: #1c1614; border: 1px solid var(--ligne); border-top: 4px solid var(--blood);
}
.hf-rg-etapes__n { font: 400 3rem/.8 var(--f-display); color: var(--blood); }
.hf-rg-etapes p { font-size: .98rem; line-height: 1.45; }

/* Les points : chaque façon de marquer, avec son petit dessin. */
.hf-rg-intro { margin: -.3rem 0 1rem !important; text-align: center; }
.hf-rg-intro b { color: var(--bone); }
.hf-rg-gains { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; }
.hf-rg-gains li {
    display: grid; justify-items: center; align-content: start; gap: .35rem; text-align: center;
    padding: 1.2rem .8rem 1.1rem; background: #1c1614; border: 1px solid var(--ligne);
}
.hf-rg-gains li.is-bonus { border-color: #d9a441; box-shadow: 0 0 0 1px rgba(217, 164, 65, .25), 0 0 22px rgba(217, 164, 65, .12); }
.hf-rg-gains p { font-size: .92rem; line-height: 1.35; }
.hf-rg-gains__val { margin-top: .5rem; font: 400 2.4rem/1 var(--f-display); color: var(--bone); }
.hf-rg-gains li.is-bonus .hf-rg-gains__val { color: #e7b85a; }
.hf-rg-mini { display: grid; grid-template-columns: repeat(3, 1.25rem); gap: 4px; }
.hf-rg-mini i { width: 1.25rem; height: 1.25rem; border: 1.5px solid rgba(232, 221, 198, .28); border-radius: 3px; }
.hf-rg-mini i.is-on { background: var(--blood); border-color: #ff4a50; box-shadow: 0 0 8px rgba(255, 60, 40, .45); }
.hf-rg-gains li.is-bonus .hf-rg-mini i.is-on { background: #b9862e; border-color: #e7b85a; box-shadow: 0 0 8px rgba(217, 164, 65, .45); }
.hf-rg-notes { margin: 1.1rem 0 0; padding: 0 0 0 1.1rem; display: grid; gap: .3rem; color: var(--bone-dim); font-size: .95rem; }
.hf-rg-notes b { color: var(--bone); }

/* Le déroulé : une frise en trois temps, l'étape en cours allumée. */
.hf-rg-frise { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hf-rg-frise li { position: relative; display: grid; align-content: start; gap: .4rem; padding: 1.6rem 1.2rem 0 0; border-top: 3px solid var(--ligne); }
.hf-rg-frise li::before {
    content: ""; position: absolute; top: -.6rem; left: 0; width: .9rem; height: .9rem; border-radius: 50%;
    background: var(--ink); border: 3px solid var(--ash);
}
.hf-rg-frise li.is-maintenant { border-top-color: var(--blood); }
.hf-rg-frise li.is-maintenant::before { background: var(--blood); border-color: var(--bone); box-shadow: 0 0 0 4px rgba(177, 22, 29, .35); }
.hf-rg-frise small {
    display: inline-block; margin-left: .35rem; padding: .2em .45em; vertical-align: .2em;
    font: 800 .7rem/1 var(--f-cond); letter-spacing: .08em; background: var(--blood); color: var(--bone);
}
.hf-rg-frise p { font-size: .98rem; line-height: 1.45; }
.hf-rg-frise .hf-rg-frise__date { color: var(--bone); font-weight: 600; }

.hf-rg-lot p { max-width: 40rem; margin-inline: auto; text-align: center; font-size: 1.05rem; }

@media (max-width: 56rem) {
    .hf-rg-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hf-rg-gains { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 42rem) {
    .hf-rg-etapes { grid-template-columns: minmax(0, 1fr); }
    .hf-rg-etapes li { grid-template-columns: 2.6rem 1fr; column-gap: .8rem; }
    .hf-rg-etapes__n { grid-row: 1 / span 2; font-size: 2.6rem; }
    .hf-rg-gains { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .hf-rg-gains li.is-bonus { grid-column: 1 / -1; }
    .hf-rg-frise { grid-template-columns: minmax(0, 1fr); gap: 0; padding-left: .45rem; }
    .hf-rg-frise li { border-top: 0; border-left: 3px solid var(--ligne); padding: 0 0 1.4rem 1.4rem; }
    .hf-rg-frise li:last-child { padding-bottom: 0; }
    .hf-rg-frise li.is-maintenant { border-left-color: var(--blood); }
    .hf-rg-frise li::before { top: 0; left: -.6rem; }
}

/* ======================================================= bingo : nom de grille */
.hf-grille__tete h2 { display: flex; align-items: center; gap: .55rem; min-width: 0; flex-wrap: wrap; }
.hf-g-nom { overflow-wrap: anywhere; }
.hf-g-nom.is-editable { cursor: text; }
.hf-g-format { font-weight: 600; color: var(--bone-dim); }
.hf-g-format::before { content: "· "; }
.hf-g-crayon {
    display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
    background: transparent; color: var(--bone-dim); border: 1px solid var(--ligne); border-radius: 50%; cursor: pointer;
    transition: color .15s, border-color .15s, background-color .15s;
}
.hf-g-crayon:hover, .hf-g-crayon:focus-visible { color: var(--bone); border-color: var(--bone); background: #3a1417; }
.hf-g-champ {
    width: min(100%, 16rem); padding: .2rem .45rem; font: inherit; text-transform: none; letter-spacing: .01em;
    color: var(--bone); background: var(--ink); border: 2px solid var(--blood); border-radius: 0; outline: none;
}
.hf-g-champ::placeholder { color: var(--ash); text-transform: uppercase; }
.hf-ticket__infos { min-width: 0; }
.hf-grille__tete h2:has(.hf-g-champ) { flex-wrap: nowrap; flex: 1; }
.hf-g-champ { flex: 1 1 auto; width: auto; min-width: 0; max-width: 16rem; }
.hf-g-champ:focus, .hf-g-champ:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(177, 22, 29, .35); }
.hf-g-format { white-space: nowrap; flex: none; }

/* Le nom de la grille dans le bandeau du ticket : coupé proprement s'il est long. */
.hf-ticket__bandeau > span:first-child { flex: none; }
.hf-ticket__serie { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hf-ticket__serie--nom { opacity: 1; letter-spacing: .06em; }

/* ============================================================ simulateur */
.hf-sim { display: grid; gap: 1.2rem; padding: 1.3rem; background: #1c1614; border: 1px solid var(--ligne); }
.hf-sim__formats { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.hf-sim__puce {
    padding: .45em .85em .5em; font: 800 1.1rem/1 var(--f-cond); color: var(--bone-dim); cursor: pointer;
    background: transparent; border: 2px solid var(--ligne); transition: color .15s, border-color .15s, background-color .15s;
}
.hf-sim__puce:hover { color: var(--bone); border-color: var(--bone-dim); }
.hf-sim__puce[aria-pressed="true"] { color: var(--bone); background: var(--blood); border-color: var(--blood); box-shadow: 3px 3px 0 var(--oxblood); }
.hf-sim__corps { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); gap: 1.6rem; align-items: center; }
.hf-sim__zone { container-type: inline-size; }

.hf-sim__plan {
    --cote: min(4.6rem, calc((100cqw - (var(--c) - 1) * .45rem) / var(--c)));
    display: grid; grid-template-columns: repeat(var(--c), var(--cote)); gap: .45rem; justify-content: center;
}
.hf-sim__case {
    aspect-ratio: 1; padding: 0; border-radius: .45rem;
    background: radial-gradient(circle at 50% 38%, #251916, #130c0a 80%); border: 2px dashed rgba(232, 221, 198, .22);
    transition: background-color .2s, border-color .2s, box-shadow .2s, transform .12s;
}
button.hf-sim__case { cursor: pointer; }
button.hf-sim__case:hover { border-color: var(--bone-dim); }
button.hf-sim__case:active { transform: scale(.94); }
.hf-sim__case.is-on { border-style: solid; border-color: #ff4a50; background: radial-gradient(circle at 50% 38%, #8a1a1d, #3a0b0c 85%); box-shadow: 0 0 14px rgba(255, 60, 40, .45); }
.hf-sim__case.is-aligne { border-color: var(--bone); box-shadow: 0 0 0 3px rgba(223, 31, 40, .45), 0 0 20px rgba(255, 80, 50, .7); }
.hf-sim__plan.is-complete .hf-sim__case.is-on { border-color: #e7b85a; background: radial-gradient(circle at 50% 38%, #b9862e, #4d340c 85%); box-shadow: 0 0 16px rgba(217, 164, 65, .55); }

.hf-sim__cote { display: grid; gap: .9rem; }
.hf-sim__total { margin: 0 !important; display: flex; align-items: baseline; gap: .5rem; padding-bottom: .6rem; border-bottom: 2px solid var(--ligne); }
.hf-sim__total span { font: 800 1rem/1 var(--f-cond); letter-spacing: .2em; text-transform: uppercase; color: var(--bone-dim); }
.hf-sim__total b { margin-left: auto; font: 400 3.2rem/.9 var(--f-display); color: var(--bone); font-variant-numeric: tabular-nums; }
.hf-sim__total small { font: 700 1.1rem/1 var(--f-cond); color: var(--bone-dim); }
.hf-sim__recap { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.hf-sim__recap li { display: flex; justify-content: space-between; gap: 1rem; color: var(--ash); font-size: .98rem; }
.hf-sim__recap li b { font: 700 1.1rem/1.2 var(--f-cond); font-variant-numeric: tabular-nums; }
.hf-sim__recap li.is-gain { color: var(--bone); }
.hf-sim__recap li.is-gain b { color: #ff6a6f; }
.hf-sim__recap li.is-bonus.is-gain b { color: #e7b85a; }
.hf-sim__max { font-size: .9rem; color: var(--ash) !important; }
.hf-sim__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.hf-sim__actions .hf-btn { font-size: .95rem; }
.hf-rg-tuto { margin-top: 1.3rem !important; text-align: center; }

@media (max-width: 42rem) {
    .hf-sim { padding: 1rem .8rem; }
    .hf-sim__corps { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
    .hf-sim__actions { justify-content: center; }
}

/* ================================================================== tuto */
html.hf-sans-defil { overflow: hidden; }
.hf-tuto { position: relative; width: min(40rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; padding: 1.6rem 1.4rem 1.4rem; display: grid; gap: 1.1rem; }
.hf-tuto .hf-modal__titre { font-size: clamp(1.7rem, 5vw, 2.2rem); }
.hf-tuto .hf-sim__puce { font-size: .95rem; }
.hf-tuto__fermer {
    position: absolute; top: .5rem; right: .6rem; width: 2.4rem; height: 2.4rem; padding: 0;
    font: 400 1.8rem/1 var(--f-texte); color: var(--bone-dim); background: transparent; border: 0; cursor: pointer;
}
.hf-tuto__fermer:hover { color: var(--bone); }
.hf-tuto__scene { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; }
.hf-tuto__milieu { container-type: inline-size; position: relative; display: grid; gap: .5rem; justify-items: center; min-height: 12rem; align-content: center; }
.hf-sim__plan--tuto { --cote: min(3.6rem, calc((100cqw - (var(--c) - 1) * .4rem) / var(--c))); gap: .4rem; }
.hf-sim__plan--tuto .hf-sim__case { transition: background-color .35s, border-color .35s, box-shadow .35s; }
.hf-tuto__compte { font: 700 .85rem/1 var(--f-cond); letter-spacing: .15em; color: var(--ash); }
.hf-tuto__fleche {
    width: 3rem; height: 3rem; padding: 0; display: grid; place-items: center; border-radius: 50%;
    font: 400 2.2rem/1 var(--f-texte); color: var(--bone); background: var(--blood); border: 0; cursor: pointer;
    box-shadow: 3px 3px 0 var(--oxblood); transition: transform .12s, opacity .15s;
}
.hf-tuto__fleche:hover:not(:disabled) { transform: translate(-1px, -1px); }
.hf-tuto__fleche:disabled { opacity: .2; cursor: default; box-shadow: none; }
.hf-tuto__legende { min-height: 7.5rem; text-align: left; }
.hf-tuto__tete { display: flex; align-items: baseline; gap: .7rem; margin-bottom: .4rem; }
.hf-tuto__etape { font: 700 .8rem/1 var(--f-cond); letter-spacing: .15em; color: var(--ash); }
.hf-tuto__tete h3 { margin: 0; font: 800 1.45rem/1 var(--f-cond); text-transform: uppercase; }
.hf-tuto__val { margin-left: auto; font: 400 2.2rem/.9 var(--f-display); color: #ff6a6f; }
.hf-tuto__val.is-or { color: #e7b85a; }
.hf-tuto__legende p { margin: 0; color: var(--bone-dim); line-height: 1.45; }
.hf-tuto__points { display: flex; justify-content: center; gap: .45rem; }
.hf-tuto__point { width: .7rem; height: .7rem; padding: 0; border-radius: 50%; border: 2px solid var(--bone-dim); background: transparent; cursor: pointer; }
.hf-tuto__point.is-actif { background: var(--blood); border-color: var(--bone); transform: scale(1.2); }

@media (max-width: 42rem) {
    .hf-tuto { padding: 1.4rem .9rem 1.1rem; gap: .9rem; }
    .hf-tuto__fleche { width: 2.4rem; height: 2.4rem; font-size: 1.8rem; }
    .hf-tuto__legende { min-height: 9rem; }
}
@media (prefers-reduced-motion: reduce) { .hf-sim__case, .hf-tuto__fleche { transition: none; } }
@media (max-width: 42rem) {
    .hf-tuto .hf-sim__formats { gap: .35rem; }
    .hf-tuto .hf-sim__puce { padding: .4em .5em .45em; font-size: .88rem; }
}

/* ============================================================== conseils */
.hf-conseil { display: grid; gap: 1.3rem; padding: 1.3rem; background: #1c1614; border: 1px solid var(--ligne); }
.hf-conseil__corps { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.8rem; align-items: start; }
.hf-conseil__carte { container-type: inline-size; display: grid; gap: .9rem; }
.hf-conseil__plan { --cote: min(5.4rem, calc((100cqw - (var(--c) - 1) * .4rem) / var(--c))); gap: .4rem; }
/* Du plus froid au plus chaud : braise sombre, rouge, puis or. */
.hf-conseil__case {
    aspect-ratio: 1; display: grid; place-content: center; gap: .15rem; text-align: center; border-radius: .45rem;
    background: color-mix(in srgb, color-mix(in srgb, #2a1412, #b1161d calc(var(--t) * 100%)), #d9a441 calc(max(var(--t) - .6, 0) * 200%));
    border: 2px solid color-mix(in srgb, rgba(232, 221, 198, .18), #ffcf7a calc(var(--t) * 80%));
    box-shadow: 0 0 calc(var(--t) * 18px) rgba(255, 90, 40, calc(var(--t) * .5));
}
.hf-conseil__case b { font: 800 clamp(.72rem, calc(var(--cote) * .2), 1.1rem)/1 var(--f-cond); color: var(--bone); font-variant-numeric: tabular-nums; }
.hf-conseil__case small { font: 600 clamp(.55rem, calc(var(--cote) * .13), .75rem)/1 var(--f-cond); color: rgba(232, 221, 198, .7); }
.hf-conseil__case.is-top b { color: #fff6e0; }
.hf-conseil__legende { margin: 0 !important; display: flex; align-items: center; gap: .7rem; font-size: .93rem; }
.hf-conseil__legende b { color: #e7b85a; }
.hf-conseil__degrade { flex: none; width: 4.5rem; height: .6rem; border-radius: 1rem; background: linear-gradient(90deg, #2a1412, #b1161d 60%, #d9a441); }
.hf-conseil__droite { display: grid; gap: .8rem; }
.hf-conseil__droite h3 { font-size: 1.05rem !important; }
.hf-conseil__formats { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.hf-conseil__formats li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 5.4rem 4.4rem; align-items: center; gap: .6rem; color: var(--bone-dim); }
.hf-conseil__fmt { font: 800 1.05rem/1 var(--f-cond); color: var(--bone); }
.hf-conseil__barre { height: .55rem; background: rgba(232, 221, 198, .08); }
.hf-conseil__barre i { display: block; height: 100%; background: var(--blood); }
.hf-conseil__formats li.is-top .hf-conseil__barre i { background: #d9a441; }
.hf-conseil__moy { font: 700 .95rem/1 var(--f-cond); color: var(--bone); text-align: right; font-variant-numeric: tabular-nums; }
.hf-conseil__formats small { font-size: .8rem; color: var(--ash); text-align: right; font-variant-numeric: tabular-nums; }
.hf-conseil__note { font-size: .88rem; color: var(--ash) !important; }
.hf-conseil__astuces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.hf-conseil__astuces li { display: grid; gap: .25rem; padding: .8rem .9rem; border-left: 3px solid var(--blood); background: rgba(0, 0, 0, .25); }
.hf-conseil__astuces b { font: 800 1.05rem/1.1 var(--f-cond); text-transform: uppercase; color: var(--bone); }
.hf-conseil__astuces span { color: var(--bone-dim); font-size: .94rem; line-height: 1.4; }

@media (max-width: 56rem) { .hf-conseil__corps { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 42rem) {
    .hf-conseil { padding: 1rem .8rem; }
    .hf-conseil__astuces { grid-template-columns: minmax(0, 1fr); }
    .hf-conseil__formats li { grid-template-columns: 2.4rem minmax(0, 1fr) 5rem; }
    .hf-conseil__formats small { display: none; }
}

/* ===================================================== bingo clos : cartons
 * Les grilles deviennent des cartons de tombola noirs, l'un sous l'autre.
 * Les cases sont toujours carrées : la grille se centre dans le carton.
 * Chaque artiste annoncé reçoit le sceau rouge HELLFEST.
 */
.hf-cartons { display: grid; gap: 2.6rem; max-width: 50rem; margin: 1.8rem auto 0; }
.hf-cartons[hidden] { display: none; }
.hf-carton {
    --os: #e8ddc6; --sang: #d2161f; --braise: #ff5a2a; --or: #d9a441;
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 3.6rem;
    filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .7));
}
.hf-carton__papier, .hf-carton__talon {
    color: var(--os); background-color: #0d0908;
    background-image: var(--grain-mur),
        radial-gradient(120% 60% at 50% 0, rgba(150, 18, 22, .35), transparent 60%),
        radial-gradient(80% 50% at 50% 110%, rgba(255, 70, 20, .16), transparent 70%);
}
.hf-carton__papier {
    position: relative; overflow: hidden; padding: 1.5rem 1.6rem 1.3rem; border-radius: .4rem 0 0 .4rem;
    container-type: inline-size;
    /* Double filet : os puis sang. */
    box-shadow: inset 0 0 0 1px rgba(232, 221, 198, .55), inset 0 0 0 .45rem #0d0908, inset 0 0 0 calc(.45rem + 2px) var(--sang);
}
/* Les quatre coins ornés, comme sur une affiche de concert. */
.hf-carton__papier::before {
    content: ""; position: absolute; inset: .85rem; pointer-events: none;
    background:
        linear-gradient(var(--os), var(--os)) top left / 1.1rem 2px no-repeat,
        linear-gradient(var(--os), var(--os)) top left / 2px 1.1rem no-repeat,
        linear-gradient(var(--os), var(--os)) top right / 1.1rem 2px no-repeat,
        linear-gradient(var(--os), var(--os)) top right / 2px 1.1rem no-repeat,
        linear-gradient(var(--os), var(--os)) bottom left / 1.1rem 2px no-repeat,
        linear-gradient(var(--os), var(--os)) bottom left / 2px 1.1rem no-repeat,
        linear-gradient(var(--os), var(--os)) bottom right / 1.1rem 2px no-repeat,
        linear-gradient(var(--os), var(--os)) bottom right / 2px 1.1rem no-repeat;
    opacity: .7;
}

/* Le talon, détaché par une ligne de découpe rouge. */
.hf-carton__talon {
    position: relative; display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: .7rem;
    padding: 1rem 0; border-radius: 0 .4rem .4rem 0; border-left: 2px dashed rgba(210, 22, 31, .7);
    box-shadow: inset 0 0 0 1px rgba(232, 221, 198, .25);
}
.hf-carton__talon::before, .hf-carton__talon::after {
    content: ""; position: absolute; left: -.62rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #1a1311;
}
.hf-carton__talon::before { top: -.58rem; }
.hf-carton__talon::after { bottom: -.58rem; }
.hf-carton__talon-txt {
    writing-mode: vertical-rl; transform: rotate(180deg);
    font: 800 .8rem/1 var(--f-cond); letter-spacing: .3em; text-transform: uppercase; color: var(--sang);
}
.hf-carton__codebarre {
    width: 1.7rem; height: 4.4rem; opacity: .8;
    background: repeating-linear-gradient(0deg, var(--os) 0 2px, transparent 2px 4px, var(--os) 4px 5px, transparent 5px 8px, var(--os) 8px 11px, transparent 11px 12px);
}

/* L'en-tête : HELLFEST en gothique, l'étiquette rouge, la série. */
.hf-carton__bande { display: flex; align-items: center; gap: .7rem; padding-bottom: .55rem; border-bottom: 1px solid rgba(232, 221, 198, .2); }
.hf-carton__marque { font: 400 2rem/.9 var(--f-display); color: var(--os); text-shadow: 2px 2px 0 #6d0b10, 0 0 18px rgba(210, 22, 31, .45); }
.hf-carton__mot {
    padding: .28em .5em .32em; transform: rotate(-3deg);
    font: 800 .78rem/1 var(--f-cond); letter-spacing: .22em; text-transform: uppercase;
    color: var(--os); background: var(--sang); box-shadow: 2px 2px 0 #5c0c10;
}
.hf-carton__serie { margin-left: auto; font: 400 .95rem/1 "Special Elite", monospace; letter-spacing: .08em; color: rgba(232, 221, 198, .6); }
.hf-carton__titre { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: .9rem 0 .2rem; }
.hf-carton__nom { min-width: 0; display: grid; gap: .3rem; }
.hf-carton__nom h2 { margin: 0; font: 400 clamp(1.7rem, 4.8vw, 2.5rem)/1 "Anton", var(--f-cond); text-transform: uppercase; letter-spacing: .015em; color: var(--os); overflow-wrap: anywhere; }
.hf-carton__nom span { font: 400 .88rem/1 "Special Elite", monospace; color: rgba(232, 221, 198, .55); }
.hf-carton__pts { margin: 0; display: flex; align-items: baseline; gap: .3rem; white-space: nowrap; color: var(--sang); }
.hf-carton__pts b { font: 400 clamp(2.3rem, 6.4vw, 3.3rem)/.85 "Anton", var(--f-cond); color: #ff3b42; text-shadow: 0 0 22px rgba(255, 40, 40, .45); font-variant-numeric: tabular-nums; }
.hf-carton__pts span { font: 800 1rem/1 var(--f-cond); text-transform: uppercase; letter-spacing: .12em; color: var(--os); opacity: .7; }

/* La grille : des cases carrées, toujours, centrées dans le carton. */
.hf-carton__plan {
    margin: 1.1rem 0 1rem;
    display: grid; justify-content: center; gap: .45rem;
    --cote: min(8.6rem, calc((100cqw - (var(--c) - 1) * .45rem) / var(--c)));
    grid-template-columns: repeat(var(--c), var(--cote));
}
.hf-carton__case {
    position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: calc(var(--cote) * .08);
    text-align: center; border-radius: .3rem;
    background: radial-gradient(circle at 50% 35%, #231816, #120c0b 75%);
    border: 1px solid rgba(232, 221, 198, .22);
}
/* Une case non jouée : vide, barrée d'une croix gothique discrète. */
.hf-carton__case.is-vide {
    background: repeating-linear-gradient(135deg, rgba(210, 22, 31, .08) 0 5px, transparent 5px 10px), #0a0706;
    border-style: dashed; border-color: rgba(232, 221, 198, .12);
}
.hf-carton__artiste {
    position: relative; z-index: 2; max-width: 100%;
    font: 800 clamp(.56rem, calc(var(--cote) * .135), 1.08rem)/1.02 var(--f-cond); text-transform: uppercase; letter-spacing: .01em;
    color: rgba(232, 221, 198, .82);
    overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- le sceau HELLFEST : un tampon rouge, ses deux anneaux, la braise autour */
.hf-carton__case.is-hit {
    border-color: rgba(255, 74, 80, .75);
    background: radial-gradient(circle at 50% 50%, #3b0a0c, #160707 75%);
    box-shadow: 0 0 calc(var(--cote) * .16) rgba(255, 60, 30, .35), inset 0 0 calc(var(--cote) * .25) rgba(255, 50, 30, .25);
}
.hf-carton__case.is-hit::before {
    content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; width: 84%; aspect-ratio: 1;
    translate: -50% -50%; rotate: var(--r, 0deg); border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #f0262f, #b5111a 58%, #7c070d 100%);
    /* Les anneaux du tampon : un plein, un pointillé. */
    box-shadow: 0 0 0 2px #120606, 0 0 0 4px rgba(255, 90, 80, .9), 0 0 calc(var(--cote) * .2) rgba(255, 70, 30, .65),
                inset 0 0 0 calc(var(--cote) * .045) rgba(18, 6, 6, .55);
    outline: 1.5px dashed rgba(255, 220, 200, .55); outline-offset: calc(var(--cote) * -.11);
}
.hf-carton__case.is-hit .hf-carton__artiste { color: #fff3e3; text-shadow: 0 1px 0 #4a0005, 0 0 8px rgba(60, 0, 0, .8); max-width: 78%; font-size: clamp(.5rem, calc(var(--cote) * .12), 1rem); }
.hf-carton__tampon {
    position: absolute; z-index: 3; left: 50%; bottom: 13%; translate: -50% 0;
    font: 400 calc(var(--cote) * .13)/1 var(--f-display); color: #ffe2c4; letter-spacing: .03em;
    text-shadow: 0 1px 0 #4a0005; opacity: .9; pointer-events: none;
}
/* Une case qui fait partie d'une ligne, colonne ou diagonale complète : l'or. */
.hf-carton__case.is-aligne { border-color: var(--or); box-shadow: 0 0 0 1px var(--or), 0 0 calc(var(--cote) * .22) rgba(217, 164, 65, .55); }
.hf-carton__case.is-aligne::before { box-shadow: 0 0 0 2px #120606, 0 0 0 4px var(--or), 0 0 calc(var(--cote) * .2) rgba(255, 170, 60, .6), inset 0 0 0 calc(var(--cote) * .045) rgba(18, 6, 6, .55); }

/* Un artiste annoncé pendant le live : le sceau s'abat, la case s'embrase. */
.hf-carton__case.is-nouveau::before { animation: hf-sceau .55s cubic-bezier(.25, 1.6, .45, 1) both; }
.hf-carton__case.is-nouveau .hf-carton__artiste, .hf-carton__case.is-nouveau .hf-carton__tampon { animation: hf-apparait .3s ease-out .35s both; }
.hf-carton__case.is-nouveau { animation: hf-brasier 2.6s ease-out .2s; }
@keyframes hf-sceau { from { scale: 2.6; opacity: 0; } 55% { opacity: 1; } }
@keyframes hf-apparait { from { opacity: 0; } }
@keyframes hf-brasier {
    0% { box-shadow: 0 0 0 2px var(--braise), 0 0 0 0 rgba(255, 90, 30, .9); }
    35% { box-shadow: 0 0 0 2px var(--braise), 0 0 40px 10px rgba(255, 90, 30, .55); }
    100% { box-shadow: 0 0 calc(var(--cote) * .16) rgba(255, 60, 30, .35); }
}

/* Le pied : le détail des points. */
.hf-carton__pied {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1.2rem; padding-top: .7rem;
    border-top: 1px solid rgba(232, 221, 198, .2);
    font: 400 .9rem/1.2 "Special Elite", monospace; color: rgba(232, 221, 198, .4);
}
.hf-carton__pied b { font: 700 1rem/1 var(--f-cond); }
.hf-carton__pied .is-gain { color: rgba(232, 221, 198, .85); }
.hf-carton__pied .is-gain b { color: #ff4a50; }
.hf-carton__pied .is-bonus b { color: var(--or); }

/* Carton plein : tout passe à l'or, et le grand tampon gothique en travers. */
.hf-carton.is-complete .hf-carton__papier {
    box-shadow: inset 0 0 0 1px rgba(232, 221, 198, .55), inset 0 0 0 .45rem #0d0908, inset 0 0 0 calc(.45rem + 2px) var(--or), 0 0 40px rgba(217, 164, 65, .25);
}
.hf-carton.is-complete .hf-carton__talon { border-left-color: rgba(217, 164, 65, .8); }
.hf-carton.is-complete .hf-carton__talon-txt { color: var(--or); }
.hf-carton__plein {
    align-self: center; margin-left: auto; padding: .15rem .7rem .3rem; white-space: nowrap; transform: rotate(-8deg);
    font: 400 clamp(1.3rem, 3.6vw, 1.9rem)/1 var(--f-display); color: #f3c25e;
    border: 3px double rgba(243, 194, 94, .9); border-radius: .3rem;
    text-shadow: 0 0 14px rgba(243, 194, 94, .55); box-shadow: 0 0 22px rgba(243, 194, 94, .25);
}

@media (max-width: 42rem) {
    .hf-cartons { gap: 2rem; }
    .hf-carton { grid-template-columns: minmax(0, 1fr); }
    .hf-carton__papier { border-radius: .4rem .4rem 0 0; padding: 1.2rem 1rem 1rem; }
    .hf-carton__talon {
        grid-template-rows: none; grid-template-columns: 1fr auto; align-items: center; padding: .55rem 1.1rem;
        border-left: 0; border-top: 2px dashed rgba(210, 22, 31, .7); border-radius: 0 0 .4rem .4rem;
    }
    .hf-carton.is-complete .hf-carton__talon { border-top-color: rgba(217, 164, 65, .8); }
    .hf-carton__talon::before, .hf-carton__talon::after { top: -.62rem; bottom: auto; }
    .hf-carton__talon::before { left: -.58rem; }
    .hf-carton__talon::after { left: auto; right: -.58rem; }
    .hf-carton__talon-txt { writing-mode: horizontal-tb; transform: none; }
    .hf-carton__codebarre { width: 4.4rem; height: 1.4rem; background: repeating-linear-gradient(90deg, var(--os) 0 2px, transparent 2px 4px, var(--os) 4px 5px, transparent 5px 8px, var(--os) 8px 11px, transparent 11px 12px); }
    .hf-carton__marque { font-size: 1.7rem; }
    .hf-carton__plan { gap: .3rem; --cote: min(8.6rem, calc((100cqw - (var(--c) - 1) * .3rem) / var(--c))); }
    .hf-carton__plan[data-dense] .hf-carton__tampon { display: none; }
    .hf-carton__plan[data-dense] .hf-carton__case.is-hit .hf-carton__artiste { max-width: 86%; }
}
@media (prefers-reduced-motion: reduce) {
    .hf-carton__case.is-nouveau, .hf-carton__case.is-nouveau::before,
    .hf-carton__case.is-nouveau .hf-carton__artiste, .hf-carton__case.is-nouveau .hf-carton__tampon { animation: none; }
}
@media (max-width: 42rem) {
    .hf-carton__titre { flex-wrap: wrap; align-items: center; row-gap: .6rem; }
    .hf-carton__nom { flex: 1 1 100%; }
    .hf-carton__plein { margin-left: 0; }
    .hf-carton__pts { margin-left: auto; }
    .hf-carton__serie { margin-right: .4rem; }
}

/* ------------------------------------------- cartons : la photo de l'artiste */
.hf-carton__case:not(.is-vide) { align-content: center; gap: calc(var(--cote) * .05); place-items: center; }
.hf-carton__photo.hf-rond {
    position: relative; z-index: 2; width: 56%; aspect-ratio: 1; border-width: 2px;
    font-size: calc(var(--cote) * .2); border-color: rgba(232, 221, 198, .35);
    filter: grayscale(1) brightness(.6); transition: filter .4s;
}
.hf-carton__case .hf-carton__artiste { -webkit-line-clamp: 2; }
/* Le sceau, désormais autour de la photo : plus de disque rouge plein. */
.hf-carton__case.is-hit::before {
    width: 66%; top: 6%; translate: -50% 0; background: none;
    box-shadow: 0 0 0 2px #120606, 0 0 0 4px rgba(255, 74, 80, .95), 0 0 calc(var(--cote) * .22) rgba(255, 70, 30, .75);
    outline: 1.5px dashed rgba(255, 140, 120, .7); outline-offset: calc(var(--cote) * .03);
}
.hf-carton__case.is-aligne::before { box-shadow: 0 0 0 2px #120606, 0 0 0 4px var(--or), 0 0 calc(var(--cote) * .22) rgba(255, 170, 60, .7); }
.hf-carton__case.is-hit .hf-carton__photo.hf-rond { filter: none; border-color: #ff4a50; }
.hf-carton__case.is-hit .hf-carton__artiste { max-width: 92%; color: #fff3e3; }
/* Le tampon HELLFEST, en travers du bas de la photo. */
.hf-carton__tampon {
    left: 50%; bottom: auto; top: 46%; translate: -50% 0; rotate: calc(var(--r, 0deg) - 10deg);
    padding: .08em .35em .14em; font-size: calc(var(--cote) * .12);
    color: #fff1e0; background: rgba(190, 14, 22, .92); border: 1.5px solid #ffb3a8; border-radius: .15rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .6); text-shadow: none; opacity: 1;
}
.hf-carton__case.is-nouveau .hf-carton__tampon { animation: hf-coup-tampon .5s cubic-bezier(.3, 1.7, .5, 1) .25s both; }
.hf-carton__case.is-nouveau .hf-carton__photo { animation: hf-apparait .5s ease-out both; }
@keyframes hf-coup-tampon { from { scale: 3; opacity: 0; } 60% { opacity: 1; } }

/* ------------------------------------------------ en direct : le bandeau */
.hf-direct { max-width: 50rem; margin: 1.4rem auto 0; padding: .9rem 1rem 1rem; background: #0d0908; border: 1px solid rgba(232, 221, 198, .18); border-top: 3px solid var(--blood); }
.hf-direct[hidden] { display: none; }
.hf-direct__tete { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.hf-direct__tete h2 { margin: 0; font: 800 1.15rem/1 var(--f-cond); text-transform: uppercase; letter-spacing: .06em; }
.hf-direct__live {
    display: inline-flex; align-items: center; gap: .4rem; padding: .25em .55em .3em;
    font: 800 .75rem/1 var(--f-cond); letter-spacing: .2em; text-transform: uppercase; background: var(--blood); color: var(--bone);
}
.hf-direct__live::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #fff; animation: hf-pouls 1.2s ease-in-out infinite; }
@keyframes hf-pouls { 50% { opacity: .2; } }
.hf-direct__liste { list-style: none; margin: 0; padding: 0 0 .3rem; display: flex; gap: .9rem; overflow-x: auto; scrollbar-width: thin; }
.hf-direct__liste li { flex: none; width: 5.2rem; display: grid; justify-items: center; gap: .3rem; text-align: center; opacity: .6; }
.hf-direct__liste li.is-moi { opacity: 1; }
.hf-direct__rond.hf-rond { width: 3.6rem; border-width: 2px; font-size: 1.4rem; border-color: rgba(232, 221, 198, .4); }
.hf-direct__liste li.is-moi .hf-direct__rond { border-color: #ff4a50; box-shadow: 0 0 0 3px rgba(223, 31, 40, .35), 0 0 14px rgba(255, 60, 40, .5); }
.hf-direct__liste li.is-dernier .hf-direct__rond { outline: 2px solid var(--bone); outline-offset: 3px; }
.hf-direct__liste b { font: 800 .85rem/1.05 var(--f-cond); text-transform: uppercase; overflow-wrap: anywhere; }
.hf-direct__liste small { font-size: .72rem; color: var(--ash); }
.hf-direct__liste li.is-moi small { color: #ff6a6f; font-weight: 600; }

/* ------------------------------------- en direct : l'écran qui tombe */
.hf-flash {
    position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.5rem; cursor: pointer;
    background: radial-gradient(60% 50% at 50% 45%, rgba(160, 14, 20, .55), rgba(5, 2, 2, .94) 70%);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    animation: hf-flash-in .35s ease-out both;
}
.hf-flash.is-sortie { animation: hf-flash-out .35s ease-in both; }
@keyframes hf-flash-in { from { opacity: 0; } }
@keyframes hf-flash-out { to { opacity: 0; } }
.hf-flash__boite { display: grid; justify-items: center; gap: .9rem; text-align: center; color: var(--bone); max-width: 36rem; }
.hf-flash__sur {
    margin: 0; font: 400 clamp(1.8rem, 6vw, 2.8rem)/1 var(--f-display); color: #ff4a50;
    text-shadow: 0 0 24px rgba(255, 40, 40, .6); animation: hf-flash-mot .5s cubic-bezier(.2, 1.4, .4, 1) .05s both;
}
.hf-flash__photo { position: relative; animation: hf-flash-photo .6s cubic-bezier(.2, 1.5, .4, 1) .15s both; }
.hf-flash__rond.hf-rond {
    width: clamp(10rem, 42vw, 15rem); border-width: 4px; border-color: #ff4a50; font-size: 5rem;
    box-shadow: 0 0 0 6px #120606, 0 0 0 9px rgba(255, 74, 80, .9), 0 0 60px 10px rgba(255, 70, 20, .55);
}
.hf-flash.is-moi .hf-flash__rond.hf-rond { box-shadow: 0 0 0 6px #120606, 0 0 0 9px #d9a441, 0 0 70px 14px rgba(255, 150, 40, .55); }
.hf-flash__sceau {
    position: absolute; left: 50%; bottom: 4%; translate: -50% 0; rotate: -10deg;
    padding: .05em .45em .15em; font: 400 clamp(1.4rem, 5vw, 2rem)/1 var(--f-display);
    color: #fff1e0; background: rgba(190, 14, 22, .95); border: 2px solid #ffb3a8; border-radius: .2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .6); animation: hf-coup-tampon .5s cubic-bezier(.3, 1.7, .5, 1) .6s both;
}
.hf-flash__nom {
    margin: .3rem 0 0; font: 400 clamp(2.6rem, 10vw, 5rem)/.95 "Anton", var(--f-cond); text-transform: uppercase;
    text-shadow: 3px 3px 0 #6d0b10, 0 0 30px rgba(255, 60, 40, .45); overflow-wrap: anywhere;
    animation: hf-flash-mot .5s cubic-bezier(.2, 1.4, .4, 1) .3s both;
}
.hf-flash__res { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .4rem 1rem; font: 700 1.3rem/1.1 var(--f-cond); color: var(--bone-dim); animation: hf-apparait .4s ease-out .8s both; }
.hf-flash__res b { font: 400 clamp(2rem, 7vw, 3rem)/1 "Anton", var(--f-cond); color: #f3c25e; text-shadow: 0 0 20px rgba(243, 194, 94, .5); }
.hf-flash.is-moi .hf-flash__res span { color: var(--bone); }
.hf-flash__suite { margin: 0; font-size: .9rem; color: var(--ash); }
@keyframes hf-flash-mot { from { opacity: 0; transform: translateY(18px) scale(.9); } }
@keyframes hf-flash-photo { from { opacity: 0; transform: scale(.4) rotate(-12deg); } }
@media (prefers-reduced-motion: reduce) {
    .hf-flash, .hf-flash *, .hf-direct__live::before { animation: none !important; }
}

/* ========================================================= statistiques */
.hf-page.hf-stats { max-width: 50rem; }
.hf-stats .hf-chapo { margin-inline: auto; }
.hf-stats__chiffres { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.hf-stats__chiffres li { display: grid; justify-items: center; gap: .3rem; padding: 1rem .5rem; background: #0d0908; border: 1px solid var(--ligne); border-top: 3px solid var(--bone-dim); text-align: center; }
.hf-stats__chiffres li.is-rouge { border-top-color: var(--blood); }
.hf-stats__chiffres b { font: 400 clamp(2rem, 6vw, 2.8rem)/.9 "Anton", var(--f-cond); }
.hf-stats__chiffres li.is-rouge b { color: #ff3b42; text-shadow: 0 0 18px rgba(255, 40, 40, .4); }
.hf-stats__chiffres span { font: 700 .85rem/1.1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); }

.hf-paris { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.hf-paris__ligne {
    display: grid; grid-template-columns: 2.2rem 3.6rem minmax(0, 1fr) auto; align-items: center; gap: .9rem;
    padding: .6rem .9rem .6rem .6rem; background: #120d0c; border: 1px solid rgba(232, 221, 198, .1); border-left: 4px solid transparent;
}
.hf-paris__ligne.is-valide { border-left-color: var(--blood); background: linear-gradient(90deg, rgba(177, 22, 29, .22), #120d0c 60%); }
.hf-paris__rang { font: 400 1.8rem/1 var(--f-display); text-align: center; color: var(--bone-dim); }
.hf-paris__ligne:nth-child(-n+3) .hf-paris__rang { color: var(--bone); }
.hf-paris__photo { position: relative; }
.hf-paris__photo .hf-rond { width: 3.6rem; border-width: 2px; font-size: 1.5rem; border-color: rgba(232, 221, 198, .35); filter: grayscale(.6) brightness(.85); }
.hf-paris__ligne.is-valide .hf-paris__photo .hf-rond { filter: none; border-color: #ff4a50; box-shadow: 0 0 0 3px rgba(223, 31, 40, .3), 0 0 16px rgba(255, 60, 40, .45); }
/* Le badge « validé » : un petit sceau rouge sur la vignette. */
.hf-paris__badge {
    position: absolute; right: -.35rem; bottom: -.25rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
    font: 800 .85rem/1 var(--f-cond); color: #fff; background: var(--blood); border: 2px solid var(--bone); border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}
.hf-paris__qui { min-width: 0; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .35rem .6rem; }
.hf-paris__qui b { font: 800 1.3rem/1.05 var(--f-cond); text-transform: uppercase; overflow-wrap: anywhere; }
.hf-paris__valide {
    justify-self: start; padding: .1em .45em .2em; rotate: -4deg;
    font: 400 .95rem/1 var(--f-display); color: #fff1e0; background: rgba(190, 14, 22, .95); border: 1.5px solid #ffb3a8; border-radius: .15rem;
}
.hf-paris__barre { grid-column: 1 / -1; height: .4rem; background: rgba(232, 221, 198, .08); }
.hf-paris__barre i { display: block; height: 100%; background: var(--bone-dim); }
.hf-paris__ligne.is-valide .hf-paris__barre i { background: var(--blood); }
.hf-paris__nb { display: grid; justify-items: end; font: 600 .95rem/1.1 var(--f-cond); color: var(--bone-dim); white-space: nowrap; }
.hf-paris__nb b { font: 400 1.6rem/1 "Anton", var(--f-cond); color: var(--bone); }
.hf-paris__nb small { font-size: .8rem; color: var(--ash); }

@media (max-width: 42rem) {
    .hf-stats__chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hf-paris__ligne { grid-template-columns: 1.6rem 3rem minmax(0, 1fr) auto; gap: .6rem; padding: .5rem .6rem .5rem .4rem; }
    .hf-paris__rang { font-size: 1.4rem; }
    .hf-paris__photo .hf-rond { width: 3rem; font-size: 1.2rem; }
    .hf-paris__qui b { font-size: 1.05rem; }
    .hf-paris__nb b { font-size: 1.3rem; }
}

/* L'anneau du sceau colle à la photo : plus de cercle séparé autour. */
.hf-carton__case.is-hit::before { content: none; }
.hf-carton__case.is-hit .hf-carton__photo.hf-rond {
    width: 62%; border-width: 0;
    box-shadow: 0 0 0 2px #120606, 0 0 0 4px #ff4a50, 0 0 calc(var(--cote) * .22) rgba(255, 70, 30, .75);
    outline: 1.5px dashed rgba(255, 140, 120, .75); outline-offset: calc(2px + var(--cote) * .045);
}
.hf-carton__case.is-aligne .hf-carton__photo.hf-rond {
    box-shadow: 0 0 0 2px #120606, 0 0 0 4px var(--or), 0 0 calc(var(--cote) * .22) rgba(255, 170, 60, .7);
    outline-color: rgba(243, 194, 94, .75);
}
.hf-carton__case.is-nouveau .hf-carton__photo { animation: hf-sceau .55s cubic-bezier(.25, 1.6, .45, 1) both; }

/* La tournée des cartons après une annonce : le carton visé s'allume, un repère suit. */
.hf-carton { transition: filter .4s; }
.hf-carton.is-vise { filter: drop-shadow(0 0 28px rgba(255, 70, 30, .55)) drop-shadow(0 22px 34px rgba(0, 0, 0, .7)); }
.hf-tournee {
    position: fixed; z-index: 150; left: 50%; bottom: 1.2rem; translate: -50% 0;
    display: flex; align-items: baseline; gap: .7rem; padding: .6rem 1.1rem .65rem; max-width: calc(100vw - 2rem);
    background: #0d0908; border: 1px solid rgba(232, 221, 198, .25); border-left: 4px solid var(--blood);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .7); animation: hf-flash-mot .35s ease-out both;
}
.hf-tournee.is-sortie { animation: hf-flash-out .3s ease-in both; }
.hf-tournee b { font: 400 1.3rem/1 "Anton", var(--f-cond); text-transform: uppercase; color: var(--bone); white-space: nowrap; }
.hf-tournee span { font: 700 1rem/1.1 var(--f-cond); color: #ff6a6f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===================================================== smartphone : navigation
 * En haut : le logo et le joueur, rien d'autre. En bas : quatre raccourcis et
 * le bouton Menu, à droite, qui fait coulisser le panneau depuis la gauche.
 */
.hf-onglets, .hf-tiroir { display: none; }

@media (max-width: 48rem) {
    .hf-bar { grid-template-columns: 1fr auto; padding: .7rem 0 .65rem; row-gap: 0; }
    .hf-bar .hf-menu { display: none; }
    .hf-logo__mot { font-size: 1.9rem; }
    .hf-logo__bingo { font-size: 1rem; }
    .hf-joueur span:not(.hf-joueur__initiale) { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* La place de la barre du bas, encoche comprise. */
    body { padding-bottom: calc(4.2rem + env(safe-area-inset-bottom)); }

    .hf-onglets {
        position: fixed; z-index: 120; left: 0; right: 0; bottom: 0;
        display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
        padding: .35rem .3rem calc(.35rem + env(safe-area-inset-bottom));
        background: rgba(13, 9, 8, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        border-top: 1px solid rgba(232, 221, 198, .14); box-shadow: 0 -8px 24px rgba(0, 0, 0, .55);
    }
    .hf-onglets::before {
        content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
        background: linear-gradient(90deg, transparent, var(--blood) 20%, var(--blood) 80%, transparent);
    }
    .hf-onglets a, .hf-onglets button {
        position: relative; display: grid; justify-items: center; align-content: center; gap: .22rem; min-height: 3.3rem;
        padding: .2rem 0; color: var(--ash); text-decoration: none; background: none; border: 0; cursor: pointer;
        font: 700 .72rem/1 var(--f-cond); letter-spacing: .06em; text-transform: uppercase;
        -webkit-tap-highlight-color: transparent;
    }
    .hf-onglets span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hf-onglets a[aria-current="page"] { color: var(--bone); }
    .hf-onglets a[aria-current="page"] svg { color: #ff4a50; filter: drop-shadow(0 0 6px rgba(255, 60, 40, .7)); }
    .hf-onglets a[aria-current="page"]::after {
        content: ""; position: absolute; top: -.35rem; left: 28%; right: 28%; height: 3px; background: var(--blood); box-shadow: 0 0 10px rgba(255, 60, 40, .7);
    }
    .hf-onglets a:active, .hf-onglets button:active { transform: scale(.93); }
    .hf-onglets__menu { border-left: 1px solid rgba(232, 221, 198, .1) !important; }
    .hf-onglets__menu[aria-expanded="true"] { color: var(--bone); }

    /* Le panneau latéral. */
    .hf-tiroir { display: block; position: fixed; inset: 0; z-index: 180; }
    .hf-tiroir[hidden] { display: none; }
    .hf-tiroir__fond { position: absolute; inset: 0; background: rgba(5, 2, 2, .7); opacity: 0; transition: opacity .25s; }
    .hf-tiroir__panneau {
        position: absolute; top: 0; bottom: 0; left: 0; width: min(19rem, 84vw); overflow-y: auto;
        display: flex; flex-direction: column; gap: 1.1rem;
        padding: calc(1rem + env(safe-area-inset-top)) 1.1rem calc(1.2rem + env(safe-area-inset-bottom));
        background: var(--grain-mur), radial-gradient(120% 50% at 0 0, rgba(150, 18, 22, .4), transparent 60%), #0d0908;
        border-right: 2px solid var(--blood); box-shadow: 10px 0 40px rgba(0, 0, 0, .7);
        transform: translateX(-102%); transition: transform .26s cubic-bezier(.2, .8, .2, 1);
    }
    .hf-tiroir.is-ouvert .hf-tiroir__fond { opacity: 1; }
    .hf-tiroir.is-ouvert .hf-tiroir__panneau { transform: none; }
    .hf-tiroir__tete { display: flex; align-items: center; justify-content: space-between; }
    .hf-tiroir__x { width: 2.6rem; height: 2.6rem; padding: 0; font: 400 2rem/1 var(--f-texte); color: var(--bone-dim); background: none; border: 0; cursor: pointer; }
    .hf-tiroir__joueur { display: flex; align-items: center; gap: .8rem; padding: .8rem; background: rgba(0, 0, 0, .35); border: 1px solid rgba(232, 221, 198, .12); }
    .hf-tiroir__joueur img, .hf-tiroir__joueur .hf-joueur__initiale { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bone); flex: none; }
    .hf-tiroir__joueur .hf-joueur__initiale { display: grid; place-items: center; font: 700 1.2rem/1 var(--f-cond); }
    .hf-tiroir__joueur span { display: grid; gap: .15rem; min-width: 0; }
    .hf-tiroir__joueur small { font: 700 .7rem/1 var(--f-cond); letter-spacing: .15em; text-transform: uppercase; color: var(--ash); }
    .hf-tiroir__joueur b { font: 800 1.25rem/1.1 var(--f-cond); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hf-tiroir__liens { display: grid; gap: .15rem; }
    .hf-tiroir__liens a {
        display: flex; align-items: center; gap: .9rem; padding: .8rem .8rem; color: var(--bone-dim); text-decoration: none;
        font: 700 1.3rem/1 var(--f-cond); border-left: 3px solid transparent;
    }
    .hf-tiroir__liens a:active { background: rgba(232, 221, 198, .06); }
    .hf-tiroir__liens a[aria-current="page"] { color: var(--bone); border-left-color: var(--blood); background: linear-gradient(90deg, rgba(177, 22, 29, .28), transparent); }
    .hf-tiroir__liens a[aria-current="page"] svg { color: #ff4a50; }
    .hf-tiroir__credit { margin: auto 0 0; padding-top: 1rem; border-top: 1px solid rgba(232, 221, 198, .12); font: 700 .8rem/1 var(--f-cond); letter-spacing: .2em; color: var(--ash); text-align: center; }

    /* Ce qui flotte en bas passe au-dessus de la barre. */
    .hf-tournee { bottom: calc(5rem + env(safe-area-inset-bottom)); }
    .hf-pied { padding-bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hf-tiroir__panneau, .hf-tiroir__fond { transition: none; }
}
.hf-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Liste sur mobile : le bouton Catalogue garde sa taille (son fond rouge se
   cale sur lui, pas sur tout l'en-tête), et trois artistes par ligne. */
@media (max-width: 640px) {
    .hf-liste__catalogue, .hf-catalogue__retour { position: relative; }
    .hf-liste__tete { gap: .3rem; margin-bottom: .6rem; }
    .hf-liste__tete .hf-titre { margin-bottom: .2rem; }
    .hf-vignettes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem .6rem; }
    .hf-vignette__rond { width: min(6.4rem, 100%); }
    .hf-vignette__nom { font-size: .92rem; }
}

/* ============================================================ la rue
 * La scène reste fixe sous la barre du haut pendant qu'on fait défiler ; le
 * mur et le trottoir sont rendus en WebGL (canvas du fond), les affiches sont
 * au milieu, le canvas « lumière » les éclaire par multiplication, et les
 * poteaux passent devant, flous.
 */
.hf-rue { position: relative; }
.hf-rue__mobile { display: none; padding: 2rem 1.2rem; text-align: center; }
.hf-rue__scene {
    position: sticky; top: var(--haut, 0px); height: calc(100vh - var(--haut, 0px)); overflow: hidden;
    background: #070505; opacity: 0; transition: opacity .6s;
}
.hf-rue__scene.est-prete { opacity: 1; }
.hf-rue__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hf-rue__gl--lum { z-index: 3; mix-blend-mode: multiply; pointer-events: none; }
.hf-rue__piste { position: absolute; top: 0; left: 0; bottom: 0; z-index: 2; will-change: transform; }
.hf-rue__avant { position: absolute; top: 0; left: 0; bottom: 0; z-index: 5; pointer-events: none; will-change: transform; }
.hf-rue__objets { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }

/* La caméra : tout le décor est dans « monde », qu'on agrandit pour avancer vers une affiche. */
.hf-rue__monde { position: absolute; inset: 0; transform-origin: 0 0; }
/* Pendant le mouvement, tout reste en calques (le GPU agrandit, rien n'est redessiné) ;
   une fois arrivé, on redessine une seule fois à la bonne taille pour que ce soit net. */
.hf-rue.is-camera .hf-rue__monde { will-change: transform; }
.hf-rue.is-net .hf-rue__monde,
.hf-rue.is-net .hf-rue__piste,
.hf-rue.is-net .hf-rue__objet { will-change: auto; }
.hf-rue.is-camera .hf-rue__poste { cursor: zoom-out; }
.hf-rue.is-camera .hf-rue__poste:hover .hf-rue__colle { transform: none; }
.hf-rue__focus {
    position: absolute; inset: 0; z-index: 6; pointer-events: none;
    opacity: 0; transition: opacity .35s;
}
.hf-rue__focus.is-visible { opacity: 1; }
.hf-rue__focus-barre {
    position: absolute; right: 1.4rem; bottom: 1.4rem; display: flex; gap: .6rem; pointer-events: auto;
}
.hf-rue__focus-legende {
    position: absolute; left: 1.4rem; bottom: 2.1rem; margin: 0;
    font: 400 1.05rem/1.2 var(--f-cond); letter-spacing: .08em; text-transform: uppercase;
    color: rgba(237, 228, 214, .75); text-shadow: 0 2px 8px #000;
}
.hf-rue__focus-legende b { color: var(--bone); font-family: var(--f-display); font-size: 1.6rem; letter-spacing: .02em; text-transform: none; margin-left: .3rem; }
.hf-rue__focus-aide {
    position: absolute; left: 1.4rem; bottom: .7rem; margin: 0;
    font: 400 .8rem var(--f-cond); letter-spacing: .12em; text-transform: uppercase;
    color: rgba(237, 228, 214, .5); text-shadow: 0 1px 4px #000;
}

/* Les objets du trottoir : posés au sol, ils suivent la perspective. */
.hf-rue__objet { position: absolute; left: 0; will-change: transform; }
.hf-rue__objet svg { width: 100%; height: 100%; display: block; }

/* La vapeur des bouches d'égout : des volutes qui montent en tournant, s'élargissent et se dissipent. */
.hf-rue__vapeur { position: absolute; left: 0; width: 0; height: 0; z-index: 2000; }
.hf-rue__vapeur b {
    position: absolute; left: -7vh; top: -1.2vh; width: 14vh; height: 2.6vh; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(200, 185, 165, .22), transparent); filter: blur(4px);
}
.hf-rue__vapeur i {
    position: absolute; left: calc(-6vh * var(--taille, 1)); bottom: 0;
    width: calc(12vh * var(--taille, 1)); height: calc(12vh * var(--taille, 1)); border-radius: 50%;
    background:
        radial-gradient(circle at 35% 40%, rgba(205, 195, 180, .30), transparent 45%),
        radial-gradient(circle at 65% 55%, rgba(190, 178, 160, .24), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(170, 160, 150, .14), transparent 68%);
    filter: blur(7px); mix-blend-mode: screen; opacity: 0;
    animation: hf-vapeur 7s cubic-bezier(.3, .6, .5, 1) infinite;
}
@keyframes hf-vapeur {
    0% { transform: translate(0, 1vh) scale(.25) rotate(0deg); opacity: 0; }
    12% { opacity: .85; }
    45% { transform: translate(calc(var(--derive) * .4), -12vh) scale(1) rotate(calc(var(--tour) * .5)); opacity: .55; }
    100% { transform: translate(var(--derive), -34vh) scale(2.2) rotate(var(--tour)); opacity: 0; }
}

/* Les papillons de nuit, dans le faisceau des spots. */
.hf-rue__papillons { position: absolute; width: 0; height: 0; z-index: 3; pointer-events: none; }
.hf-rue__papillons i {
    position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff2d6;
    box-shadow: 0 0 6px 2px rgba(255, 220, 160, .55);
    animation: hf-papillon 3.4s ease-in-out infinite;
}
@keyframes hf-papillon {
    0% { transform: translate(var(--ax), var(--ay)); }
    25% { transform: translate(calc(var(--ax) * -.4), calc(var(--ay) - 30px)); }
    50% { transform: translate(calc(var(--ax) * .6 + 20px), calc(var(--ay) * -1)); }
    75% { transform: translate(calc(var(--ax) * -.8), calc(var(--ay) + 18px)); }
    100% { transform: translate(var(--ax), var(--ay)); }
}

/* Le rat. */
.hf-rue__rat { position: absolute; left: 0; z-index: 22; aspect-ratio: 120 / 50; opacity: 0; filter: brightness(.7); }
.hf-rue__rat svg { width: 100%; height: 100%; display: block; }
.hf-rat__pattes { animation: hf-pattes .12s steps(2) infinite; }
@keyframes hf-pattes { 50% { transform: translateX(3px); } }

/* Les poteaux, au premier plan : opaques, juste flous sur les bords (la mise au point est sur le mur). */
.hf-rue__poteau { position: absolute; top: -10%; bottom: -10%; }
.hf-rue__tronc {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, #070605 0%, #1f1a17 30%, #2e2722 46%, #191512 68%, #050404 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.hf-rue__tronc::before {
    content: ""; position: absolute; left: -40%; right: -40%; top: 26%; height: 1.2%;
    background: linear-gradient(180deg, #2a2420, #0b0908);
}
.hf-rue__sticker {
    position: absolute; left: 50%; padding: .25em .4em; white-space: nowrap;
    font: 800 1em/1 var(--f-cond); letter-spacing: .04em; text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .6); filter: brightness(.42) saturate(.8) blur(1px);
}
/* Les panneaux de rue : centrés sur le poteau ; forme, taille et couleur au hasard ; cabossés, rouillés, de travers. */
.hf-rue__panneau {
    position: absolute; left: 50%; z-index: 1;
    transform: translateX(-50%) rotate(var(--incl, 0deg));
    padding: .5em 1.4em; white-space: nowrap;
    font: 700 1em/1 "Barlow Condensed", var(--f-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--texte, #eee);
    background:
        radial-gradient(ellipse at 60% 85%, rgba(0, 0, 0, .4), transparent 45%),
        radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, .14), transparent 35%),
        var(--fond, #2c5b39);
    border: .14em solid var(--bord, #ccc);
    box-shadow: inset 0 -.4em .7em rgba(0, 0, 0, .45), inset 0 .2em .2em rgba(255, 255, 255, .12), 0 .2em .5em rgba(0, 0, 0, .6);
    filter: brightness(.5) blur(1.2px);
}
.hf-rue__panneau.is-fleche-d { clip-path: polygon(0 0, calc(100% - 1.1em) 0, 100% 50%, calc(100% - 1.1em) 100%, 0 100%, 0 72%, 2.5% 63%, 0 56%); padding-right: 2em; }
.hf-rue__panneau.is-fleche-g { clip-path: polygon(1.1em 0, 100% 0, 100% 42%, 97.5% 50%, 100% 58%, 100% 100%, 1.1em 100%, 0 50%); padding-left: 2em; }
.hf-rue__panneau.is-arrondi { border-radius: .7em; }
.hf-rue__panneau.is-rect { border-radius: .12em; }
.hf-rue__panneau span { position: relative; text-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
.hf-rue__rouille {
    position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
    background:
        radial-gradient(circle at 12% 78%, rgba(120, 55, 20, .9), transparent 18%),
        radial-gradient(circle at 88% 22%, rgba(120, 55, 20, .7), transparent 14%),
        radial-gradient(ellipse at 50% 100%, rgba(90, 40, 15, .6), transparent 40%);
}

/* Le rat : il trottine, s'arrête, renifle. */
.hf-rue__rat { width: auto; aspect-ratio: auto; }
.hf-rat__patte { transform-box: fill-box; transform-origin: 50% 0; animation: hf-patte .11s ease-in-out infinite alternate; }
.hf-rat__patte--b, .hf-rat__patte--c { animation-delay: -.08s; }
.hf-rat__queue { transform-box: fill-box; transform-origin: 100% 50%; animation: hf-queue .34s ease-in-out infinite alternate; }
.hf-rue__rat.is-arret .hf-rat__queue { animation-duration: 1.1s; }
.hf-rat__museau { transform-box: fill-box; transform-origin: 0 50%; }
.hf-rue__rat.is-arret .hf-rat__patte { animation: none; }
.hf-rue__rat.is-arret .hf-rat__museau { animation: hf-renifle .18s ease-in-out infinite alternate; }
/* (la posture du corps est réglée image par image par le script) */
@keyframes hf-patte { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
@keyframes hf-queue { from { transform: rotate(-6deg); } to { transform: rotate(7deg); } }
@keyframes hf-renifle { to { transform: translateX(1.5px) scale(1.08); } }
@keyframes hf-guet { to { transform: translateY(-2px) rotate(-2deg); } }

/* Une affiche : collée au mur. La lumière vient du canvas au-dessus. */
.hf-rue__poste {
    position: absolute; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in;
    transform-origin: 50% 50%;
}
.hf-rue__poste:focus-visible { outline: 2px solid var(--bone); outline-offset: 6px; }
.hf-rue__colle { position: absolute; inset: 0; transition: transform .2s; }
.hf-rue__cadre.hf-affiche-cadre { width: 100%; margin: 0; }
.hf-rue__cadre .hf-ga { box-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
/* L'affiche déjà rendue en image ; les noms annoncés repassent en rouge (le calque « color » garde la lumière du texte). */
.hf-rue__cadre--img { position: absolute; inset: 0; isolation: isolate; }
.hf-rue__cadre--img img { display: block; width: 100%; height: 100%; box-shadow: 0 1px 2px rgba(0, 0, 0, .6); user-select: none; }
.hf-rue__annonce { position: absolute; background: #ff3a40; mix-blend-mode: color; pointer-events: none; }
/* Le papier collé : bulles de colle, plis, bords qui ont bu. */
.hf-rue__colle::after {
    content: ""; position: absolute; inset: 0; z-index: 30; pointer-events: none; mix-blend-mode: multiply;
    background:
        linear-gradient(97deg, transparent 31%, rgba(0, 0, 0, .16) 31.4%, transparent 32.6%),
        linear-gradient(181deg, transparent 63%, rgba(0, 0, 0, .14) 63.3%, transparent 64.5%),
        linear-gradient(88deg, transparent 72%, rgba(0, 0, 0, .12) 72.4%, transparent 73.2%),
        radial-gradient(ellipse 18% 9% at 72% 22%, rgba(0, 0, 0, .14), transparent 70%),
        radial-gradient(ellipse 12% 7% at 24% 78%, rgba(0, 0, 0, .12), transparent 70%),
        linear-gradient(90deg, rgba(70, 45, 20, .45), transparent 5%, transparent 95%, rgba(70, 45, 20, .45)),
        linear-gradient(180deg, rgba(70, 45, 20, .4), transparent 4%, transparent 96%, rgba(70, 45, 20, .45));
}
.hf-rue__poste:hover .hf-rue__colle { transform: translateY(-2px) rotate(-.4deg); }

/* L'entrée et le bout de la rue. */
.hf-rue__entree, .hf-rue__fin { position: absolute; z-index: 1; display: grid; gap: .6rem; color: #d8d2c6; }
.hf-rue__entree { transform: rotate(-3deg); opacity: .8; }
.hf-rue__entree b { font: 400 clamp(4rem, 11vh, 8rem)/.9 var(--f-display); color: #b8231f; text-shadow: 2px 3px 0 rgba(0, 0, 0, .6); mix-blend-mode: hard-light; }
.hf-rue__entree-petit { font: 400 clamp(1.6rem, 4vh, 2.6rem)/1 "Permanent Marker", cursive; color: #cfc8bb; }
.hf-rue__entree-aide { margin-top: 1rem; font: 400 1.05rem/1.3 "Special Elite", monospace; color: rgba(216, 210, 198, .65); transform: rotate(2deg); }
.hf-rue__fin b { font: 400 clamp(2.4rem, 7vh, 4.4rem)/1 "Permanent Marker", cursive; color: #cfc8bb; transform: rotate(-3deg); }
.hf-rue__fin .hf-btn { justify-self: start; }

/* Sans WebGL : un fond sombre, les affiches restent visibles. */
.hf-rue.sans-gl .hf-rue__scene { background: radial-gradient(120% 80% at 50% 40%, #2a201d, #070505); }
.hf-rue.sans-gl .hf-rue__gl { display: none; }

/* Sur mobile, pour l'instant : un simple message. */
@media (max-width: 48rem) {
    .hf-rue { height: auto !important; }
    .hf-rue__scene { display: none; }
    .hf-rue__mobile { display: block; }
}

/* ================================================= l'affiche en grand, en enfer
 * À l'ouverture : l'écran vire au rouge, les flammes montent du bas, l'affiche
 * s'arrache du mur et vient se poser, chauffée au rouge ; au choc, une gerbe
 * d'étincelles et l'écran qui tremble.
 */
.hf-affiche-fond.is-enfer {
    background: radial-gradient(60% 55% at 50% 50%, rgba(90, 12, 8, .55), transparent 70%), #050202;
    animation: hf-enfer-fond .7s ease-out both; overflow-x: hidden;
}
@keyframes hf-enfer-fond {
    0% { background-color: rgba(5, 2, 2, 0); }
    18% { background-color: rgba(120, 10, 6, .92); }
    100% { background-color: rgba(5, 2, 2, .96); }
}
.hf-affiche-fond.is-sortie { animation: hf-enfer-sortie .32s ease-in both; }
@keyframes hf-enfer-sortie { to { opacity: 0; transform: scale(1.02); } }
.hf-affiche-fond.is-enfer .hf-affiche-cadre { position: relative; z-index: 1; }
.hf-affiche-cadre.is-vol { transition: transform .7s cubic-bezier(.25, 1.35, .35, 1), opacity .4s; }
.hf-ga.is-forge { animation: hf-forge 1.4s ease-out both; }
@keyframes hf-forge {
    0% { filter: brightness(2.6) sepia(1) saturate(4) hue-rotate(-20deg) contrast(1.3); box-shadow: 0 0 120px 40px rgba(255, 90, 20, .9); }
    45% { filter: brightness(1.4) sepia(.5) saturate(2) hue-rotate(-10deg); box-shadow: 0 0 80px 20px rgba(255, 70, 20, .6); }
    100% { filter: none; }
}
.hf-affiche-legende {
    position: relative; z-index: 1; margin: 1.2rem 0 0; text-align: center;
    font: 400 clamp(1.4rem, 3vw, 2rem)/1 var(--f-display); color: #d8cfc0; text-shadow: 0 0 18px rgba(255, 60, 20, .5);
    animation: hf-apparait .5s ease-out .8s both;
}
.hf-affiche-legende b { color: #ff4a3a; font-weight: 400; }

/* ================================================== la rue : le chargement */
.hf-rue__charge {
    position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; top: var(--haut, 0px);
    display: grid; place-content: center; justify-items: center; gap: 1.2rem; text-align: center;
    background: radial-gradient(70% 60% at 50% 45%, #1a0b09, #050303 75%);
    transition: opacity .7s ease, visibility .7s;
}
.hf-rue__charge.is-fini { opacity: 0; visibility: hidden; }
.hf-rue__charge-logo {
    font: 400 clamp(3.4rem, 9vw, 6.5rem)/.9 var(--f-display); color: #ff3b42;
    text-shadow: 0 0 6px #ff3b42, 0 0 30px rgba(255, 40, 40, .6), 0 0 70px rgba(255, 40, 40, .35);
    animation: hf-neon-charge 3.2s steps(1) infinite;
}
@keyframes hf-neon-charge { 0%, 18%, 22%, 61%, 63%, 100% { opacity: 1; } 19%, 21%, 62% { opacity: .25; } }
.hf-rue__charge-sous { margin: 0; font: 400 1.6rem/1 "Permanent Marker", cursive; color: #d8cfc0; transform: rotate(-2deg); }
.hf-rue__charge-etape { margin: 0; min-height: 1.2em; font: 400 1rem/1.2 "Special Elite", monospace; color: rgba(216, 207, 192, .7); }
/* La jauge : un trait de bombe rouge qui avance, avec ses coulures. */
.hf-rue__charge-jauge { position: relative; width: min(24rem, 70vw); height: 12px; background: rgba(255, 255, 255, .06); border-radius: 6px; }
.hf-rue__charge-jauge i {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px;
    background: linear-gradient(90deg, #8a0f14, #e01f28); box-shadow: 0 0 12px rgba(255, 40, 40, .55);
    transition: width .5s cubic-bezier(.3, .7, .3, 1);
}
.hf-rue__charge-jauge i::after {
    content: ""; position: absolute; right: 8px; top: 9px; width: 3px; height: 16px; border-radius: 0 0 3px 3px; background: #c4141c;
}
@media (max-width: 48rem) { .hf-rue__charge { display: none; } }

/* ===================================================== bingo : la grille en carton
 * Pendant le jeu, la grille ouverte a déjà l'allure du carton final (celui qu'on
 * voit une fois le bingo clos) : on y pose ses artistes directement.
 */
.hf-carton--atelier.hf-atelier__grille { padding: 0; gap: 0; background: none; border: 0; box-shadow: none; container-type: normal; }
.hf-carton--atelier.hf-atelier__grille.is-complete { border: 0; box-shadow: none; }
.hf-carton--atelier .hf-carton__papier { padding: 1.3rem 1.4rem 1.2rem; }
.hf-carton--atelier .hf-carton__nom h2 {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    font: 400 clamp(1.5rem, 3.2vw, 2.2rem)/1 "Anton", var(--f-cond); text-transform: uppercase; letter-spacing: .015em; color: var(--os);
}
.hf-carton--atelier .hf-g-format { display: none; }
.hf-carton--atelier .hf-g-crayon { width: 1.9rem; height: 1.9rem; color: rgba(232, 221, 198, .6); border-color: rgba(232, 221, 198, .25); flex: none; }
.hf-carton--atelier .hf-g-champ { font: 400 1.5rem/1.1 "Anton", var(--f-cond); background: #0a0706; }
.hf-carton--atelier .hf-carton__pts[hidden] { display: none; }

/* Les cases : la taille tient aussi compte de la hauteur de l'écran (la grille reste visible en entier). */
.hf-carton--atelier .hf-carton__plan {
    --cote: min(8.6rem,
                calc((100cqw - (var(--c) - 1) * .45rem) / var(--c)),
                calc((100vh - 20rem - (var(--l, 4) - 1) * .45rem) / var(--l, 4)));
}
@media (max-width: 860px) {
    .hf-carton--atelier .hf-carton__plan { --cote: min(8.6rem, calc((100cqw - (var(--c) - 1) * .3rem) / var(--c))); }
}
.hf-carton--atelier .hf-case {
    min-height: 0; padding: calc(var(--cote) * .08); border-radius: .3rem;
    font: inherit; text-transform: none; transition: border-color .15s, background-color .15s, transform .15s, opacity .15s;
}
.hf-carton--atelier .hf-case.is-plein {
    border: 1px solid rgba(232, 221, 198, .22); background: radial-gradient(circle at 50% 35%, #231816, #120c0b 75%);
    box-shadow: none; cursor: grab;
}
.hf-carton--atelier .hf-case.is-vide { border-width: 1px; }
.hf-carton--atelier .hf-case.is-survol { border: 1px solid var(--os); background: #3a1417; transform: scale(1.04); }
.hf-carton--atelier .hf-case.is-source { opacity: .35; }
.hf-bingo .a-main .hf-carton--atelier .hf-case:not(.is-source):hover { border-color: var(--os); border-style: solid; background: #2a1012; cursor: copy; }
.hf-carton--atelier .hf-case__x { top: .2rem; right: .2rem; z-index: 4; }
/* Pas encore annoncé : la photo un peu éteinte, comme sur le carton final. */
.hf-carton--atelier .hf-carton__photo.hf-rond { filter: grayscale(1) brightness(.75); }
.hf-carton--atelier .hf-case.is-plein:hover .hf-carton__photo.hf-rond { filter: grayscale(.3) brightness(.95); }
.hf-carton--atelier .hf-carton__nom h2:has(.hf-g-champ) { flex-wrap: nowrap; }
/* Le carton reste à l'écran pendant qu'on fait défiler la liste (sauf sur petit écran). */
.hf-carton--atelier.hf-atelier__grille { position: sticky; top: 5.6rem; }
@media (max-width: 860px) { .hf-carton--atelier.hf-atelier__grille { position: relative; top: auto; } }
.hf-carton--atelier .hf-carton__nom h2 .hf-g-nom { font: inherit; color: inherit; letter-spacing: inherit; }

/* Plus d'encoches rondes au pli du talon : la ligne de découpe court d'un bout à l'autre. */
.hf-carton__talon::before, .hf-carton__talon::after { content: none; }

/* L'entrée de la rue en 3D (Hell Street) : par-dessus tout, jusqu'à l'arrivée devant les affiches. */
.hf-rue__intro { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 8; pointer-events: none; }
.hf-rue.is-entree .hf-rue__poste { cursor: default; }
/* Pendant l'entrée 3D, ce que la rue 2D anime seule (vapeur, papillons, rat) attend l'arrivée, puis apparaît en douceur. */
.hf-rue__vapeur, .hf-rue__papillons { transition: filter 2.2s ease; }
.hf-rue.is-entree .hf-rue__vapeur, .hf-rue.is-entree .hf-rue__papillons { filter: opacity(0); transition: none; }
.hf-rue.is-entree .hf-rue__rat { visibility: hidden; }