/* ═══════════════════════ Onde sonore ═══════════════════════
 *
 * La forme d'un son — un premier mot, un « je t'aime », une voix — en grand. Servie **seulement** sur
 * sa fiche (`views/product-affiche.liquid`). Le dessin (`onde-calcul.mjs`) ne porte que des classes
 * et des variables : changer de style change la palette et la mise en page, jamais le calcul.
 *
 * ── Les couleurs ──
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : toutes ici, en tête, et nulle
 * part ailleurs. Par style : --os-fond le papier ; --os-fond-2 la lueur de fond ; --os-texte l'encre ;
 * --os-doux l'encre secondaire ; --os-accent les petites capitales et les filets ; --os-onde la couleur
 * de l'onde ; --os-piste la piste fantôme (l'onde à pleine hauteur, transparente) ; --os-g1, g2, g3 le
 * dégradé de l'Aurore. Toutes les paires texte/fond sont mesurées par `tests/onde.test.js`.
 */
.os, .os-styles {
  --os-g1: #ff7a59; --os-g2: #e4408a; --os-g3: #5d44d8; --os-fond-2: transparent;
}

/* ── Studio : papier chaud, barres de terre cuite ── */
[data-style="Studio"] {
  --os-fond: #f3eadf; --os-texte: #2a1f18; --os-doux: #6a574a; --os-accent: #b5472a;
  --os-fond-2: #f3eadf; --os-onde: #b5472a; --os-piste: rgba(181, 71, 42, .14); --os-filet: rgba(106, 87, 74, .4);
}
/* ── Cercle : nuit bleue, anneau d'or ── */
[data-style="Cercle"] {
  --os-fond: #0d1530; --os-fond-2: #1c2c63; --os-texte: #f7f0e0; --os-doux: #b9b7cc; --os-accent: #f0c36c;
  --os-onde: #f0c36c; --os-piste: rgba(240, 195, 108, .17); --os-filet: rgba(240, 195, 108, .4);
}
/* ── Lignes : noir profond, lignes blanches ── */
[data-style="Lignes"] {
  --os-fond: #0a0a0b; --os-fond-2: #0a0a0b; --os-texte: #f4f4f1; --os-doux: #aaa9a3; --os-accent: #f4f4f1;
  --os-onde: #f4f4f1; --os-piste: rgba(244, 244, 241, .12); --os-filet: rgba(244, 244, 241, .35);
}
/* ── Aurore : crème rosé, dégradé de corail à indigo ── */
[data-style="Aurore"] {
  --os-fond: #fcefe9; --os-fond-2: #f6dcec; --os-texte: #2b1741; --os-doux: #66507a; --os-accent: #b3265f;
  --os-onde: #e4408a; --os-piste: rgba(228, 64, 138, .1); --os-filet: rgba(102, 80, 122, .35);
}

/* ── L'affiche ──
 *
 * Tout est en `cqw` : la même mise en page tient de l'A4 au 70 × 100. De haut en bas : l'en-tête
 * (le titre, le prénom et la date), l'onde — le héros, qui prend toute la place qui reste —, la durée
 * et la phrase. Le texte cède (`--os-t`, `--os-ph`) avant l'onde, jamais l'inverse.
 */
.os {
  --fond: var(--os-fond); --texte: var(--os-texte);
  font-family: "Josefin Sans", system-ui, sans-serif; text-align: center;
  padding: 7cqw 6.5cqw 6.5cqw; gap: 4cqw;
  background: radial-gradient(ellipse at 50% 55%, var(--os-fond-2), var(--os-fond) 72%);
}
.os p { margin: 0; }
.os__tete { flex: none; display: flex; flex-direction: column; align-items: center; width: 100%; }
.os__kicker { color: var(--os-accent); text-transform: uppercase; font-size: 2.3cqw; letter-spacing: .36em; padding-left: .36em; white-space: nowrap; }
.os__titre {
  width: 100%; margin-top: 2.6cqw; line-height: 1.06; text-wrap: balance; overflow-wrap: anywhere;
  font-size: calc(clamp(5.6cqw, calc(150cqw / var(--n, 17)), 10.5cqw) * var(--os-t, 1));
}
.os__qui {
  width: 100%; margin-top: 3.4cqw; display: flex; justify-content: center; align-items: baseline; gap: 2.2cqw; flex-wrap: wrap;
  font-size: calc(2.9cqw * var(--os-q, 1)); text-transform: uppercase; letter-spacing: .2em; color: var(--os-doux);
}
.os__qui--pile { flex-direction: column; align-items: center; gap: 1cqw; }
.os__prenoms { color: var(--os-texte); font-weight: 600; }
.os__date { font-variant-numeric: lining-nums; letter-spacing: .12em; }
.os__sep { color: var(--os-accent); }

/* L'onde : un cadre qui prend la place qui reste, dont les dessins remplissent tout le cadre. */
.os__hero { flex: 1 1 0; min-height: 40cqw; position: relative; width: 100%; }
.os__hero > .os__svg, .os__hero > .os__barres { position: absolute; inset: 0; width: 100%; height: 100%; }
.os__alt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.os__svg { display: block; overflow: visible; }

/* Studio : des barres arrondies sur leur piste fantôme (la pleine hauteur, transparente). */
.os__barres { display: flex; align-items: center; gap: 0; }
.os__barres i { flex: 1 1 0; min-width: 0; height: 100%; position: relative; }
.os__barres i::before, .os__barres i::after { content: ""; position: absolute; left: 14%; right: 14%; top: 0; bottom: 0; border-radius: 99cqw; background: var(--os-piste); }
.os__barres i::after {
  top: 50%; bottom: auto; transform: translateY(-50%); background: var(--os-onde);
  height: max(calc(var(--v) * 1%), 1.1cqw);
}

/* Cercle : l'anneau et sa durée. */
.os__rond { fill: none; stroke: var(--os-filet); stroke-width: .22; }
.os__rond--ext { stroke-dasharray: .5 1.1; }
.os__fantome { fill: none; stroke: var(--os-piste); stroke-width: .86; stroke-linecap: round; }
.os__trait { fill: none; stroke: var(--os-onde); stroke-width: .86; stroke-linecap: round; }
.os__depart { fill: var(--os-accent); }
.os__centre { fill: var(--os-texte); font-weight: 300; letter-spacing: .02em; font-variant-numeric: lining-nums; }
.os__centre-legende { fill: var(--os-doux); font-size: 2.5px; text-transform: uppercase; letter-spacing: .34em; }

/* Lignes : le son en pages, chaque ligne cache celles de derrière. */
.os__fond-ligne { fill: var(--os-fond); stroke: none; }
.os__trait-ligne { fill: none; stroke: var(--os-onde); stroke-width: .3cqw; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }

/* Aurore : la silhouette, son écho et un fil. */
.os__g1 { stop-color: var(--os-g1); } .os__g2 { stop-color: var(--os-g2); } .os__g3 { stop-color: var(--os-g3); }
.os__silhouette { fill: url(#os-degrade); }
.os__echo { fill: #ffffff; fill-opacity: .42; }
.os__fil { stroke: #ffffff; stroke-width: .35cqw; vector-effect: non-scaling-stroke; stroke-opacity: .85; }

/* Le pied : la durée (une règle de 0:00 à la fin), puis la phrase. */
.os__pied { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3.4cqw; width: 100%; }
.os__temps { width: 100%; display: flex; align-items: center; gap: 2cqw; font-size: 2.7cqw; letter-spacing: .12em; color: var(--os-doux); font-variant-numeric: lining-nums; }
.os__regle { flex: 1; height: 0; border-top: max(1px, .18cqw) dotted var(--os-filet); }
.os__t1 { color: var(--os-texte); font-weight: 600; }
.os__phrase {
  color: var(--os-texte); font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; width: 100%;
  font-size: calc(4.6cqw * var(--os-ph, 1)); line-height: 1.2; overflow-wrap: anywhere; text-wrap: balance;
}
.os__pied:empty { display: none; }

/* L'exemple de la fiche : en pleine couleur (une affiche à moitié éteinte ne se vend pas), la
   fabrication le masque (`lib/fabrique-affiche.js`) et l'éditeur le retire à la frappe. */
.affiche__affiche.os .affiche-exemple { opacity: 1; }
.affiche__affiche.os .os__phrase.affiche-exemple, .affiche__affiche.os .os__qui .affiche-exemple { opacity: .72; }

/* ── Studio : Playfair en gras, des barres rondes ── */
.os[data-style="Studio"] .os__titre { font-family: "Playfair Display", Georgia, serif; font-weight: 700; letter-spacing: -.01em; }
.os[data-style="Studio"] .os__hero { margin-block: 1cqw; }
.os[data-style="Studio"] .os__qui, .os[data-style="Aurore"] .os__qui { margin-top: 4.4cqw; }

/* ── Cercle : Marcellus en capitales, l'anneau d'or ── */
.os[data-style="Cercle"] .os__titre { font-family: "Marcellus", Georgia, serif; font-weight: 400; text-transform: uppercase; letter-spacing: .06em; font-size: calc(clamp(4.6cqw, calc(120cqw / var(--n, 17)), 8cqw) * var(--os-t, 1)); }
.os[data-style="Cercle"] .os__temps { display: none; }
.os[data-style="Cercle"] .os__centre { font-family: "Josefin Sans", sans-serif; }

/* ── Lignes : l'onde en haut, le titre dessous en capitales espacées ── */
.os[data-style="Lignes"] .os__hero { order: 1; margin-inline: -1.5cqw; width: calc(100% + 3cqw); }
.os[data-style="Lignes"] .os__tete { order: 2; }
.os[data-style="Lignes"] .os__pied { order: 3; }
.os[data-style="Lignes"] .os__titre { font-weight: 600; text-transform: uppercase; letter-spacing: .22em; padding-left: .22em; font-size: calc(clamp(3.6cqw, calc(96cqw / var(--n, 17)), 6.2cqw) * var(--os-t, 1)); }
.os[data-style="Lignes"] .os__kicker { display: none; }
.os[data-style="Lignes"] .os__titre { margin-top: 0; }

/* ── Aurore : une grosse sans-serif serrée, une onde de couleur ── */
.os[data-style="Aurore"] { font-family: "Inter", system-ui, sans-serif; }
.os[data-style="Aurore"] .os__titre { font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.os[data-style="Aurore"] .os__kicker { font-weight: 600; }
.os[data-style="Aurore"] .os__hero { margin-block: 2cqw; }

/* ── Le formulaire ── */
.os-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.os-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.os-styles label {
  display: flex; flex-direction: column; align-items: center; gap: .5rem; cursor: pointer; margin: 0;
  font-size: 1.3rem; font-weight: 400; color: rgba(var(--color-foreground), .7);
  border: .15rem solid rgba(var(--color-foreground), .15); border-radius: .8rem; padding: .8rem; min-height: 4.8rem;
}
.os-styles input:checked + label { border-color: rgb(var(--color-accent)); color: rgb(var(--color-foreground)); }
.os-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.os-pastille { width: 100%; height: 3.6rem; border-radius: .6rem; position: relative; overflow: hidden; background: var(--os-fond); border: .1rem solid rgba(var(--color-foreground), .2); display: block; }
.os-pastille i { position: absolute; bottom: 14%; width: 5%; border-radius: 99px; background: var(--os-onde); }
.os-pastille--cercle i { display: none; }
.os-pastille--cercle::before { content: ""; position: absolute; inset: 14% 33%; border-radius: 50%; border: .3rem dotted var(--os-onde); }
.os-pastille--lignes i { display: none; }
.os-pastille--lignes::before { content: ""; position: absolute; inset: 18% 10%; background: repeating-linear-gradient(var(--os-onde) 0 .12rem, transparent .12rem .6rem); }
.os-pastille--aurore { background: linear-gradient(90deg, var(--os-g1), var(--os-g2), var(--os-g3)); }
.os-pastille--aurore i { display: none; }
.os-styles__nom { font-weight: 600; }

/* Le dépôt du son : un bouton, un état, un choix de repli. */
.os-depot { display: flex; flex-direction: column; gap: .8rem; align-items: stretch; }
/* Le champ natif est caché pour de bon (rognage, pas `opacity`) : la feuille des champs de l'affiche lui impose
   sinon une largeur de 100 % et le navigateur y écrit « Aucun fichier choisi ». Le bouton visible est son libellé. */
.os-depot input.os-depot__entree { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }
/* Une zone de dépôt, pas un bouton collé à son texte : tout le cadre ouvre le choix de fichier. */
.os-depot .os-depot__bouton {
  align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  min-height: 11rem; padding: 2rem 1.6rem; text-align: center; cursor: pointer; text-transform: none; letter-spacing: normal;
  font-size: 1.6rem; font-weight: 600; line-height: 1.3; border-radius: 1.2rem;
  border: .2rem dashed rgba(var(--color-foreground), .35); background: rgba(var(--color-foreground), .035);
}
.os-depot .os-depot__bouton::before { content: "\266A"; font-size: 3.2rem; line-height: 1; color: rgb(var(--color-accent)); }
.os-depot .os-depot__bouton:hover, .os-depot__entree:focus-visible + .os-depot__bouton { border-color: rgb(var(--color-accent)); background: rgba(var(--color-accent), .08); }
.os-depot__entree:focus-visible + .os-depot__bouton { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.os-etat { font-size: 1.3rem; line-height: 1.4; min-height: 1.8rem; color: rgba(var(--color-foreground), .8); }
.os-etat[data-erreur] { color: rgb(var(--erreur, 160 30 30)); font-weight: 600; }
.os-etat[data-bon] { color: rgb(var(--color-foreground)); }
.os-lien { align-self: flex-start; background: none; border: 0; padding: .8rem 0; min-height: 4.4rem; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; font-size: 1.3rem; }
.os-confidentiel { font-size: 1.25rem; line-height: 1.45; padding: .8rem 1.1rem; border-left: .25rem solid rgb(var(--color-accent)); background: rgba(var(--color-foreground), .04); margin: 0; }
.os-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.os-idee { font: inherit; font-size: 1.25rem; padding: .7rem 1rem; min-height: 4.4rem; border-radius: 99px; border: .1rem solid rgba(var(--color-foreground), .25); background: transparent; cursor: pointer; text-align: left; }

/* Safari zoome sous 16 px : les champs de l'affiche restent à 1,6 rem. */
.os-champ input, .os-champ textarea { font-size: 1.6rem; }
.os-idee:hover { border-color: rgb(var(--color-accent)); }
.os-idee:focus-visible { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }