/* ═══════════════════════════ Ce qu'ils nous ont laissé : l'arbre d'une famille ═══════════════════════════
 *
 * L'arbre d'une famille, un prénom et une ligne par personne. Servie **seulement** sur sa fiche
 * (`views/product-affiche.liquid`). Le dessin (`public/js/arbre-calcul.mjs`) ne porte que des classes :
 * tout ce qui se voit est ici.
 *
 * ── Quatre styles, quatre tracés (pas quatre palettes) ──
 *
 * - **Botanique** : une planche de vieux traité. Papier sépia, encre brune, Cormorant, la courbe et des
 *   feuilles ; les personnes sont des étiquettes de spécimen.
 * - **Aquarelle** : feuilles vert tendre et ocre, branches brun doux, les prénoms à la plume (Damion).
 * - **Schéma** : l'angle droit. Blanc, noir, Inter, des cartes à filet fin — un organigramme de famille.
 * - **Constellation** : bleu nuit, un trait doré entre des étoiles, Marcellus. Le décor d'étoiles n'est pas
 *   un vrai ciel (la FAQ le dit).
 * La géométrie des branches et le décor viennent du style, rejoués par le même module que le serveur ;
 * ici, couleurs et polices.
 *
 * ── Les couleurs ──
 *
 * **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 `.ag` exprès, pour que les échantillons du formulaire se
 * colorent avec les mêmes variables.
 * --g-fond : le papier ; --g-encre : le titre et les prénoms ; --g-doux : ce qui est secondaire (une ligne) ;
 * --g-carte / --g-bord : une carte et son contour ; --g-branche : le tracé ; --g-feuille-a / -b : les deux
 * verts ; --g-plaque / --g-plaque-texte : la carte des racines ; --g-etoile : le décor de la Constellation.
 * **Contrastes mesurés** (`tests/arbre.test.js`) : prénoms ≥ 7 sur leur carte, ligne ≥ 4,5, racines ≥ 4,5.
 */
@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;
}

[data-style="Botanique"] {
  --g-fond: #efe5cf; --g-encre: #3a2e22; --g-doux: #6b5a47; --g-carte: #f8f1e0; --g-bord: #3a2e22; --g-branche: #3a2e22;
  --g-feuille-a: #8aa05f; --g-feuille-b: #bda55c; --g-plaque: #3a2e22; --g-plaque-texte: #f3ead6; --g-etoile: #3a2e22;
}
[data-style="Aquarelle"] {
  --g-fond: #fbf8f0; --g-encre: #2f3b2c; --g-doux: #56654f; --g-carte: #ffffff; --g-bord: #cfd8c2; --g-branche: #7a5b43;
  --g-feuille-a: #86b681; --g-feuille-b: #dcaa4a; --g-plaque: #4f7a4b; --g-plaque-texte: #ffffff; --g-etoile: #7a5b43;
}
[data-style="Schéma"] {
  --g-fond: #ffffff; --g-encre: #111111; --g-doux: #4d4d4d; --g-carte: #ffffff; --g-bord: #111111; --g-branche: #111111;
  --g-feuille-a: #111111; --g-feuille-b: #111111; --g-plaque: #111111; --g-plaque-texte: #ffffff; --g-etoile: #111111;
}
[data-style="Constellation"] {
  --g-fond: #0f1b36; --g-encre: #f4eddc; --g-doux: #c9c2ae; --g-carte: #16264a; --g-bord: #e2b861; --g-branche: #e2b861;
  --g-feuille-a: #e2b861; --g-feuille-b: #e2b861; --g-plaque: #e2b861; --g-plaque-texte: #0f1b36; --g-etoile: #f4eddc;
}

/* ── L'affiche ──
 *
 * Tout est en `cqw` : l'affiche se lit sur sa propre largeur. Le cadre de l'arbre garde le rapport de son
 * dessin (100 × 104) ; les cartes sont placées en pour cent de ce cadre par le calcul, donc rien ne se mesure
 * ici. `--tt` resserre le titre quand il ne tient pas sur deux lignes (l'éditeur le pose). */
.ag {
  --fond: var(--g-fond); --texte: var(--g-encre); --tt: var(--ag-tt, 1);
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2.4cqw;
  padding: 6cqw 6.5cqw 5cqw; line-height: 1.2; font-family: "Inter", system-ui, sans-serif;
}
.ag :where(p, ol) { margin: 0; padding: 0; }
.ag [hidden] { display: none !important; }
/* L'exemple est montré en pleine couleur (Fred, 8 oct. 2026) ; la classe reste, la fabrication le masque. */
.ag .affiche-exemple { opacity: 1; }

.ag__tete { display: grid; gap: 1cqw; text-align: center; }
.ag__kicker { font-size: 1.8cqw; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--g-doux); }
.ag__titre { font-size: calc(7.4cqw * var(--tt)); line-height: 1.05; overflow-wrap: anywhere; text-wrap: balance; }
.ag__sous { font-size: 2.7cqw; color: var(--g-doux); overflow-wrap: anywhere; }

.ag__arbre { position: relative; display: block; width: 100%; aspect-ratio: 100 / 104; flex: none; }
.ag__dessin, .ag__noeuds { position: absolute; inset: 0; }
.ag__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ag__svg .branches path { fill: none; stroke: var(--g-branche); stroke-linecap: round; stroke-linejoin: round; }
.ag__svg .b1 { stroke-width: 1; }
.ag__svg .b2 { stroke-width: .6; }
.ag__svg .tronc { fill: var(--g-branche); stroke: var(--g-branche); stroke-width: .2; }
.ag__svg .feuille { fill: var(--g-feuille-a); }
.ag__svg .feuilles .feuille:nth-child(even) { fill: var(--g-feuille-b); }
.ag__svg .etoile { fill: var(--g-etoile); opacity: .65; }
.ag__svg .etoile.grande { opacity: 1; }

/* Une carte : un prénom, une ligne. Posée par le calcul, au centre de son point. */
.ag__noeud {
  position: absolute; transform: translate(-50%, -50%); width: 16%; box-sizing: border-box; padding: .6cqw .5cqw .7cqw;
  text-align: center; background: var(--g-carte); color: var(--g-encre); border: .15cqw solid var(--g-bord);
}
.ag__noeud .n { display: block; font-size: calc(1.85cqw * var(--ag-f, 1)); line-height: 1.1; font-weight: 700; overflow-wrap: anywhere; }
.ag__noeud .l { display: block; margin-top: .3cqw; font-size: calc(1.45cqw * var(--ag-f, 1)); line-height: 1.2; color: var(--g-doux); overflow-wrap: anywhere; }
/* Les racines : une plaque, plus large, au pied du tronc. */
.ag__noeud[data-rang="racine"] { width: 27%; background: var(--g-plaque); color: var(--g-plaque-texte); border-color: var(--g-plaque); }
.ag__noeud[data-rang="racine"] .n { font-size: 2.3cqw; }
.ag__noeud[data-rang="racine"] .l { font-size: 1.6cqw; color: var(--g-plaque-texte); }
/* Un enfant dont les petits-enfants montent d'un cran. */
.ag__noeud[data-rang="enfant"] .n { font-size: calc(2cqw * var(--ag-f, 1)); }

/* La photo d'une personne : un rond au-dessus du prénom. `--ag-m` est son diamètre en unités du dessin (le
 * calcul le réduit quand l'arbre s'étoffe), et une unité fait .87cqw : l'arbre occupe 87 % de la largeur de
 * l'affiche. Le carré est déjà pris par le navigateur à l'envoi ; `cover` rattrape une photo qui ne l'est pas. */
.ag__noeud .ph {
  display: block; box-sizing: border-box; width: calc(var(--ag-m, 0) * .87cqw); aspect-ratio: 1; margin: .15cqw auto .5cqw;
  border-radius: 50%; object-fit: cover; object-position: 50% 30%; background: var(--g-carte); border: .25cqw solid var(--g-bord);
}
.ag__noeud[data-rang="racine"] .ph { border-color: var(--g-plaque-texte); }
/* Le rond vide : en pointillé, une tête et des épaules tracées avec la couleur du contour, estompé comme tout
 * exemple (`.affiche-exemple`) et absent à l'impression. Un clic ouvre le choix de fichier de la personne. */
.ag__noeud .ph--vide {
  position: relative; border-style: dashed; cursor: pointer; pointer-events: auto; opacity: .6;
  background: radial-gradient(circle at 50% 36%, var(--g-bord) 0 17%, transparent 18%), radial-gradient(ellipse at 50% 108%, var(--g-bord) 0 38%, transparent 39%), var(--g-carte);
}
/* Un rond de quelques millimètres ne se vise pas au doigt : la zone de toucher déborde de 44 px au moins. */
.ag__noeud .ph--vide::after { content: ""; position: absolute; inset: -1.6rem; border-radius: 50%; }
/* Dans l'aperçu réduit du téléphone, la scène laisse passer le toucher : le rond n'y est qu'un dessin. */
.affiche__scene--mini .ph--vide, .affiche__scene--mini .ph--vide::after { pointer-events: none; }
.ag__noeud[data-rang="racine"] .ph--vide { border-color: var(--g-plaque-texte); background: radial-gradient(circle at 50% 36%, var(--g-plaque-texte) 0 17%, transparent 18%), radial-gradient(ellipse at 50% 108%, var(--g-plaque-texte) 0 38%, transparent 39%), var(--g-plaque); }

/* ── Botanique ── */
.ag[data-style="Botanique"] .ag__tete { padding-bottom: 1.4cqw; border-bottom: .25cqw solid var(--g-encre); }
.ag[data-style="Botanique"] .ag__titre { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ag[data-style="Botanique"] .ag__sous { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-size: 3.2cqw; }
.ag[data-style="Botanique"] .ag__noeud { font-family: "Cormorant Garamond", Georgia, serif; border-radius: .3cqw; box-shadow: .35cqw .35cqw 0 var(--g-bord); }
.ag[data-style="Botanique"] .ag__noeud .n { font-weight: 700; font-size: calc(2.1cqw * var(--ag-f, 1)); }
.ag[data-style="Botanique"] .ag__noeud .l { font-style: italic; font-weight: 500; font-size: calc(1.75cqw * var(--ag-f, 1)); }
.ag[data-style="Botanique"] .ag__svg .b1 { stroke-width: 1.15; }
.ag[data-style="Botanique"] .ag__svg .feuille { stroke: var(--g-branche); stroke-width: .12; }

/* ── Aquarelle ── */
.ag[data-style="Aquarelle"] .ag__titre { font-family: "Damion", "Sacramento", cursive; font-weight: 400; font-size: calc(8.6cqw * var(--tt)); }
.ag[data-style="Aquarelle"] .ag__sous { font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 300; letter-spacing: .12em; text-transform: uppercase; font-size: 2.4cqw; }
.ag[data-style="Aquarelle"] .ag__kicker { font-family: "Josefin Sans", system-ui, sans-serif; color: var(--g-plaque); }
.ag[data-style="Aquarelle"] .ag__noeud { border: .2cqw solid var(--g-bord); border-radius: 1.6cqw 1.6cqw 1.6cqw .4cqw; }
.ag[data-style="Aquarelle"] .ag__noeud .n { font-family: "Damion", "Sacramento", cursive; font-weight: 400; font-size: calc(2.15cqw * var(--ag-f, 1)); }
.ag[data-style="Aquarelle"] .ag__noeud .l { font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 400; }
.ag[data-style="Aquarelle"] .ag__noeud[data-rang="racine"] { border-radius: 1.6cqw; }
.ag[data-style="Aquarelle"] .ag__noeud[data-rang="racine"] .n { font-size: 2.5cqw; }
.ag[data-style="Aquarelle"] .ag__svg .b1 { stroke-width: 1.6; }
.ag[data-style="Aquarelle"] .ag__svg .b2 { stroke-width: 1; }
.ag[data-style="Aquarelle"] .ag__svg .feuille { opacity: .78; }

/* ── Schéma ── */
.ag[data-style="Schéma"] .ag__titre { font-weight: 800; letter-spacing: -.02em; }
.ag[data-style="Schéma"] .ag__kicker { color: var(--g-encre); }
.ag[data-style="Schéma"] .ag__noeud { border-width: .2cqw; }
.ag[data-style="Schéma"] .ag__svg .b1, .ag[data-style="Schéma"] .ag__svg .b2 { stroke-width: .35; stroke-linecap: square; stroke-linejoin: miter; }
.ag[data-style="Schéma"] .ag__svg .tronc { fill: none; stroke-width: .35; }

/* ── Constellation ── */
.ag[data-style="Constellation"] { background-image: radial-gradient(ellipse at 50% 55%, rgba(255, 255, 255, .07), transparent 65%); }
.ag[data-style="Constellation"] .ag__titre { font-family: "Marcellus", Georgia, serif; font-weight: 400; letter-spacing: .04em; }
.ag[data-style="Constellation"] .ag__kicker { color: var(--g-bord); }
.ag[data-style="Constellation"] .ag__noeud { font-family: "Marcellus", Georgia, serif; border-radius: 1cqw; }
.ag[data-style="Constellation"] .ag__noeud .n { font-weight: 400; font-size: calc(1.8cqw * var(--ag-f, 1)); letter-spacing: .02em; }
.ag[data-style="Constellation"] .ag__noeud .l { font-family: "Josefin Sans", system-ui, sans-serif; font-weight: 300; }
.ag[data-style="Constellation"] .ag__noeud::before {
  content: ""; display: block; width: 1.2cqw; height: 1.2cqw; margin: 0 auto .2cqw; background: var(--g-bord);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.ag[data-style="Constellation"] .ag__noeud[data-photo]::before { display: none; }
.ag[data-style="Constellation"] .ag__noeud[data-rang="racine"]::before { background: var(--g-plaque-texte); }
.ag[data-style="Constellation"] .ag__svg .branches path { stroke-width: .3; stroke-dasharray: 1 1.1; }
.ag[data-style="Constellation"] .ag__svg .tronc { fill: none; stroke-width: .3; stroke-dasharray: 1 1.1; }

/* ── Le formulaire ── */
.ag-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.ag-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ag-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;
}
.ag-styles label small { font-weight: 400; font-size: 1.2rem; opacity: .8; }
.ag-styles input:checked + label { border-color: rgb(var(--color-foreground)); }
.ag-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
/* L'échantillon : le style tel qu'il est, l'arbre d'exemple en miniature. L'enveloppe est le conteneur dont les
 * `cqw` du dessin se mesurent, comme `.affiche__cadre` pour l'affiche : tout rapetisse ensemble. */
.ag-echantillon {
  display: block; container-type: inline-size; position: relative; width: 100%; max-width: 15rem; aspect-ratio: 3 / 4;
  background: var(--g-fond); border-radius: .4rem; overflow: hidden; pointer-events: none;
}
.ag-echantillon .ag { position: absolute; inset: 0; justify-content: flex-start; font-size: 1rem; color: var(--g-encre); }
.ag-bloc { padding: 0; border: 0; margin: 0; min-width: 0; display: grid; gap: .8rem; }
.ag-bloc legend { font-weight: 600; padding: 0; margin-bottom: .4rem; }
.ag-bloc legend small { font-weight: 400; }
.ag-enfants { display: grid; gap: 1.6rem; }
.ag-personne__titre { margin: 0 0 .3rem; font-size: 1.3rem; font-weight: 600; }
.ag-personne__champs { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: .8rem; }
.ag-personne__champs label { display: block; font-size: 1.3rem; margin-bottom: .3rem; }
.ag-personne__champs input { width: 100%; }
.ag-petits { display: grid; gap: .8rem; padding-left: 1.2rem; border-left: .2rem solid rgba(var(--color-foreground), .15); }
.ag-alerte { margin: 0; padding: 1rem 1.2rem; border-radius: .6rem; border: .15rem solid rgba(var(--rouge), .5); background: rgb(var(--rouge-fond)); color: rgb(var(--rouge)); font-weight: 600; font-size: 1.4rem; }
/* La photo d'une personne : un petit rond, un bouton, « Retirer ». Estompée tant que le prénom manque. */
.ag-photo { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: .6rem; }
.ag-photo[hidden] { display: none; }
.ag-photo--envoi .ag-photo__rond { opacity: .55; }
.ag-photo__rond { display: block; width: 4.8rem; height: 4.8rem; flex: none; border-radius: 50%; background: rgba(var(--color-foreground), .08); overflow: hidden; }
.ag-photo__rond img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ag-photo__bouton { min-height: 4.4rem; margin: 0; padding: 0 1.8rem; }
.ag-photo__retirer { min-height: 4.4rem; }
.ag-photo__retour { flex-basis: 100%; font-size: 1.3rem; }
.ag-photo__retour:empty { display: none; }
.ag-aide-photos { margin: 0; }
.ag-pistes { font-size: 1.4rem; margin-top: .4rem; }
.ag-pistes summary { cursor: pointer; font-weight: 600; min-height: 4.4rem; display: flex; align-items: center; }
.ag-pistes ol { margin: .4rem 0 0; padding-left: 2.2rem; display: grid; gap: .4rem; }
@media (min-width: 750px) { .ag-styles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }