/* ═══════════════════════════ La planche de l'apéro ═══════════════════════════
 *
 * Servie **seulement** sur sa fiche (`views/product-affiche.liquid`).
 *
 * ── Une planche vue de dessus, quatre matières ──
 *
 * La structure ne bouge pas : un titre (« L'apéro chez <nom> »), un sous-titre facultatif, une planche
 * de dix à douze pour cent de marge, et sur elle de un à six mets dessinés avec, dessous, le prénom
 * de celui qui l'apporte. Chaque style est une matière qu'on reconnaît sans la nommer :
 * - **Planche de bois** : le bois d'olivier ou de hêtre, un fil sombre, des nœuds, une ombre douce sous chaque
 *   mets, des prénoms au feutre ;
 * - **Nappe vichy** : la table d'un bistrot d'autrefois, une nappe à carreaux rouges, des assiettes émaillées
 *   à liseré bleu, chaque prénom sur son étiquette ;
 * - **Toile cirée** : la cuisine des années 60, des marguerites orange et des feuilles d'avocat sur un fond
 *   crème, mêmes assiettes, mêmes étiquettes ;
 * - **Ardoise** : l'ardoise du bistrot dans son cadre de bois, des mets à la craie, des étoiles tracées du doigt.
 *
 * Aucune marque : pas d'étiquette, de verre ni de logo, des couleurs et des motifs de table seulement.
 *
 * Polices servies par nous (point 2) : Cormorant Garamond, Josefin Sans, Fredoka et Playfair
 * Display par `theme.css`, Caveat et Damion ici.
 *
 * ── 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 `.pl` exprès, pour que les échantillons du
 * formulaire se colorent avec les mêmes variables. Les dessins (`views/planche-mets.liquid`) n'ont aucune
 * couleur : ils lisent ces variables, par classes.
 */
@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;
}

/* --pl-fond : le mur derrière la planche ; --pl-titre : le titre ; --pl-kicker : « L'apéro chez » ; --pl-sous : le sous-titre ;
   --pl-planche : la planche, la nappe ou la toile ; --pl-bord : son bord ; --pl-ombre : l'ombre qu'elle porte ; --pl-deco : le fil du bois, la craie,
   les carreaux de la nappe, les pétales de la toile ; --pl-nuage : les feuilles de la toile ; --pl-nom : les prénoms ; --pl-trait : le trait des dessins ;
   --pl-pap : une assiette, un bol, une mie, l'étiquette d'un prénom ; --pl-a / --pl-b / --pl-c : les trois aplats des dessins (le vert, le rouge, le jaune
   des mets) ; --pl-lueur : la lumière qui tombe sur la planche ; --pl-liseret : le bord émaillé des assiettes ; --pl-cadre / --pl-cadre-2 : le cadre de bois de l'ardoise ;
   --pl-t : l'échelle des prénoms, 1 ou moins (le serveur l'estime, le script la reprend au pixel). */
[data-style="Planche de bois"], .pl-champs {
  --pl-fond: #f1e6d1; --pl-titre: #3a2817; --pl-kicker: #8a4b24; --pl-sous: #5b4330;
  --pl-planche: #e2bb86; --pl-bord: #a8743c; --pl-ombre: #3a281740; --pl-deco: #b8854c; --pl-nuage: #e2bb86;
  --pl-nom: #2c1d10; --pl-trait: #3a2817; --pl-pap: #f7edd8; --pl-a: #7a8a3a; --pl-b: #b4482c; --pl-c: #c28a1c;
  --pl-lueur: #fff3d666; --pl-liseret: #a8743c; --pl-cadre: #a8743c; --pl-cadre-2: #a8743c;
}
/* Une nappe de bistrot à carreaux, des assiettes émaillées, des étiquettes de prénom : la table de l'apéro d'autrefois. */
[data-style="Nappe vichy"] {
  --pl-fond: #1c3050; --pl-titre: #fbf0d6; --pl-kicker: #f2c45a; --pl-sous: #dbe4f1;
  --pl-planche: #fffaf0; --pl-bord: #c4352c; --pl-ombre: #0b142680; --pl-deco: #c4352c80; --pl-nuage: #fffaf0;
  --pl-nom: #14243f; --pl-trait: #14243f; --pl-pap: #fffdf4; --pl-a: #5d8a3c; --pl-b: #c4352c; --pl-c: #e3a722;
  --pl-lueur: #ffffff00; --pl-liseret: #2f62a8; --pl-cadre: #c4352c; --pl-cadre-2: #c4352c;
}
/* Une toile cirée de cuisine des années 60 : des marguerites orange et des feuilles d'avocat sur un fond crème. */
[data-style="Toile cirée"] {
  --pl-fond: #43281a; --pl-titre: #fbe9c4; --pl-kicker: #f4a259; --pl-sous: #ecd9b8;
  --pl-planche: #f4e6c6; --pl-bord: #d9822b; --pl-ombre: #1d0f0880; --pl-deco: #e0771f; --pl-nuage: #6f8f3a;
  --pl-nom: #3b2314; --pl-trait: #3b2314; --pl-pap: #fffaf0; --pl-a: #6f8f3a; --pl-b: #c2441f; --pl-c: #e5b13a;
  --pl-lueur: #ffffff00; --pl-liseret: #d9822b; --pl-cadre: #d9822b; --pl-cadre-2: #d9822b;
}
[data-style="Ardoise"] {
  --pl-fond: #121518; --pl-titre: #f3efe4; --pl-kicker: #e8c872; --pl-sous: #c9c4b6;
  --pl-planche: #2d353b; --pl-bord: #cfcabd; --pl-ombre: #00000099; --pl-deco: #6b7780; --pl-nuage: #2d353b;
  --pl-nom: #f3efe4; --pl-trait: #f3efe4; --pl-pap: #3b454c; --pl-a: #4f8a63; --pl-b: #b5564a; --pl-c: #a8873a;
  --pl-lueur: #ffffff12; --pl-liseret: #cfcabd; --pl-cadre: #8a5a32; --pl-cadre-2: #5c3a1e;
}

/* ── Les dessins : des classes, jamais une couleur ──
 *
 * **Aucune règle ne passe par un ancêtre.** Un `<use>` clone le symbole dans un arbre d'ombre, et les
 * Chrome récents (relevé le 6 nov. 2026 sur la 147) n'y appliquent plus que les sélecteurs qui se
 * tiennent dans cet arbre : une règle à ancêtre (le conteneur des dessins, puis la classe) ne désignait plus rien, et tous les plats sortaient en
 * noir plein à l'écran (la fabrication, sur Chromium 140, ne le voyait pas). Ce qui s'hérite
 * (remplissage, trait, variables de palette) se pose donc sur le `<svg>` qui porte le `<use>`, et
 * ce qui est propre à un élément se dit par sa seule classe. */
.pl__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pl__mets svg, label[for^="pl-m-"] svg {
  fill: none; stroke: var(--pl-trait); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
}
.p { fill: var(--pl-pap); }
.fa { fill: var(--pl-a); }
.fb { fill: var(--pl-b); }
.fc { fill: var(--pl-c); }
.tu { stroke-width: 10.6; }
.tg { stroke-width: 11.8; }
.sb { stroke: var(--pl-b); stroke-width: 7; }
.sa { stroke: var(--pl-a); stroke-width: 8.4; }
.fine { stroke-width: 1.35; }
.d { stroke: none; fill: var(--pl-pap); }
.dt { stroke: none; fill: var(--pl-trait); }

/* ── L'affiche ──
 *
 * Tout est en `cqw`. La planche prend toute la hauteur qui reste sous le titre ; l'écart entre les formats
 * (de 1,33 à 1,5 de rapport) s'absorbe dans la hauteur de la planche, donc dans l'espacement des rangées de mets, jamais
 * dans une taille de dessin ni de texte. La planche est elle-même un conteneur : le dessin et le prénom d'un plat se
 * dimensionnent sur **sa** largeur (`--d`, `--w`, en centièmes), si bien que l'ensemble tient à tous les formats sans
 * recalcul. `--pl-t` est l'échelle des prénoms, 1 ou moins : le serveur l'estime, le script la reprend au pixel. */
.pl {
  --fond: var(--pl-fond); --texte: var(--pl-titre);
  --pl-t: 1;
  display: flex; flex-direction: column; padding: 6.4cqw 6cqw 6.4cqw; text-align: center;
  background-color: var(--pl-fond); color: var(--pl-titre); font-family: "Josefin Sans", system-ui, sans-serif; line-height: 1.15;
}
.pl :where(p, ul) { margin: 0; padding: 0; }
.pl__tete { display: flex; flex-direction: column; align-items: center; gap: .6cqw; }
.pl__kicker {
  font-weight: 600; font-size: 3.2cqw; letter-spacing: .28em; padding-left: .28em; text-transform: uppercase; color: var(--pl-kicker);
}
.pl__nom {
  width: 100%; white-space: nowrap; line-height: 1.12; font-size: calc(10.4cqw * var(--ech, 1)); color: var(--pl-titre);
}
.pl__sous { font-size: calc(3.4cqw * var(--ech, 1)); letter-spacing: .02em; white-space: nowrap; color: var(--pl-sous); margin-top: .4cqw; }
.pl__sous[hidden] { display: none; }

/* La planche : une surface qui se remplit, des coins ronds, un trou pour la corde. */
.pl__planche {
  position: relative; flex: 1 1 0; min-height: 0; margin-top: 4.6cqw; container-type: inline-size;
  border-radius: 5.6cqw; background-color: var(--pl-planche);
  background-image: radial-gradient(ellipse 85% 55% at 28% 18%, var(--pl-lueur), transparent 72%);
  box-shadow: inset 0 0 0 .7cqw var(--pl-bord), 0 1.4cqw 3.4cqw var(--pl-ombre);
}
.pl__planche::before {
  content: ""; position: absolute; z-index: 2; top: 3.6cqw; left: 50%; width: 11cqw; height: 3.6cqw; margin-left: -5.5cqw;
  border-radius: 1.8cqw; background-color: var(--pl-fond); box-shadow: inset 0 .5cqw .8cqw var(--pl-ombre);
}
.pl__deco { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.pl__deco > g { display: none; fill: none; stroke: var(--pl-deco); stroke-linecap: round; }
.pl[data-style="Planche de bois"] .pl__deco--bois, .pl[data-style="Ardoise"] .pl__deco--ardoise,
.pl[data-style="Nappe vichy"] .pl__deco--nappe, .pl[data-style="Toile cirée"] .pl__deco--toile { display: block; }
.pl__deco--bois path { stroke-width: .5; opacity: .85; }
.pl__deco--bois path.fin { stroke-width: .28; opacity: .7; }
.pl__deco--bois ellipse { stroke-width: .42; opacity: .8; }
.pl__deco--bois ellipse.fin { stroke-width: .26; opacity: .6; }
/* L'ardoise : des traces de chiffon, de la poussière de craie, un liseré pointillé et quelques étoiles tracées du doigt. */
.pl__deco--ardoise .nuages ellipse { fill: var(--pl-deco); stroke: none; opacity: .2; }
.pl__deco--ardoise .craie circle { fill: var(--pl-trait); stroke: none; opacity: .35; }
.pl__deco--ardoise rect { stroke: var(--pl-bord); stroke-width: .5; stroke-dasharray: 1.2 .9; opacity: .75; }
.pl__deco--ardoise .doodle { stroke: var(--pl-kicker); stroke-width: .6; opacity: .9; }
/* La nappe : un ourlet cousu. Les carreaux sont du fond, pas du dessin. */
.pl__deco--nappe rect { stroke: var(--pl-liseret); stroke-width: .45; stroke-dasharray: 1.6 1.1; opacity: .9; }
/* La toile : des marguerites en quinconce. Pétales et feuilles prennent leur couleur ici, jamais dans le dessin. */
.f1 ellipse { fill: var(--pl-deco); stroke: none; }
.f2 { fill: var(--pl-planche); stroke: none; }
.f3 { fill: var(--pl-nuage); stroke: none; }

/* Les mets : le centre de chaque emplacement est posé par le calcul (`left`, `top`), le dessin et le prénom dessous. */
.pl__plats { position: absolute; inset: 0; list-style: none; z-index: 1; }
.pl__plat {
  position: absolute; width: calc(var(--w) * 1cqw); transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 1.1cqw;
}
.pl__mets { position: relative; display: block; width: calc(var(--d) * 1cqw); aspect-ratio: 1; }
.pl__mets svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
.pl__prenom {
  display: block; box-sizing: border-box; max-width: 100%; white-space: nowrap; line-height: 1.1; color: var(--pl-nom);
  font-size: calc(var(--pl-fs, 5.5cqw) * var(--pl-t));
}
/* Le bois : une ombre douce sous chaque mets, posé sur la planche. */
.pl[data-style="Planche de bois"] .pl__mets::before {
  content: ""; position: absolute; inset: 20% 4% -3% 8%; border-radius: 50%; opacity: .75;
  background-image: radial-gradient(closest-side, var(--pl-ombre) 50%, transparent);
}
/* L'ardoise : un halo de craie effacée sous chaque mets. */
.pl[data-style="Ardoise"] .pl__mets::before {
  content: ""; position: absolute; inset: -9%; border-radius: 50%;
  background-image: radial-gradient(closest-side, var(--pl-lueur), transparent);
}
/* La nappe et la toile : une assiette émaillée sous chaque mets, son liseré, son ombre portée, et le prénom sur une étiquette. */
.pl[data-style="Nappe vichy"] .pl__mets::before, .pl[data-style="Toile cirée"] .pl__mets::before {
  content: ""; position: absolute; inset: -4%; border-radius: 50%; background-color: var(--pl-pap);
  box-shadow: inset 0 0 0 .55cqw var(--pl-liseret), inset 0 0 0 1.1cqw var(--pl-pap), inset 0 0 0 1.35cqw var(--pl-liseret), .6cqw 1cqw 1.4cqw var(--pl-ombre);
}
.pl[data-style="Nappe vichy"] .pl__mets, .pl[data-style="Toile cirée"] .pl__mets { width: calc(var(--d) * .9cqw); }
.pl[data-style="Nappe vichy"] .pl__plat, .pl[data-style="Toile cirée"] .pl__plat { gap: 2cqw; }
.pl[data-style="Nappe vichy"] .pl__prenom, .pl[data-style="Toile cirée"] .pl__prenom {
  padding: .5cqw 2.2cqw .6cqw; border-radius: 99cqw; background-color: var(--pl-pap);
  box-shadow: 0 0 0 .3cqw var(--pl-liseret), .4cqw .6cqw .9cqw var(--pl-ombre);
}
.pl[data-style="Nappe vichy"] .pl__planche, .pl[data-style="Toile cirée"] .pl__planche { border-radius: 1.6cqw; }
.pl[data-style="Nappe vichy"] .pl__planche::before, .pl[data-style="Toile cirée"] .pl__planche::before, .pl[data-style="Ardoise"] .pl__planche::before { display: none; }
/* Des carreaux de vichy : un fil rouge dans chaque sens, translucide, donc plus foncé là où ils se croisent. */
.pl[data-style="Nappe vichy"] .pl__planche {
  background-image: repeating-linear-gradient(90deg, var(--pl-deco) 0 3.6cqw, transparent 3.6cqw 7.2cqw), repeating-linear-gradient(0deg, var(--pl-deco) 0 3.6cqw, transparent 3.6cqw 7.2cqw);
  box-shadow: inset 0 0 0 .5cqw var(--pl-bord), 0 1.4cqw 3.4cqw var(--pl-ombre);
}
.pl[data-style="Toile cirée"] .pl__planche { box-shadow: inset 0 0 0 .6cqw var(--pl-bord), 0 1.4cqw 3.4cqw var(--pl-ombre); }
/* L'ardoise est encadrée de bois, comme celles qu'on pose devant un bistrot. */
.pl[data-style="Ardoise"] .pl__planche {
  box-shadow: inset 0 0 0 2cqw var(--pl-cadre), inset 0 0 0 2.4cqw var(--pl-cadre-2), inset 0 0 2.4cqw 2.4cqw var(--pl-ombre), 0 1.4cqw 3.4cqw var(--pl-ombre);
}

/* ── Quatre matières, quatre écritures ── */
.pl[data-style="Planche de bois"] { --pl-fs: 5.6cqw; }
.pl[data-style="Planche de bois"] .pl__nom { font-family: "Damion", "Sacramento", cursive; font-weight: 400; }
.pl[data-style="Planche de bois"] .pl__prenom { font-family: "Caveat", cursive; font-weight: 700; }

.pl[data-style="Ardoise"] { --pl-fs: 5.4cqw; }
.pl[data-style="Ardoise"] .pl__kicker { font-family: "Caveat", cursive; font-weight: 600; font-size: 4.4cqw; letter-spacing: .12em; }
.pl[data-style="Ardoise"] .pl__nom { font-family: "Damion", "Sacramento", cursive; font-weight: 400; }
.pl[data-style="Ardoise"] .pl__sous { font-family: "Caveat", cursive; font-weight: 500; font-size: calc(4.2cqw * var(--ech, 1)); }
.pl[data-style="Ardoise"] .pl__prenom { font-family: "Caveat", cursive; font-weight: 500; }

.pl[data-style="Nappe vichy"] { --pl-fs: 4.1cqw; }
.pl[data-style="Nappe vichy"] .pl__nom { font-family: "Playfair Display", Georgia, serif; font-weight: 900; font-size: calc(9.4cqw * var(--ech, 1)); }
.pl[data-style="Nappe vichy"] .pl__sous { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 600; font-size: calc(4.2cqw * var(--ech, 1)); }
.pl[data-style="Nappe vichy"] .pl__prenom { font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }

.pl[data-style="Toile cirée"] { --pl-fs: 5.2cqw; }
.pl[data-style="Toile cirée"] .pl__nom { font-family: "Damion", "Sacramento", cursive; font-weight: 400; font-size: calc(11cqw * var(--ech, 1)); }
.pl[data-style="Toile cirée"] .pl__prenom { font-family: "Fredoka", system-ui, sans-serif; font-weight: 600; }

/* ── Le formulaire ── */
.pl-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.pl-styles input, .pl-nombres input, .pl-choix input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pl-styles label {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 1rem; row-gap: .1rem;
  padding: .8rem 1rem; min-height: 4.4rem; cursor: pointer; font-weight: 400;
  border: .2rem solid rgba(var(--color-foreground), .15); border-radius: .8rem;
}
.pl-styles input:checked + label, .pl-nombres input:checked + label, .pl-choix input:checked + label { border-color: rgb(var(--color-foreground)); }
.pl-styles input:focus-visible + label, .pl-nombres input:focus-visible + label, .pl-choix input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.pl-styles__nom { font-weight: 600; }
.pl-styles small { grid-column: 2; opacity: .75; font-size: 1.2rem; }
/* L'échantillon montre la planche et trois aplats de ses dessins. */
.pl-echantillon {
  grid-row: span 2; width: 4.4rem; height: 4.4rem; border-radius: .6rem; display: flex; align-items: center; justify-content: center; gap: .3rem;
  background-color: var(--pl-planche); box-shadow: inset 0 0 0 .2rem var(--pl-bord);
}
/* Les deux styles d'époque montrent leur motif : des carreaux, des fleurs. */
.pl-styles label[data-style="Nappe vichy"] .pl-echantillon {
  background-image: repeating-linear-gradient(90deg, var(--pl-deco) 0 .55rem, transparent .55rem 1.1rem), repeating-linear-gradient(0deg, var(--pl-deco) 0 .55rem, transparent .55rem 1.1rem);
}
.pl-styles label[data-style="Toile cirée"] .pl-echantillon {
  background-image: radial-gradient(circle, var(--pl-deco) 0 .32rem, transparent .36rem); background-size: 1.3rem 1.3rem;
}
.pl-echantillon i { display: block; width: .9rem; height: .9rem; border-radius: 50%; box-shadow: 0 0 0 .15rem var(--pl-trait); }
.pl-echantillon i:nth-child(1) { background-color: var(--pl-a); }
.pl-echantillon i:nth-child(2) { background-color: var(--pl-b); }
.pl-echantillon i:nth-child(3) { background-color: var(--pl-c); }

.pl-nombres { display: flex; flex-wrap: wrap; gap: .8rem; }
.pl-nombres label {
  display: grid; place-items: center; min-width: 4.4rem; min-height: 4.4rem; cursor: pointer; font-size: 1.6rem;
  border: .2rem solid rgba(var(--color-foreground), .15); border-radius: .8rem;
}
.pl-nombre[hidden] { display: none; }

.pl-bloc { border: 0; padding: 0; margin: 0; }
.pl-tout { margin: .4rem 0 1rem; }
.pl-tout[hidden] { display: none; }
.pl-lignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.pl-ligne { border: .1rem solid rgba(var(--color-foreground), .15); border-radius: .8rem; padding: 1rem 1.2rem 1.2rem; }
.pl-ligne[hidden] { display: none; }
.pl-ligne__tete { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .4rem; }
.pl-ligne__nom { font-weight: 600; }
.pl-de {
  display: grid; place-items: center; width: 4.4rem; height: 4.4rem; padding: 0; cursor: pointer;
  border: .1rem solid rgba(var(--color-foreground), .25); border-radius: .8rem; background: transparent; color: inherit;
}
.pl-de[hidden] { display: none; }
.pl-de:disabled { opacity: .35; cursor: default; }
.pl-de svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pl-de svg circle { fill: currentColor; stroke: none; }
/* Sous 16 px, Safari zoome au focus d'un champ. */
.pl-ligne input[type="text"], .pl-champs input[type="text"] { width: 100%; font-size: 1.6rem; min-height: 4.4rem; }
.pl-choix { border: 0; padding: 0; margin: .8rem 0 0; min-width: 0; }
.pl-ligne__petit { display: block; font-size: 1.3rem; opacity: .8; margin-bottom: .4rem; padding: 0; }
.pl-choix__liste { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; }
.pl-choix label {
  display: block; aspect-ratio: 1; min-height: 4.4rem; padding: .3rem; cursor: pointer; background-color: var(--pl-planche);
  border: .2rem solid rgba(var(--color-foreground), .15); border-radius: .8rem;
}
.pl-choix label svg { display: block; width: 100%; height: 100%; }
.pl-idees { margin-top: .6rem; }
.pl-idees[hidden] { display: none; }
.pl-idees { display: flex; flex-wrap: wrap; gap: .6rem; }
.pl-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;
}
.pl-idees button:hover { border-color: rgb(var(--color-foreground)); }