/* « Photos dans les lettres » (30 oct. 2026) : un mot dont chaque lettre est découpée dans une photo du client.
 *
 * Quatre styles, un seul balisage (`[data-style]`) : le papier, l'encre des textes et les tons des cases vides.
 * Les photos gardent leurs couleurs ; seul le choix « noir et blanc » les change, par un filtre que la
 * fabrication rejoue. Pinyon Script (l'écriture de l'accroche et de la signature) est déjà déclarée par `theme.css` ;
 * le reste est Montserrat, servie partout. Rien à télécharger de plus.
 *
 * **Les couleurs sont celles du produit** (point 6 quater) et vivent ici, en tête, jamais plus bas : un test
 * refuse toute valeur littérale après la première règle `.lt`. */

[data-style] { --l-ombre: 20, 16, 12; }
[data-style="Blanc"] {
  --l-blanc: #ffffff;
  --l-fond: #ffffff; --l-encre: #1b1612; --l-doux: #6a625a;
  --l-ton-0: #ece8e1; --l-ton-1: #dfd9cf; --l-ton-2: #f3efe8; --l-ton-3: #d8d2c6; --l-ton-4: #e8e2d8; --l-ton-5: #e2dccf;
}
[data-style="Écru"] {
  --l-blanc: #f6efe2;
  --l-fond: #f6efe2; --l-encre: #3a2c20; --l-doux: #75654f;
  --l-ton-0: #e8dcc6; --l-ton-1: #dccdb3; --l-ton-2: #efe4cf; --l-ton-3: #d4c4a8; --l-ton-4: #e3d6bd; --l-ton-5: #dacab0;
}
[data-style="Sauge"] {
  --l-blanc: #e8eee4;
  --l-fond: #e8eee4; --l-encre: #2c3a2a; --l-doux: #51634d;
  --l-ton-0: #d3dccd; --l-ton-1: #c4d0bd; --l-ton-2: #dde5d7; --l-ton-3: #b9c7b1; --l-ton-4: #ccd8c5; --l-ton-5: #c0cdb8;
}
[data-style="Nuit"] {
  --l-blanc: #f3eddf;
  --l-fond: #13233b; --l-encre: #f3eddf; --l-doux: #c3bba8;
  --l-ton-0: #243a5a; --l-ton-1: #2d4668; --l-ton-2: #1d3150; --l-ton-3: #34506f; --l-ton-4: #283f5f; --l-ton-5: #30486a;
}

/* ── L'affiche ──
 *
 * Tout est en `cqw` : l'affiche se lit sur sa propre largeur. Le mot garde le rapport de son dessin
 * (`--lt-ratio`) et prend la largeur que le serveur lui donne (`--lt-w`) : large pour une bande, borné par la
 * hauteur pour un bloc. Le texte autour se resserre (`--lt-e-*`, posé par l'éditeur) plutôt que de passer à la
 * ligne ou de déborder. */
.lt {
  --fond: var(--l-fond); --texte: var(--l-encre);
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.6cqw;
  padding: 6cqw 5cqw; line-height: 1.2; font-family: "Montserrat", system-ui, sans-serif;
}
.lt :where(p) { margin: 0; padding: 0; }
.lt [hidden] { display: none !important; }
/* L'exemple est montré en pleine couleur ; la classe reste, la fabrication le masque. */
.lt .affiche-exemple { opacity: 1; }

.lt__avant, .lt__apres, .lt__signature {
  width: 100%; text-align: center; white-space: nowrap; font-family: "Pinyon Script", "Sacramento", cursive; font-weight: 400; line-height: 1.25; color: var(--l-encre);
}
.lt__avant { font-size: calc(9.5cqw * var(--lt-e-avant, 1)); }
.lt__apres { font-size: calc(9.5cqw * var(--lt-e-apres, 1)); }
.lt__signature { margin-top: 1.6cqw; font-size: calc(6.4cqw * var(--lt-e-signature, 1)); }
.lt__ligne {
  width: 100%; text-align: center; white-space: nowrap; font-size: calc(2.3cqw * var(--lt-e-ligne, 1)); font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: var(--l-doux);
}

/* Le mot : une boîte au rapport du dessin, où chaque case de photo est découpée dans les lettres. Les cadres
 * se superposent tous sur la boîte entière — c'est leur `clip-path` qui les sépare, et c'est aussi lui qui
 * décide où un toucher tombe. */
.lt__mot { position: relative; flex: none; width: var(--lt-w); aspect-ratio: var(--lt-ratio); }
.lt__cadres { position: absolute; inset: 0; }
.lt__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.lt__c { position: absolute; inset: 0; }
.lt__c img, .lt__fond { position: absolute; display: block; max-width: none; object-fit: cover; object-position: 50% 32%; }
.lt[data-nb="Oui"] .lt__c img { filter: grayscale(1); }

/* La colonne (`data-mise="colonne"`) : le contraire des autres. Une mosaïque de photos entières, chacune posée à sa place
 * (en pour cent de la boîte, avec un trait de papier entre deux), et par-dessus **les lettres claires** (`--l-blanc` : la couleur du
 * papier sur les trois styles clairs, le crème de l'encre sur Nuit — des lettres sombres sur des photos ne se lisent pas) : elles se lisent comme évidées dans la photo. Un seul dessin pour toutes les lettres, normalisé sur la boîte entière
 * (`preserveAspectRatio="none"` rend ses proportions à la boîte). Une ombre légère les détache d'un ciel clair ; le dessin
 * ne reçoit jamais le toucher, c'est la case dessous qui le reçoit. */
.lt__c--neg { inset: auto; clip-path: none; }
.lt__c--neg img, .lt__c--neg .lt__fond { position: absolute; inset: .5cqw; width: calc(100% - 1cqw); height: calc(100% - 1cqw); }
/* Le modèle à remplir : des cases vides un peu plus sombres que celles des autres mots, sans quoi les lettres claires s'y perdent. */
.lt__c--neg.lt__c--vide .lt__fond { filter: brightness(.74); }
.lt__blanc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: var(--l-blanc); filter: drop-shadow(0 .2cqw .5cqw rgba(var(--l-ombre), .3)); }

/* Les cases vides : un ton par lettre, comme des photos qui attendent. Elles se cliquent (à l'écran seulement)
 * pour déposer une photo — un « + » dessiné dans une lettre tomberait dans un creux du « A » ou du « M » —,
 * et disparaissent à la fabrication avec tout exemple. */
.lt__fond { background: var(--l-ton-0); }
.lt__c--vide[data-ton="1"] .lt__fond { background: var(--l-ton-1); }
.lt__c--vide[data-ton="2"] .lt__fond { background: var(--l-ton-2); }
.lt__c--vide[data-ton="3"] .lt__fond { background: var(--l-ton-3); }
.lt__c--vide[data-ton="4"] .lt__fond { background: var(--l-ton-4); }
.lt__c--vide[data-ton="5"] .lt__fond { background: var(--l-ton-5); }
.lt__c--invite { cursor: pointer; }
/* Dans l'aperçu réduit du téléphone, la scène laisse passer le toucher : les cases n'y sont qu'un dessin. */
.affiche__scene--mini .lt__c--invite { pointer-events: none; }

/* ── Le formulaire ── */
.lt-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.lt-styles input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lt-styles label {
  display: flex; flex-direction: column; align-items: center; gap: .5rem; cursor: pointer; margin: 0; min-height: 4.4rem;
  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;
}
.lt-styles input:checked + label { border-color: rgb(var(--color-foreground)); }
.lt-styles input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
/* L'échantillon : le papier et un mot en trois cases, aux couleurs du style. */
.lt-echantillon {
  display: block; width: 100%; max-width: 12rem; aspect-ratio: 3 / 2; border-radius: .4rem; overflow: hidden; pointer-events: none;
  background: linear-gradient(90deg, var(--l-ton-0) 0 30%, var(--l-fond) 30% 35%, var(--l-ton-1) 35% 65%, var(--l-fond) 65% 70%, var(--l-ton-3) 70% 100%) center / 80% 40% no-repeat, var(--l-fond);
  border: .1rem solid rgba(var(--color-foreground), .2);
}
.lt-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; }
.lt-mot-champ { text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }

/* Les photos déposées : une rangée de vignettes dans l'ordre des lettres. L'ordre décide de la photo de
 * chaque lettre ; une vignette se retire, avance ou recule. Cibles de 44 px. */
.lt-photos { padding: 0; border: 0; margin: 0; min-width: 0; display: grid; gap: .8rem; }
.lt-photos legend { font-weight: 600; padding: 0; margin-bottom: .4rem; }
.lt-photos legend small { font-weight: 400; }
.lt-photos__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr)); gap: .8rem; }
.lt-photos__liste[hidden] { display: none; }
.lt-vignette { position: relative; display: grid; gap: .4rem; }
.lt-vignette__cadre { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: .6rem; background: rgba(var(--color-foreground), .08); }
.lt-vignette__cadre img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.lt-vignette--envoi .lt-vignette__cadre { opacity: .55; }
.lt-vignette__rang { position: absolute; top: .4rem; left: .4rem; min-width: 2.2rem; height: 2.2rem; padding: 0 .4rem; border-radius: 1.1rem; background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); font-size: 1.2rem; font-weight: 700; line-height: 2.2rem; text-align: center; }
.lt-vignette__actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.lt-vignette__actions button { min-height: 4.4rem; padding: 0; border: .1rem solid rgba(var(--color-foreground), .25); border-radius: .6rem; background: transparent; color: inherit; font-size: 1.6rem; cursor: pointer; }
.lt-vignette__actions button[disabled] { opacity: .35; cursor: default; }
.lt-photos__bouton { width: 100%; min-height: 4.8rem; margin: 0; padding: 0 1.8rem; cursor: pointer; box-sizing: border-box; }
.lt-photos__bouton[hidden] { display: none; }
.lt-photos__retour:empty { display: none; }
.lt-nb { display: flex; gap: .8rem; }
.lt-nb input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lt-nb label { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 4.4rem; margin: 0; padding: .6rem 1rem; cursor: pointer; text-align: center; font-size: 1.4rem; font-weight: 600; border: .15rem solid rgba(var(--color-foreground), .15); border-radius: .8rem; }
.lt-nb input:checked + label { border-color: rgb(var(--color-foreground)); }
.lt-nb input:focus-visible + label { outline: .2rem solid rgb(var(--bleu-focus)); outline-offset: .2rem; }
.lt-pistes { font-size: 1.4rem; margin-top: .4rem; }
.lt-pistes summary { cursor: pointer; font-weight: 600; min-height: 4.4rem; display: flex; align-items: center; }
.lt-pistes ol { margin: .4rem 0 0; padding-left: 2.2rem; display: grid; gap: .4rem; }
@media (min-width: 750px) { .lt-styles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }