/* ═══════════════════════════ Le café de la maison ═══════════════════════════
 *
 * 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.
 *
 * ── L'ardoise du coin café, quatre ambiances ──
 *
 * Le contenu et la structure ne bougent pas : une tasse, l'enseigne au nom de la maison, l'année
 * d'ouverture, « la carte des habitués » — un prénom et sa commande par ligne —, les horaires et le
 * paiement. Chaque style a sa palette et ses polices :
 * - **Ardoise** : le tableau noir d'un bistrot dans son cadre de bois, à la craie (Damion, Caveat) ;
 * - **Bistrot** : la carte imprimée à l'ancienne, crème et bordeaux, double filet (Playfair, Cormorant) ;
 * - **Néon** : l'enseigne lumineuse d'un café américain, rose et cyan sur la nuit (Damion, Josefin) ;
 * - **Épuré** : le blanc d'une cuisine scandinave, une seule couleur d'accent (Inter).
 *
 * Toutes les polices sont servies par nous (point 2) : Playfair, Cormorant, Josefin Sans et Inter par
 * `theme.css`, Caveat et Damion ici. **Aucune marque** de café ni de machine.
 *
 * ── Les palettes ──
 *
 * **Ce sont des couleurs de produit, pas de charte** (point 6 quater) : en clair, toutes ici, en tête,
 * et nulle part ailleurs. `[data-style]` ne nomme pas `.cf` exprès, pour que les échantillons du
 * formulaire se colorent avec les mêmes variables.
 */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/caveat-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/caveat-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;
}
@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;
}

/* --c-tour : ce qui entoure l'ardoise (le bois, le papier) ; --c-fond : l'ardoise elle-même ;
   --c-texte : la commande ; --c-titre : le nom de la maison ; --c-accent : les prénoms, les
   capitales, la tasse ; --c-trait : l'ornement et le cadre ; --c-filet : la ligne sous chaque
   commande ; --c-halo : la lueur (le néon), transparent ailleurs. */
[data-style="Ardoise"] {
  --c-tour: #6b4a2e; --c-fond: #222a26; --c-texte: #eeebe1; --c-titre: #f8f4e8; --c-accent: #f2cf63;
  --c-trait: #d9d5ca; --c-filet: #4a534e; --c-halo: transparent;
}
[data-style="Bistrot"] {
  --c-tour: #efe4cf; --c-fond: #f8f1e3; --c-texte: #2b1d14; --c-titre: #2b1d14; --c-accent: #8a2a22;
  --c-trait: #2b1d14; --c-filet: #d8c9ad; --c-halo: transparent;
}
[data-style="Néon"] {
  --c-tour: #0f0b18; --c-fond: #17112a; --c-texte: #f3eeff; --c-titre: #ff5cad; --c-accent: #5ff2ff;
  --c-trait: #ff5cad; --c-filet: #3a2d5c; --c-halo: rgba(255, 92, 173, .55);
}
[data-style="Épuré"] {
  --c-tour: #fbfaf7; --c-fond: #fbfaf7; --c-texte: #1f1f1f; --c-titre: #1f1f1f; --c-accent: #a24a2a;
  --c-trait: #1f1f1f; --c-filet: #e2ddd3; --c-halo: transparent;
}

/* ── L'affiche ──
 *
 * Tout est en `cqw` : l'affiche se lit sur sa propre largeur, donc le même dessin tient de l'aperçu
 * au 70 × 100 imprimé. L'écart entre les formats (1,333 à 1,5) s'absorbe dans l'air entre les
 * lignes, jamais dans une taille de texte. `--cf-t` est la taille du texte des lignes, 1 ou moins :
 * le serveur l'estime, le script la reprend au pixel. */
.cf {
  --fond: var(--c-tour); --texte: var(--c-texte);
  --cf-t: 1;
  --cf-titre: "Damion"; --cf-prenom: "Caveat"; --cf-texte: "Caveat"; --cf-capitales: "Josefin Sans";
  display: flex; flex-direction: column; padding: 3.4cqw;
  background: var(--c-tour); color: var(--c-texte); line-height: 1.15;
}
.cf :where(p, ul, li) { margin: 0; padding: 0; }
.cf[data-style="Bistrot"] { --cf-titre: "Playfair Display"; --cf-prenom: "Playfair Display"; --cf-texte: "Cormorant Garamond"; }
.cf[data-style="Néon"] { --cf-prenom: "Josefin Sans"; --cf-texte: "Josefin Sans"; }
.cf[data-style="Épuré"] { --cf-titre: "Inter"; --cf-prenom: "Inter"; --cf-texte: "Inter"; --cf-capitales: "Inter"; padding: 6cqw 7cqw; }

.cf__cadre {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--c-fond); padding: 4cqw 6cqw 3.6cqw; position: relative;
}
/* L'ardoise : un cadre de bois, la craie un peu essuyée. */
.cf[data-style="Ardoise"] { background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(0, 0, 0, .18)), var(--c-tour); }
.cf[data-style="Ardoise"] .cf__cadre {
  border-radius: .8cqw; box-shadow: inset 0 0 0 .4cqw rgba(0, 0, 0, .35), inset 0 0 6cqw rgba(0, 0, 0, .35);
  background-image: radial-gradient(ellipse at 22% 30%, rgba(255, 255, 255, .07), transparent 42%), radial-gradient(ellipse at 78% 72%, rgba(255, 255, 255, .05), transparent 40%);
}
/* Le bistrot : un double filet, à l'ancienne. */
.cf[data-style="Bistrot"] .cf__cadre { border: .7cqw double var(--c-trait); outline: .25cqw solid var(--c-trait); outline-offset: -2.2cqw; }
/* Le néon : un tube de couleur qui fait le tour, et sa lueur. */
.cf[data-style="Néon"] .cf__cadre { border: .5cqw solid var(--c-trait); border-radius: 3cqw; box-shadow: 0 0 2.4cqw var(--c-halo), inset 0 0 2.4cqw var(--c-halo); }
/* L'épuré : deux filets fins, rien d'autre. */
.cf[data-style="Épuré"] .cf__cadre { padding: 3cqw 0; border-top: .25cqw solid var(--c-trait); border-bottom: .25cqw solid var(--c-trait); }

.cf__tasse { flex: none; width: 11cqw; height: auto; fill: none; stroke: var(--c-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cf__vapeur { stroke-width: 2; opacity: .85; }
.cf[data-style="Néon"] .cf__tasse { filter: drop-shadow(0 0 .8cqw var(--c-accent)); }
.cf[data-style="Épuré"] .cf__tasse { width: 8cqw; stroke-width: 1.8; }

.cf__kicker {
  flex: none; margin-top: 1.2cqw; font-family: var(--cf-capitales), system-ui, sans-serif; font-weight: 600;
  font-size: 2.1cqw; letter-spacing: .32em; text-transform: uppercase; color: var(--c-accent);
}
/* Le nom tient sur **une** ligne et se resserre (`--ech`) : c'est ce qui permet de mesurer un
   débordement, un texte qui se replie ne débordant jamais. `width: 100 %` pour la même raison :
   enfant d'une colonne centrée, il serait sinon large comme son texte. */
.cf__nom {
  flex: none; width: 100%; white-space: nowrap; font-family: var(--cf-titre), Georgia, serif; font-weight: 400;
  font-size: calc(10.5cqw * var(--ech, 1)); line-height: 1.25; color: var(--c-titre); text-shadow: 0 0 1.6cqw var(--c-halo);
  padding: .1em 0 .05em;
}
.cf[data-style="Bistrot"] .cf__nom { font-style: italic; font-weight: 700; font-size: calc(9cqw * var(--ech, 1)); }
.cf[data-style="Épuré"] .cf__nom { font-weight: 300; text-transform: uppercase; letter-spacing: .08em; font-size: calc(7cqw * var(--ech, 1)); }
.cf__depuis {
  flex: none; font-family: var(--cf-capitales), system-ui, sans-serif; font-size: 2.2cqw; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase; color: var(--c-texte); margin-top: .2cqw;
}
.cf__depuis[hidden], .cf__ligne[hidden], .cf__info[hidden] { display: none; }

.cf__orne { flex: none; display: flex; align-items: center; gap: 1.6cqw; width: 52%; margin: 2.2cqw 0 1.6cqw; }
.cf__orne i { flex: 1; height: 0; border-top: .25cqw solid var(--c-trait); }
.cf__orne b { width: 1.3cqw; height: 1.3cqw; background: var(--c-accent); transform: rotate(45deg); }
.cf[data-style="Ardoise"] .cf__orne i { border-top-style: dashed; }
.cf[data-style="Néon"] .cf__orne i { box-shadow: 0 0 1cqw var(--c-halo); }
.cf__carte {
  flex: none; font-family: var(--cf-capitales), system-ui, sans-serif; font-weight: 700; font-size: 2.3cqw;
  letter-spacing: .26em; text-transform: uppercase; color: var(--c-accent); margin-bottom: .6cqw;
}

/* Les lignes : groupées au milieu de la place qui reste, pas réparties — deux commandes écartées
   de toute la hauteur se lisaient comme deux affiches. Le prénom à gauche, la commande à côté, qui
   se replie ; un filet sous chaque ligne, comme sur une carte. Avec peu de lignes, le texte grossit
   (`--cf-t` jusqu'à 1,3, posé par le serveur et l'éditeur selon le nombre de lignes). */
.cf__lignes { flex: 1; min-height: 0; width: 100%; list-style: none; display: flex; flex-direction: column; justify-content: center; gap: calc(1.6cqw * var(--cf-t)); }
.cf__ligne {
  display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr); column-gap: 3cqw; align-items: baseline;
  text-align: left; padding: 1cqw 0; border-bottom: .2cqw solid var(--c-filet);
}
.cf__ligne:last-child { border-bottom: 0; }
.cf__prenom {
  font-family: var(--cf-prenom), Georgia, serif; font-weight: 700; color: var(--c-accent);
  font-size: calc(5.6cqw * var(--cf-t)); line-height: 1.1; overflow-wrap: anywhere; text-align: right;
}
.cf__boisson { font-family: var(--cf-texte), Georgia, serif; font-size: calc(4.6cqw * var(--cf-t)); line-height: 1.12; overflow-wrap: anywhere; text-wrap: pretty; }
.cf[data-style="Bistrot"] .cf__prenom { font-style: italic; font-size: calc(4.4cqw * var(--cf-t)); }
.cf[data-style="Bistrot"] .cf__boisson { font-size: calc(4.4cqw * var(--cf-t)); font-weight: 500; }
.cf[data-style="Néon"] .cf__prenom { text-transform: uppercase; letter-spacing: .06em; font-size: calc(3.6cqw * var(--cf-t)); text-shadow: 0 0 1cqw var(--c-accent); }
.cf[data-style="Néon"] .cf__boisson { font-size: calc(3.5cqw * var(--cf-t)); }
.cf[data-style="Épuré"] .cf__prenom { font-weight: 600; font-size: calc(3.2cqw * var(--cf-t)); text-transform: uppercase; letter-spacing: .08em; }
.cf[data-style="Épuré"] .cf__boisson { font-weight: 400; font-size: calc(3.2cqw * var(--cf-t)); }
/* L'exemple des lignes est en pleine couleur : c'est presque toute l'affiche au premier affichage, et
   estompée elle paraissait délavée (la leçon du Bilan). La classe reste : la fabrication le masque. */
.cf .cf__ligne.affiche-exemple { opacity: 1; }

.cf__pied { flex: none; width: 100%; display: grid; gap: 1.2cqw; }
.cf__info { font-family: var(--cf-texte), Georgia, serif; font-size: 3.2cqw; line-height: 1.15; overflow-wrap: anywhere; }
.cf__info-mot {
  display: block; font-family: var(--cf-capitales), system-ui, sans-serif; font-weight: 700; font-size: 1.8cqw;
  letter-spacing: .26em; text-transform: uppercase; color: var(--c-accent); margin-bottom: .2cqw;
}
.cf[data-style="Bistrot"] .cf__info { font-style: italic; font-size: 3cqw; }
.cf[data-style="Néon"] .cf__info, .cf[data-style="Épuré"] .cf__info { font-size: 2.5cqw; }

/* ── Le formulaire ── */
.cf-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cf-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.cf-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;
}
.cf-styles label small { font-weight: 400; font-size: 1.2rem; opacity: .8; }
.cf-styles input:checked + label { border-color: rgb(var(--color-foreground)); }
.cf-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.cf-echantillon {
  display: grid; gap: .35rem; justify-items: center; width: 100%; max-width: 12rem; padding: .7rem .9rem;
  background: var(--c-fond); border: .3rem solid var(--c-tour); outline: .1rem solid var(--c-filet);
}
.cf-echantillon b { font-family: "Damion", Georgia, serif; font-weight: 400; font-size: 1.8rem; line-height: 1.1; color: var(--c-titre); }
.cf-echantillon i { display: block; width: 80%; height: .3rem; border-radius: .2rem; background: var(--c-accent); }
.cf-echantillon i:nth-of-type(2) { width: 55%; background: var(--c-texte); }
@media (min-width: 750px) { .cf-styles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cf-lignes { padding: 0; border: 0; margin: 0 0 1.6rem; min-width: 0; display: grid; gap: 1.2rem; }
.cf-lignes legend { font-weight: 700; font-size: 1.6rem; padding: 0; margin-bottom: .4rem; }
.cf-ligne { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .8rem; align-items: end; }
.cf-ligne label { display: block; font-size: 1.3rem; margin-bottom: .3rem; }
.cf-ligne input { width: 100%; }
.cf-ligne__rang { display: flex; gap: .6rem; align-items: center; }
.cf-ligne__rang input { flex: 1; min-width: 0; }
@media (max-width: 480px) { .cf-ligne { grid-template-columns: minmax(0, 1fr); gap: .4rem; } }
.cf-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;
}
.cf-de svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.cf-de svg circle { fill: currentColor; stroke: none; }
.cf-de[hidden], .cf-idees[hidden] { display: none; }
.cf-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.cf-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%;
}