/* ═══════════════════════════ Le manuel de survie au bureau ═══════════════════════════
 *
 * 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.
 *
 * ── Une journée en cinq moments, quatre styles qui claquent ──
 *
 * Le contenu et la structure ne bougent pas ; chaque style a sa palette, ses polices et sa façon
 * de poser le pictogramme. L'affiche d'origine est un noir et un jaune acide : c'est le premier
 * style, celui que la fiche ouvre ; les trois autres disent la même journée d'un autre ton.
 * - **Néon** : fond noir, jaune acide, un filet vertical entre le dessin et le texte, une lueur.
 * - **Photocopie** : le papier d'un bureau qui photocopie tout — crème, noir, un tampon rouge, le
 *   rouge qui déborde un peu du noir comme une impression mal calée, un grain.
 * - **Alerte** : un panneau de danger. Jaune de signalisation, bandes hachurées en haut et en
 *   bas, chaque pictogramme dans un disque noir.
 * - **Corporate** : une présentation d'entreprise parfaitement sérieuse — bandeau marine, Inter,
 *   des disques bleus — ce qui rend le contenu encore plus drôle.
 *
 * Toutes les polices sont servies par nous (point 2) : Roboto Condensed et Inter par
 * `theme.css`, Anton ici. **Aucune marque, aucun logiciel, aucune entreprise réelle** : les
 * pictogrammes sont dessinés dans la page (`views/bureau-picto.liquid`).
 *
 * ── 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 `.bu` 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;
}

/* --b-fond : le papier ; --b-texte : le texte courant et ce qu'on écrit sur le papier ;
   --b-titre : le titre de l'affiche et le nom ; --b-mtitre : le titre d'un moment ;
   --b-accent : le libellé, l'heure, les barres d'énergie, le pictogramme ; --b-accent2 : le
   deuxième accent (la vapeur, la notification, le tampon) ; --b-sur : ce qu'on écrit sur
   l'accent ; --b-filet : les traits ; --b-pic / --b-pic-fond : le dessin et son disque ;
   --b-off : une barre d'énergie vide ; --b-danger : la barre quand il n'en reste qu'une ;
   --b-haut : le bandeau du haut (le style Corporate) ; --b-halo : la lueur du titre. */
[data-style="Néon"] {
  --b-fond: #0c0c0c; --b-texte: #f4efdc; --b-titre: #e7ff1a; --b-mtitre: #f4efdc; --b-accent: #e7ff1a; --b-accent2: #ff6a57;
  --b-sur: #0c0c0c; --b-filet: #f4efdc; --b-pic: #e7ff1a; --b-pic-fond: transparent; --b-off: #3a3a30; --b-danger: #ff6a57;
  --b-haut: transparent; --b-halo: rgba(231, 255, 26, .28);
}
[data-style="Photocopie"] {
  --b-fond: #ece6d8; --b-texte: #1c1a17; --b-titre: #1c1a17; --b-mtitre: #1c1a17; --b-accent: #1c1a17; --b-accent2: #c8102e;
  --b-sur: #ece6d8; --b-filet: #1c1a17; --b-pic: #1c1a17; --b-pic-fond: transparent; --b-off: #c7bfab; --b-danger: #c8102e;
  --b-haut: transparent; --b-halo: rgba(200, 16, 46, .3);
}
[data-style="Alerte"] {
  --b-fond: #ffd60a; --b-texte: #111111; --b-titre: #111111; --b-mtitre: #111111; --b-accent: #111111; --b-accent2: #b80500;
  --b-sur: #ffd60a; --b-filet: #111111; --b-pic: #ffd60a; --b-pic-fond: #111111; --b-off: #c9a500; --b-danger: #b80500;
  --b-haut: transparent; --b-halo: transparent;
}
[data-style="Corporate"] {
  --b-fond: #f4f7fb; --b-texte: #1d2b45; --b-titre: #ffffff; --b-mtitre: #0f2a5c; --b-accent: #1f5fe0; --b-accent2: #ff7a1a;
  --b-sur: #ffffff; --b-filet: #c4d0e4; --b-pic: #ffffff; --b-pic-fond: #1f5fe0; --b-off: #d3dbea; --b-danger: #e5484d;
  --b-haut: #0f2a5c; --b-halo: transparent;
}

/* ── 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 l'air entre les cinq
 * moments, jamais dans une taille de texte qui changerait avec le format. `--bu-t` est la
 * taille du texte, 1 ou moins : le serveur l'estime, le script la reprend au pixel. */
.bu {
  --fond: var(--b-fond); --texte: var(--b-texte);
  --bu-t: 1; --bu-titre: 9.8cqw;
  --bu-police: "Roboto Condensed"; --bu-titrage: "Anton";
  display: flex; flex-direction: column; position: relative;
  padding: 3.4cqw 5cqw 3.2cqw;
  font-family: var(--bu-police), system-ui, sans-serif; line-height: 1.15;
}
.bu :where(p, ol, ul) { margin: 0; padding: 0; }
.bu[data-style="Corporate"] { --bu-police: "Inter"; --bu-titrage: "Inter"; }

/* Le haut : un tampon, le titre sur deux lignes, une phrase. Le titre est fixe — c'est celui du
   marché — et sa taille vient du serveur (`--bu-titre`), qui connaît la longueur du mot le plus
   long : « Überlebenshandbuch » ne tient pas à la taille de « Manuel ». */
.bu__haut { flex: none; text-align: center; background: var(--b-haut); margin: -3.4cqw -5cqw 0; padding: 2.8cqw 5cqw 1.2cqw; position: relative; }
.bu__stamp {
  display: inline-flex; align-items: baseline; gap: 1.2cqw; margin-bottom: .8cqw; padding: .3cqw 1.5cqw;
  border: .45cqw solid var(--b-accent2); color: var(--b-accent2); border-radius: .6cqw;
  font-weight: 800; font-size: 1.6cqw; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-2.2deg);
}
.bu__stamp small { font-size: 1.3cqw; font-weight: 600; letter-spacing: .06em; opacity: .9; }
.bu__titre {
  font-family: var(--bu-titrage), Impact, sans-serif; font-weight: 400; text-transform: uppercase;
  font-size: var(--bu-titre); line-height: .98; letter-spacing: .005em; color: var(--b-titre); text-wrap: balance;
  text-shadow: 0 0 1.8cqw var(--b-halo); padding-top: .9cqw;
}
.bu__sous { font-size: 2.4cqw; font-weight: 500; margin-top: 1cqw; color: var(--b-texte); }
.bu[data-style="Corporate"] .bu__titre { font-weight: 800; letter-spacing: -.02em; font-size: calc(var(--bu-titre) * .78); line-height: 1.02; text-transform: none; }
.bu[data-style="Corporate"] .bu__sous { color: var(--b-titre); opacity: .85; }
.bu[data-style="Photocopie"] .bu__titre { text-shadow: .55cqw .45cqw 0 var(--b-halo); }

/* L'édition spéciale : une pastille, le nom en grand, le poste dessous. 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. */
.bu__edition { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 2.4cqw; align-items: center; margin: 1.4cqw 0 .4cqw; }
.bu__edition-ligne { display: contents; }
.bu__edition-mot {
  background: var(--b-accent); color: var(--b-sur); padding: .7cqw 1.7cqw; border-radius: .5cqw; transform: rotate(-2deg);
  font-size: 1.85cqw; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.bu__nom {
  font-family: var(--bu-titrage), Impact, sans-serif; font-weight: 400; text-transform: uppercase; color: var(--b-titre);
  white-space: nowrap; min-width: 0; font-size: calc(6.4cqw * var(--ech, 1)); line-height: 1.12; padding-top: .12em;
}
.bu[data-style="Corporate"] .bu__nom { font-weight: 800; letter-spacing: -.02em; text-transform: none; color: var(--b-mtitre); font-size: calc(5.4cqw * var(--ech, 1)); }
.bu[data-style="Photocopie"] .bu__nom, .bu[data-style="Néon"] .bu__nom { color: var(--b-titre); }
.bu__poste { grid-column: 2; font-size: 2.2cqw; font-weight: 600; letter-spacing: .04em; margin-top: .2cqw; overflow-wrap: anywhere; color: var(--b-texte); }
.bu__poste[hidden] { display: none; }

/* Les cinq moments : chacun prend sa part de la hauteur, sans dépasser. Un pictogramme et son
   heure à gauche, un filet, puis le libellé avec sa jauge d'énergie, le titre, les conseils. */
.bu__moments { flex: 1; min-height: 0; list-style: none; display: flex; flex-direction: column; justify-content: space-evenly; margin: .8cqw 0; }
.bu__moment { flex: none; display: flex; align-items: center; gap: 2.8cqw; padding: .8cqw 0; border-top: .22cqw solid var(--b-filet); }
.bu__moment:first-child { border-top: .45cqw solid var(--b-filet); }
.bu__pic { flex: none; width: 13.4cqw; display: flex; flex-direction: column; align-items: center; gap: .5cqw; }
.bu__picto {
  width: calc(6.4cqw + 3.2cqw * var(--bu-t)); height: calc(6.4cqw + 3.2cqw * var(--bu-t)); color: var(--b-pic); background: var(--b-pic-fond); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.bu__picto-svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.bu__picto .bu-acc { stroke: var(--b-accent2); }
.bu__picto .bu-plein { fill: var(--b-accent2); stroke: none; }
.bu__picto .bu-sur { stroke: var(--b-sur); }
.bu[data-style="Alerte"] .bu__picto, .bu[data-style="Corporate"] .bu__picto { padding: 1.5cqw; box-sizing: border-box; }
.bu[data-style="Alerte"] .bu__picto .bu-acc, .bu[data-style="Corporate"] .bu__picto .bu-acc { stroke: var(--b-sur); }
.bu[data-style="Alerte"] .bu__picto .bu-acc { stroke: var(--b-pic); }
.bu[data-style="Alerte"] .bu__picto .bu-plein { fill: var(--b-pic); }
.bu[data-style="Alerte"] .bu__picto .bu-sur { stroke: var(--b-pic-fond); }
.bu[data-style="Corporate"] .bu__picto .bu-plein { fill: var(--b-accent2); }
.bu[data-style="Néon"] .bu__picto-svg { filter: drop-shadow(0 0 .5cqw var(--b-halo)); }
.bu__heure { font-size: calc(2cqw * var(--bu-t)); font-weight: 800; letter-spacing: .04em; color: var(--b-accent); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.bu[data-style="Alerte"] .bu__heure { color: var(--b-texte); }

.bu__corps { flex: 1; min-width: 0; display: flex; flex-direction: column; padding-left: 3cqw; border-left: .3cqw solid var(--b-filet); }
.bu[data-style="Photocopie"] .bu__corps, .bu[data-style="Alerte"] .bu__corps { border-left-width: .45cqw; }
.bu__tete { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.bu__label { font-size: calc(1.95cqw * var(--bu-t)); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--b-accent); white-space: nowrap; }
.bu[data-style="Alerte"] .bu__label { background: var(--b-texte); color: var(--b-fond); padding: .3cqw 1.2cqw; border-radius: .3cqw; }
.bu__energie { display: flex; align-items: center; gap: 1cqw; font-size: calc(1.6cqw * var(--bu-t)); white-space: nowrap; min-width: 0; }
.bu__energie-mot { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.bu__barres { display: inline-flex; gap: .4cqw; align-items: flex-end; }
.bu__barres i { width: 1cqw; height: calc(1.7cqw * var(--bu-t)); background: var(--b-off); border-radius: .2cqw; display: block; }
.bu__barres i.on { background: var(--b-accent); }
.bu__moment[data-niveau="1"] .bu__barres i.on { background: var(--b-danger); }
.bu__energie-legende { font-style: italic; font-weight: 600; opacity: .85; overflow: hidden; text-overflow: ellipsis; }
.bu__m-titre {
  display: block; font-family: var(--bu-titrage), Impact, sans-serif; font-weight: 400; text-transform: uppercase; color: var(--b-mtitre);
  font-size: calc(4.3cqw * var(--bu-t)); line-height: 1.06; letter-spacing: .01em; margin: .5cqw 0 .35cqw; text-wrap: balance; overflow-wrap: anywhere;
}
.bu[data-style="Corporate"] .bu__m-titre { font-weight: 800; letter-spacing: -.015em; text-transform: none; font-size: calc(3.5cqw * var(--bu-t)); }
.bu__m-texte { display: block; font-size: calc(2.4cqw * var(--bu-t)); line-height: 1.18; font-weight: 450; color: var(--b-texte); }
.bu[data-style="Néon"] .bu__m-texte { font-weight: 400; }
.bu__l { display: block; text-wrap: pretty; overflow-wrap: anywhere; }

/* Le pied : trois règles d'or numérotées, puis « approuvé par… ». */
.bu__pied { flex: none; }
.bu__regles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5cqw 2.4cqw; border-top: .45cqw solid var(--b-filet); padding-top: 1.1cqw; counter-reset: regle; }
.bu__regles-titre {
  grid-column: 1 / -1; font-family: var(--bu-titrage), Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .1em;
  font-size: 2.2cqw; color: var(--b-accent);
}
.bu[data-style="Corporate"] .bu__regles-titre { font-weight: 800; letter-spacing: .06em; font-size: 2cqw; }
.bu[data-style="Alerte"] .bu__regles-titre { color: var(--b-texte); }
.bu__regles ol { display: contents; list-style: none; }
.bu__regles li { counter-increment: regle; display: flex; align-items: flex-start; gap: 1.1cqw; font-size: 1.95cqw; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.bu__regles li::before {
  content: counter(regle); flex: none; width: 3cqw; height: 3cqw; border-radius: 50%; background: var(--b-accent); color: var(--b-sur);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.9cqw; font-weight: 900; line-height: 1;
}
.bu[data-style="Alerte"] .bu__regles li::before { background: var(--b-texte); color: var(--b-fond); }
.bu__approuve { text-align: center; font-size: 2.3cqw; font-weight: 500; margin-top: 1.2cqw; font-style: italic; overflow-wrap: anywhere; }
.bu__approuve strong { font-weight: 800; font-style: normal; color: var(--b-accent); }
.bu[data-style="Alerte"] .bu__approuve strong { color: var(--b-texte); text-decoration: underline; text-underline-offset: .4cqw; text-decoration-thickness: .35cqw; }

/* Deux styles ont leur matière : les bandes d'une plaque de danger, le grain d'une photocopie. */
.bu[data-style="Alerte"]::before, .bu[data-style="Alerte"]::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2cqw; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(-45deg, var(--b-texte) 0 2cqw, var(--b-fond) 2cqw 4cqw);
}
.bu[data-style="Alerte"]::before { top: 0; }
.bu[data-style="Alerte"]::after { bottom: 0; }
.bu[data-style="Photocopie"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .55;
  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='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .8 0'/></filter><rect width='240' height='240' filter='url(%23g)'/></svg>");
}
.bu[data-style="Photocopie"]::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2.2cqw; pointer-events: none; opacity: .55;
  background: linear-gradient(90deg, var(--b-halo), transparent);
}

/* Ce qu'un exemple estompé ne doit pas laisser d'ombre : le poste est montré à moitié au premier affichage. */
.bu .affiche-exemple { opacity: .45; }

/* ── Le formulaire ── */
.bu-phrase { font-size: 1.3rem; margin: 0 0 .4rem; opacity: .75; }
.bu-moments { display: grid; gap: 1.2rem; margin-bottom: 1.6rem; }
.bu-moments__titre { font-weight: 700; font-size: 1.6rem; margin: 0; }
.bu-moment { padding: 0; border: 0; margin: 0; min-width: 0; display: grid; gap: .8rem; }
.bu-moment legend { font-weight: 700; padding: 0; margin-bottom: .6rem; }
.bu-moment__rang { display: flex; gap: .6rem; align-items: end; }
.bu-moment__champ { flex: 1; min-width: 0; }
.bu-moment__champ label { display: block; font-size: 1.3rem; margin-bottom: .3rem; }
.bu-moment__champ input { width: 100%; }
.bu-moment textarea { width: 100%; min-height: 8.8rem; }
.bu-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;
}
.bu-de svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.bu-de svg circle { fill: currentColor; stroke: none; }
.bu-de[hidden], .bu-tout[hidden], .bu-idees[hidden], .bu-idees-details[hidden] { display: none; }
.bu-tout { justify-self: start; }
.bu-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.bu-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%;
}
.bu-idees-details summary { min-height: 4.4rem; display: flex; align-items: center; cursor: pointer; font-size: 1.4rem; font-weight: 600; }
.bu-idees--moment { margin-top: 0; }
.bu-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bu-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.bu-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;
}
.bu-styles label small { font-weight: 400; font-size: 1.2rem; opacity: .8; }
.bu-styles input:checked + label { border-color: rgb(var(--color-foreground)); }
.bu-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.bu-echantillon {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .3rem .8rem; width: 100%; max-width: 12rem; padding: .7rem .9rem;
  background: var(--b-fond); color: var(--b-texte); border: .2rem solid var(--b-filet);
}
.bu-echantillon b { grid-row: 1 / span 3; font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 1.7rem; text-transform: uppercase; color: var(--b-titre); background: var(--b-haut); padding: .1rem .2rem; }
.bu-echantillon i { display: block; height: .3rem; border-radius: .2rem; background: var(--b-accent); }
.bu-echantillon i:nth-of-type(2) { width: 70%; background: var(--b-filet); }
.bu-echantillon i:nth-of-type(3) { width: 40%; background: var(--b-accent2); }
@media (min-width: 750px) { .bu-styles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }