/* ═══════════════════════════ Les avis des toilettes ═══════════════════════════
 *
 * Les toilettes de la maison en fiche d'établissement. Servie **seulement** sur sa fiche
 * (`views/product-affiche.liquid`).
 *
 * ── Quatre styles, une seule fiche ──
 *
 * - **Appli** : la fiche d'une application de cartes, claire, arrondie, une loupe en tête.
 *   Inter. Aucune couleur empruntée à une marque : un indigo et un ambre à nous.
 * - **Guide** : un vieux guide de voyage. Papier crème, encre brune, filets doubles, un bandeau
 *   « Vaut le détour », Playfair Display et Cormorant.
 * - **Néon** : l'enseigne d'un bar de nuit. Fond encre, tubes rose et cyan, étoiles jaunes qui
 *   brillent, Anton pour le nom. La lueur est un `text-shadow`, donc elle s'imprime.
 * - **Journal** : la critique d'un quotidien. Papier journal, encre noire, bandeau de rubrique
 *   entre deux filets, Playfair Display.
 *
 * Toutes les polices sont servies par nous (point 2) : Inter, Playfair Display et Cormorant
 * Garamond par `theme.css`, Anton ici.
 *
 * ── 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 `.ta` 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;
}

/* --t-fond : le papier de l'affiche ; --t-carte : le fond des blocs ; --t-encre : le texte ;
   --t-doux : le texte secondaire ; --t-trait : les filets ; --t-etoile / --t-vide : les étoiles
   pleines et vides ; --t-accent : icônes, barre « en ce moment », réponse ; --t-barre : les
   barres ; --t-oui / --t-non : les équipements ; --t-a1 à --t-a4 : les pastilles des avis ;
   --t-sur : le texte posé sur une pastille. */
[data-style="Appli"] {
  --t-fond: #eef1f6; --t-carte: #ffffff; --t-encre: #1b2233; --t-doux: #5f6b80; --t-trait: #dfe4ec;
  --t-etoile: #f4a51c; --t-vide: #dde2ea; --t-accent: #3551d6; --t-barre: #cfd8ea; --t-oui: #1f9d62; --t-non: #d64545;
  --t-a1: #3551d6; --t-a2: #e0527a; --t-a3: #1f9d8a; --t-a4: #8a5cd6; --t-sur: #ffffff;
  --t-ombre: 20, 28, 50;
}
[data-style="Guide"] {
  --t-fond: #f3ead5; --t-carte: #f8f1df; --t-encre: #2b2118; --t-doux: #6b5a45; --t-trait: #b9a582;
  --t-etoile: #8e2a1e; --t-vide: #dcccaa; --t-accent: #8e2a1e; --t-barre: #c9b48c; --t-oui: #3e5b2c; --t-non: #8e2a1e;
  --t-a1: #8e2a1e; --t-a2: #3e5b2c; --t-a3: #2f4a6b; --t-a4: #7a5a1e; --t-sur: #f8f1df;
}
[data-style="Néon"] {
  --t-fond: #0f0c1d; --t-carte: #17132b; --t-encre: #f6f1ff; --t-doux: #b9b0d6; --t-trait: #3a3160;
  --t-etoile: #ffe23a; --t-vide: #3a3160; --t-accent: #ff3ea5; --t-barre: #2fe6ff; --t-oui: #3dffa8; --t-non: #ff3ea5;
  --t-a1: #ff3ea5; --t-a2: #2fe6ff; --t-a3: #ffe23a; --t-a4: #9b6bff; --t-sur: #0f0c1d;
  /* Les lueurs, en triplets pour `rgba()` : rose, cyan, jaune ; et le blanc rosé du tube. */
  --t-lueur-rose: 255, 62, 165; --t-lueur-cyan: 47, 230, 255; --t-lueur-jaune: 255, 226, 58; --t-tube: #fff4fb;
}
[data-style="Journal"] {
  --t-fond: #f2efe6; --t-carte: #f2efe6; --t-encre: #111111; --t-doux: #4a4740; --t-trait: #111111;
  --t-etoile: #111111; --t-vide: #cfcabd; --t-accent: #111111; --t-barre: #8f8a7c; --t-oui: #111111; --t-non: #111111;
  --t-a1: #111111; --t-a2: #111111; --t-a3: #111111; --t-a4: #111111; --t-sur: #f2efe6;
}

/* L'étoile allumée du formulaire, qui n'est dans aucun style : l'ambre de l'appli. */
.ta-note { --ta-note-pleine: #f4a51c; }

/* ── L'affiche ──
 *
 * Tout est en `cqw` : l'affiche se lit sur sa propre largeur. Les rapports vendus vont de 1,333
 * (30 × 40) à 1,5 (40 × 60) : l'écart s'absorbe dans les espaces entre blocs
 * (`space-between`), jamais dans une taille de texte qui changerait avec le format. */
.ta {
  --fond: var(--t-fond); --texte: var(--t-encre);
  padding: 5cqw 5.5cqw 5cqw; justify-content: space-between; gap: 1.3cqw;
  font-family: "Inter", system-ui, sans-serif; line-height: 1.25; text-align: left;
}
.ta [hidden] { display: none !important; }
.ta p { margin: 0; }
.ta svg { display: block; }

/* La barre du haut : la recherche (Appli, Néon), la rubrique (Journal). */
.ta__barre { display: flex; justify-content: center; }
.ta__recherche {
  display: flex; align-items: center; gap: 1.6cqw; width: 100%; padding: 1.5cqw 2.6cqw;
  border-radius: 99cqw; background: var(--t-carte); color: var(--t-doux); font-size: 2.3cqw;
  box-shadow: 0 .4cqw 1.6cqw rgba(var(--t-ombre, 0, 0, 0), .12);
}
.ta__recherche svg { width: 3cqw; height: 3cqw; fill: none; stroke: var(--t-doux); stroke-width: 2.2; stroke-linecap: round; flex: none; }
.ta__rubrique { display: none; }

.ta__tete { display: flex; flex-direction: column; gap: .9cqw; }
.ta__categorie { font-size: 2cqw; color: var(--t-doux); letter-spacing: .02em; }
/* Le nom tient sur sa ligne et se resserre (`--ech`, ajusté par le script) : « Das Gäste-WC der
   Schneiders » ne passe pas à la ligne. */
.ta__lieu { font-size: calc(7.4cqw * var(--ech, 1)); font-weight: 700; line-height: 1.05; white-space: nowrap; letter-spacing: -.01em; }
.ta__note { display: flex; align-items: center; gap: 1.6cqw; }
.ta__moyenne { font-size: 6.4cqw; font-weight: 700; line-height: 1; }
.ta__total { font-size: 2.2cqw; color: var(--t-doux); }
.ta__ruban { display: none; }

/* Les étoiles : un calque vide, et au-dessus un calque plein coupé à `--part`. */
.ta__etoiles { position: relative; display: inline-block; flex: none; width: 17cqw; height: 3.4cqw; }
.ta__etoiles svg { width: 17cqw; height: 3.4cqw; }
.ta__etoiles-vides svg { fill: var(--t-vide); }
.ta__etoiles-pleines { position: absolute; inset: 0 auto 0 0; width: var(--part, 0%); overflow: hidden; }
.ta__etoiles-pleines svg { fill: var(--t-etoile); }
.ta__etoiles--petites, .ta__etoiles--petites svg { width: 9.5cqw; height: 1.9cqw; }

/* Les quatre boutons d'une fiche. */
.ta__boutons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1cqw; list-style: none; margin: 0; padding: 0; }
.ta__boutons li { display: flex; flex-direction: column; align-items: center; gap: .6cqw; font-size: 1.7cqw; color: var(--t-accent); font-weight: 600; }
.ta__boutons svg {
  width: 6cqw; height: 6cqw; padding: 1.45cqw; border-radius: 50%; border: .25cqw solid var(--t-trait);
  fill: none; stroke: var(--t-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; background: var(--t-carte);
}

.ta__bloc { background: var(--t-carte); border-radius: 2cqw; padding: 2.2cqw 2.6cqw; }
.ta__grille { display: grid; grid-template-columns: 38% minmax(0, 1fr); gap: 1.6cqw; }
.ta__histo { display: flex; flex-direction: column; justify-content: center; gap: .9cqw; }
.ta__histo-ligne { display: flex; align-items: center; gap: 1.2cqw; font-size: 1.8cqw; color: var(--t-doux); font-variant-numeric: tabular-nums; }
.ta__histo-barre { flex: 1; height: 1.3cqw; border-radius: 1cqw; background: var(--t-vide); overflow: hidden; }
.ta__histo-barre > span { display: block; height: 100%; background: var(--t-etoile); border-radius: 1cqw; }

.ta__infos { display: flex; flex-direction: column; gap: 1.3cqw; font-size: 2cqw; }
.ta__info { display: flex; align-items: flex-start; gap: 1.2cqw; }
.ta__info svg, .ta__equipements svg { width: 2.6cqw; height: 2.6cqw; flex: none; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ta__info svg { stroke: var(--t-accent); }
.ta__ouvert { color: var(--t-oui); font-weight: 700; }
.ta__equipements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8cqw 1.4cqw; list-style: none; margin: 0; padding: 0; font-size: 1.75cqw; }
.ta__equipements li { display: flex; align-items: center; gap: .8cqw; }
.ta__equipements .ta-oui svg { stroke: var(--t-oui); }
.ta__equipements .ta-non { color: var(--t-doux); text-decoration: line-through; text-decoration-thickness: .15cqw; }
.ta__equipements .ta-non svg { stroke: var(--t-non); }

.ta__intertitre { font-size: 2.4cqw; font-weight: 700; margin-bottom: 1.2cqw !important; }
/* La courbe d'affluence : dix-huit barres de 6 h à 23 h, celle de 21 h en couleur. */
.ta__courbe { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); align-items: end; gap: .5cqw; height: 7cqw; border-bottom: .2cqw solid var(--t-trait); }
.ta__heure { display: block; background: var(--t-barre); border-radius: .6cqw .6cqw 0 0; min-height: .4cqw; }
.ta__heure--maintenant { background: var(--t-accent); }
.ta__heures { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: .6cqw; font-size: 1.6cqw; color: var(--t-doux); }
.ta__maintenant { display: flex; align-items: center; gap: 1cqw; margin-top: 1cqw !important; font-size: 1.9cqw; font-weight: 600; color: var(--t-accent); }
.ta__point { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--t-accent); flex: none; }

/* Les avis sur deux colonnes, dans les quatre styles : sur une seule, quatre avis faisaient
   déborder le 30 × 40, le format qui se vend et le plus trapu. */
/* `--avis` resserre le bloc quand quatre longs avis ne tiennent pas : posé par le serveur d'après
   la longueur des textes, repris au pixel par l'éditeur. Le texte rétrécit, il ne déborde pas. */
.ta__avis { --avis: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(1.8cqw * var(--avis)) 3cqw; align-items: start; }
.ta__avis .ta__intertitre { grid-column: 1 / -1; margin-bottom: 0 !important; }
.ta__un-avis { display: flex; gap: 1.5cqw; align-items: flex-start; }
.ta__initiale {
  flex: none; display: grid; place-items: center; width: 4.8cqw; height: 4.8cqw; border-radius: 50%;
  background: var(--t-a1); color: var(--t-sur); font-weight: 700; font-size: 2.3cqw;
}
.ta__un-avis:nth-of-type(2) .ta__initiale { background: var(--t-a2); }
.ta__un-avis:nth-of-type(3) .ta__initiale { background: var(--t-a3); }
.ta__un-avis:nth-of-type(4) .ta__initiale { background: var(--t-a4); }
.ta__corps { min-width: 0; flex: 1; }
.ta__qui { font-size: calc(2.15cqw * var(--avis, 1)); }
.ta__meta { color: var(--t-doux); font-size: 1.75cqw; }
.ta__petites { display: flex; align-items: center; gap: 1.2cqw; margin: .5cqw 0 !important; }
.ta__quand { font-size: 1.7cqw; color: var(--t-doux); }
.ta__texte { font-size: calc(2.05cqw * var(--avis, 1)); line-height: 1.28; overflow-wrap: anywhere; }

.ta__reponse { border-left: .6cqw solid var(--t-accent); padding: 1.2cqw 2cqw; background: var(--t-carte); border-radius: 0 1.4cqw 1.4cqw 0; font-size: 2cqw; }
.ta__reponse-titre { font-weight: 700; font-size: 1.8cqw; color: var(--t-accent); margin-bottom: .4cqw !important; }

/* ── Guide : un vieux guide de voyage ── */
.ta[data-style="Guide"] { font-family: "Cormorant Garamond", Georgia, serif; font-size: 108%; }
.ta[data-style="Guide"] .ta__barre { display: none; }
.ta[data-style="Guide"] .ta__tete { align-items: center; text-align: center; border-top: .5cqw double var(--t-trait); border-bottom: .5cqw double var(--t-trait); padding: 1.4cqw 0 1.8cqw; }
.ta[data-style="Guide"] .ta__categorie { font-variant: small-caps; letter-spacing: .12em; font-size: 2.3cqw; }
.ta[data-style="Guide"] .ta__lieu { font-family: "Playfair Display", Georgia, serif; font-weight: 600; font-size: calc(6.6cqw * var(--ech, 1)); }
.ta[data-style="Guide"] .ta__moyenne { font-family: "Playfair Display", Georgia, serif; font-weight: 600; }
.ta[data-style="Guide"] .ta__ruban {
  display: inline-block; align-self: center; margin-top: .6cqw; padding: .7cqw 3.2cqw; background: var(--t-accent); color: var(--t-sur);
  font-variant: small-caps; letter-spacing: .14em; font-size: 2.2cqw; font-weight: 700;
  clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%, 4% 50%);
}
.ta[data-style="Guide"] .ta__boutons svg { border-style: double; border-width: .5cqw; background: transparent; }
.ta[data-style="Guide"] .ta__bloc { background: transparent; border: .2cqw solid var(--t-trait); border-radius: 0; }
.ta[data-style="Guide"] .ta__intertitre { font-family: "Playfair Display", Georgia, serif; font-weight: 600; font-variant: small-caps; letter-spacing: .08em; }
.ta[data-style="Guide"] .ta__texte { font-style: italic; font-size: calc(2.25cqw * var(--avis, 1)); }
.ta[data-style="Guide"] .ta__heure { border-radius: 0; }
.ta[data-style="Guide"] .ta__initiale { font-family: "Playfair Display", Georgia, serif; border-radius: 0; width: 5.4cqw; height: 5.4cqw; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ta[data-style="Guide"] .ta__reponse { background: transparent; border-radius: 0; font-style: italic; }

/* ── Néon : une enseigne de nuit ── */
.ta[data-style="Néon"] .ta__recherche { background: transparent; border: .3cqw solid var(--t-barre); color: var(--t-barre); box-shadow: 0 0 1.4cqw rgba(var(--t-lueur-cyan), .55), inset 0 0 1cqw rgba(var(--t-lueur-cyan), .3); }
.ta[data-style="Néon"] .ta__recherche svg { stroke: var(--t-barre); }
.ta[data-style="Néon"] .ta__tete { align-items: center; text-align: center; }
.ta[data-style="Néon"] .ta__categorie { color: var(--t-barre); text-transform: uppercase; letter-spacing: .3em; font-size: 1.8cqw; text-shadow: 0 0 1cqw rgba(var(--t-lueur-cyan), .8); }
.ta[data-style="Néon"] .ta__lieu {
  font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .03em; color: var(--t-tube);
  font-size: calc(7.4cqw * var(--ech, 1));
  text-shadow: 0 0 .4cqw var(--t-tube), 0 0 1.2cqw var(--t-accent), 0 0 2.6cqw var(--t-accent), 0 0 4.6cqw var(--t-accent);
}
.ta[data-style="Néon"] .ta__moyenne { color: var(--t-etoile); text-shadow: 0 0 1.4cqw rgba(var(--t-lueur-jaune), .8); }
.ta[data-style="Néon"] .ta__etoiles-pleines svg { filter: drop-shadow(0 0 .6cqw rgba(var(--t-lueur-jaune), .9)); }
.ta[data-style="Néon"] .ta__boutons li { color: var(--t-barre); }
.ta[data-style="Néon"] .ta__boutons svg { background: transparent; border-color: var(--t-accent); stroke: var(--t-accent); box-shadow: 0 0 1.2cqw rgba(var(--t-lueur-rose), .6); }
.ta[data-style="Néon"] .ta__bloc { border: .25cqw solid var(--t-trait); }
.ta[data-style="Néon"] .ta__heure { box-shadow: 0 0 .8cqw rgba(var(--t-lueur-cyan), .6); }
.ta[data-style="Néon"] .ta__heure--maintenant { box-shadow: 0 0 1.2cqw rgba(var(--t-lueur-rose), .9); }
.ta[data-style="Néon"] .ta__maintenant, .ta[data-style="Néon"] .ta__reponse-titre { text-shadow: 0 0 1cqw rgba(var(--t-lueur-rose), .8); }
.ta[data-style="Néon"] .ta__point { box-shadow: 0 0 1cqw var(--t-accent); }
.ta[data-style="Néon"] .ta__initiale { box-shadow: 0 0 1.2cqw currentColor; color: var(--t-sur); }
.ta[data-style="Néon"] .ta__reponse { box-shadow: -.6cqw 0 1.4cqw -.4cqw rgba(var(--t-lueur-rose), .7); }

/* ── Journal : la critique d'un quotidien ── */
.ta[data-style="Journal"] { font-family: "Playfair Display", Georgia, serif; }
.ta[data-style="Journal"] .ta__recherche { display: none; }
.ta[data-style="Journal"] .ta__rubrique {
  display: block; width: 100%; text-align: center; font-weight: 700; text-transform: uppercase; letter-spacing: .4em;
  font-size: 2.2cqw; padding: 1cqw 0; border-top: .6cqw solid var(--t-trait); border-bottom: .15cqw solid var(--t-trait);
}
.ta[data-style="Journal"] .ta__tete { align-items: center; text-align: center; }
.ta[data-style="Journal"] .ta__categorie { font-family: "Inter", system-ui, sans-serif; text-transform: uppercase; letter-spacing: .25em; font-size: 1.6cqw; }
.ta[data-style="Journal"] .ta__lieu { font-weight: 700; font-size: calc(7cqw * var(--ech, 1)); letter-spacing: -.02em; }
.ta[data-style="Journal"] .ta__boutons { display: none; }
.ta[data-style="Journal"] .ta__bloc { background: transparent; border-radius: 0; padding: 1.4cqw 0; border-top: .15cqw solid var(--t-trait); }
.ta[data-style="Journal"] .ta__grille { gap: 3cqw; }
.ta[data-style="Journal"] .ta__infos, .ta[data-style="Journal"] .ta__histo-ligne, .ta[data-style="Journal"] .ta__heures,
.ta[data-style="Journal"] .ta__meta, .ta[data-style="Journal"] .ta__quand, .ta[data-style="Journal"] .ta__total { font-family: "Inter", system-ui, sans-serif; }
.ta[data-style="Journal"] .ta__heure { border-radius: 0; }
.ta[data-style="Journal"] .ta__avis { border-top: .6cqw solid var(--t-trait); padding-top: 1.6cqw; }
.ta[data-style="Journal"] .ta__avis .ta__intertitre { grid-column: 1 / -1; text-transform: uppercase; letter-spacing: .3em; font-size: 2cqw; }
.ta[data-style="Journal"] .ta__initiale { background: transparent; color: var(--t-encre); border: .2cqw solid var(--t-trait); font-size: 2.4cqw; width: 5cqw; height: 5cqw; }
.ta[data-style="Journal"] .ta__texte { font-size: calc(2.1cqw * var(--avis, 1)); font-style: italic; }
.ta[data-style="Journal"] .ta__texte::before { content: "« "; }
.ta[data-style="Journal"] .ta__texte::after { content: " »"; }
.ta[data-style="Journal"] .ta__reponse { background: transparent; border-left: 0; border-top: .15cqw solid var(--t-trait); border-bottom: .15cqw solid var(--t-trait); border-radius: 0; padding: 1.2cqw 0; text-align: center; font-style: italic; }
.ta[data-style="Journal"] .ta__reponse-titre { font-style: normal; text-transform: uppercase; letter-spacing: .25em; font-family: "Inter", system-ui, sans-serif; font-size: 1.5cqw; }

/* ── Le formulaire ── */
.ta-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.ta-styles input, .ta-note input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ta-styles label {
  display: grid; gap: .3rem; padding: 1rem 1.2rem; min-height: 4.4rem; cursor: pointer;
  border: .2rem solid rgba(var(--color-foreground), .15); border-radius: .8rem; font-weight: 400;
}
.ta-styles input:checked + label { border-color: rgb(var(--color-foreground)); }
.ta-styles input:focus-visible + label, .ta-note input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.ta-styles__nom { font-weight: 600; }
.ta-styles small { opacity: .75; }
.ta-echantillon { display: block; padding: .6rem .8rem; border-radius: .6rem; background: var(--t-fond); color: var(--t-etoile); font-size: 1.4rem; letter-spacing: .1em; }
.ta-echantillon b { color: var(--t-encre); letter-spacing: 0; margin-right: .4rem; }
.ta-styles label[data-style="Néon"] .ta-echantillon { text-shadow: 0 0 .6rem var(--t-etoile); }
.ta-styles label[data-style="Journal"] .ta-echantillon, .ta-styles label[data-style="Guide"] .ta-echantillon { font-family: "Playfair Display", Georgia, serif; }

.ta-avis-champs { display: grid; gap: 1.2rem; }
.ta-avis-champ { border: .1rem solid rgba(var(--color-foreground), .15); border-radius: .8rem; padding: 1rem 1.2rem 1.2rem; margin: 0; }
.ta-avis-champ > legend { font-weight: 600; padding: 0 .4rem; }
.ta-avis-ligne { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.ta-avis-prenom { flex: 1 1 14rem; display: grid; gap: .3rem; }
/* Cinq étoiles cliquables, de 1 à 5 dans le document — l'ordre du clavier et d'un lecteur
   d'écran —, allumées jusqu'à la cochée (ou la survolée) par `:has()`. Chaque cible fait 44 px ;
   `position: relative` garde le focus d'un bouton masqué près de son étoile. */
.ta-note { position: relative; display: flex; }
.ta-note label { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; cursor: pointer; margin: 0; }
.ta-note svg { width: 2.6rem; height: 2.6rem; fill: rgba(var(--color-foreground), .15); transition: fill .15s; }
.ta-note:has(input[value="1"]:checked):not(:hover) label:nth-of-type(-n+1) svg,
.ta-note:has(label:nth-of-type(1):hover) label:nth-of-type(-n+1) svg,
.ta-note:has(input[value="2"]:checked):not(:hover) label:nth-of-type(-n+2) svg,
.ta-note:has(label:nth-of-type(2):hover) label:nth-of-type(-n+2) svg,
.ta-note:has(input[value="3"]:checked):not(:hover) label:nth-of-type(-n+3) svg,
.ta-note:has(label:nth-of-type(3):hover) label:nth-of-type(-n+3) svg,
.ta-note:has(input[value="4"]:checked):not(:hover) label:nth-of-type(-n+4) svg,
.ta-note:has(label:nth-of-type(4):hover) label:nth-of-type(-n+4) svg,
.ta-note:has(input[value="5"]:checked):not(:hover) label:nth-of-type(-n+5) svg,
.ta-note:has(label:nth-of-type(5):hover) label:nth-of-type(-n+5) svg { fill: var(--ta-note-pleine); }
.ta-avis-texte { display: flex; gap: .8rem; align-items: stretch; }
.ta-avis-texte textarea { flex: 1; min-width: 0; font-size: 1.6rem; resize: vertical; }
.ta-de { flex: none; display: grid; place-items: center; width: 4.4rem; min-height: 4.4rem; padding: 0; cursor: pointer; border: .1rem solid rgba(var(--color-foreground), .25); border-radius: .8rem; background: transparent; color: inherit; }
.ta-de svg { width: 2.4rem; height: 2.4rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ta-de svg circle { fill: currentColor; stroke: none; }
.ta-tout { justify-self: start; min-height: 4.4rem; }
.ta-idees { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.ta-idees button {
  min-height: 4.4rem; padding: .6rem 1.2rem; border-radius: 99rem; cursor: pointer; text-align: left;
  border: .1rem solid rgba(var(--color-foreground), .25); background: transparent; color: inherit; font: inherit; font-size: 1.4rem;
}