/* ═══════════════════════════════ L'avis de recherche ═══════════════════════════════
 *
 * Servie **seulement** sur la fiche « Wanted » (`views/product-affiche.liquid`).
 *
 * ── Les couleurs ──
 *
 * Ce sont des couleurs de **produit**, pas de charte (point 6 quater) : le papier jauni et
 * l'encre brune du Far West, le bleu de police et le rouge du tampon, le noir et les fluos du
 * pop. Elles sont toutes ici, en tête, et nulle part ailleurs dans le fichier : un test y tient.
 *
 * ── La mise en page ──
 *
 * Tout en `cqw`, la largeur de l'affiche : un A4 et un 70 × 100 sont la même composition à
 * deux échelles. Réglée sur le plus trapu des formats (le 30 × 40), l'air en plus se répartit
 * sur les formats allongés. Le style est un attribut (`data-style`) : en changer ne redessine
 * rien.
 */
@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-02AF, U+0304, U+0308, U+0329, 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; }

.wanted {
  --w-papier: #e9d8b0; --w-papier-bord: #b98f55; --w-brun: #3a2414; --w-rouge-ouest: #8d2b1b;
  --w-police-fond: #f1f0ea; --w-police-bleu: #172a45; --w-police-gris: #5b6472; --w-tampon: #b8261d; --w-toise: rgba(23, 42, 69, .16);
  --w-pop-fond: #131313; --w-pop-texte: #ffffff; --w-jaune: #e8ff3a; --w-rose: #ff4fa8;
  --w-vide: rgba(0, 0, 0, .08); --w-brulure: rgba(92, 52, 18, .38);
  --w-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ── La base, commune aux trois ── */
.wanted {
  --fond: var(--w-papier); --texte: var(--w-brun); --accent: var(--w-rouge-ouest);
  font-family: "Playfair Display", Georgia, serif; text-align: center; line-height: 1.2;
  align-items: center; justify-content: space-between; padding: 5cqw 8cqw 5cqw; position: relative;
}
.wanted p, .wanted ul, .wanted dl { margin: 0; }
/* Un mot sans espace de quarante signes se coupe plutôt que d'élargir sa colonne : dans la
   grille de Police, il poussait tout le signalement hors de l'affiche. */
.wanted__alias, .wanted__motifs li, .wanted__recompense-texte, .wanted__signalement dd { overflow-wrap: anywhere; }
.wanted [hidden] { display: none !important; }
.wanted__tete { width: 100%; display: flex; flex-direction: column; align-items: center; }
.wanted__bandeau, .wanted__affaire { display: none; }
.wanted__wanted { font-family: "Anton", Impact, sans-serif; font-size: 15cqw; line-height: .95; letter-spacing: .06em; padding-left: .06em; text-transform: uppercase; }
.wanted__vivant { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 3.2cqw; margin-top: .6cqw; }
.wanted__photo {
  position: relative; margin: 2.4cqw 0 0; flex: none; overflow: hidden; background: var(--w-vide);
  width: 44cqw; aspect-ratio: 4 / 5;
}
.wanted__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--photo-x, 50%) var(--photo-y, 40%);
  transform: scale(var(--photo-zoom, 1)); transform-origin: var(--photo-x, 50%) var(--photo-y, 40%);
}
.wanted__photo[data-photo] { touch-action: none; cursor: grab; }
.wanted__vide {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1.2cqw; cursor: pointer;
  border: 1px dashed currentColor; opacity: .7; padding: 10%; font-size: 2.4cqw; font-style: italic; margin: 0;
}
.wanted__vide svg { width: 7cqw; height: auto; }
.wanted__toise, .wanted__plaque { display: none; }
.wanted__identite { width: 100%; margin-top: 1.6cqw; }
/* `width: 100%` n'est pas décoratif : l'éditeur mesure le débordement du nom (`ajuster`). */
.wanted__nom {
  width: 100%; white-space: nowrap; font-family: "Anton", Impact, sans-serif; text-transform: uppercase;
  font-size: calc(9cqw * var(--ech, 1)); letter-spacing: .04em; line-height: 1.05;
}
.wanted .wanted--replie { white-space: normal; text-wrap: balance; }
.wanted__alias { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 3cqw; margin-top: .4cqw; }
.wanted__etiquette { font-family: "Anton", Impact, sans-serif; font-size: 2.4cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.wanted__motifs { width: 100%; margin-top: 1.6cqw; }
.wanted__motifs ul { list-style: none; padding: 0; margin-top: .6cqw; }
.wanted__motifs li { font-size: 2.35cqw; line-height: 1.3; }
.wanted__recompense { margin-top: 1.6cqw; }
.wanted__recompense-texte { font-family: "Anton", Impact, sans-serif; font-size: 3.8cqw; text-transform: uppercase; letter-spacing: .03em; line-height: 1.1; }
.wanted__signalement {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4cqw 2.2cqw; margin-top: 1.8cqw; width: 100%;
  font-size: 1.6cqw;
}
.wanted__signalement div { display: flex; gap: .8cqw; }
.wanted__signalement dt { text-transform: uppercase; letter-spacing: .12em; opacity: .7; }
.wanted__signalement dd { margin: 0; font-style: italic; }
.wanted__tampon { display: none; }
.wanted__patte { position: absolute; width: 8cqw; height: 8cqw; right: 6cqw; bottom: 5cqw; opacity: .5; transform: rotate(14deg); }

/* ══ Far West — le papier jauni aux bords brûlés, la photo sépia, « vivant, de préférence ».
   Pas de filet imprimé autour : sous verre, il faisait un cadre dans le cadre (Fred,
   25 sept. 2026). Ce sont les bords brûlés et le grain qui tiennent le style. ══ */
.wanted[data-style="Far West"] {
  background-image: radial-gradient(ellipse at center, transparent 58%, var(--w-brulure) 100%), var(--w-grain);
  background-size: 100% 100%, 26cqw;
}
.wanted[data-style="Far West"] .wanted__photo { box-shadow: 0 0 0 .5cqw var(--w-brun); }
.wanted[data-style="Far West"] .wanted__photo img { filter: sepia(.85) contrast(1.05) brightness(.95); }
.wanted[data-style="Far West"] .wanted__patte, .wanted[data-style="Pop"] .wanted__patte { top: 34%; right: 9cqw; bottom: auto; width: 9cqw; height: 9cqw; }
.wanted[data-style="Far West"] .wanted__signalement { border-top: .2cqw solid var(--w-brun); border-bottom: .2cqw solid var(--w-brun); padding: 1cqw 0; }

/* ══ Police — la fiche de signalement : bandeau bleu, photo devant la toise avec sa plaque,
   signalement en tableau à droite, et le tampon rouge « Dangereux quand il a faim ». ══ */
.wanted[data-style="Police"] {
  --fond: var(--w-police-fond); --texte: var(--w-police-bleu); --accent: var(--w-police-bleu);
  display: grid; grid-template-columns: 50cqw minmax(0, 1fr); column-gap: 4cqw; row-gap: 2.4cqw;
  grid-template-areas: "tete tete" "photo signalement" "identite identite" "motifs recompense" "motifs tampon";
  grid-template-rows: auto auto auto auto 1fr; align-items: start; text-align: left; padding: 0 7cqw 7cqw;
  font-family: "Inter", system-ui, sans-serif;
}
.wanted[data-style="Police"] .wanted__tete { grid-area: tete; background: var(--w-police-bleu); color: var(--w-police-fond); margin: 0 -7cqw; width: auto; padding: 3.4cqw 7cqw 2.6cqw; flex-direction: row; justify-content: space-between; align-items: baseline; }
.wanted[data-style="Police"] .wanted__bandeau { display: block; font-family: "Anton", Impact, sans-serif; font-size: 7.2cqw; letter-spacing: .05em; text-transform: uppercase; }
.wanted[data-style="Police"] .wanted__wanted, .wanted[data-style="Police"] .wanted__vivant { display: none; }
.wanted[data-style="Police"] .wanted__affaire { display: block; font-size: 1.8cqw; letter-spacing: .16em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.wanted[data-style="Police"] .wanted__photo { grid-area: photo; width: 50cqw; margin: 0; }
.wanted[data-style="Police"] .wanted__toise {
  display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(5cqw - .15cqw), var(--w-toise) calc(5cqw - .15cqw) 5cqw);
}
.wanted[data-style="Police"] .wanted__plaque {
  display: flex; flex-direction: column; align-items: center; position: absolute; z-index: 2; left: 50%; bottom: 3cqw; transform: translateX(-50%);
  background: var(--w-pop-fond); color: var(--w-pop-texte); padding: 1cqw 2.4cqw; font-family: "Anton", Impact, sans-serif; font-size: 2cqw; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; white-space: nowrap;
}
.wanted[data-style="Police"] .wanted__plaque-nom { font-size: 2.6cqw; }
.wanted[data-style="Police"] .wanted__identite { grid-area: identite; margin: 0; }
.wanted[data-style="Police"] .wanted__nom { font-size: calc(9cqw * var(--ech, 1)); }
.wanted[data-style="Police"] .wanted__alias { font-size: 2.8cqw; color: var(--w-police-gris); }
.wanted[data-style="Police"] .wanted__signalement { grid-area: signalement; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; gap: 1.6cqw; margin: 0; font-size: 1.9cqw; }
.wanted[data-style="Police"] .wanted__signalement div { flex-direction: column; gap: .2cqw; border-bottom: .12cqw solid var(--w-toise); padding-bottom: 1.2cqw; }
.wanted[data-style="Police"] .wanted__signalement dt { font-size: 1.4cqw; letter-spacing: .16em; color: var(--w-police-gris); opacity: 1; }
.wanted[data-style="Police"] .wanted__signalement dd { font-style: normal; font-weight: 600; }
.wanted[data-style="Police"] .wanted__motifs { grid-area: motifs; margin: 0; }
.wanted[data-style="Police"] .wanted__motifs li { font-size: 2.2cqw; padding-left: 2.4cqw; position: relative; }
.wanted[data-style="Police"] .wanted__motifs li::before { content: "—"; position: absolute; left: 0; }
.wanted[data-style="Police"] .wanted__recompense { grid-area: recompense; margin: 0; }
.wanted[data-style="Police"] .wanted__recompense-texte { font-size: 3.4cqw; }
.wanted[data-style="Police"] .wanted__tampon {
  display: block; grid-area: tampon; justify-self: center; align-self: start; margin-top: 1.4cqw; transform: rotate(-8deg);
  border: .5cqw solid var(--w-tampon); color: var(--w-tampon); padding: 1cqw 2cqw; border-radius: .8cqw;
  font-family: "Anton", Impact, sans-serif; font-size: 3cqw; letter-spacing: .08em; text-transform: uppercase; line-height: 1.1;
  max-width: 34cqw; text-align: center; opacity: .88; mix-blend-mode: multiply;
}
.wanted[data-style="Police"] .wanted__patte { color: var(--w-police-bleu); left: 7cqw; right: auto; bottom: 4cqw; opacity: .35; transform: rotate(-10deg); }

/* ══ Pop — noir et fluo : « WANTED » en jaune, la photo de travers dans un cadre rose, les
   méfaits en autocollants. C'est celui qui se filme. ══ */
.wanted[data-style="Pop"] { --fond: var(--w-pop-fond); --texte: var(--w-pop-texte); --accent: var(--w-jaune); font-family: "Inter", system-ui, sans-serif; }
.wanted[data-style="Pop"] .wanted__wanted { color: var(--w-jaune); font-size: 14.5cqw; }
.wanted[data-style="Pop"] .wanted__vivant { font-family: "Inter", system-ui, sans-serif; font-style: normal; font-weight: 700; font-size: 2.2cqw; letter-spacing: .2em; text-transform: uppercase; color: var(--w-rose); }
.wanted[data-style="Pop"] .wanted__photo { transform: rotate(-2.5deg); box-shadow: 0 0 0 1.2cqw var(--w-rose); margin-top: 3cqw; }
.wanted[data-style="Pop"] .wanted__nom { color: var(--w-pop-texte); margin-top: 1.4cqw; }
.wanted[data-style="Pop"] .wanted__alias { font-family: "Inter", system-ui, sans-serif; font-style: normal; font-size: 2.3cqw; color: var(--w-jaune); }
.wanted[data-style="Pop"] .wanted__motifs ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2cqw; }
.wanted[data-style="Pop"] .wanted__motifs li { background: var(--w-rose); color: var(--w-pop-fond); font-weight: 700; font-size: 1.95cqw; padding: .5cqw 1.5cqw; border-radius: 99px; }
.wanted[data-style="Pop"] .wanted__motifs li:nth-child(2) { transform: rotate(2deg); }
.wanted[data-style="Pop"] .wanted__motifs li:nth-child(3) { transform: rotate(-2deg); }
.wanted[data-style="Pop"] .wanted__recompense { background: var(--w-jaune); color: var(--w-pop-fond); padding: 1cqw 3cqw; margin-top: 2cqw; transform: rotate(-1.5deg); }
.wanted[data-style="Pop"] .wanted__recompense-texte { font-size: 3.2cqw; }
/* La boîte penchée déborde de sa place d'un coin : l'air en dessous est ce qui l'empêche de
   mordre sur le signalement, mesuré au 30 × 40 avec une récompense sur deux lignes. */
.wanted[data-style="Pop"] .wanted__signalement { margin-top: 2.8cqw; }
.wanted[data-style="Pop"] .wanted__recompense .wanted__etiquette { color: var(--w-pop-fond); }
.wanted[data-style="Pop"] .wanted__patte { color: var(--w-rose); opacity: .9; }

/* ═══════════════════════════════ Le formulaire ═══════════════════════════════ */
.wanted-section { border: 0; padding: 0; margin: 0 0 2.4rem; min-width: 0; }
.wanted-section > legend { font-family: "Anton", Impact, sans-serif; font-size: 2rem; letter-spacing: .04em; text-transform: uppercase; padding: 0; margin-bottom: 1rem; }
.wanted-especes, .wanted-styles { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.2rem; }
.wanted-especes input, .wanted-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wanted-especes label, .wanted-styles label {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 4.4rem; padding: .6rem 1.4rem; cursor: pointer;
  border: .1rem solid rgba(var(--color-foreground), .22); border-radius: 99px; font-size: 1.4rem;
}
.wanted-styles label { flex-direction: column; align-items: flex-start; border-radius: .8rem; gap: .1rem; padding: 1rem 1.4rem; }
.wanted-styles__nom { font-family: "Anton", Impact, sans-serif; font-size: 1.8rem; letter-spacing: .04em; text-transform: uppercase; }
.wanted-styles__ligne { font-size: 1.2rem; color: rgba(var(--color-foreground), .7); }
.wanted-especes input:checked + label, .wanted-styles input:checked + label { border-color: rgb(var(--color-foreground)); box-shadow: inset 0 0 0 .1rem rgb(var(--color-foreground)); }
.wanted-especes input:focus-visible + label, .wanted-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.wanted-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin: .4rem 0 1.4rem; }
.wanted-idee {
  font: inherit; font-size: 1.2rem; min-height: 4.4rem; padding: .6rem 1.2rem; cursor: pointer; text-align: left;
  background: none; color: inherit; border: .1rem dashed rgba(var(--color-foreground), .3); border-radius: 99px;
}
.wanted-idee:hover { border-style: solid; border-color: rgb(var(--color-foreground)); }
.wanted-de, .wanted-hasard { font: inherit; min-height: 4.4rem; min-width: 4.4rem; cursor: pointer; background: none; color: inherit; border: .1rem solid rgba(var(--color-foreground), .3); border-radius: .6rem; }
.wanted-hasard { padding: .6rem 1.4rem; margin-bottom: 1rem; }
/* Sur téléphone, les idées défilent sur une rangée au doigt plutôt que de s'empiler : douze
   méfaits empilés faisaient un écran entier entre deux champs. Pas de script : le défilement
   natif suffit, et le bord coupé d'une pastille dit qu'il y en a d'autres. */
@media (max-width: 749px) {
  .wanted-idees { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: .4rem; -webkit-overflow-scrolling: touch; }
  .wanted-idee { flex: none; scroll-snap-align: start; white-space: nowrap; }
}