/* ═══════════════════════════ Le bar de la maison ═══════════════════════════
 *
 * Servie **seulement** sur sa fiche (`views/product-affiche.liquid`) : une mise en page d'affiche n'a rien à
 * faire dans le chemin critique du reste du site.
 *
 * ── L'enseigne d'un coin bar, quatre identités (refonte du 6 nov. 2026) ──
 *
 * Le contenu et la structure ne bougent pas : un verre dessiné, « Chez » (ou « Welcome to », « Bei »,
 * « Casa »), le nom en très grandes lettres, « Bar », une ligne d'horaires, un cartouche « Happy hour » et une
 * ligne du bas facultative. Ce n'est pas le coin café : il n'y a ici aucune liste, **l'enseigne est la
 * figure**. Chaque style est une enseigne qu'on reconnaît sans la nommer :
 * - **Émaillé** (celui que la fiche ouvre) : la plaque émaillée d'un bistrot d'avant-guerre, bleu de four, double
 *   liseré crème, quatre boulons et quelques écaillures, accrochée sur un mur de carrelage ;
 * - **Réclame** : l'affiche d'une terrasse des années cinquante, papier jauni et plié, rayons de soleil, ruban
 *   rouge, trame de points, un grand verre sur son soleil, un happy hour en ticket ;
 * - **Néon** : le tube lumineux d'un bar de nuit, rose et cyan, suspendu par deux chaînes devant un mur de briques ;
 * - **Tiki** : le bar polynésien sous son toit de chaume, bambous en relief, plaque de bois sombre, une chope
 *   et son ombrelle.
 *
 * **Aucune marque** : bouteille, verre, chope et ombrelle sont dessinés pour l'affiche. Le mot « pastis »
 * est permis ; le nom, le logo, la bouteille et la police d'une marque, jamais.
 *
 * Polices servies par nous (point 2) : Josefin Sans, Playfair Display, Cormorant Garamond et Fredoka par
 * `theme.css`, Damion et Anton ici.
 *
 * ── Les palettes ──
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : en clair, toutes ici, en tête, et
 * nulle part ailleurs. `[data-style]` ne nomme pas `.bq` exprès, pour que les échantillons du formulaire se
 * colorent avec les mêmes variables.
 */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/anton-latin-ext.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: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/anton-latin.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: "Damion";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/damion-latin-ext.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: "Damion";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/damion-latin.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;
}

/* --q-fond : ce qui entoure l'enseigne ; --q-plaque : le fond de l'enseigne ; --q-plaque-2 : son centre,
   plus clair ; --q-bord : son cadre ; --q-nom : le nom ; --q-chez : « Chez » ; --q-texte : les horaires ;
   --q-accent : « Bar » et la ligne du bas ; --q-icone, --q-icone-2, --q-icone-3 : le verre ;
   --q-hp-fond / --q-hp-texte / --q-hp-titre / --q-hp-bord : le cartouche du happy hour ;
   --q-halo, --q-halo-doux : la lueur du néon ;
   --q-deco-1 à --q-deco-6 : le décor autour et sur l'enseigne (joints du carrelage, rayons, briques, bambou,
   chaume : voir chaque style). */
[data-style="Émaillé"] {
  --q-fond: #ece3cc; --q-plaque: #17396b; --q-plaque-2: #214c8c; --q-bord: #f6efdc;
  --q-nom: #fff6dd; --q-chez: #f3c64f; --q-texte: #fff6dd; --q-accent: #f3c64f;
  --q-icone: #fff6dd; --q-icone-2: #f3c64f; --q-icone-3: #e0432f;
  --q-hp-fond: #f6efdc; --q-hp-texte: #14274a; --q-hp-titre: #a3231a; --q-hp-bord: #a3231a;
  --q-halo: #00000000; --q-halo-doux: #00000000;
  --q-deco-1: #b8ad8c; --q-deco-2: #f9f4e4; --q-deco-3: #3a2e1c; --q-deco-4: #8c1f16; --q-deco-5: #d7cba9; --q-deco-6: #6b5b3a;
}
[data-style="Réclame"] {
  --q-fond: #f0e0b4; --q-plaque: #0d4a55; --q-plaque-2: #12596a; --q-bord: #f2b632;
  --q-nom: #fff3cf; --q-chez: #ffd24d; --q-texte: #fff3cf; --q-accent: #ffd24d;
  --q-icone: #fff3cf; --q-icone-2: #f2b632; --q-icone-3: #e2543a;
  --q-hp-fond: #9c2616; --q-hp-texte: #fff3cf; --q-hp-titre: #ffd24d; --q-hp-bord: #ffd24d;
  --q-halo: #00000000; --q-halo-doux: #00000000;
  --q-deco-1: #d9482f; --q-deco-2: #f0e0b4; --q-deco-3: #7a5a26; --q-deco-4: #1b6f7e; --q-deco-5: #f7ecc6; --q-deco-6: #0a3a44;
}
[data-style="Néon"] {
  --q-fond: #0c0613; --q-plaque: #160a24; --q-plaque-2: #26103a; --q-bord: #4de1ff;
  --q-nom: #ff8fd0; --q-chez: #8eeaff; --q-texte: #f4e3ff; --q-accent: #8eeaff;
  --q-icone: #8eeaff; --q-icone-2: #ff8fd0; --q-icone-3: #ffd84a;
  --q-hp-fond: #1d0d2f; --q-hp-texte: #fff0fa; --q-hp-titre: #ffd84a; --q-hp-bord: #ff4fb3;
  --q-halo: #ff4fb3; --q-halo-doux: #ff4fb388;
  --q-deco-1: #371422; --q-deco-2: #1b0b17; --q-deco-3: #9aa0b8; --q-deco-4: #4c1b2e; --q-deco-5: #6a7087; --q-deco-6: #0c0613;
}
[data-style="Tiki"] {
  --q-fond: #c9923b; --q-plaque: #2a160c; --q-plaque-2: #3b2112; --q-bord: #e7b95f;
  --q-nom: #ffc65f; --q-chez: #f3e2b8; --q-texte: #fbeed0; --q-accent: #66dccf;
  --q-icone: #66dccf; --q-icone-2: #c9923b; --q-icone-3: #e84d3d;
  --q-hp-fond: #0e5c57; --q-hp-texte: #ffffff; --q-hp-titre: #ffdc90; --q-hp-bord: #66dccf;
  --q-halo: #00000000; --q-halo-doux: #00000000;
  --q-deco-1: #c9923b; --q-deco-2: #8a5c17; --q-deco-3: #efc77a; --q-deco-4: #d9b865; --q-deco-5: #a07c2c; --q-deco-6: #2f8a5d;
}

/* ── L'affiche ──
 *
 * Tout est en `cqw`. L'enseigne prend toute la hauteur ; l'écart entre les formats s'absorbe dans l'air entre
 * le haut (le verre, le nom) et le bas (horaires, happy hour, ligne du bas), jamais dans une taille de texte.
 * `--bq-t` resserre le texte du bas, `--ech` agrandit ou resserre le nom : le serveur estime, le script reprend
 * au pixel.
 *
 * **Le décor est de la matière, pas de l'image** : carrelage, briques, rayons, chaume, bambou sont des dégradés
 * posés sur trois pièces que le gabarit fournit une fois — `.bq__mur` (le fond, avec ses deux pseudo-éléments),
 * `.bq__deco` (ce qui orne la plaque) et les `::before` / `::after` de l'affiche —, et colorés par les seules
 * variables du style : rien à télécharger, rien à rastériser avant l'impression. Le relief (ombre de la plaque,
 * lueur du néon) est porté par **l'enseigne**, jamais par `.affiche__affiche`, dont la fabrication retire
 * l'ombre : un cadre posé là disparaîtrait du tirage (point 11 sexagies quater). */
.bq {
  --bq-t: 1;
  --fond: var(--q-fond); --texte: var(--q-texte);
  position: relative; display: flex; flex-direction: column; padding: 5cqw; isolation: isolate;
  background-color: var(--q-fond); color: var(--q-texte); font-family: "Josefin Sans", system-ui, sans-serif; line-height: 1.15;
}
.bq :where(p, ol) { margin: 0; padding: 0; }
.bq__mur { display: none; position: absolute; inset: 0; pointer-events: none; }
.bq__enseigne {
  flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; gap: 5.4cqw;
  position: relative; overflow: hidden; background: var(--q-plaque); border: .8cqw solid var(--q-bord); border-radius: 3cqw;
  padding: 4.4cqw 5cqw 4cqw; text-align: center;
}
.bq__haut, .bq__bas { flex: none; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.bq__deco { display: none; position: absolute; pointer-events: none; }

/* Le verre : quatre dessins dans la page, un seul montré par style. */
.bq__icone { display: none; width: 16cqw; height: 16cqw; flex: none; overflow: visible; }
.bq[data-style="Émaillé"] .bq__icone[data-pour="Émaillé"],
.bq[data-style="Réclame"] .bq__icone[data-pour="Réclame"],
.bq[data-style="Néon"] .bq__icone[data-pour="Néon"],
.bq[data-style="Tiki"] .bq__icone[data-pour="Tiki"] { display: block; }

.bq__chez {
  margin-top: 1.4cqw; font-weight: 600; font-size: 3.6cqw; letter-spacing: .34em; text-transform: uppercase; color: var(--q-chez);
}
.bq__nom {
  width: 100%; margin-top: 1cqw; font-size: calc(17cqw * var(--ech, 1)); line-height: 1.06; color: var(--q-nom);
  overflow-wrap: anywhere; text-wrap: balance;
}
.bq__bar {
  display: flex; align-items: center; justify-content: center; gap: 2.6cqw; width: 74%; margin-top: 2cqw;
  font-weight: 700; font-size: 5.2cqw; letter-spacing: .5em; text-transform: uppercase; color: var(--q-accent);
}
.bq__bar::before, .bq__bar::after { content: ""; flex: 1; height: 0; border-top: .5cqw solid var(--q-accent); }
.bq__bar span { padding-left: .5em; }

.bq__horaires {
  width: 100%; font-weight: 600; font-size: calc(4.6cqw * var(--bq-t)); letter-spacing: .08em; text-transform: uppercase;
  color: var(--q-texte); overflow-wrap: anywhere; text-wrap: balance;
}
.bq__happy {
  width: 100%; margin-top: 2.6cqw; padding: 2cqw 3.4cqw 2.4cqw; background: var(--q-hp-fond); border: .55cqw solid var(--q-hp-bord);
  border-radius: 2.4cqw; color: var(--q-hp-texte);
}
.bq__happy-titre { font-weight: 700; font-size: calc(3.3cqw * var(--bq-t)); letter-spacing: .38em; text-transform: uppercase; color: var(--q-hp-titre); }
.bq__happy-texte { margin-top: .8cqw; font-weight: 600; font-size: calc(5.6cqw * var(--bq-t)); line-height: 1.12; overflow-wrap: anywhere; text-wrap: balance; }
.bq__mention {
  margin-top: 2.2cqw; font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600;
  font-size: calc(3.9cqw * var(--bq-t)); color: var(--q-accent); overflow-wrap: anywhere;
}
.bq__mention[hidden] { display: none; }

/* ── Émaillé : la plaque d'un bistrot d'avant-guerre, sur son mur de carrelage ──
 *
 * Un émail bleu de four, un cadre crème et son liseré, quatre boulons, des écaillures là où l'on a trop cogné
 * le zinc. Le carrelage est un quadrillage de joints et, par carreau, une tache de lumière : tout est aligné
 * sur le même pas de 8 cqw, donc le reflet de chaque carreau tombe au même endroit dans le sien. */
.bq[data-style="Émaillé"] {
  padding: 7cqw 6.2cqw 6.2cqw;
  background-image:
    repeating-linear-gradient(0deg, var(--q-deco-1) 0 .5cqw, transparent .5cqw 8cqw),
    repeating-linear-gradient(90deg, var(--q-deco-1) 0 .5cqw, transparent .5cqw 8cqw),
    radial-gradient(circle at 30% 26%, var(--q-deco-2) 0, transparent 72%);
  background-size: auto, auto, 8cqw 8cqw;
}
.bq[data-style="Émaillé"] .bq__enseigne {
  padding: 5.8cqw 6.2cqw 4.8cqw; gap: 4.4cqw; border: 1.6cqw solid var(--q-bord); border-radius: 5.6cqw;
  background-image:
    linear-gradient(112deg, rgba(255, 255, 255, .12) 0 24%, transparent 24.3%),
    radial-gradient(ellipse at 50% 26%, var(--q-plaque-2), var(--q-plaque) 76%);
  box-shadow: 0 0 0 .5cqw var(--q-deco-3), 0 1.6cqw 2.6cqw rgba(0, 0, 0, .42), 0 .8cqw 0 .5cqw var(--q-deco-3);
}
/* Le liseré intérieur, sur le bord de l'émail. */
.bq[data-style="Émaillé"] .bq__enseigne::after {
  content: ""; position: absolute; inset: 1.5cqw; border: .45cqw solid var(--q-bord); border-radius: 3.6cqw; opacity: .75; pointer-events: none;
}
/* Les boulons aux quatre coins, dans la plaque. Ils restent **dans** la boîte de l'enseigne : le script d'ajustement
   compare sa hauteur de défilement à sa hauteur, et un décor qui dépasse lui ferait croire que le texte déborde. */
.bq[data-style="Émaillé"] .bq__deco {
  display: block; inset: 0;
  background-image:
    radial-gradient(circle at 4cqw 4cqw, var(--q-deco-2) 0 .7cqw, var(--q-deco-6) .75cqw 1.25cqw, transparent 1.3cqw),
    radial-gradient(circle at right 4cqw top 4cqw, var(--q-deco-2) 0 .7cqw, var(--q-deco-6) .75cqw 1.25cqw, transparent 1.3cqw),
    radial-gradient(circle at left 4cqw bottom 4cqw, var(--q-deco-2) 0 .7cqw, var(--q-deco-6) .75cqw 1.25cqw, transparent 1.3cqw),
    radial-gradient(circle at right 4cqw bottom 4cqw, var(--q-deco-2) 0 .7cqw, var(--q-deco-6) .75cqw 1.25cqw, transparent 1.3cqw);
}
/* Les écaillures : de petites taches de la couleur du fer sur le cadre crème. Elles sont posées par l'affiche,
   par-dessus la plaque, parce que le cadre est hors de la boîte où le décor peut aller ; leurs repères sont ceux
   du bord de la plaque (sept unités du haut, six et demie des côtés). */
.bq[data-style="Émaillé"]::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    radial-gradient(circle at 22% 7.8cqw, var(--q-deco-3) 0 .5cqw, transparent .58cqw),
    radial-gradient(circle at 23.4% 8.1cqw, var(--q-deco-3) 0 .28cqw, transparent .34cqw),
    radial-gradient(circle at 71% calc(100% - 7cqw), var(--q-deco-3) 0 .55cqw, transparent .62cqw),
    radial-gradient(circle at 7cqw 61%, var(--q-deco-3) 0 .46cqw, transparent .54cqw),
    radial-gradient(circle at calc(100% - 7cqw) 34%, var(--q-deco-3) 0 .5cqw, transparent .58cqw),
    radial-gradient(circle at calc(100% - 7cqw) 36.4%, var(--q-deco-3) 0 .26cqw, transparent .32cqw);
}
.bq[data-style="Émaillé"] .bq__icone { fill: none; stroke: none; width: 15.4cqw; height: 15.4cqw; }
.bq[data-style="Émaillé"] .bq__contour { fill: rgba(255, 255, 255, .1); stroke: var(--q-icone); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bq[data-style="Émaillé"] .bq__liquide { fill: var(--q-icone-2); }
.bq[data-style="Émaillé"] .bq__reflet { fill: none; stroke: var(--q-icone); stroke-width: 2; stroke-linecap: round; opacity: .75; }
.bq[data-style="Émaillé"] .bq__etoile { fill: var(--q-icone-2); }
.bq[data-style="Émaillé"] .bq__chez {
  display: flex; align-items: center; justify-content: center; gap: 2.2cqw; margin-top: .6cqw;
  font-size: 3.8cqw; letter-spacing: .38em;
}
.bq[data-style="Émaillé"] .bq__chez::before, .bq[data-style="Émaillé"] .bq__chez::after {
  content: ""; width: 1.3cqw; height: 1.3cqw; background: var(--q-icone-3); transform: rotate(45deg); flex: none;
}
.bq[data-style="Émaillé"] .bq__nom {
  font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .04em;
  font-size: calc(14.4cqw * var(--ech, 1)); line-height: 1.04; margin-top: 2.6cqw; text-shadow: .5cqw .6cqw 0 var(--q-deco-3);
}
.bq[data-style="Émaillé"] .bq__bar::before, .bq[data-style="Émaillé"] .bq__bar::after { border-top: 1cqw double var(--q-accent); }
.bq[data-style="Émaillé"] .bq__horaires { font-family: "Anton", Impact, sans-serif; font-weight: 400; letter-spacing: .1em; font-size: calc(5cqw * var(--bq-t)); }
.bq[data-style="Émaillé"] .bq__happy {
  border-radius: 2.2cqw; padding: 2.2cqw 3.6cqw 2.6cqw;
  box-shadow: inset 0 0 0 .5cqw var(--q-hp-fond), inset 0 0 0 .85cqw var(--q-hp-bord);
}
.bq[data-style="Émaillé"] .bq__happy-texte { font-weight: 700; color: var(--q-hp-texte); }

/* ── Réclame : l'affiche d'une terrasse des années cinquante ──
 *
 * Un papier jauni qui a été plié en quatre, un soleil à rayons, un ruban rouge pour « Chez », une trame de points
 * qui monte du pied comme à l'impression en deux couleurs, un happy hour en ticket. Le vieillissement du papier
 * (bords assombris, plis) est **posé par-dessus** l'affiche, dans `::after` : il doit se voir sur l'encre aussi. */
.bq[data-style="Réclame"] { padding: 6.6cqw; }
.bq[data-style="Réclame"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(90deg, transparent 49.75%, rgba(0, 0, 0, .07) 49.75% 50%, rgba(255, 255, 255, .14) 50% 50.35%, transparent 50.35%),
    linear-gradient(0deg, transparent 49.75%, rgba(0, 0, 0, .07) 49.75% 50%, rgba(255, 255, 255, .14) 50% 50.35%, transparent 50.35%),
    radial-gradient(ellipse at 50% 48%, transparent 56%, color-mix(in srgb, var(--q-deco-3) 46%, transparent) 100%);
}
.bq[data-style="Réclame"] .bq__enseigne {
  padding: 5cqw 5.2cqw 4.6cqw; border: 1.1cqw solid var(--q-bord); border-radius: 1.4cqw;
  background-image: repeating-conic-gradient(from 0deg at 50% 24%, var(--q-plaque) 0 5deg, var(--q-plaque-2) 5deg 10deg);
  box-shadow: 0 0 0 .7cqw var(--q-fond), 0 0 0 1.2cqw var(--q-deco-1);
}
.bq[data-style="Réclame"] .bq__deco {
  display: block; inset: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--q-deco-1) 45%, transparent) 0 .34cqw, transparent .4cqw) 0 0 / 2.4cqw 2.4cqw;
  -webkit-mask-image: linear-gradient(0deg, black 0, transparent 46%); mask-image: linear-gradient(0deg, black 0, transparent 46%);
}
.bq[data-style="Réclame"] .bq__icone { fill: none; stroke: none; width: 19cqw; height: 19cqw; }
.bq[data-style="Réclame"] .bq__soleil { fill: var(--q-icone-2); }
.bq[data-style="Réclame"] .bq__contour { fill: color-mix(in srgb, var(--q-icone) 62%, transparent); stroke: var(--q-plaque); stroke-width: 2.6; stroke-linejoin: round; }
.bq[data-style="Réclame"] .bq__liquide { fill: var(--q-icone-3); }
.bq[data-style="Réclame"] .bq__glacon { fill: var(--q-icone); opacity: .85; }
.bq[data-style="Réclame"] .bq__paille { fill: none; stroke: var(--q-deco-1); stroke-width: 3; stroke-linecap: round; }
.bq[data-style="Réclame"] .bq__citron { fill: var(--q-chez); stroke: var(--q-plaque); stroke-width: 2; }
.bq[data-style="Réclame"] .bq__citron-trait { fill: none; stroke: var(--q-plaque); stroke-width: 1.3; stroke-linecap: round; opacity: .7; }
.bq[data-style="Réclame"] .bq__chez {
  margin-top: .8cqw; padding: 1.1cqw 6cqw 1.1cqw 6.4cqw; background: var(--q-hp-fond); color: var(--q-chez);
  font-size: 4.2cqw; letter-spacing: .3em; clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
}
.bq[data-style="Réclame"] .bq__nom {
  font-family: "Damion", "Brush Script MT", cursive; font-weight: 400; margin-top: 1.4cqw;
  font-size: calc(20cqw * var(--ech, 1)); line-height: 1.02;
  text-shadow: .5cqw .6cqw 0 var(--q-deco-1), 1cqw 1.2cqw 0 var(--q-deco-6);
}
.bq[data-style="Réclame"] .bq__bar { color: var(--q-accent); }
.bq[data-style="Réclame"] .bq__bar::before, .bq[data-style="Réclame"] .bq__bar::after { border-top: .7cqw solid var(--q-deco-1); }
.bq[data-style="Réclame"] .bq__horaires { font-family: "Anton", Impact, sans-serif; font-weight: 400; letter-spacing: .1em; font-size: calc(5cqw * var(--bq-t)); }
.bq[data-style="Réclame"] .bq__happy {
  position: relative; border: .55cqw solid var(--q-hp-bord); border-radius: 1.6cqw; padding: 2.2cqw 4.2cqw 2.6cqw; transform: rotate(-1.1deg);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 1.7cqw, black 1.75cqw) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 1.7cqw, black 1.75cqw) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 1.7cqw, black 1.75cqw) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 1.7cqw, black 1.75cqw) right / 51% 100% no-repeat;
}
.bq[data-style="Réclame"] .bq__happy-texte { font-weight: 700; }

/* ── Néon : le tube lumineux d'un bar de nuit, suspendu devant un mur de briques ──
 *
 * Deux chaînes tiennent le panneau (les maillons sont des tirets d'un dégradé répété), un second tube rose
 * double le cadre cyan, des vis tiennent la plaque. Les briques sont un mur de joints : les rangées paires
 * et impaires sont deux calques masqués chacun sur une rangée sur deux, décalés d'une demi-brique. La lueur
 * est en `text-shadow` et en `box-shadow` : elle s'imprime, aucun filtre ne la porte. */
.bq[data-style="Néon"] { padding: 13.4cqw 6.6cqw 6.4cqw; }
.bq[data-style="Néon"] .bq__mur {
  display: block; background-color: var(--q-deco-1);
  background-image:
    repeating-linear-gradient(0deg, var(--q-deco-2) 0 .6cqw, transparent .6cqw 7cqw),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 5cqw, rgba(0, 0, 0, .06) 5cqw 11cqw);
}
.bq[data-style="Néon"] .bq__mur::before, .bq[data-style="Néon"] .bq__mur::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, var(--q-deco-2) 0 .6cqw, transparent .6cqw 16cqw);
  -webkit-mask-image: repeating-linear-gradient(0deg, black 0 7cqw, transparent 7cqw 14cqw);
  mask-image: repeating-linear-gradient(0deg, black 0 7cqw, transparent 7cqw 14cqw);
}
.bq[data-style="Néon"] .bq__mur::after {
  background-position: 8cqw 0; -webkit-mask-position: 0 7cqw; mask-position: 0 7cqw;
}
.bq[data-style="Néon"]::before, .bq[data-style="Néon"]::after {
  content: ""; position: absolute; top: 0; width: 1.6cqw; height: 13.4cqw; z-index: 1; border-radius: .8cqw;
  background: repeating-linear-gradient(0deg, var(--q-deco-3) 0 1.7cqw, transparent 1.7cqw 2.6cqw);
}
.bq[data-style="Néon"]::before { left: 20%; }
.bq[data-style="Néon"]::after { right: 20%; }
.bq[data-style="Néon"] .bq__enseigne {
  background-image: radial-gradient(ellipse at 50% 30%, var(--q-plaque-2), var(--q-plaque) 70%);
  border-radius: 4.4cqw; border-width: .9cqw;
  box-shadow: 0 0 1.2cqw var(--q-bord), 0 0 3cqw var(--q-bord), inset 0 0 1.2cqw var(--q-bord), inset 0 0 3cqw var(--q-bord),
    0 0 9cqw color-mix(in srgb, var(--q-halo) 55%, transparent);
}
.bq[data-style="Néon"] .bq__enseigne::after {
  content: ""; position: absolute; inset: 1.9cqw; border: .5cqw solid var(--q-halo); border-radius: 2.8cqw; pointer-events: none;
  box-shadow: 0 0 .9cqw var(--q-halo), inset 0 0 .9cqw var(--q-halo); opacity: .85;
}
.bq[data-style="Néon"] .bq__deco {
  display: block; inset: 0;
  background-image:
    radial-gradient(circle at 3.2cqw 3.2cqw, var(--q-deco-3) 0 .55cqw, var(--q-deco-5) .6cqw 1cqw, transparent 1.05cqw),
    radial-gradient(circle at right 3.2cqw top 3.2cqw, var(--q-deco-3) 0 .55cqw, var(--q-deco-5) .6cqw 1cqw, transparent 1.05cqw),
    radial-gradient(circle at left 3.2cqw bottom 3.2cqw, var(--q-deco-3) 0 .55cqw, var(--q-deco-5) .6cqw 1cqw, transparent 1.05cqw),
    radial-gradient(circle at right 3.2cqw bottom 3.2cqw, var(--q-deco-3) 0 .55cqw, var(--q-deco-5) .6cqw 1cqw, transparent 1.05cqw);
}
.bq[data-style="Néon"] .bq__icone { stroke: var(--q-icone); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bq[data-style="Néon"] .bq__icone circle { stroke: var(--q-icone-3); }
.bq[data-style="Néon"] .bq__icone .bq__halo { stroke-width: 7; opacity: .28; }
.bq[data-style="Néon"] .bq__icone path:nth-of-type(n+3) { stroke: var(--q-icone-2); }
.bq[data-style="Néon"] .bq__nom {
  font-family: "Damion", "Brush Script MT", cursive; font-weight: 400;
  text-shadow: 0 0 .5cqw var(--q-nom), 0 0 1.5cqw var(--q-halo), 0 0 3.6cqw var(--q-halo), 0 0 6cqw var(--q-halo-doux);
}
.bq[data-style="Néon"] .bq__chez, .bq[data-style="Néon"] .bq__bar { text-shadow: 0 0 .9cqw var(--q-bord), 0 0 2.4cqw var(--q-bord); }
.bq[data-style="Néon"] .bq__bar::before, .bq[data-style="Néon"] .bq__bar::after { box-shadow: 0 0 .9cqw var(--q-bord); }
.bq[data-style="Néon"] .bq__horaires { text-shadow: 0 0 1.2cqw var(--q-halo-doux); }
.bq[data-style="Néon"] .bq__happy { background: var(--q-hp-fond); box-shadow: 0 0 1cqw var(--q-hp-bord), inset 0 0 1cqw var(--q-hp-bord); }
.bq[data-style="Néon"] .bq__happy-titre { text-shadow: 0 0 1cqw var(--q-hp-titre); }
.bq[data-style="Néon"] .bq__mention { text-shadow: 0 0 1cqw var(--q-halo-doux); }

/* ── Tiki : le bar polynésien sous son toit de chaume ──
 *
 * Des bambous en relief (un bord sombre, un reflet, un corps) et leurs nœuds, un toit de paille dont la frange
 * est découpée au `clip-path`, une plaque de bois sombre à planches, une lueur de lanterne. Le nom reste en Fredoka,
 * ombré en deux crans comme une lettre gravée. */
.bq[data-style="Tiki"] {
  padding: 15cqw 7cqw 6.6cqw;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 21.4cqw, var(--q-deco-2) 21.4cqw 22cqw, var(--q-deco-3) 22cqw 22.6cqw, transparent 22.6cqw 24cqw),
    repeating-linear-gradient(90deg, var(--q-deco-2) 0 .5cqw, var(--q-deco-1) .5cqw 1.5cqw, var(--q-deco-3) 1.5cqw 2.3cqw, var(--q-deco-1) 2.3cqw 4.7cqw, var(--q-deco-2) 4.7cqw 5.6cqw);
}
.bq[data-style="Tiki"]::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14.2cqw; z-index: 1; pointer-events: none;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--q-deco-5) 80%, transparent) 0 24%, transparent 58%),
    repeating-linear-gradient(101deg, var(--q-deco-4) 0 .9cqw, var(--q-deco-5) .9cqw 1.3cqw, var(--q-deco-4) 1.3cqw 2.5cqw, var(--q-deco-3) 2.5cqw 2.8cqw);
  clip-path: polygon(0 0, 100% 0, 100% 80%, 96.4% 100%, 92.9% 82%, 89.3% 100%, 85.7% 80%, 82.1% 100%, 78.6% 82%, 75% 100%, 71.4% 80%, 67.9% 100%, 64.3% 82%, 60.7% 100%, 57.1% 80%, 53.6% 100%, 50% 82%, 46.4% 100%, 42.9% 80%, 39.3% 100%, 35.7% 82%, 32.1% 100%, 28.6% 80%, 25% 100%, 21.4% 82%, 17.9% 100%, 14.3% 80%, 10.7% 100%, 7.1% 82%, 3.6% 100%, 0 80%);
}
.bq[data-style="Tiki"] .bq__enseigne {
  border: 1cqw solid var(--q-bord); border-radius: 2.4cqw; box-shadow: 0 0 0 1.2cqw var(--q-plaque), 0 1.8cqw 0 1.2cqw rgba(0, 0, 0, .3);
  background-image: radial-gradient(ellipse at 50% 26%, var(--q-plaque-2), var(--q-plaque) 72%);
}
.bq[data-style="Tiki"] .bq__deco {
  display: block; inset: 0; overflow: hidden;
  background-image:
    radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--q-bord) 22%, transparent), transparent 62%),
    repeating-linear-gradient(0deg, transparent 0 11.2cqw, rgba(0, 0, 0, .38) 11.2cqw 11.7cqw, rgba(255, 255, 255, .05) 11.7cqw 12.1cqw),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1.1cqw, transparent 1.1cqw 2.9cqw);
}
.bq[data-style="Tiki"] .bq__icone { fill: none; stroke: none; }
.bq[data-style="Tiki"] .bq__plein { fill: var(--q-icone-2); }
.bq[data-style="Tiki"] .bq__trait { fill: none; stroke: var(--q-plaque); stroke-width: 2.6; stroke-linecap: round; }
.bq[data-style="Tiki"] .bq__bande { fill: none; stroke: var(--q-plaque); stroke-width: 2.2; }
.bq[data-style="Tiki"] .bq__oeil { fill: var(--q-plaque); }
.bq[data-style="Tiki"] .bq__paille { fill: none; stroke: var(--q-icone); stroke-width: 2.4; stroke-linecap: round; }
.bq[data-style="Tiki"] .bq__ombrelle { fill: var(--q-icone-3); }
.bq[data-style="Tiki"] .bq__nom {
  font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; letter-spacing: .01em;
  font-size: calc(16.5cqw * var(--ech, 1)); line-height: 1.04;
  text-shadow: .5cqw .6cqw 0 var(--q-deco-2), 1cqw 1.2cqw 0 var(--q-fond);
}
.bq[data-style="Tiki"] .bq__horaires { font-family: "Fredoka", system-ui, sans-serif; font-weight: 500; letter-spacing: .1em; }
.bq[data-style="Tiki"] .bq__happy { border-radius: 4cqw; }
.bq[data-style="Tiki"] .bq__happy-texte { font-family: "Fredoka", system-ui, sans-serif; font-weight: 500; }

/* ── Le formulaire ──
 *
 * Les échantillons du style, et les dés. Ils prennent les variables du style qu'ils montrent. */
.bq-ligne__rang { display: flex; gap: .6rem; align-items: end; }
.bq-ligne__champ { flex: 1; min-width: 0; }
.bq-ligne__champ label { display: block; font-size: 1.3rem; margin-bottom: .3rem; }
.bq-ligne__champ input { width: 100%; }
.bq-de {
  width: 4.4rem; height: 4.4rem; display: inline-flex; align-items: center; justify-content: center;
  border: .1rem solid currentColor; border-radius: .8rem; background: transparent; cursor: pointer; flex: none;
}
.bq-de svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.bq-de svg circle { fill: currentColor; stroke: none; }
.bq-de[hidden], .bq-tout[hidden], .bq-idees[hidden] { display: none; }
.bq-tout { justify-self: start; margin-bottom: 1.6rem; }
.bq-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.bq-idees button {
  min-height: 4.4rem; padding: .4rem 1.2rem; border: .1rem solid currentColor; border-radius: 99rem; background: transparent;
  font: inherit; font-size: 1.3rem; cursor: pointer; text-align: left; max-width: 100%;
}
.bq-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bq-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.bq-styles label {
  display: flex; flex-direction: column; align-items: center; gap: .3rem; cursor: pointer; margin: 0;
  font-size: 1.4rem; font-weight: 600; text-align: center; line-height: 1.25;
  border: .15rem solid rgba(var(--color-foreground), .15); border-radius: .8rem; padding: .8rem .6rem;
}
.bq-styles label small { font-weight: 400; font-size: 1.2rem; opacity: .8; }
.bq-styles input:checked + label { border-color: rgb(var(--color-foreground)); }
.bq-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.bq-echantillon {
  display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; max-width: 10rem; height: 4rem;
  background: var(--q-plaque); border: .2rem solid var(--q-bord); border-radius: .6rem; color: var(--q-nom);
}
.bq-echantillon b { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 1.4rem; letter-spacing: .12em; text-transform: uppercase; }
.bq-echantillon i { display: block; width: .8rem; height: .8rem; border-radius: 50%; background: var(--q-hp-bord); }
.bq-echantillon i + i { background: var(--q-accent); }
@media (min-width: 750px) { .bq-styles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }