/* ═══════════════════════════ L'affiche des WC ═══════════════════════════
 *
 * 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.
 *
 * ── Quatre styles, une seule carte ──
 *
 * Le contenu et la structure ne bougent pas ; chaque style a sa palette, ses polices et sa
 * façon de tracer les pictogrammes (épaisseur, bouts, tuiles).
 * - **Classique** : la signalétique d'aéroport. Bleu marine, orange sécurité, jaune de
 *   balisage, Roboto Condensed en capitales, la bande hachurée sous l'en-tête.
 * - **Rétro** : une compagnie des années soixante. Crème, turquoise, rouge brique, Josefin Sans
 *   et le nom de la compagnie au pinceau (Damion), des pictos au trait épais, un grain de papier.
 * - **Minimal** : la salle de bains moderne. Noir sur blanc, un seul accent, Inter en maigre,
 *   des pictos au trait fin et de la place.
 * - **Pop** : pour les familles. Fredoka, des tuiles de couleurs vives, des traits ronds et gras.
 *
 * Toutes les polices sont servies par nous (point 2) : Roboto Condensed, Inter, Josefin Sans et
 * Fredoka par `theme.css`, Damion ici. **Aucune compagnie réelle** : ni nom, ni logo, ni
 * couleurs qu'on reconnaîtrait.
 *
 * ── Les palettes ──
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : elles sont en clair,
 * toutes ici, en tête, et nulle part ailleurs. `[data-style]` ne nomme pas `.wc` exprès, pour
 * que les échantillons du formulaire se colorent avec les mêmes variables.
 */
@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;
}

/* --w-fond : le papier ; --w-encre : le texte et les traits ; --w-accent : ce qu'on remarque
   (numéros, flèches, aplats) ; --w-sur : ce qu'on écrit sur l'accent ; --w-doux : l'encadré de
   secours ; --w-tuile : le fond d'un pictogramme ; --w-filet : les traits de séparation ;
   --w-bande-1 / --w-bande-2 : les hachures ; --w-t1… --w-t6 : les tuiles du style Pop, une
   couleur par consigne. */
[data-style="Classique"] {
  --w-fond: #f6f4ee; --w-encre: #1b2a4a; --w-accent: #f2661b; --w-sur: #ffffff; --w-doux: #ffe7a3;
  --w-tuile: #ffffff; --w-filet: #1b2a4a; --w-bande-1: #ffc629; --w-bande-2: #1b2a4a;
}
[data-style="Rétro"] {
  --w-fond: #f2e6cc; --w-encre: #8e3a22; --w-accent: #2a958d; --w-sur: #f2e6cc; --w-doux: #e5d3ab;
  --w-tuile: #e9d9b6; --w-filet: #8e3a22; --w-bande-1: #2a958d; --w-bande-2: #d9a441;
}
[data-style="Minimal"] {
  --w-fond: #ffffff; --w-encre: #141414; --w-accent: #d4502c; --w-sur: #ffffff; --w-doux: #f3f1ee;
  --w-tuile: transparent; --w-filet: #141414; --w-bande-1: #141414; --w-bande-2: #ffffff;
}
[data-style="Pop"] {
  --w-fond: #fff5dc; --w-encre: #2e1a52; --w-accent: #ff4f8b; --w-sur: #ffffff; --w-doux: #d9f2ff;
  --w-tuile: #ffd23f; --w-filet: #2e1a52; --w-bande-1: #ff4f8b; --w-bande-2: #ffd23f;
  --w-t1: #ffd23f; --w-t2: #6fd3f7; --w-t3: #ff9ebb; --w-t4: #8be3a6; --w-t5: #c3a8ff; --w-t6: #ffb35c;
}

/* ── L'affiche ──
 *
 * Tout est en `cqw` : l'affiche se lit sur sa propre largeur (le cadre est le conteneur de
 * requête), donc le même dessin tient de l'aperçu de 360 px au 70 × 100 imprimé. Les rapports
 * vendus vont de 1,333 (30 × 40) à 1,5 (40 × 60) : l'écart s'absorbe dans la hauteur des
 * rangées de consignes, jamais dans une taille de texte qui changerait avec le format. */
.wc {
  --fond: var(--w-fond); --texte: var(--w-encre);
  --w-police: "Roboto Condensed"; --w-titres: "Roboto Condensed"; --w-nom: "Roboto Condensed";
  --w-trait: 2.4; --w-bout: round; --w-rayon: 0;
  padding: 5.5cqw 6cqw 4.2cqw;
  font-family: var(--w-police), system-ui, sans-serif;
  line-height: 1.15;
}
.wc p { margin: 0; }
.wc[data-style="Rétro"] { --w-police: "Josefin Sans"; --w-titres: "Josefin Sans"; --w-nom: "Damion"; --w-trait: 3.1; --w-rayon: 50%; }
.wc[data-style="Minimal"] { --w-police: "Inter"; --w-titres: "Inter"; --w-nom: "Inter"; --w-trait: 1.3; --w-bout: square; }
.wc[data-style="Pop"] { --w-police: "Fredoka"; --w-titres: "Fredoka"; --w-nom: "Fredoka"; --w-trait: 3; --w-rayon: 28%; }

/* L'en-tête : la compagnie à gauche, le vol à droite. Le nom tient sur **une** ligne et se
   resserre (`--ech`, posé par le serveur puis ajusté au pixel par le script) : c'est ce qui
   permet de mesurer un débordement, un texte qui se replie ne débordant jamais. */
.wc__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqw; }
.wc__compagnie { flex: 1; min-width: 0; }
.wc__etiquette { font-size: 1.75cqw; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; opacity: .75; }
.wc__nom {
  font-family: var(--w-nom), system-ui, sans-serif; font-weight: 700; white-space: nowrap;
  font-size: calc(6.4cqw * var(--ech, 1)); line-height: 1.1; margin-top: .6cqw;
}
.wc__vol { flex: none; text-align: right; border: .35cqw solid var(--w-filet); padding: 1.1cqw 1.8cqw; }
.wc__vol-num { font-size: 3.3cqw; font-weight: 800; letter-spacing: .04em; line-height: 1; }
.wc__siege { font-size: 1.5cqw; letter-spacing: .08em; text-transform: uppercase; margin-top: .6cqw; white-space: nowrap; }

/* La bande hachurée : le balisage des zones de sécurité, sur toute la largeur du papier. */
.wc__hachures {
  flex: none; height: 2.2cqw; margin: 2.6cqw -6cqw 0;
  background: repeating-linear-gradient(-45deg, var(--w-bande-1) 0 1.9cqw, var(--w-bande-2) 1.9cqw 3.8cqw);
}

.wc__titre {
  font-family: var(--w-titres), system-ui, sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: 5.1cqw; line-height: 1.02; letter-spacing: .01em; margin-top: 3.4cqw; text-wrap: balance;
}
.wc__intro { font-size: 2cqw; line-height: 1.3; margin-top: 1.5cqw; max-width: 84%; }

/* Les six consignes : deux colonnes, trois rangées qui prennent toute la hauteur restante. */
.wc__consignes {
  flex: 1; min-height: 0; list-style: none; padding: 0; margin: 3.2cqw 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 2.2cqw 2.8cqw;
}
.wc__consigne {
  display: flex; align-items: center; gap: 2.4cqw; min-width: 0;
  border: .3cqw solid var(--w-filet); padding: 1.8cqw 2cqw;
}
.wc__picto {
  position: relative; flex: none; width: 13cqw; aspect-ratio: 1; display: grid; place-items: center;
  background: var(--w-tuile); border-radius: var(--w-rayon); color: var(--w-encre);
}
.wc__picto-svg {
  width: 82%; height: 82%; fill: none; stroke: currentColor; stroke-width: var(--w-trait);
  stroke-linecap: var(--w-bout); stroke-linejoin: round; overflow: visible;
}
.wc__picto-svg .wc-acc { stroke: var(--w-accent); }
.wc__picto-svg .wc-plein { fill: var(--w-accent); stroke: none; }
.wc__picto-svg .wc-sur { stroke: var(--w-sur); }
.wc__picto-svg .wc-fin { stroke-width: calc(var(--w-trait) * .65); }
.wc__num {
  position: absolute; top: -.9cqw; left: -.9cqw; display: grid; place-items: center;
  min-width: 3.6cqw; height: 3.6cqw; padding: 0 .6cqw;
  font-family: var(--w-titres), system-ui, sans-serif; font-size: 2.2cqw; font-weight: 800; line-height: 1;
  background: var(--w-accent); color: var(--w-sur); border-radius: var(--w-rayon);
}
.wc__texte { display: flex; flex-direction: column; gap: .7cqw; min-width: 0; }
.wc__c-titre {
  font-family: var(--w-titres), system-ui, sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: 2.45cqw; line-height: 1.05; letter-spacing: .02em; overflow-wrap: anywhere; hyphens: auto;
}
.wc__c-texte { font-size: 1.95cqw; line-height: 1.25; }

/* L'encadré de secours : la seule phrase qui porte une saisie. */
.wc__secours {
  flex: none; display: flex; align-items: center; gap: 2.4cqw; margin-top: 3cqw;
  background: var(--w-doux); border: .35cqw dashed var(--w-filet); padding: 2cqw 2.6cqw;
}
.wc__picto--secours { width: 9cqw; background: transparent; }
.wc__secours-titre {
  font-family: var(--w-titres), system-ui, sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: 2.6cqw; letter-spacing: .03em;
}
.wc__secours-texte { font-size: 2.1cqw; line-height: 1.3; margin-top: .5cqw; overflow-wrap: anywhere; }
.wc__secours-texte strong { font-weight: 800; }

.wc__pied { flex: none; margin-top: 2.6cqw; padding-top: 1.8cqw; border-top: .25cqw solid var(--w-filet); text-align: center; }
.wc__merci { font-size: 1.85cqw; }
.wc__conserver { font-size: 1.35cqw; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-top: .9cqw; opacity: .75; }

/* ── Classique : la signalétique. Les numéros en carré orange, tout en capitales. ── */
.wc[data-style="Classique"] .wc__nom { text-transform: uppercase; letter-spacing: .01em; }
.wc[data-style="Classique"] .wc__consigne { background: var(--w-tuile); }
.wc[data-style="Classique"] .wc__picto { border: .3cqw solid var(--w-filet); }
.wc[data-style="Classique"] .wc__secours { border-style: solid; }

/* ── Rétro : pas de cadres autour des consignes, des pastilles rondes, un grain de papier. ── */
.wc[data-style="Rétro"] .wc__nom { font-weight: 400; font-size: calc(8cqw * var(--ech, 1)); line-height: 1.05; }
.wc[data-style="Rétro"] .wc__vol { border-radius: 99cqw; padding: 1.2cqw 2.6cqw; text-align: center; }
.wc[data-style="Rétro"] .wc__titre { font-weight: 700; letter-spacing: .06em; font-size: 4.6cqw; }
.wc[data-style="Rétro"] .wc__consigne { border: none; border-top: .3cqw solid var(--w-filet); padding: 1.8cqw .4cqw 0; align-items: flex-start; }
.wc[data-style="Rétro"] .wc__c-titre { font-weight: 700; letter-spacing: .06em; }
.wc[data-style="Rétro"] .wc__secours { border-radius: 3cqw; border-style: solid; }
.wc[data-style="Rétro"] .wc__hachures { height: 1.4cqw; background: linear-gradient(var(--w-bande-1) 0 50%, var(--w-bande-2) 50% 100%); }
.wc[data-style="Rétro"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .9 0'/></filter><rect width='240' height='240' filter='url(%23g)'/></svg>");
  background-size: 18cqw 18cqw;
}

/* ── Minimal : un filet, de la place, un seul accent. ── */
.wc[data-style="Minimal"] { padding: 7cqw 7.5cqw 5.5cqw; }
.wc[data-style="Minimal"] .wc__nom { font-weight: 300; letter-spacing: -.01em; }
.wc[data-style="Minimal"] .wc__vol { border: none; border-left: .2cqw solid var(--w-filet); padding: 0 0 0 2.4cqw; }
.wc[data-style="Minimal"] .wc__vol-num { font-weight: 600; font-size: 2.8cqw; }
.wc[data-style="Minimal"] .wc__hachures { height: .2cqw; margin: 3.6cqw 0 0; background: var(--w-filet); }
.wc[data-style="Minimal"] .wc__titre { font-weight: 300; text-transform: none; font-size: 5.4cqw; letter-spacing: -.015em; margin-top: 4.6cqw; }
.wc[data-style="Minimal"] .wc__consignes { gap: 3.6cqw 4.4cqw; margin-top: 4.6cqw; }
.wc[data-style="Minimal"] .wc__consigne { border: none; padding: 0; }
.wc[data-style="Minimal"] .wc__picto { width: 11cqw; }
.wc[data-style="Minimal"] .wc__num { display: block; position: static; order: -1; background: none; color: var(--w-accent); font-weight: 600; font-size: 1.6cqw; }
.wc[data-style="Minimal"] .wc__num::before { content: "0"; }
.wc[data-style="Minimal"] .wc__picto { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .6cqw; }
.wc[data-style="Minimal"] .wc__picto-svg { width: 100%; height: auto; flex: 1; }
.wc[data-style="Minimal"] .wc__c-titre { font-weight: 600; text-transform: none; font-size: 2.3cqw; letter-spacing: 0; }
.wc[data-style="Minimal"] .wc__c-texte { font-weight: 300; }
.wc[data-style="Minimal"] .wc__secours { background: none; border: none; border-top: .2cqw solid var(--w-filet); border-bottom: .2cqw solid var(--w-filet); padding: 2.4cqw 0; }
.wc[data-style="Minimal"] .wc__secours-titre { font-weight: 600; text-transform: none; }
.wc[data-style="Minimal"] .wc__pied { border-top: none; }
.wc[data-style="Minimal"] .wc__merci { font-weight: 300; }

/* ── Pop : une tuile de couleur par consigne, des bulles, des traits ronds. ── */
.wc[data-style="Pop"] .wc__nom { font-weight: 600; }
.wc[data-style="Pop"] .wc__vol { border-radius: 2cqw; background: var(--w-encre); color: var(--w-fond); border-color: var(--w-encre); }
.wc[data-style="Pop"] .wc__hachures { height: 2.6cqw; border-radius: 99cqw; margin: 2.8cqw 0 0; background: repeating-linear-gradient(90deg, var(--w-t1) 0 12.5%, var(--w-t2) 12.5% 25%, var(--w-t3) 25% 37.5%, var(--w-t4) 37.5% 50%); }
.wc[data-style="Pop"] .wc__titre { font-weight: 600; text-transform: none; font-size: 5.6cqw; }
.wc[data-style="Pop"] .wc__consigne { border: none; background: var(--w-sur); border-radius: 3cqw; padding: 1.6cqw 1.8cqw; }
.wc[data-style="Pop"] .wc__consigne:nth-child(1) .wc__picto { background: var(--w-t1); }
.wc[data-style="Pop"] .wc__consigne:nth-child(2) .wc__picto { background: var(--w-t2); }
.wc[data-style="Pop"] .wc__consigne:nth-child(3) .wc__picto { background: var(--w-t3); }
.wc[data-style="Pop"] .wc__consigne:nth-child(4) .wc__picto { background: var(--w-t4); }
.wc[data-style="Pop"] .wc__consigne:nth-child(5) .wc__picto { background: var(--w-t5); }
.wc[data-style="Pop"] .wc__consigne:nth-child(6) .wc__picto { background: var(--w-t6); }
.wc[data-style="Pop"] .wc__num { border-radius: 99cqw; background: var(--w-encre); color: var(--w-sur); font-weight: 600; }
.wc[data-style="Pop"] .wc__c-titre { font-weight: 600; text-transform: none; font-size: 2.6cqw; letter-spacing: 0; }
.wc[data-style="Pop"] .wc__secours { border: none; border-radius: 3cqw; }
.wc[data-style="Pop"] .wc__secours-titre { font-weight: 600; text-transform: none; }
.wc[data-style="Pop"] .wc__pied { border-top: none; }

/* ── Le formulaire ── */
.wc-phrase { margin: 0 0 .4rem; font-size: 1.4rem; font-style: italic; opacity: .75; }
.wc-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wc-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.wc-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;
}
.wc-styles label small { font-weight: 400; font-size: 1.2rem; opacity: .8; }
.wc-styles input:checked + label { border-color: rgb(var(--color-foreground)); }
.wc-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.wc-echantillon {
  display: flex; flex-direction: column; justify-content: center; gap: .4rem; width: 100%; max-width: 12rem; height: 4.4rem;
  background: var(--w-fond); color: var(--w-encre); border: .1rem solid rgba(var(--color-foreground), .15); border-radius: .4rem; padding: 0 .8rem;
}
.wc-echantillon__titre { font-size: 1.5rem; font-weight: 800; letter-spacing: .06em; text-align: left; }
.wc-echantillon__bande { height: .6rem; background: repeating-linear-gradient(-45deg, var(--w-bande-1) 0 .5rem, var(--w-bande-2) .5rem 1rem); }
.wc-styles [data-style="Classique"] .wc-echantillon__titre { font-family: "Roboto Condensed", sans-serif; }
.wc-styles [data-style="Rétro"] .wc-echantillon__titre { font-family: "Damion", cursive; font-weight: 400; font-size: 1.8rem; letter-spacing: 0; color: var(--w-encre); }
.wc-styles [data-style="Minimal"] .wc-echantillon__titre { font-family: "Inter", sans-serif; font-weight: 300; }
.wc-styles [data-style="Minimal"] .wc-echantillon__bande { height: .1rem; background: var(--w-encre); }
.wc-styles [data-style="Pop"] .wc-echantillon__titre { font-family: "Fredoka", sans-serif; font-weight: 600; color: var(--w-accent); }
.wc-styles [data-style="Pop"] .wc-echantillon__bande { border-radius: 1rem; background: repeating-linear-gradient(90deg, var(--w-t1) 0 25%, var(--w-t2) 25% 50%, var(--w-t3) 50% 75%, var(--w-t4) 75% 100%); }