/* ═══════════════════════════ Les affiches de moto rétro ═══════════════════════════
 *
 * Servie **seulement** sur les trois fiches de moto (`views/product-affiche.liquid`), après
 * `aquarelle.css` dont elle reprend l'attente et les sections du formulaire : l'affiche de moto est
 * un portrait IA comme les autres, avec une autre consigne (`lib/moto-affiche.js`).
 *
 * ── Ce que Gemini rend, et ce que la page écrit ──
 *
 * L'image est **l'affiche entière** : titre, gamme, colonne de devises, plaque, moto, paysage. Deux
 * zones sont laissées vides par la consigne — la phrase manuscrite de droite, et le bandeau bleu du
 * bas, qui reste un aplat — et c'est ici qu'on y écrit **du vrai texte**. Les deux sont posées en
 * pourcentages de l'affiche, relevés sur les trois références ET sur les trois sorties de Gemini :
 * le bandeau va de 94,5 % à 98,3 % de la hauteur et de 2 % à 98 % de la largeur dans les six images.
 *
 * ── La mise en page ──
 *
 * L'affiche **remplit la feuille, sans une bande de papier** (30 oct. 2026, Fred : « aucune bande beige, photo plein cadre comme
 * les autres affiches »). Elle est rognée au format — du bas, jamais du haut où est le titre —, étirée ou serrée de 3 % au plus, et son
 * bandeau bleu est **repeint au pied de la feuille** : sans cela, un 30 × 40 (11 % de hauteur en trop) perdrait le bandeau et le texte
 * qu'on y écrit. Les liserés de papier que Gemini recopie des références sont retirés à la génération (`rognerLePapier`).
 * Tout est en `cqw`, la largeur de l'affiche elle-même (`.moto`, son propre conteneur) : un A4 et un 70 × 100 sont la même composition à
 * deux échelles.
 *
 * ── Les couleurs ──
 *
 * Des couleurs de **produit**, pas de charte (point 6 quater) : elles sont relevées sur les
 * références (l'encre marine de « MOTOS DE FRANCE », le crème du texte du bandeau) et nulle part
 * ailleurs dans ce fichier.
 */
.aquarelle--moto {
  --mo-marine: #1b2a58;       /* l'encre bleu marine de la phrase, comme « MOTOS DE FRANCE » */
  --mo-creme: #fff9ec;        /* le crème des mots du bandeau (relevé : #fffbef) */
  --mo-halo: 255, 244, 214;   /* le halo crème qui détache la phrase du ciel et des montagnes */
  --mo-bandeau: #08253f;      /* le bleu du bandeau des références, relevé : rgb(8, 37, 63) */
  --aq-papier-defaut: #f8e7c0;
}

.aquarelle--moto { display: block; position: relative; overflow: hidden; container-type: size; --fond: var(--aq-papier, var(--aq-papier-defaut)); }

/* Les mesures de la boîte, **enregistrées** : une propriété personnalisée ordinaire garde ses `cqw` jusqu'à l'endroit où on la lit, et le
   bandeau (un enfant de `.moto`, donc d'un autre conteneur) les aurait comptés sur la largeur de l'affiche au lieu de celle de la feuille. */
@property --mo-sw { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --mo-sh { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --mo-hb { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --mo-wb { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --mo-top { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --mo-haut { syntax: "<number>"; inherits: true; initial-value: 0; }

/* L'affiche, au rapport de son image — 2:3 pour les trois premières, 3:4 pour « Notre scooter… » (`--mo-rapport-n`, posé par le gabarit) —,
   **posée pour couvrir la feuille** : la hauteur est celle de la feuille, ou plus si la largeur l'exige ; la largeur, celle de la feuille, ou plus.
   Le rapport de l'image peut être faussé de 3 % au plus (`1.03`) : invisible sur un visage ou une roue, et c'est ce qui épargne la colonne de
   devises sur un A4, que le rognage du seul bas ne suffirait pas à remplir. `--mo-haut` est la part du rognage prise **en haut** : 0 pour une
   affiche dont le titre est peint en haut (on rogne le bas, repeint plus loin), 0,5 pour « Notre scooter… ». */
.moto {
  --mo-sw: 100cqw; --mo-sh: 100cqh;
  --mo-hb: max(100cqh, calc(100cqw / (var(--mo-rapport-n, .6667) * 1.03)));
  --mo-wb: max(100cqw, calc(var(--mo-hb) * var(--mo-rapport-n, .6667) / 1.03));
  --mo-top: calc((100cqh - var(--mo-hb)) * var(--mo-haut));
  position: absolute; top: var(--mo-top); left: calc((100cqw - var(--mo-wb)) / 2); width: var(--mo-wb); height: var(--mo-hb);
  container-type: inline-size;
}
.moto img { display: block; width: 100%; height: 100%; object-fit: fill; }
.aquarelle--moto[data-etat="attente"] .moto img { filter: blur(5px) saturate(.7); }

/* La phrase manuscrite, à droite, dans la place que Gemini a rendue au ciel. Damion, une écriture au
   pinceau ; le halo crème est là pour les montagnes, pas pour le ciel. Elle se resserre ensemble
   (`--mo-ech`, estimé par le serveur, repris au pixel par l'éditeur) plutôt que de déborder. */
.moto__slogan {
  position: absolute; left: 60%; top: 24%; width: 36%; height: 23%; margin: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: "Damion", "Sacramento", cursive; font-weight: 400; line-height: 1.12; color: var(--mo-marine);
  font-size: calc(7cqw * var(--mo-ech, 1)); text-wrap: balance; overflow-wrap: normal;
  transform: rotate(-8deg); pointer-events: none;
  paint-order: stroke fill; -webkit-text-stroke: 1.1cqw rgba(var(--mo-halo), .92);
  text-shadow: 0 0 1.6cqw rgba(var(--mo-halo), .95), 0 0 3.4cqw rgba(var(--mo-halo), .85);
}

/* Le bandeau : les mots du client, entre deux tirets, en capitales espacées comme sur l'affiche
   d'origine. `white-space: nowrap` est aussi ce qui permet à l'éditeur de mesurer le débordement. */
.moto__slogan span { display: block; max-width: 100%; }
.moto__bandeau {
  /* **Repeint au pied de la feuille**, sur toute sa largeur : le bandeau de l'image est rognée avec le bas quand le format est plus trapu que
     2:3, et celui-ci le remplace — même bleu, mêmes mots. Il couvre aussi ce qu'il y avait dessous. */
  position: absolute; left: calc((var(--mo-wb) - var(--mo-sw)) / 2); width: var(--mo-sw); height: calc(var(--mo-hb) * .056); margin: 0;
  top: calc(var(--mo-sh) - var(--mo-top) - var(--mo-hb) * .056); background: var(--mo-bandeau);
  display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; overflow: hidden;
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .14em;
  font-size: calc(2.8cqw * var(--mo-ech, 1)); line-height: 1; color: var(--mo-creme); pointer-events: none;
}
.moto__bandeau::before, .moto__bandeau::after { content: "—"; flex: none; margin: 0 1.2em; opacity: .85; }

/* « Notre scooter… » : un seul texte, le titre du ciel, écrit à la place de celui que Gemini a retiré. Anton, comme les grandes capitales
   de l'affiche d'origine, crème avec l'ombre marine décalée de la réclame ; une seule ligne, qui se resserre plutôt que de passer sur deux. */
/* « Notre scooter… » : 3:4, plus large que tous nos formats sauf le 30 × 40. La même règle la couvre (serrée de 3 % au plus sur un A4, rognée
   des côtés pour le reste), et le rognage vertical se partage entre le haut et le bas : il n'y a pas de bandeau à repeindre. */
.moto--titre { --mo-haut: .5; }
.moto--titre .moto__slogan {
  left: 4%; top: 3.2%; width: 92%; height: 13%; transform: none; font-family: "Anton", "Roboto Condensed", Impact, sans-serif;
  text-transform: uppercase; letter-spacing: .03em; line-height: 1; white-space: nowrap; overflow: hidden;
  font-size: calc(11cqw * var(--mo-ech, 1)); color: var(--mo-creme); -webkit-text-stroke: 0; paint-order: normal;
  text-shadow: .5cqw .5cqw 0 var(--mo-marine);
}
.moto--titre .moto__slogan span { max-width: none; }

/* L'exemple se montre en pleine couleur (la règle d'`aquarelle.css`) ; la fabrication le masque. */
.aquarelle--moto .affiche-exemple { opacity: 1; }

/* ── Le formulaire ── */
.mo-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.mo-idees[hidden] { display: none; }
.mo-idee {
  min-height: 4.4rem; padding: .6rem 1.2rem; font: inherit; font-size: 1.3rem; line-height: 1.25; text-align: left; cursor: pointer;
  border: .1rem solid rgba(var(--color-foreground), .25); border-radius: 2.2rem; background: transparent; color: inherit;
}
.mo-idee:hover { border-color: rgb(var(--navy)); }
.mo-idee:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.mo-idee[aria-pressed="true"] { border-color: rgb(var(--navy)); box-shadow: 0 0 0 .1rem rgb(var(--navy)); }

/* Damion, déjà servie à `bols.css` : même fichier, déclarée ici parce que chaque feuille est autonome. */
@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;
}

/* Anton, déjà servie à `calendrier.css` : mêmes fichiers, déclarée ici parce que chaque feuille est autonome. */
@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;
}