/* Droits Divins · design system 2 · composants
   Préfixe .dd-. Chrome plat : ni biseau, ni bois, ni badge brillant.
   Le tableau peint occupe l'écran ; barre haute sombre ; frise des lieux en
   bas ; panneaux papier pour la décision du moment.
   Un seul .dd-btn--or par écran. Aucune marque « IA » sur une personne. */

@import url("tokens.css");
@import url("tournois.css");
@import url("credit.css");
@import url("repli.css");

/* ========================================================================== */
/* Base                                                                       */
/* ========================================================================== */

.dd-app {
  font: var(--dd-t-corps) / var(--dd-interligne) var(--dd-font-ui);
  color: var(--dd-texte);
  background: var(--dd-fond);
  -webkit-font-smoothing: antialiased;
}
.dd-app *, .dd-app *::before, .dd-app *::after { box-sizing: border-box; }
.dd-app img { display: block; max-width: 100%; }
.dd-app :focus-visible { outline: none; box-shadow: var(--dd-focus); }

.dd-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

/* Textes : uniquement les pas de l'échelle */
.dd-titre-ecran { font: 500 var(--dd-t-titre) / var(--dd-interligne-titre) var(--dd-font-titre); color: var(--dd-texte-fort); margin: 0; text-wrap: balance; }
.dd-affiche { font: 400 var(--dd-t-affiche) / var(--dd-interligne-titre) var(--dd-font-affiche); margin: 0; text-wrap: balance; }
.dd-titre-boite { font: 600 var(--dd-t-titre-boite) / 1.2 var(--dd-font-titre); color: var(--dd-texte-fort); margin: 0; }
.dd-titre-carte { font: 600 var(--dd-t-fort) / 1.25 var(--dd-font-titre); color: var(--dd-texte-fort); margin: 0; }
.dd-surtitre { font: 700 var(--dd-t-note) / 1.3 var(--dd-font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--dd-texte-muet); margin: 0; }
.dd-accroche { font: 400 var(--dd-t-fort) / var(--dd-interligne) var(--dd-font-titre); margin: 0; }
.dd-texte { font-size: var(--dd-t-corps); margin: 0; }
.dd-petit { font-size: var(--dd-t-petit); margin: 0; }
.dd-note { font-size: var(--dd-t-note); color: var(--dd-texte-muet); margin: 0; }
.dd-chiffre { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.dd-lieu-nom { font-family: var(--dd-font-titre); font-weight: 600; }
.dd-citation { font: italic 400 var(--dd-t-fort) / 1.4 var(--dd-font-titre); margin: 0; }

/* ========================================================================== */
/* Boutons                                                                    */
/* ========================================================================== */

.dd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dd-s2);
  min-height: var(--dd-champ); padding: 0 var(--dd-s4);
  border: 1px solid transparent; border-radius: var(--dd-r-m);
  font: 700 var(--dd-t-corps) / 1 var(--dd-font-ui); white-space: nowrap;
  color: inherit; background: none; cursor: pointer; text-decoration: none;
  transition: background var(--dd-vite) ease, border-color var(--dd-vite) ease, color var(--dd-vite) ease;
}
.dd-btn:active:not(:disabled) { transform: translateY(1px); }
.dd-btn:disabled, .dd-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* L'action du moment : un seul par écran */
.dd-btn--or { min-height: var(--dd-bouton); padding: 0 var(--dd-s5); font-size: var(--dd-t-fort); background: var(--dd-or); color: var(--dd-encre); border-color: var(--dd-or); }
.dd-btn--or:hover:not(:disabled) { background: var(--dd-or-clair); border-color: var(--dd-or-clair); }
.dd-btn--contour { color: var(--dd-indigo); border-color: rgba(30, 58, 95, .45); background: transparent; }
.dd-btn--contour:hover:not(:disabled) { background: rgba(30, 58, 95, .07); border-color: var(--dd-indigo); }
[data-theme="nuit"] .dd-btn--contour, .dd-sombre .dd-btn--contour, .dd-panneau--sombre .dd-btn--contour { color: var(--dd-sombre-texte); border-color: rgba(239, 232, 214, .45); }
/* Urgence et irréversible seulement */
.dd-btn--alerte { background: var(--dd-cramoisi); color: #fff; border-color: var(--dd-cramoisi); }
.dd-btn--alerte:hover:not(:disabled) { background: var(--dd-cramoisi-fonce); border-color: var(--dd-cramoisi-fonce); }
.dd-btn--lien { min-height: auto; padding: 0; border: 0; font-weight: 700; color: var(--dd-indigo); text-decoration: underline; text-underline-offset: 3px; }
[data-theme="nuit"] .dd-btn--lien, .dd-sombre .dd-btn--lien, .dd-panneau--sombre .dd-btn--lien { color: var(--dd-or-clair); }
.dd-btn--petit { min-height: var(--dd-bouton-petit); padding: 0 var(--dd-s3); font-size: var(--dd-t-petit); }
.dd-btn--plein { width: 100%; }

/* ========================================================================== */
/* Puces, niveaux, verrous (le badge des tournois : tournois.css)             */
/* ========================================================================== */

.dd-puce {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px;
  border: 1px solid var(--dd-filet); border-radius: var(--dd-pill);
  font-size: var(--dd-t-note); font-weight: 700; color: var(--dd-texte); background: var(--dd-surface); white-space: nowrap;
}
.dd-puce--or { border-color: var(--dd-or); background: var(--dd-or-pale); color: var(--dd-encre); }
.dd-puce--indigo { border-color: var(--dd-indigo); background: var(--dd-indigo); color: var(--dd-creme); }
.dd-puce--alerte { border-color: var(--dd-cramoisi); background: var(--dd-cramoisi); color: #fff; }

.dd-niveau { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--dd-sombre-muet); border-radius: var(--dd-pill); font-size: var(--dd-t-note); font-weight: 700; white-space: nowrap; }
.dd-niveau b { color: var(--dd-or-clair); }
/* Le titre du niveau (« · Déracinée », BarreHaute.niveau) se tait sur écran étroit : le chiffre reste, le titre se lit au carnet */
@media (max-width: 760px) { .dd-niveau__plus { display: none; } }

/* Un élément du niveau suivant reste visible et dit ce qu'il ouvrira */
.dd-verrou { position: relative; opacity: .55; }
.dd-verrou::after {
  content: attr(data-niveau); position: absolute; top: 6px; right: 8px; opacity: 1;
  font-size: var(--dd-t-note); font-weight: 700; padding: 0 6px; border-radius: var(--dd-pill);
  border: 1px solid var(--dd-encre-douce); background: var(--dd-papier); color: var(--dd-encre-douce);
}

/* ========================================================================== */
/* Présence : un point, jamais un badge                                       */
/* ========================================================================== */

.dd-point { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dd-present); }
.dd-point--absent { background: var(--dd-absent); }
.dd-presents { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* Fil des connexions : une phrase à la fois, qui s'efface avant la suivante.
   --n : nombre de phrases (4 par défaut). */
.dd-live { position: relative; width: 10rem; height: 1.3em; overflow: hidden; font-style: italic; color: var(--dd-sombre-muet); }
.dd-live > span { position: absolute; inset: 0 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; animation: dd-live 16s infinite; }
.dd-live > span:nth-child(2) { animation-delay: 4s; }
.dd-live > span:nth-child(3) { animation-delay: 8s; }
.dd-live > span:nth-child(4) { animation-delay: 12s; }
@keyframes dd-live { 0% { opacity: 0; } 6% { opacity: 1; } 20% { opacity: 1; } 25%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .dd-live > span { animation: none; }
  .dd-live > span:first-child { opacity: 1; }
}

/* ========================================================================== */
/* Médaillons et personnes                                                    */
/* ========================================================================== */

.dd-medaillon {
  position: relative; flex: none; width: var(--dd-med-m); height: var(--dd-med-m);
  border-radius: 50%; border: 2px solid var(--dd-ocre); background: var(--dd-papier-2);
}
.dd-medaillon > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.dd-medaillon > .dd-point { position: absolute; right: -1px; bottom: -1px; box-shadow: 0 0 0 2px var(--dd-surface); }
.dd-medaillon--s { width: var(--dd-med-s); height: var(--dd-med-s); border-width: 1px; }
.dd-medaillon--l { width: var(--dd-med-l); height: var(--dd-med-l); }
.dd-medaillon--xl { width: var(--dd-med-xl); height: var(--dd-med-xl); border-width: 3px; }
.dd-medaillon--l > .dd-point, .dd-medaillon--xl > .dd-point { width: 12px; height: 12px; right: 4px; bottom: 4px; }
.dd-medaillon > .dd-point--dedans { right: 12%; bottom: 12%; width: max(6px, 20%); height: max(6px, 20%); box-shadow: 0 0 0 1.5px var(--dd-surface); }
.dd-medaillon--libre { border-style: dashed; background: transparent; }
.dd-medaillons { display: flex; }
.dd-medaillons > .dd-medaillon + .dd-medaillon { margin-left: -10px; }

/* Nom et métier : jamais « IA », « habitant », « PNJ » */
.dd-personne { display: flex; align-items: center; gap: var(--dd-s3); min-width: 0; }
.dd-personne__nom { font: 600 var(--dd-t-corps) / 1.2 var(--dd-font-titre); color: var(--dd-texte-fort); margin: 0; }
.dd-personne__metier { font-size: var(--dd-t-petit); color: var(--dd-texte-muet); margin: 0; }
.dd-personne__texte { min-width: 0; }

/* ========================================================================== */
/* Salle de taverne et croisées                                               */
/* ========================================================================== */

/* La grande salle (WF-28), à la manière de la fenêtre de 2015 : des tables de quatre places posées sur le décor,
   un visage par place prise, avec le nom et la dernière parole (bulle) ou ce que fait la personne. Une place est
   prise, libre (.is-libre), gardée pour quelqu'un (.is-gardee, le visage de qui la garde en coin) ou la tienne
   (.is-toi). Les places sont comptées : salle pleine, on attend au comptoir. Rien n'y dit qui joue et qui ne
   joue pas. La taille des visages suit la salle : poser container-type: size quand sa hauteur est fixée. */
.dd-salle { --place-base: clamp(44px, min(11cqh, 6.4cqw), 104px); --place: var(--place-base); container-type: inline-size; display: flex; flex-direction: column;
  gap: var(--dd-s3); width: 100%; min-width: 0; color: var(--dd-sombre-texte); }
.dd-salle__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--dd-s4); }
.dd-salle__titre { margin: 0; font: 600 var(--dd-t-titre-boite) / 1.2 var(--dd-font-titre); color: var(--dd-creme); text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
.dd-salle__compte { margin: 0; padding: 2px 10px; border-radius: var(--dd-pill); background: rgba(20, 15, 10, .78); font-size: var(--dd-t-petit); white-space: nowrap; }
.dd-salle__compte b { color: var(--dd-or-clair); }
.dd-salle__tables { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-around; gap: var(--dd-s3); }
.dd-salle__table, .dd-salle__comptoir { display: grid; gap: var(--dd-s2); min-width: 0; padding: var(--dd-s2) var(--dd-s3);
  border-radius: var(--dd-r-l); background: linear-gradient(90deg, rgba(20, 15, 10, .6), rgba(20, 15, 10, .32)); }
.dd-salle__nom { justify-self: start; display: inline-flex; align-items: baseline; gap: var(--dd-s2); margin: 0; padding: 1px 10px; border-radius: var(--dd-pill);
  background: rgba(20, 15, 10, .78); font: 700 var(--dd-t-petit) / 1.4 var(--dd-font-ui); color: var(--dd-creme); white-space: nowrap; }
.dd-salle__nom .dd-note { font-weight: 400; color: var(--dd-sombre-muet); }
.dd-salle__places { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--dd-s3); }
/* Le comptoir : qui sert (et toi, debout, quand la salle est pleine), puis le passage où l'on croise les gens */
.dd-salle__rang { display: flex; align-items: center; gap: var(--dd-s3); min-width: 0; }
.dd-salle__debout { flex: 3 1 0; min-width: 0; display: flex; align-items: center; gap: var(--dd-s3); list-style: none; margin: 0; padding: 0; }
.dd-salle__debout > .dd-place--hote { flex: 2 1 0; }
.dd-salle__debout > .is-toi { flex: 1 1 0; }
.dd-salle__passage { flex: 2 1 0; min-width: 0; min-height: var(--place); display: flex; align-items: center; }
.dd-place__texte .dd-btn--contour { color: var(--dd-sombre-texte); border-color: rgba(239, 232, 214, .55); background: rgba(20, 15, 10, .6); }
.dd-place__texte .dd-btn--contour:hover:not(:disabled) { background: rgba(20, 15, 10, .85); border-color: var(--dd-creme); }

/* Salle posée sur son décor (salle.scene, grand écran) : chaque groupe se tient sur son meuble peint, les places
   en grappe décalée autour de la table, plus petites au fond qu'au premier plan */
.dd-salle--scene.is-posee { position: relative; height: 100%; }
.is-posee .dd-salle__tables { display: contents; }
.is-posee [data-ancre] { position: absolute; left: 0; top: 0; width: max-content;
  --place: max(36px, calc(var(--place-base) * var(--prof, 1) * .76)); padding: 0; background: none; }
.is-posee .dd-salle__nom { opacity: .9; }
.is-posee .dd-salle__places { grid-template-columns: repeat(2, max-content); gap: calc(var(--place) * .18) calc(var(--place) * .45); }
.is-posee .dd-salle__places > li:nth-child(2) { margin-top: calc(var(--place) * .38); }
.is-posee .dd-salle__places > li:nth-child(3) { margin-left: calc(var(--place) * .7); margin-top: calc(var(--place) * -.12); }
.is-posee .dd-salle__places > li:nth-child(4) { margin-top: calc(var(--place) * .22); margin-left: calc(var(--place) * .25); }
.is-posee .dd-salle__places > li:nth-child(-n+2) .dd-medaillon { filter: brightness(.94); }
.is-posee .dd-place__texte { max-width: 9.5rem; }
.is-posee .dd-place__dit { font-size: var(--dd-t-note); }
.is-posee .dd-salle__rang, .is-posee .dd-salle__debout { flex-wrap: nowrap; }
.is-posee .dd-salle__debout > li { flex: none; }
.is-posee .dd-salle__debout > .is-toi { margin-top: calc(var(--place) * .45); }
.is-posee .dd-salle__allee .dd-salle__passage { min-height: 0; }
.dd-place { position: relative; min-width: 0; }
.dd-place__qui { display: flex; align-items: center; gap: var(--dd-s2); min-width: 0; border-radius: var(--dd-r-m); }
.dd-place__qui[role="button"] { cursor: pointer; }
.dd-place__qui:focus-visible { outline: 2px solid var(--dd-or-clair); outline-offset: 3px; }
.dd-place .dd-medaillon { width: var(--place); height: var(--place); border: 3px solid var(--dd-ocre); background: var(--dd-sombre-2); box-shadow: 0 4px 14px rgba(0, 0, 0, .55); }
.dd-place__qui[role="button"]:hover .dd-medaillon, .dd-place.is-ouverte .dd-medaillon { border-color: var(--dd-or-clair); }
.dd-place.is-toi .dd-medaillon { border-color: var(--dd-or-clair); box-shadow: 0 0 0 3px rgba(232, 197, 71, .3), 0 4px 14px rgba(0, 0, 0, .55); }
.dd-place .dd-medaillon--libre { border: 2px dashed rgba(239, 232, 214, .6); background: rgba(20, 15, 10, .55); box-shadow: none; }
/* Les places libres d'une table, en une ligne discrète (commun/salle.js) */
.dd-place--libres { display: flex; align-items: center; gap: var(--dd-s2); padding: 2px var(--dd-s2); border-radius: var(--dd-pill); background: rgba(20, 15, 10, .45); }
.dd-place--libres .dd-note { margin: 0; color: rgba(239, 232, 214, .78); }
.dd-place--libres .dd-btn--lien { min-height: 32px; color: var(--dd-or-clair); }
.dd-place__garde { position: absolute; right: -4px; bottom: -4px; width: 40%; height: 40%; border-radius: 50%; border: 2px solid var(--dd-ocre); overflow: hidden; background: var(--dd-sombre-2); }
.dd-place__garde > img { width: 100%; height: 100%; object-fit: cover; }
.dd-place__texte { display: grid; justify-items: start; gap: 3px; min-width: 0; }
.dd-place__nom { max-width: 100%; margin: 0; padding: 1px 8px; border-radius: var(--dd-pill); background: rgba(20, 15, 10, .8);
  font: 700 var(--dd-t-petit) / 1.35 var(--dd-font-ui); color: var(--dd-creme); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-place__fait { max-width: 100%; margin: 0; padding: 0 8px; font-size: var(--dd-t-note); line-height: 1.3; color: var(--dd-sombre-texte);
  text-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, .8); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* La bulle : dernière parole dite à la salle, la queue vers le visage */
.dd-place__bulle { position: relative; max-width: 100%; margin-left: 7px; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .4)); }
.dd-place__bulle::before { content: ""; position: absolute; left: -7px; top: 9px; border: 6px solid transparent; border-left: 0; border-right: 7px solid var(--dd-papier); }
.dd-place__dit { margin: 0; padding: 4px 10px; border-radius: var(--dd-r-m); background: var(--dd-papier); color: var(--dd-encre-douce);
  font-size: var(--dd-t-petit); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dd-place__bulle.is-neuve { animation: dd-bulle-neuve .5s var(--dd-courbe) both; }
@keyframes dd-bulle-neuve { from { opacity: 0; transform: translateX(-6px) scale(.96); } to { opacity: 1; transform: none; } }
.dd-place.is-arrivee .dd-medaillon { animation: dd-place-arrivee .6s var(--dd-courbe) both; }
@keyframes dd-place-arrivee { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
/* La carte d'une personne : offrir un verre, voir sa fiche, et ses gestes propres */
.dd-place__carte { position: absolute; z-index: 12; top: calc(100% + 6px); left: 0; width: 17rem; max-width: 80vw; display: grid; gap: var(--dd-s1);
  padding: var(--dd-s3); border: 1px solid var(--dd-filet-or); border-radius: var(--dd-r-m); background: var(--dd-papier); color: var(--dd-encre-douce); box-shadow: var(--dd-ombre-forte); }
.dd-place__carte[hidden] { display: none; }
/* La carte ouverte d'une personne passe devant les autres tables et leurs « T'asseoir » (cinquième passage, Victor) :
   chaque groupe posé sur le décor est son propre contexte d'empilement, celui de la carte ouverte monte au-dessus */
.dd-place.is-ouverte { z-index: 13; }
.dd-salle__table:has(.dd-place.is-ouverte), .dd-salle__comptoir:has(.dd-place.is-ouverte), .dd-salle__allee:has(.dd-place.is-ouverte) { position: relative; z-index: 30; }
/* Une personne présente qui a une quête pour toi (bible 32, section 8) : un point d'or à son nom, la quête dans sa carte */
.dd-place.has-quete .dd-place__nom::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--dd-or); box-shadow: 0 0 0 2px rgba(212, 160, 23, .35); vertical-align: middle; }
.dd-place__quete { padding: var(--dd-s2); border-left: 3px solid var(--dd-or); background: var(--dd-or-pale); border-radius: var(--dd-r-s); }
.dd-place__quete .dd-surtitre { color: var(--dd-encre-douce); }
.dd-place__quete .dd-petit { margin: 0; }
.dd-salle__parler { margin: 2px 0 0; color: var(--dd-sombre-muet); }
.dd-place__carte p { margin: 0; }
.dd-place__carte .dd-carte__actions { margin-top: var(--dd-s1); }
.dd-place.is-haut > .dd-place__carte { top: auto; bottom: calc(100% + 6px); }
.dd-place.is-droite > .dd-place__carte { left: auto; right: 0; }
/* Une salle haute montre trois lignes de parole ; une salle basse, une seule ; une salle étroite écrit plus petit */
@container (min-height: 620px) { .dd-place__dit, .dd-place__fait { -webkit-line-clamp: 3; } }
@container (max-width: 860px) {
  .dd-place__nom { padding: 1px 6px; font-size: var(--dd-t-note); }
  .dd-place__dit { padding: 3px 8px; font-size: var(--dd-t-note); }
}
@container (max-height: 480px) {
  .dd-salle { gap: var(--dd-s2); }
  .dd-salle__table, .dd-salle__comptoir { gap: var(--dd-s1); padding: var(--dd-s1) var(--dd-s2); }
  .dd-salle__tete .dd-surtitre, .dd-salle .dd-croise__titre { display: none; }
  .dd-salle__tables { gap: var(--dd-s2); }
  .dd-place__dit, .dd-place__fait, .dd-salle .dd-croise__fait { -webkit-line-clamp: 1; }
}
/* Salle de téléphone : le visage au-dessus du nom ; les paroles se lisent dans le fil, sauf celle de qui sert */
@container (max-width: 640px) {
  .dd-salle__places, .dd-salle__rang, .dd-salle__debout { gap: var(--dd-s2); }
  .dd-salle__table, .dd-salle__comptoir { padding: 0; background: none; }
  .dd-salle__rang { flex-wrap: wrap; }
  .dd-salle__debout, .dd-salle__passage { flex: 1 1 100%; }
  .dd-place__qui { flex-direction: column; text-align: center; }
  .dd-place__texte { justify-items: center; }
  .dd-place__nom { white-space: normal; }
  .dd-place__bulle, .dd-place__fait { display: none; }
  .dd-place--hote .dd-place__qui { flex-direction: row; text-align: left; }
  .dd-place--hote .dd-place__texte { justify-items: start; }
  .dd-place--hote .dd-place__bulle { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .dd-place__bulle.is-neuve, .dd-place.is-arrivee .dd-medaillon { animation: none; }
}

/* Croisée : de temps en temps, à un seul endroit, une personne qui se trouve au même lieu public au même moment.
   Elle passe et s'efface ; son nom ouvre sa fiche. maquettes/commun/croisees.js la pose et la fait passer :
   dans le décor entre la colonne et le panneau (.dd-croisees, au-dessus de la frise), ou dans un emplacement
   donné (le comptoir d'une salle). Les joueurs IA passent comme les autres, à leurs heures. */
.dd-croisees { position: fixed; z-index: 4; transform: translateX(-50%); width: max-content; pointer-events: auto; }
.dd-croisees[hidden] { display: none; }
.dd-croise { display: flex; align-items: center; gap: var(--dd-s3); max-width: 100%; padding: var(--dd-s2) var(--dd-s3) var(--dd-s2) var(--dd-s2);
  border: 1px solid rgba(196, 163, 90, .6); border-radius: var(--dd-r-l); background: rgba(20, 15, 10, .88); color: var(--dd-sombre-texte); box-shadow: var(--dd-ombre); }
.dd-croise__lien { flex: 0 1 auto; display: flex; align-items: center; gap: var(--dd-s3); min-width: 0; color: inherit; text-decoration: none; border-radius: var(--dd-r-m); }
.dd-croise__lien:focus-visible { outline: 2px solid var(--dd-or-clair); outline-offset: 3px; }
.dd-croise__lien:hover .dd-croise__nom { text-decoration: underline; text-underline-offset: 3px; }
.dd-croise .dd-medaillon { border-color: var(--dd-ocre); }
.dd-croise__texte { display: grid; min-width: 0; }
.dd-croise__titre { font: 700 var(--dd-t-note) / 1.3 var(--dd-font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--dd-or-clair); }
.dd-croise__nom { font: 600 var(--dd-t-corps) / 1.25 var(--dd-font-titre); color: var(--dd-creme); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-croise__fait { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--dd-t-petit); line-height: 1.3; color: var(--dd-sombre-muet); }
.dd-croise .dd-btn--contour { flex: none; color: var(--dd-sombre-texte); border-color: rgba(239, 232, 214, .45); }
.dd-croise.is-entree { animation: dd-croise-entree .5s var(--dd-courbe) both; }
.dd-croise.is-sortie { animation: dd-croise-sortie .5s ease-in both; }
@keyframes dd-croise-entree { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes dd-croise-sortie { from { opacity: 1; } to { opacity: 0; transform: translateY(6px); } }
.dd-croisees.is-haut .dd-croise.is-entree { animation-name: dd-croise-entree-haut; }
.dd-croisees.is-haut .dd-croise.is-sortie { animation-name: dd-croise-sortie-haut; }
@keyframes dd-croise-entree-haut { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes dd-croise-sortie-haut { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .dd-croise.is-entree, .dd-croise.is-sortie { animation-duration: 1ms; }
}

/* ========================================================================== */
/* Barre haute                                                                */
/* ========================================================================== */

.dd-barre-haute {
  display: flex; align-items: center; gap: var(--dd-s4); height: var(--dd-barre-haute); padding: 0 var(--dd-s4);
  background: var(--dd-sombre); color: var(--dd-sombre-texte); font-size: var(--dd-t-petit); white-space: nowrap;
}
.dd-barre-haute__logo { height: var(--dd-logo-barre); width: auto; flex: none; }
.dd-barre-haute__ville { font: 600 var(--dd-t-fort) / 1 var(--dd-font-titre); color: var(--dd-sombre-texte); }
.dd-picto { position: relative; flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--dd-r-s); background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: none; }
.dd-picto[aria-expanded="true"] { background: rgba(239, 232, 214, .14); }
.dd-picto > img { width: 26px; height: 26px; }
.dd-picto:hover { background: rgba(239, 232, 214, .1); }
.dd-picto[data-infobulle]::before { content: attr(data-infobulle); position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 40;
  padding: 3px 8px; border-radius: var(--dd-r-s); background: var(--dd-encre); color: var(--dd-creme); font: 500 var(--dd-t-note) / 1.3 var(--dd-font-ui); white-space: nowrap; opacity: 0; pointer-events: none; }
.dd-picto[data-infobulle]:hover::before, .dd-picto[data-infobulle]:focus-visible::before { opacity: 1; }
.dd-picto[aria-expanded="true"]::before { content: none; }
.dd-tiroir { position: relative; flex: none; display: inline-grid; }
.dd-tiroir__fenetre { position: absolute; top: calc(100% + 12px); right: -6px; z-index: 35; width: 280px; white-space: normal;
  background: var(--dd-creme); color: var(--dd-encre); border: 1px solid var(--dd-filet-or); border-radius: var(--dd-r-m); box-shadow: var(--dd-ombre-forte); }
.dd-tiroir__fenetre[hidden] { display: none; }
.dd-tiroir__fenetre::before { content: ""; position: absolute; right: 14px; bottom: 100%; border: 7px solid transparent; border-bottom-color: var(--dd-sombre); }
.dd-tiroir__fenetre--gazette { width: 340px; }
.dd-tiroir__fenetre--lettres { width: 380px; }
.dd-tiroir__corps { padding: var(--dd-s3) var(--dd-s4); }
.dd-tiroir__manchette { margin: 0 0 var(--dd-s2); padding-bottom: var(--dd-s1); border-bottom: 2px solid var(--dd-encre); font: 400 22px / 1.05 var(--dd-font-affiche); text-align: center; }
.dd-tiroir__une { padding-bottom: var(--dd-s3); border-bottom: 1px solid var(--dd-filet); }
.dd-tiroir__titre { margin: 4px 0 4px; font: 600 var(--dd-t-fort) / 1.15 var(--dd-font-titre); color: var(--dd-encre); }
.dd-tiroir__une .dd-petit { margin: 0; }
.dd-tiroir__breves { list-style: none; margin: var(--dd-s2) 0 0; padding: 0; display: grid; gap: 6px; }
.dd-tiroir__breves li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); align-items: baseline; gap: var(--dd-s2); font-size: var(--dd-t-petit); line-height: 1.3; }
.dd-tiroir__breves .dd-fait, .dd-tiroir__breves .dd-rumeur { justify-self: start; }
.dd-tiroir__lettres { list-style: none; margin: 0; padding: var(--dd-s1) 0; }
.dd-tiroir__lettre { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--dd-s3); align-items: start; padding: var(--dd-s2) var(--dd-s4); color: var(--dd-encre-douce); text-decoration: none; }
.dd-tiroir__lettre:hover, .dd-tiroir__lettre:focus-visible { background: rgba(212, 160, 23, .14); outline: none; }
.dd-tiroir__lettres li + li .dd-tiroir__lettre { border-top: 1px solid var(--dd-filet); }
.dd-tiroir__texte { display: grid; gap: 1px; min-width: 0; }
.dd-tiroir__de { font-size: var(--dd-t-petit); color: var(--dd-encre); }
.dd-tiroir__objet { font: 500 var(--dd-t-corps) / 1.2 var(--dd-font-titre); color: var(--dd-encre); }
.dd-tiroir__extrait { font-size: var(--dd-t-note); color: var(--dd-encre-muette); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-tiroir__lettre.is-non-lue .dd-tiroir__objet { font-weight: 700; color: var(--dd-indigo); }
.dd-tiroir__lettre:not(.is-non-lue) { opacity: .78; }
.dd-tiroir__meta { display: grid; justify-items: end; gap: 6px; }
.dd-tiroir__sceau { width: 14px; height: 14px; border-radius: 50%; background: var(--dd-cramoisi-fonce); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18); }
.dd-tiroir__sceau--officiel { width: 18px; height: 18px; background: radial-gradient(circle at 40% 35%, #d9a441, var(--dd-cramoisi-fonce) 60%); }
.dd-tiroir__pied { display: flex; align-items: center; justify-content: space-between; gap: var(--dd-s3); padding: var(--dd-s2) var(--dd-s4); border-top: 1px solid var(--dd-filet); }
.dd-picto__compte { position: absolute; right: -2px; top: -1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--dd-pill); background: var(--dd-cramoisi); color: #fff; font: 700 10px / 16px var(--dd-font-ui); text-align: center; }
.dd-barre-haute__date { color: var(--dd-sombre-texte); }
.dd-barre-haute__vide { flex: 1; }
/* Le prochain rendez-vous à son heure (« Criée à 18 h 30 »), jamais un compte à rebours. Pendant le direct,
   « Criée en direct » en or : ni rouge, ni clignotement (bible 26, section 4). */
.dd-barre-haute__rdv { border: 1px solid var(--dd-or); color: var(--dd-or-clair); padding: 3px 10px; border-radius: var(--dd-r-s); text-decoration: none; }
.dd-barre-haute__rdv.is-direct { border-color: var(--dd-or-clair); background: rgba(212, 160, 23, .2); color: var(--dd-creme); font-weight: 700; }
.dd-barre-haute__groupe { display: inline-flex; align-items: center; gap: var(--dd-s3); flex: none; }
.dd-barre-haute a { color: inherit; }
.dd-barre-haute .dd-medaillon > .dd-point { box-shadow: 0 0 0 2px var(--dd-sombre); }

/* Infobulle de plusieurs lignes (« \n » dans data-infobulle), au survol et au focus clavier.
   --droite : ancrée au bord droit, pour ce qui touche le bord de l'écran. */
.dd-info { position: relative; }
.dd-info[data-infobulle]::after { content: attr(data-infobulle); position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 40;
  width: max-content; max-width: 260px; padding: 6px 10px; border-radius: var(--dd-r-s); background: var(--dd-encre); color: var(--dd-creme);
  font: 500 var(--dd-t-note) / 1.4 var(--dd-font-ui); text-align: left; white-space: pre-line; opacity: 0; pointer-events: none; transition: opacity var(--dd-vite) ease; }
.dd-info[data-infobulle]:is(:hover, :focus-visible)::after { opacity: 1; transition-delay: 250ms; }
.dd-info--droite[data-infobulle]::after { left: auto; right: 0; transform: none; }
.dd-info[aria-expanded="true"]::after { content: none; }

/* Pictogrammes de 12 px dessinés en masque : ils prennent la couleur du texte */
.dd-picto-mini { flex: none; display: inline-block; width: 12px; height: 12px; background: currentColor;
  -webkit-mask: var(--picto) center / contain no-repeat; mask: var(--picto) center / contain no-repeat; }
[data-picto="faim"] { --picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 3.2C4 3.2 1.2 5.6 1.2 8.5c0 2 1.5 3.3 3.5 3.3h6.6c2 0 3.5-1.3 3.5-3.3 0-2.9-2.8-5.3-6.8-5.3zM4.6 6.1l1.1.5-1.3 2.9-1.1-.5zm3-.5 1.1.5-1.3 2.9-1.1-.5zm3 .5 1.1.5-1.3 2.9-1.1-.5z'/%3E%3C/svg%3E"); }
[data-picto="sommeil"] { --picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14 8.5A6 6 0 1 1 7.5 2a4.7 4.7 0 0 0 6.5 6.5z'/%3E%3C/svg%3E"); }
[data-picto="sante"] { --picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 14s-5.6-3.5-5.6-7.6A3.1 3.1 0 0 1 8 4.6a3.1 3.1 0 0 1 5.6 1.8C13.6 10.5 8 14 8 14z'/%3E%3C/svg%3E"); }
[data-picto="sablier"] { --picto: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 1.5h9v1.6h-.9v1c0 1.7-1.1 3.1-2.6 3.9 1.5.8 2.6 2.2 2.6 3.9v1h.9v1.6h-9v-1.6h.9v-1c0-1.7 1.1-3.1 2.6-3.9C5.5 7.2 4.4 5.8 4.4 4.1v-1h-.9z'/%3E%3C/svg%3E"); }

/* Travaux d'avance (la « réserve ») : un sablier, une case par travail de 8 heures, « 3 travaux d'avance ».
   Jamais en heures, qui se liraient comme l'horloge. L'infobulle dit d'où ils viennent et quand le temps en ajoute un. */
.dd-avance { position: relative; display: inline-flex; align-items: center; gap: 6px; border-radius: var(--dd-r-s); }
.dd-avance:focus-visible { outline: none; box-shadow: var(--dd-focus); }
.dd-avance > .dd-picto-mini { color: var(--dd-or-clair); }
.dd-avance .dd-jauge { width: 72px; }
.dd-avance .dd-jauge::after { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--cases, 6) - 2px), var(--dd-sombre) calc(100% / var(--cases, 6) - 2px) calc(100% / var(--cases, 6))); }

/* Le corps (bible 13, section 3) : faim, sommeil, santé, comme les besoins des Sims. La couleur dit l'état,
   jamais seule : longueur, pictogramme, contour et motif hachuré pour l'état bas, mot dans l'infobulle et dans
   la fenêtre « Ton corps ». Les jauges bougent quand on mange, travaille ou dort ; rien ne clignote. */
:root { --dd-jauge-bon: var(--dd-etat-bon); --dd-jauge-moyen: var(--dd-etat-moyen); --dd-jauge-bas: var(--dd-etat-bas); }
.dd-barre-haute, .dd-sombre, .dd-panneau--sombre, [data-theme="nuit"] { --dd-jauge-bon: var(--dd-etat-bon-clair); --dd-jauge-moyen: var(--dd-etat-moyen-clair); --dd-jauge-bas: var(--dd-etat-bas-clair); }
.dd-besoins { position: relative; flex: none; display: inline-grid; gap: 3px; padding: 3px 6px; border: 0; border-radius: var(--dd-r-s); background: none; color: var(--dd-sombre-muet); font: inherit; cursor: pointer; }
.dd-besoins:hover, .dd-besoins[aria-expanded="true"] { background: rgba(239, 232, 214, .1); }
.dd-besoins:focus-visible { outline: none; box-shadow: var(--dd-focus); }
.dd-besoins.is-change { animation: dd-besoins-change 1.4s var(--dd-courbe) 1; }
@keyframes dd-besoins-change { from { box-shadow: 0 0 0 0 var(--dd-halo-or); } to { box-shadow: 0 0 0 10px rgba(232, 197, 71, 0); } }
.dd-besoin { display: grid; grid-template-columns: 12px 56px; align-items: center; gap: 5px; }
.dd-besoin .dd-jauge { height: 6px; }
.dd-tiroir__fenetre--corps { width: 300px; --dd-jauge-bon: var(--dd-etat-bon); --dd-jauge-moyen: var(--dd-etat-moyen); --dd-jauge-bas: var(--dd-etat-bas); }
.dd-corps { list-style: none; margin: 0; padding: var(--dd-s1) 0; }
.dd-corps > li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 0 var(--dd-s2); padding: var(--dd-s2) var(--dd-s4); }
.dd-corps > li + li { border-top: 1px solid var(--dd-filet); }
.dd-corps .dd-picto-mini { width: 16px; height: 16px; margin-top: 1px; color: var(--dd-encre-douce); }
/* Dans la fenêtre « Ton corps », les icônes dessinées des états (lot 1, ui-kit/assets/etats/) à la place des pictos */
.dd-corps > li { grid-template-columns: 24px minmax(0, 1fr); }
.dd-corps .dd-picto-mini:is([data-picto="faim"], [data-picto="sommeil"], [data-picto="sante"]) { width: 24px; height: 24px; margin-top: -2px;
  -webkit-mask: none; mask: none; background: var(--etat) center / contain no-repeat; }
.dd-corps [data-picto="faim"] { --etat: url("../assets/etats/faim.png"); }
.dd-corps [data-picto="sommeil"] { --etat: url("../assets/etats/sommeil.png"); }
.dd-corps [data-picto="sante"] { --etat: url("../assets/etats/sante.png"); }
.dd-corps__tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--dd-s2); margin: 0 0 6px; font-size: var(--dd-t-petit); line-height: 1.2; color: var(--dd-encre); }
.dd-corps .dd-jauge { display: block; margin: 0 0 6px; }
.dd-corps .dd-note { margin: 0; color: var(--dd-encre-douce); }
.dd-corps__effet { font-weight: 700; }
.dd-corps .dd-btn { margin-top: var(--dd-s2); }
.dd-tiroir__fenetre--corps .dd-tiroir__pied .dd-note { margin: 0; color: var(--dd-encre-muette); }

/* ========================================================================== */
/* Jauges, étapes, chemins                                                    */
/* ========================================================================== */

.dd-jauge { position: relative; height: 8px; border-radius: var(--dd-pill); background: rgba(17, 17, 17, .12); overflow: hidden; }
.dd-sombre .dd-jauge, .dd-panneau--sombre .dd-jauge, .dd-barre-haute .dd-jauge, [data-theme="nuit"] .dd-jauge { background: rgba(239, 232, 214, .18); }
.dd-jauge > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--dd-or); }
.dd-jauge--seuil > b { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--dd-cramoisi); }
/* Jauge d'état (le corps) : data-etat = bon, moyen ou bas */
.dd-jauge--etat > i { background: var(--dd-jauge-bon); transition: width var(--dd-moyen) var(--dd-courbe); }
.dd-jauge--etat[data-etat="moyen"] > i { background: var(--dd-jauge-moyen); }
.dd-jauge--etat[data-etat="bas"] { outline: 1px solid var(--dd-jauge-bas); outline-offset: 1px; }
.dd-jauge--etat[data-etat="bas"] > i { min-width: 4px;
  background: repeating-linear-gradient(135deg, var(--dd-jauge-bas) 0 3px, color-mix(in srgb, var(--dd-jauge-bas) 50%, var(--dd-encre)) 3px 5px); }
.dd-tiroir__fenetre .dd-jauge { background: rgba(17, 17, 17, .12); }
@media (prefers-reduced-motion: reduce) { .dd-besoins.is-change { animation: none; } .dd-jauge--etat > i { transition: none; } }

.dd-etapes { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.dd-etapes > li { flex: 1; padding-top: var(--dd-s1); border-top: 4px solid var(--dd-filet); font-size: var(--dd-t-note); line-height: 1.25; text-align: center; color: var(--dd-texte-muet); }
.dd-etapes > li.is-fait { border-top-color: var(--dd-encre-douce); color: var(--dd-texte); }
.dd-etapes > li.is-on { border-top-color: var(--dd-or); color: var(--dd-texte); font-weight: 700; }

.dd-chronologie { list-style: none; margin: 0; padding: 0 0 0 var(--dd-s4); border-left: 2px solid var(--dd-filet); }
.dd-chronologie > li { position: relative; padding: 0 0 var(--dd-s2) var(--dd-s1); font-size: var(--dd-t-petit); line-height: 1.35; }
.dd-chronologie > li::before { content: ""; position: absolute; left: calc(-1 * var(--dd-s4) - 6px); top: 4px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--dd-absent); background: var(--dd-surface); }
.dd-chronologie > li.is-fait::before { background: var(--dd-encre-douce); border-color: var(--dd-encre-douce); }
.dd-chronologie > li.is-on { font-weight: 700; }
.dd-chronologie > li.is-on::before { background: var(--dd-or); border-color: var(--dd-or); }

/* Chemin des niveaux (bible 27 et 28) */
.dd-chemin { display: flex; gap: 3px; list-style: none; margin: 0; padding: 0; }
.dd-chemin > li { flex: 1; padding: var(--dd-s2) var(--dd-s1); border: 1px solid var(--dd-filet); border-radius: var(--dd-r-s); background: var(--dd-surface); text-align: center; font-size: var(--dd-t-note); line-height: 1.25; color: var(--dd-texte-muet); }
.dd-chemin > li b { display: block; font: 600 var(--dd-t-petit) var(--dd-font-titre); color: inherit; }
.dd-chemin > li.is-fait { color: var(--dd-texte); }
.dd-chemin > li.is-on { border: 2px solid var(--dd-or); background: var(--dd-or-pale); color: var(--dd-encre); }

/* ========================================================================== */
/* Panneaux et cartes                                                         */
/* ========================================================================== */

.dd-panneau {
  background: var(--dd-surface); color: var(--dd-texte);
  border: 1px solid var(--dd-filet); border-radius: var(--dd-r-m);
  box-shadow: var(--dd-ombre); padding: var(--dd-s4);
}
.dd-panneau--sombre, .dd-sombre { background: rgba(29, 27, 23, .86); color: var(--dd-sombre-texte); border-color: #57534a; }
.dd-panneau--sombre .dd-surtitre, .dd-sombre .dd-surtitre, .dd-sombre .dd-note, .dd-panneau--sombre .dd-note { color: var(--dd-sombre-muet); }
.dd-sombre .dd-titre-boite, .dd-panneau--sombre .dd-titre-boite, .dd-sombre .dd-titre-carte, .dd-panneau--sombre .dd-titre-carte, .dd-sombre .dd-personne__nom, .dd-panneau--sombre .dd-personne__nom { color: var(--dd-creme); }
.dd-panneau__entete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--dd-s3); margin-bottom: var(--dd-s3); }
.dd-panneau__pied { margin-top: var(--dd-s3); padding-top: var(--dd-s3); border-top: 1px solid var(--dd-filet); }
.dd-panneau > * + .dd-surtitre { margin-top: var(--dd-s4); }

.dd-carte { background: var(--dd-papier); border: 1px solid var(--dd-filet); border-radius: var(--dd-r-s); padding: var(--dd-s3); }
[data-theme="nuit"] .dd-carte { background: var(--dd-surface-2); }
.dd-carte + .dd-carte { margin-top: var(--dd-s2); }
.dd-carte__entete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--dd-s3); margin-bottom: var(--dd-s1); }
.dd-carte__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dd-s2); margin-top: var(--dd-s2); }
.dd-carte.is-choisi { border: 2px solid var(--dd-or); background: var(--dd-or-pale); padding: calc(var(--dd-s3) - 1px); }

/* Ce qui est prêt : un objet, un résultat, un geste */
.dd-pret { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: var(--dd-s3); }
.dd-pret > img { width: 56px; height: 56px; object-fit: contain; }

/* Encarts */
.dd-encart { border: 2px solid var(--dd-or); background: var(--dd-or-pale); color: var(--dd-encre); padding: var(--dd-s3) var(--dd-s4); border-radius: var(--dd-r-s); }
.dd-avis { border-left: 4px solid var(--dd-encre-douce); background: var(--dd-papier); padding: var(--dd-s2) var(--dd-s3); font-size: var(--dd-t-petit); }
.dd-avis--alerte { border-left-color: var(--dd-cramoisi); }
.dd-avis--or { border-left-color: var(--dd-or); background: var(--dd-or-pale); }

/* Rendez-vous : compte à rebours sobre, jamais rouge */
.dd-rdv { display: flex; align-items: center; justify-content: space-between; gap: var(--dd-s3); }
.dd-rdv__quand { font-size: var(--dd-t-petit); color: var(--dd-texte-muet); }

/* Listes de lignes */
.dd-lignes { list-style: none; margin: 0; padding: 0; }
.dd-lignes > li { display: flex; align-items: center; justify-content: space-between; gap: var(--dd-s3); padding: var(--dd-s2) 0; border-bottom: 1px solid var(--dd-filet); font-size: var(--dd-t-petit); }
.dd-lignes > li:last-child { border-bottom: 0; }
.dd-lignes > li.is-on { background: var(--dd-or-pale); box-shadow: inset 3px 0 0 var(--dd-encre-douce); padding-left: var(--dd-s2); }

/* ========================================================================== */
/* Objets de jeu et besace                                                    */
/* ========================================================================== */

.dd-objet {
  position: relative; display: grid; place-items: center; width: 72px; height: 72px; padding: 6px;
  border: 1px solid var(--dd-filet-or); border-radius: var(--dd-r-s); background: var(--dd-creme);
  cursor: pointer; color: inherit; font: inherit;
}
.dd-objet > img { width: 100%; height: 100%; object-fit: contain; }
.dd-objet:hover { border-color: var(--dd-or); }
.dd-objet[aria-pressed="true"], .dd-objet.is-choisi { border: 2px solid var(--dd-indigo); padding: 5px; }
.dd-objet.is-vide { border-style: dashed; background: transparent; cursor: default; }
.dd-objet__qte {
  position: absolute; right: 3px; bottom: 3px; min-width: 22px; padding: 0 4px;
  border-radius: var(--dd-r-s); background: var(--dd-sombre); color: var(--dd-sombre-texte);
  font-size: var(--dd-t-note); font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.dd-objet__qualite { position: absolute; left: 4px; top: 4px; display: flex; gap: 2px; }
.dd-objet__qualite i { width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--dd-encre-douce); background: transparent; }
.dd-objet__qualite i.is-on { background: var(--dd-or); border-color: var(--dd-or); }
.dd-objet--l { width: 96px; height: 96px; }
.dd-objet--s { width: 48px; height: 48px; padding: 4px; }

.dd-besace { display: grid; grid-template-columns: repeat(auto-fill, 72px); gap: var(--dd-s2); }

/* Objets du tableau, en bas à droite de la frise : la besace, le carnet de voyage à sa gauche, les lettres à gauche
   du carnet. Carnet et besace ouvrent une petite fenêtre non bloquante accrochée au-dessus d'eux ; les lettres
   mènent à la boîte aux lettres, avec le nombre de lettres non lues. */
.dd-tableau, .dd-frise { --dd-sac-place: 280px; }
.dd-sac, .dd-carnet, .dd-lettres { position: absolute; right: var(--dd-s4); bottom: 0; z-index: 9; width: 84px; height: calc(64px + var(--dd-frise-sol)); padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; color: var(--dd-sombre-texte); font: inherit; }
.dd-sac > img, .dd-carnet > img, .dd-lettres > img { height: 60px; width: auto; margin-bottom: 4px; filter: drop-shadow(0 2px 0 rgba(29, 27, 23, .3)); transition: transform var(--dd-duree-courte, .15s) ease; }
.dd-sac__nom, .dd-carnet__nom, .dd-lettres__nom { height: var(--dd-frise-sol); display: flex; align-items: center; font-size: var(--dd-t-petit); white-space: nowrap; }
.dd-sac:hover > img, .dd-sac[aria-expanded="true"] > img,
.dd-carnet:hover > img, .dd-carnet[aria-expanded="true"] > img, .dd-lettres:hover > img, .dd-lettres[aria-current="page"] > img { transform: translateY(-3px); filter: drop-shadow(0 0 6px var(--dd-halo-or)); }
.dd-sac[aria-expanded="true"] .dd-sac__nom, .dd-carnet[aria-expanded="true"] .dd-carnet__nom, .dd-lettres[aria-current="page"] .dd-lettres__nom { color: var(--dd-or-clair); box-shadow: inset 0 3px 0 var(--dd-or); }
.dd-sac__compte, .dd-lettres__compte { position: absolute; right: 6px; bottom: calc(var(--dd-frise-sol) + 4px); min-width: 20px; padding: 0 5px; border-radius: var(--dd-pill); background: var(--dd-sombre); color: var(--dd-sombre-texte); font: 700 var(--dd-t-note) / 17px var(--dd-font-ui); text-align: center; }
.dd-sac__touche, .dd-carnet__touche, .dd-lettres__touche { position: absolute; left: 6px; top: 0; width: 17px; height: 17px; border-radius: 4px; background: var(--dd-sombre); color: var(--dd-sombre-muet); font: 700 10px / 17px var(--dd-font-ui); text-align: center; }

/* Carnet de voyage : aucun chiffre (le niveau et les lignes sont dans la barre haute).
   Page pleine (.is-pleine) : il clignote d'un halo or et son nom devient « Page pleine »,
   sans son, sans pastille, sans délai. L'ouvrir alors fait passer au niveau suivant. */
.dd-carnet { right: calc(var(--dd-s4) + 88px); }
.dd-lettres { right: calc(var(--dd-s4) + 176px); text-decoration: none; }
.dd-lettres > img { height: 50px; margin-bottom: 9px; }
.dd-lettres__compte { background: var(--dd-cramoisi); color: var(--dd-creme); }
.dd-lettres:focus-visible { outline: 2px solid var(--dd-or-clair); outline-offset: 2px; border-radius: var(--dd-r-s); }
.dd-carnet > img { height: 56px; margin-bottom: 6px; }
.dd-carnet.is-pleine > img { animation: dd-carnet-plein var(--dd-clignote) ease-in-out infinite; }
.dd-carnet.is-pleine .dd-carnet__nom { color: var(--dd-or-clair); font-weight: 700; box-shadow: inset 0 3px 0 var(--dd-or); }
/* Passage fermé avant la fin du rite : le niveau est acquis, le carnet rouvre le passage, sans clignoter */
.dd-carnet.is-passage .dd-carnet__nom { color: var(--dd-or-clair); box-shadow: inset 0 3px 0 var(--dd-or); }
@keyframes dd-carnet-plein {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 2px 0 rgba(29, 27, 23, .3)); }
  50% { transform: translateY(-4px); filter: drop-shadow(0 0 3px var(--dd-or-clair)) drop-shadow(0 0 14px var(--dd-halo-or)); }
}
@media (prefers-reduced-motion: reduce) {
  .dd-carnet.is-pleine > img { animation: none; filter: drop-shadow(0 0 3px var(--dd-or-clair)) drop-shadow(0 0 10px var(--dd-halo-or)); }
}

.dd-sac-fenetre { position: absolute; right: var(--dd-s4); bottom: calc(var(--dd-frise-sol) + 64px + var(--dd-s3)); z-index: 12; width: max-content;
  background: var(--dd-creme); border: 1px solid var(--dd-filet-or); border-radius: var(--dd-r-m); box-shadow: 0 10px 28px rgba(28, 18, 8, .45); }
.dd-sac-fenetre[hidden] { display: none; }
.dd-sac-fenetre::after { content: ""; position: absolute; right: 34px; top: 100%; border: 8px solid transparent; border-top-color: var(--dd-creme); }
.dd-sac-fenetre__titre { display: flex; align-items: center; justify-content: space-between; gap: var(--dd-s2); padding: var(--dd-s2) var(--dd-s3); background: var(--dd-sombre); color: var(--dd-sombre-texte); border-radius: var(--dd-r-m) var(--dd-r-m) 0 0; }
.dd-sac-fenetre__titre b { font: 600 var(--dd-t-fort) / 1 var(--dd-font-titre); }
.dd-sac-fenetre__titre .dd-note { color: var(--dd-sombre-muet); margin-left: auto; }
.dd-sac-fenetre__fermer { width: 24px; height: 24px; border: 0; border-radius: 4px; background: none; color: var(--dd-sombre-texte); font-size: 18px; line-height: 1; cursor: pointer; }
.dd-sac-fenetre__fermer:hover { background: rgba(239, 232, 214, .12); }
.dd-sac-fenetre .dd-besace { grid-template-columns: repeat(4, 64px); padding: var(--dd-s3); }
.dd-sac-fenetre .dd-objet { width: 64px; height: 64px; }
.dd-sac-fenetre__bourse { display: inline-flex; align-items: center; gap: var(--dd-s2); font-weight: 700; }
.dd-sac-fenetre__bourse img { width: 28px; height: 28px; }
.dd-sac-fenetre__somme { font-size: var(--dd-t-fort); }
.dd-sac-fenetre__pied { display: flex; align-items: center; justify-content: space-between; padding: var(--dd-s2) var(--dd-s3); border-top: 1px solid var(--dd-filet); font-size: var(--dd-t-petit); }

/* Page en cours du carnet : même fenêtre que la besace, accrochée au carnet.
   Toujours sur papier : les rôles de texte du thème jour s'y appliquent aussi la nuit. */
.dd-carnet-fenetre, .dd-carnet-passage { --dd-texte: var(--dd-encre-douce); --dd-texte-fort: var(--dd-indigo); --dd-texte-muet: var(--dd-encre-muette); --dd-filet: var(--dd-filet-encre); color: var(--dd-texte); }
[data-theme="nuit"] :is(.dd-carnet-fenetre, .dd-carnet-passage) .dd-btn--lien { color: var(--dd-indigo); }
[data-theme="nuit"] :is(.dd-carnet-fenetre, .dd-carnet-passage) .dd-jauge { background: rgba(17, 17, 17, .12); }
.dd-carnet-fenetre { right: calc(var(--dd-s4) + 88px); width: 380px; }
.dd-carnet-fenetre__corps { display: grid; gap: var(--dd-s2); padding: var(--dd-s3); }
.dd-carnet__conditions { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--dd-t-petit); color: var(--dd-texte-muet); }
.dd-carnet__conditions li::before { content: "○"; display: inline-block; width: 1.2em; }
.dd-carnet__conditions li.is-fait { color: var(--dd-texte); }
.dd-carnet__conditions li.is-fait::before { content: "●"; color: var(--dd-mousse); }
.dd-carnet__quetes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--dd-s1); }
.dd-carnet__quetes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--dd-s2); padding: 6px var(--dd-s2); border-left: 3px solid var(--dd-or); background: var(--dd-papier); border-radius: 0 var(--dd-r-s) var(--dd-r-s) 0; }
.dd-carnet__quetes b { font: 600 var(--dd-t-corps) / 1.25 var(--dd-font-titre); color: var(--dd-texte-fort); }
.dd-carnet__quetes span { grid-column: 1; font-size: var(--dd-t-note); color: var(--dd-texte-muet); }
.dd-carnet__quetes .dd-chiffre { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: var(--dd-t-petit); color: var(--dd-texte); }

/* Chaîne de production : blé, farine, miche */
.dd-chaine { display: flex; align-items: center; gap: var(--dd-s2); }
.dd-chaine__etape { display: grid; justify-items: center; gap: var(--dd-s1); font-size: var(--dd-t-note); text-align: center; }
.dd-chaine__fleche { color: var(--dd-texte-muet); font-size: var(--dd-t-fort); }

/* ========================================================================== */
/* Verbes illustrés                                                           */
/* ========================================================================== */

.dd-action {
  display: grid; grid-template-rows: auto 1fr; overflow: hidden; padding: 0; text-align: left;
  border: 1px solid var(--dd-filet); border-radius: var(--dd-r-m); background: var(--dd-papier);
  color: inherit; font: inherit; cursor: pointer;
  transition: border-color var(--dd-vite) ease, transform var(--dd-vite) var(--dd-courbe);
}
.dd-action:hover { border-color: var(--dd-or); transform: translateY(-1px); }
.dd-action__vignette { aspect-ratio: 4 / 3; background: var(--dd-creme); display: grid; place-items: end center; overflow: hidden; }
.dd-action__vignette > img { width: 86%; height: 100%; object-fit: contain; object-position: center bottom; }
.dd-action__corps { padding: var(--dd-s2) var(--dd-s3) var(--dd-s3); display: grid; gap: 2px; }
.dd-action__verbe { font: 600 var(--dd-t-fort) / 1.2 var(--dd-font-titre); color: var(--dd-texte-fort); }
.dd-action__cout { display: flex; flex-wrap: wrap; gap: var(--dd-s1) var(--dd-s3); font-size: var(--dd-t-note); color: var(--dd-texte-muet); }
.dd-action.is-principale { border: 2px solid var(--dd-or); }
.dd-action.is-principale .dd-action__vignette { background: var(--dd-or-pale); }
.dd-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--dd-s3); }
.dd-action--ligne { grid-template-rows: none; grid-template-columns: 64px minmax(0, 1fr); align-items: center; }
.dd-action--ligne .dd-action__vignette { aspect-ratio: 1; height: 64px; }

/* ========================================================================== */
/* Formulaires                                                                */
/* ========================================================================== */

.dd-champ { display: grid; gap: var(--dd-s1); margin-bottom: var(--dd-s3); min-width: 0; }
.dd-champ > label, .dd-libelle { font-size: var(--dd-t-petit); font-weight: 700; color: var(--dd-texte); }
.dd-saisie {
  width: 100%; min-width: 0; min-height: var(--dd-champ); padding: var(--dd-s2) var(--dd-s3);
  border: 1px solid rgba(58, 52, 40, .35); border-radius: var(--dd-r-s);
  background: #fffdf6; color: var(--dd-encre); font: var(--dd-t-corps) var(--dd-font-ui);
}
textarea.dd-saisie { min-height: 96px; resize: vertical; line-height: var(--dd-interligne); }
.dd-saisie::placeholder { color: var(--dd-texte-muet); }
.dd-saisie:focus { outline: none; border-color: var(--dd-or); box-shadow: var(--dd-focus); }
.dd-saisie[aria-invalid="true"] { border-color: var(--dd-cramoisi); }
.dd-aide { font-size: var(--dd-t-note); color: var(--dd-texte-muet); }
.dd-erreur { font-size: var(--dd-t-note); color: var(--dd-cramoisi-fonce); font-weight: 700; }

/* Destinataire : on tape un nom, la liste montre les médaillons (ui-kit/js/destinataire.js) */
.dd-dest { position: relative; }
.dd-dest__boite {
  display: flex; align-items: center; gap: var(--dd-s2); min-height: var(--dd-champ); padding: 4px var(--dd-s2);
  border: 1px solid rgba(58, 52, 40, .35); border-radius: var(--dd-r-s); background: #fffdf6;
}
.dd-dest__boite:focus-within { border-color: var(--dd-or); box-shadow: var(--dd-focus); }
.dd-dest__saisie { flex: 1; min-width: 6rem; min-height: 34px; padding: 0 var(--dd-s1); border: 0; background: none; color: var(--dd-encre); font: var(--dd-t-corps) var(--dd-font-ui); }
.dd-dest__saisie:focus { outline: none; }
.dd-dest__saisie::placeholder { color: var(--dd-texte-muet); }
.dd-dest__puce {
  display: inline-flex; align-items: center; gap: var(--dd-s2); max-width: 100%; min-height: 34px; padding: 2px 2px 2px 2px;
  border: 1px solid var(--dd-ocre); border-radius: var(--dd-pill); background: var(--dd-or-pale);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.dd-dest__puce .dd-medaillon--s, .dd-dest__puce .dd-dest__sceau { width: 28px; height: 28px; }
.dd-dest__puce-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--dd-t-corps) / 1.1 var(--dd-font-titre); color: var(--dd-texte-fort); }
.dd-dest__retirer {
  display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: transparent; color: var(--dd-encre-muette); font: 700 18px / 1 var(--dd-font-ui); cursor: pointer;
}
.dd-dest__retirer:hover { background: rgba(58, 52, 40, .1); color: var(--dd-encre); }
.dd-dest__sceau { display: inline-grid; place-items: center; flex: none; width: var(--dd-med-s); height: var(--dd-med-s); }
.dd-dest__sceau > img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.dd-dest__sceau--m { width: var(--dd-med-m); height: var(--dd-med-m); }

.dd-dest__liste {
  position: fixed; z-index: 60; margin: 0; padding: var(--dd-s1); list-style: none; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--dd-ocre); border-radius: var(--dd-r-m); background: var(--dd-papier);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6) inset, var(--dd-ombre-forte);
  font-family: var(--dd-font-ui); color: var(--dd-texte);
  animation: dd-dest-ouvre var(--dd-moyen) var(--dd-courbe);
}
.dd-dest__liste[hidden] { display: none; }
@keyframes dd-dest-ouvre { from { opacity: 0; transform: translateY(-4px); } }
.dd-dest__liste.is-haut { animation-name: dd-dest-ouvre-haut; }
@keyframes dd-dest-ouvre-haut { from { opacity: 0; transform: translateY(4px); } }
.dd-dest__groupe {
  padding: var(--dd-s2) var(--dd-s2) 2px; font: 700 var(--dd-t-note) / 1.3 var(--dd-font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--dd-texte-muet);
}
.dd-dest__groupe:not(:first-child) { margin-top: var(--dd-s1); border-top: 1px solid var(--dd-filet); }
.dd-dest__option {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--dd-s3);
  min-height: var(--dd-cible); padding: 6px var(--dd-s2); border-radius: var(--dd-r-s); cursor: pointer;
}
.dd-dest__option .dd-medaillon--s { width: 34px; height: 34px; border-width: 2px; }
.dd-dest__option .dd-dest__sceau { width: 34px; height: 34px; }
.dd-dest__option:hover { background: rgba(196, 163, 90, .14); }
.dd-dest__option.is-actif { background: var(--dd-or-pale); box-shadow: inset 3px 0 0 var(--dd-or); }
.dd-dest__option.is-actif .dd-medaillon { border-color: var(--dd-or); }
.dd-dest__qui { display: grid; min-width: 0; }
.dd-dest__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--dd-t-fort) / 1.15 var(--dd-font-titre); color: var(--dd-texte-fort); }
.dd-dest__qualite { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--dd-t-note); color: var(--dd-texte-muet); }
.dd-dest__option mark { background: none; color: inherit; box-shadow: inset 0 -.35em 0 rgba(212, 160, 23, .45); }
.dd-dest__marque { font-size: var(--dd-t-note); font-weight: 700; color: var(--dd-encre-muette); white-space: nowrap; }
.dd-dest__option.is-moi .dd-dest__nom { font-family: var(--dd-font-ui); font-size: var(--dd-t-corps); font-weight: 700; }
.dd-dest__vide { padding: var(--dd-s3); font-size: var(--dd-t-petit); color: var(--dd-texte-muet); }
@media (prefers-reduced-motion: reduce) { .dd-dest__liste { animation: none; } }

.dd-case, .dd-radio { display: flex; align-items: flex-start; gap: var(--dd-s2); font-size: var(--dd-t-petit); line-height: 1.35; cursor: pointer; }
.dd-case input, .dd-radio input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--dd-indigo); }

.dd-interrupteur { display: inline-flex; align-items: center; gap: var(--dd-s2); font-size: var(--dd-t-petit); font-weight: 700; cursor: pointer; }
.dd-interrupteur input { appearance: none; flex: none; width: 38px; height: 22px; margin: 0; border-radius: 11px; border: 2px solid var(--dd-encre-douce); background: #fffdf6; position: relative; cursor: pointer; transition: background var(--dd-vite); }
.dd-interrupteur input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--dd-encre-douce); transition: transform var(--dd-vite) var(--dd-courbe); }
.dd-interrupteur input:checked { background: var(--dd-indigo); border-color: var(--dd-indigo); }
.dd-interrupteur input:checked::after { transform: translateX(16px); background: #fff; }

.dd-segments { display: inline-flex; border: 1px solid var(--dd-indigo); border-radius: var(--dd-r-m); overflow: hidden; }
.dd-segments > button { min-height: 36px; padding: 0 var(--dd-s3); border: 0; border-right: 1px solid var(--dd-indigo); background: transparent; color: var(--dd-indigo); font: 700 var(--dd-t-petit) var(--dd-font-ui); cursor: pointer; }
.dd-segments > button:last-child { border-right: 0; }
.dd-segments > button[aria-pressed="true"] { background: var(--dd-indigo); color: var(--dd-creme); }

/* Choix illustré (destin, corporation, offre) */
.dd-choix { display: block; border: 1px solid var(--dd-filet); border-radius: var(--dd-r-m); background: var(--dd-papier); padding: var(--dd-s3); cursor: pointer; color: inherit; text-align: left; font: inherit; width: 100%; }
.dd-choix[aria-pressed="true"], .dd-choix.is-choisi { border: 3px solid var(--dd-or); padding: calc(var(--dd-s3) - 2px); background: var(--dd-or-pale); }

/* ========================================================================== */
/* Onglets                                                                    */
/* ========================================================================== */

.dd-onglets { display: flex; gap: 0; border-bottom: 1px solid var(--dd-filet); margin-bottom: var(--dd-s3); }
.dd-onglets > button, .dd-onglets > a {
  flex: 0 1 auto; padding: var(--dd-s2) var(--dd-s3); margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent;
  background: none; color: var(--dd-texte-muet); font: 600 var(--dd-t-corps) var(--dd-font-ui); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.dd-onglets > [aria-selected="true"], .dd-onglets > .is-on { color: var(--dd-texte-fort); border-bottom-color: var(--dd-or); }
.dd-onglets .dd-puce { margin-left: var(--dd-s1); }

/* ========================================================================== */
/* Tableaux de chiffres (carnet d'ordres, budget, cours)                      */
/* ========================================================================== */

.dd-table { width: 100%; border-collapse: collapse; font-size: var(--dd-t-petit); font-variant-numeric: tabular-nums; }
.dd-table th { text-align: left; font-size: var(--dd-t-note); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dd-texte-muet); border-bottom: 1px solid var(--dd-encre-douce); padding: var(--dd-s1) var(--dd-s2); }
.dd-table td { padding: var(--dd-s2); border-bottom: 1px solid var(--dd-filet); }
.dd-table .is-nombre { text-align: right; white-space: nowrap; }
.dd-table tr.is-toi td { font-weight: 700; background: var(--dd-or-pale); }
.dd-sombre .dd-table th, .dd-panneau--sombre .dd-table th { color: var(--dd-sombre-muet); border-color: #8d877a; }
.dd-sombre .dd-table td, .dd-panneau--sombre .dd-table td { border-color: #57534a; }

/* ========================================================================== */
/* Établi, livre de recettes, cours de la foire (bible 29)                    */
/* ========================================================================== */

/* Établi : une planche de bois, ses cases (--colonnes par rangée, --case de côté), la case de l'outil,
   la flèche et ce qui sort. La place d'une matière dans la grille ne compte pas : seule la liste fait
   la recette. Une case .is-fantome montre en transparence ce qui manque. */
.dd-etabli {
  --case: 52px; display: flex; align-items: center; gap: var(--dd-s3); padding: var(--dd-s3);
  border-radius: var(--dd-r-m); color: var(--dd-sombre-texte);
  background: linear-gradient(180deg, rgba(255, 236, 200, .1), rgba(0, 0, 0, .12)), var(--dd-cuir);
  box-shadow: inset 0 1px 0 rgba(255, 236, 200, .18), inset 0 -2px 0 rgba(0, 0, 0, .3);
}
.dd-etabli__grille { display: grid; grid-template-columns: repeat(var(--colonnes, 3), var(--case)); gap: 6px; flex: none; }
.dd-etabli__case {
  position: relative; display: grid; place-items: center; width: var(--case); height: var(--case); padding: 5px;
  border: 1px solid rgba(20, 12, 4, .6); border-radius: var(--dd-r-s); background: var(--dd-creme);
  box-shadow: inset 0 2px 5px rgba(60, 40, 20, .35); color: var(--dd-encre-douce); font: inherit; cursor: pointer;
}
.dd-etabli__case > img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.dd-etabli__case.is-vide { background: rgba(244, 232, 200, .3); border-style: dashed; border-color: rgba(244, 232, 200, .45); box-shadow: none; cursor: default; }
.dd-etabli__case.is-fantome { background: rgba(244, 232, 200, .3); border-style: dashed; border-color: var(--dd-or-clair); box-shadow: none; }
.dd-etabli__case.is-fantome > img { opacity: .4; }
.dd-etabli__case.is-survol { outline: 2px solid var(--dd-or-clair); outline-offset: 2px; }
.dd-etabli__case:disabled { cursor: default; }
.dd-etabli__case .dd-objet__qte { right: 2px; bottom: 2px; }
.dd-etabli__outil, .dd-etabli__sortie { display: flex; flex-direction: column; align-items: center; gap: var(--dd-s1); flex: none; }
.dd-etabli__sortie { flex: 1 1 0; min-width: 0; text-align: center; }
.dd-etabli__sortie .dd-etabli__case { --case: var(--sortie, 64px); cursor: default; }
.dd-etabli__sortie .dd-etabli__case.is-pret { border: 2px solid var(--dd-or); }
.dd-etabli__inconnu { font: 600 var(--dd-t-titre-boite) / 1 var(--dd-font-titre); color: var(--dd-encre-douce); }
.dd-etabli__fleche { flex: none; width: 22px; height: 14px; background: currentColor; opacity: .75;
  clip-path: polygon(0 36%, 58% 36%, 58% 0, 100% 50%, 58% 100%, 58% 64%, 0 64%); }
.dd-etabli__legende { font-size: var(--dd-t-note); line-height: 1.3; color: var(--dd-sombre-muet); text-wrap: balance; }
.dd-etabli__legende b { color: var(--dd-sombre-texte); }

/* Livre de recettes : une ligne par recette. Connue : ce qu'il faut et ce qui sort, et un bouton pour la
   poser sur l'établi. Pas encore connue : la silhouette de l'objet, comment l'apprendre, la piste si on
   en a entendu une. Le statut se lit aussi sans couleur (étiquette, filet, silhouette). */
.dd-recettes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dd-recette { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 2px var(--dd-s3);
  padding: 6px var(--dd-s2); border-left: 3px solid transparent; border-radius: 0 var(--dd-r-s) var(--dd-r-s) 0; }
.dd-recette__image { grid-row: 1 / span 3; width: 40px; height: 40px; display: grid; place-items: center; }
.dd-recette__image > img { width: 100%; height: 100%; object-fit: contain; }
.dd-recette__nom { margin: 0; font: 600 var(--dd-t-corps) / 1.25 var(--dd-font-titre); color: var(--dd-texte-fort); }
.dd-recette__detail { grid-column: 2; margin: 0; font-size: var(--dd-t-petit); line-height: 1.35; color: var(--dd-texte); }
.dd-recette__piste { grid-column: 2 / -1; margin: 0; font: italic 400 var(--dd-t-petit) / 1.35 var(--dd-font-titre); color: var(--dd-texte); }
.dd-recette__etat { grid-column: 3; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px;
  border: 1px solid var(--dd-filet-encre); border-radius: var(--dd-pill); font-size: var(--dd-t-note); font-weight: 700; white-space: nowrap; color: var(--dd-texte); }
.dd-recette > .dd-btn { grid-column: 3; grid-row: 1 / span 2; }
.dd-recette.is-connue { border-left-color: var(--dd-mousse); }
.dd-recette.is-secret { border-left-color: var(--dd-or); background: var(--dd-or-pale); }
.dd-recette.is-ombre .dd-recette__image > img { filter: brightness(0); opacity: .3; }
.dd-recette.is-ombre .dd-recette__nom { color: var(--dd-texte); }
.dd-recette.is-verrou .dd-recette__etat { border-style: dashed; }

/* Cours d'un produit à la foire : le dernier prix, la courbe, les ordres en attente de la criée, sans nom. */
.dd-cours { display: grid; gap: var(--dd-s3); }
.dd-cours__tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--dd-s3); }
.dd-cours__tete .dd-objet { cursor: default; }
.dd-cours__prix { margin: 0; text-align: right; font-size: var(--dd-t-petit); line-height: 1.35; }
.dd-cours__prix .dd-tournois { font-size: var(--dd-t-fort); }
.dd-ordres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dd-s4); }
.dd-ordres caption { text-align: left; padding-bottom: 2px; font-size: var(--dd-t-note); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dd-texte-muet); }
.dd-ordres .dd-table td { padding: 2px var(--dd-s2); }
.dd-ordres .dd-table td:first-child { padding-left: 0; }

/* Courbe des prix : une ligne sur 30 jours, coupée les jours sans échange. */
.dd-courbe { margin: 0; }
.dd-courbe svg { display: block; width: 100%; height: 64px; overflow: visible; }
.dd-courbe__aire { fill: rgba(30, 58, 95, .08); }
.dd-courbe__ligne { fill: none; stroke: var(--dd-indigo); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dd-courbe__repere { stroke: var(--dd-filet-encre); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.dd-courbe figcaption { display: flex; justify-content: space-between; gap: var(--dd-s3); margin-top: 2px; font-size: var(--dd-t-note); color: var(--dd-texte-muet); }

/* ========================================================================== */
/* Écrit : lettres, sceaux, gazette                                           */
/* ========================================================================== */

.dd-lettre {
  position: relative; background: #f8f1df; border: 1px solid rgba(58, 52, 40, .3); border-radius: 2px;
  padding: var(--dd-s4) var(--dd-s5); font: 400 var(--dd-t-fort) / 1.45 var(--dd-font-titre); color: var(--dd-encre-douce);
  box-shadow: 0 2px 0 rgba(58, 52, 40, .08);
}
.dd-lettre__signature { margin-top: var(--dd-s3); text-align: right; font-style: italic; }
.dd-cachet {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--dd-cramoisi-fonce); color: #f6dcc8; font: 700 10px var(--dd-font-ui);
  box-shadow: 0 0 0 2px #f8f1df, 0 0 0 3px var(--dd-cramoisi-fonce);
}
.dd-cachet--simple { background: var(--dd-encre-muette); box-shadow: 0 0 0 2px #f8f1df, 0 0 0 3px var(--dd-encre-muette); }
.dd-cachet--ouvert { background: transparent; color: var(--dd-encre-muette); border: 1px dashed var(--dd-encre-muette); box-shadow: none; }

/* Sceaux de réaction (place, lettres) : un mot, pas d'emoji */
.dd-sceaux { display: flex; flex-wrap: wrap; gap: var(--dd-s1); }
.dd-sceau { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 1px solid var(--dd-filet); border-radius: var(--dd-pill); background: var(--dd-papier); color: var(--dd-texte); font: 700 var(--dd-t-note) var(--dd-font-ui); cursor: pointer; }
.dd-sceaux .dd-sceau { position: static; width: auto; height: auto; transform: none; filter: none; pointer-events: auto; white-space: nowrap; }
.dd-sceau::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dd-encre-muette); }
.dd-sceau[aria-pressed="true"] { border-color: var(--dd-cramoisi-fonce); color: var(--dd-cramoisi-fonce); }
.dd-sceau[aria-pressed="true"]::before { background: var(--dd-cramoisi-fonce); }

/* Message de place */
.dd-message { display: grid; grid-template-columns: var(--dd-med-m) minmax(0, 1fr); gap: var(--dd-s3); align-items: start; }
.dd-message + .dd-message { margin-top: var(--dd-s3); padding-top: var(--dd-s3); border-top: 1px solid var(--dd-filet); }
.dd-message__entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--dd-s2); }
.dd-message__texte { margin: 2px 0 var(--dd-s2); font-size: var(--dd-t-corps); }

/* Gazette */
.dd-gazette { background: #f8f1df; color: var(--dd-encre); border: 1px solid rgba(58, 52, 40, .3); padding: var(--dd-s5); }
.dd-gazette__titre { font: 400 var(--dd-t-affiche) / 1 var(--dd-font-affiche); text-align: center; margin: 0; }
.dd-gazette__date { text-align: center; font-size: var(--dd-t-note); letter-spacing: .12em; text-transform: uppercase; border-top: 1px solid var(--dd-encre); border-bottom: 1px solid var(--dd-encre); padding: var(--dd-s1) 0; margin: var(--dd-s2) 0 var(--dd-s4); }
.dd-gazette__une { font: 500 var(--dd-t-titre) / 1.05 var(--dd-font-titre); margin: 0 0 var(--dd-s2); }
.dd-gazette__colonnes { column-count: 3; column-gap: var(--dd-s5); column-rule: 1px solid var(--dd-filet); font: var(--dd-t-corps) / 1.45 var(--dd-font-titre); }
.dd-gazette__colonnes > * { break-inside: avoid; margin: 0 0 var(--dd-s3); }
.dd-fait, .dd-rumeur { display: inline-block; font: 700 var(--dd-t-note) var(--dd-font-ui); letter-spacing: .06em; text-transform: uppercase; padding: 0 6px; border-radius: var(--dd-r-s); }
.dd-fait { background: var(--dd-indigo); color: var(--dd-creme); }
.dd-rumeur { border: 1px dashed var(--dd-encre-muette); color: var(--dd-encre-muette); }

/* ========================================================================== */
/* Scrutin à la ballotte                                                      */
/* ========================================================================== */

.dd-urnes { display: flex; gap: var(--dd-s3); align-items: flex-end; }
.dd-urne { flex: 1; display: grid; justify-items: center; gap: var(--dd-s2); padding: var(--dd-s3); border: 1px solid var(--dd-filet); border-top: 6px solid var(--dd-encre-douce); border-radius: var(--dd-r-s); background: var(--dd-papier); text-align: center; cursor: pointer; color: inherit; font: inherit; }
.dd-urne[aria-pressed="true"] { border-color: var(--dd-or); border-top-color: var(--dd-or); background: var(--dd-or-pale); }
.dd-boule { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--dd-encre); background: #fff; vertical-align: -2px; }
.dd-boule--noire { background: var(--dd-encre); }
.dd-boule--l { width: 26px; height: 26px; }
.dd-decompte { display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem; gap: var(--dd-s1) var(--dd-s3); align-items: center; font-size: var(--dd-t-petit); }

/* ========================================================================== */
/* Navigation : frise de la ville (ordinateur), onglets bas (téléphone)       */
/* ========================================================================== */

.dd-frise { position: relative; height: var(--dd-frise); }
.dd-frise::before { content: ""; position: absolute; inset: 0 0 var(--dd-frise-sol) 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(29, 27, 23, 0) 0%, rgba(29, 27, 23, .2) 55%, rgba(29, 27, 23, .6) 100%); }
.dd-frise__sol { position: absolute; left: 0; right: 0; bottom: 0; height: var(--dd-frise-sol); background: var(--dd-sombre); }
/* Rue défilante : les lieux gardent leur taille ; au-delà de la largeur, la rue défile */
.dd-frise__rue { position: absolute; z-index: 1; left: 96px; right: calc(var(--dd-s4) + var(--dd-sac-place)); bottom: 0; top: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--dd-s5);
  list-style: none; margin: 0; padding: 0 var(--dd-s3); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding: 0 var(--dd-s4);
  scrollbar-width: thin; scrollbar-color: rgba(239, 232, 214, .35) transparent; }
.dd-frise__rue > li { flex: none; scroll-snap-align: start; }
.dd-frise__rue::-webkit-scrollbar { height: 4px; }
.dd-frise__rue::-webkit-scrollbar-thumb { background: rgba(239, 232, 214, .35); border-radius: 2px; }
.dd-frise__rue.is-suite-droite { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.dd-frise__rue.is-suite-gauche { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
.dd-frise__rue.is-suite-gauche.is-suite-droite { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.dd-frise__meteo { position: absolute; left: var(--dd-s4); bottom: calc(var(--dd-frise-sol) + 6px); display: grid; justify-items: center; gap: 2px; color: var(--dd-sombre-texte); font-size: var(--dd-t-note); text-decoration: none; }
.dd-frise__ciel { width: 34px; height: 34px; filter: drop-shadow(0 1px 0 rgba(29, 27, 23, .35)); }
[data-theme="nuit"] .dd-frise__ciel { width: 34px; height: 34px; filter: drop-shadow(0 1px 0 rgba(29, 27, 23, .35)); }
.dd-frise__meteo b { background: var(--dd-sombre); padding: 1px 6px; border-radius: 3px; font-weight: 700; }

/* Un bâtiment vu de face, dessiné comme les personnages */
.dd-bat { position: relative; display: flex; flex-direction: column; align-items: center; color: var(--dd-sombre-texte); text-decoration: none; }
.dd-bat__dessin { position: relative; height: var(--h, 72px); width: var(--w, 88px); display: grid; place-items: end center; }
.dd-bat__dessin > img { height: var(--h, 72px); width: auto; max-width: none; filter: drop-shadow(0 2px 0 rgba(29, 27, 23, .25)); }
/* Bâtiment pas encore dessiné : silhouette sobre, à remplacer par un sprite IMG-B */
.dd-bat__dessin.is-attente { background: rgba(201, 193, 176, .9); border: 1px solid #8d877a; border-bottom: 0; color: var(--dd-encre-douce); font-size: var(--dd-t-note); place-items: center; }
.dd-bat__dessin.is-attente::before { content: ""; position: absolute; left: -1px; right: -1px; bottom: 100%; height: 20px; background: rgba(179, 171, 153, .9); clip-path: polygon(8% 100%, 50% 0, 92% 100%); }
.dd-bat__nom { color: var(--dd-sombre-texte); height: var(--dd-frise-sol); display: flex; align-items: center; gap: 5px; padding: 0 var(--dd-s1); font-size: var(--dd-t-petit); white-space: nowrap; }
.dd-bat__etat { position: absolute; left: 50%; bottom: calc(var(--h, 72px) + var(--dd-frise-sol) + 8px); transform: translateX(-50%); z-index: 2; white-space: nowrap;
  font-size: var(--dd-t-note); font-weight: 700; padding: 1px 7px; border-radius: var(--dd-pill); background: var(--dd-or); color: var(--dd-encre); }
.dd-bat__etat--presence { background: var(--dd-sombre-texte); }
.dd-bat__etat--alerte { background: var(--dd-cramoisi); color: #fff; }
.dd-bat.is-on .dd-bat__nom { color: var(--dd-or-clair); box-shadow: inset 0 3px 0 var(--dd-or); }
.dd-bat.is-ferme { opacity: .45; }
/* Dévoilement par niveau (DDDevoiler, kit.js) : un lieu pas encore ouvert n'est pas dans la rue ; le jour où il s'ouvre, il brille */
.dd-frise__rue > li.is-cache { display: none; }
.dd-bat.is-decouverte .dd-bat__dessin > img { animation: dd-decouverte 1.6s var(--dd-courbe) 3; filter: drop-shadow(0 0 0 var(--dd-or)) drop-shadow(0 0 8px rgba(232, 197, 71, .95)); }
.dd-bat__nouveau { position: absolute; left: 50%; bottom: calc(var(--h, 72px) + var(--dd-frise-sol) + 8px); transform: translateX(-50%); z-index: 2; white-space: nowrap;
  padding: 1px 8px; border-radius: var(--dd-pill); background: var(--dd-or); color: var(--dd-encre); font: 700 var(--dd-t-note) / 1.4 var(--dd-font-ui); }
@keyframes dd-decouverte { 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .dd-bat.is-decouverte .dd-bat__dessin > img { animation: none; } }
.dd-bat.is-ferme[data-niveau] .dd-bat__nom::after { content: attr(data-niveau); font-size: var(--dd-t-note); border: 1px solid #8d877a; padding: 0 4px; border-radius: 6px; }
.dd-bat:hover .dd-bat__dessin > img, .dd-bat:focus-visible .dd-bat__dessin > img { filter: drop-shadow(0 0 0 var(--dd-or)) drop-shadow(0 0 6px rgba(232, 197, 71, .9)); }
.dd-bat:focus-visible { box-shadow: none; outline: 2px solid var(--dd-or); outline-offset: 2px; }

/* Barre des lieux simple (écrans sans tableau) et onglets du téléphone */
.dd-barre-basse { display: flex; height: var(--dd-barre-basse); background: var(--dd-sombre); color: var(--dd-sombre-texte); }
.dd-barre-basse > a { flex: 1; display: grid; place-content: center; justify-items: center; gap: 2px; border-right: 1px solid var(--dd-sombre-filet); color: inherit; text-decoration: none; font-size: var(--dd-t-petit); }
.dd-barre-basse > a > img { width: 26px; height: 26px; object-fit: contain; }
.dd-barre-basse > a.is-on { color: var(--dd-or-clair); box-shadow: inset 0 3px 0 var(--dd-or); }
.dd-barre-basse .dd-puce { min-height: 16px; padding: 0 5px; font-size: 10px; }

/* ========================================================================== */
/* Le tableau : décor peint et figures superposées                            */
/* ========================================================================== */

.dd-tableau { position: relative; overflow: hidden; background: #2a241b; }
.dd-tableau__fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; z-index: 0; }
.dd-tableau__voile { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(180deg, rgba(15, 12, 8, .15) 0%, rgba(15, 12, 8, 0) 30%, rgba(15, 12, 8, 0) 70%, rgba(15, 12, 8, .35) 100%); }
.dd-tableau > .dd-panneau, .dd-tableau > .dd-calque { position: absolute; z-index: 6; }

/* Figure dessinée posée sur le sol peint : pieds au ras du bas, deux ombres */
.dd-figure { position: absolute; z-index: 2; height: var(--taille, 40%); left: var(--x, 50%); bottom: var(--pied, 8%); transform: translateX(-50%); }
.dd-figure > img { position: relative; z-index: 1; height: 100%; width: auto; max-width: none; }
/* Ombre de contact : toujours présente, elle déborde des pieds pour rester visible */
.dd-figure::before { content: ""; position: absolute; left: 50%; bottom: -3.5%; width: var(--ombre, 78%); height: 8%; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse closest-side, rgba(28, 18, 8, .72) 0, rgba(28, 18, 8, .5) 45%, rgba(28, 18, 8, 0) 100%); }
.dd-figure.is-miroir > img { transform: scaleX(-1); }
/* Ombre portée : la silhouette couchée au sol, à l'opposé de la lumière du décor (ici le ciel du fond,
   donc vers le spectateur). --img est posé par kit.js ; --portee règle l'inclinaison, la scène peut la fixer. */
.dd-figure::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; z-index: 0; pointer-events: none;
  background: var(--img) center bottom / contain no-repeat; filter: brightness(0) blur(1.5px); opacity: var(--portee-opacite, .5);
  transform-origin: 50% 100%; transform: skewX(var(--portee, 34deg)) scaleY(-.3); }
.dd-figure.is-miroir::after { transform: scaleX(-1) skewX(calc(-1 * var(--portee, 34deg))) scaleY(-.3); }
.dd-figure__nom { position: absolute; left: 50%; top: -28px; transform: translateX(-50%); z-index: 6; white-space: nowrap; background: rgba(29, 27, 23, .82); color: var(--dd-sombre-texte); font-size: var(--dd-t-note); padding: 2px 8px; border-radius: var(--dd-pill); display: inline-flex; align-items: center; gap: 6px; }

/* Libellé or d'un lieu cliquable dans le décor */
.dd-libelle-lieu { font: 600 var(--dd-t-fort) var(--dd-font-titre); color: var(--dd-or-clair); text-decoration: none; border-bottom: 1px solid var(--dd-or); text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }

/* ========================================================================== */
/* Fenêtres                                                                   */
/* ========================================================================== */

.dd-voile-modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--dd-s5); background: var(--dd-voile); }
.dd-voile-modal[hidden] { display: none; }
.dd-modal { width: min(520px, 100%); max-height: 86vh; overflow: auto; background: var(--dd-papier); color: var(--dd-texte); border-radius: var(--dd-r-m); box-shadow: var(--dd-ombre-forte); padding: var(--dd-s5); }
.dd-modal__actions { display: flex; justify-content: flex-end; gap: var(--dd-s2); margin-top: var(--dd-s4); }

/* Annonce brève (récolte, gain, nouvelle lettre) */
.dd-annonce { display: flex; align-items: center; gap: var(--dd-s3); padding: var(--dd-s2) var(--dd-s3); border-radius: var(--dd-r-m); background: var(--dd-sombre); color: var(--dd-sombre-texte); box-shadow: var(--dd-ombre); font-size: var(--dd-t-petit); max-width: 26rem; }
.dd-annonce > img { width: 36px; height: 36px; object-fit: contain; }

/* Info-bulle */
.dd-bulle { position: relative; display: inline-block; max-width: 18rem; padding: var(--dd-s2) var(--dd-s3); border-radius: var(--dd-r-s); background: var(--dd-sombre); color: var(--dd-sombre-texte); font-size: var(--dd-t-note); line-height: 1.35; }
.dd-bulle::after { content: ""; position: absolute; left: 16px; top: 100%; border: 6px solid transparent; border-top-color: var(--dd-sombre); }

/* Rite de passage et écrans plein cadre narratifs */
.dd-rite { position: relative; display: grid; place-items: center; text-align: center; gap: var(--dd-s4); padding: var(--dd-s7) var(--dd-s5); color: var(--dd-creme); background: radial-gradient(ellipse at 50% 40%, rgba(212, 160, 23, .22), rgba(15, 12, 8, 0) 60%), var(--dd-sombre); }
.dd-rite .dd-affiche { color: var(--dd-or-clair); }

/* Passage de niveau (WF-18) : le carnet plein, une fois ouvert, s'affiche au centre sur un voile.
   La page se tourne, le sceau du niveau se pose, puis félicitations, rite et la suite. */
.dd-carnet-passage { position: relative; width: min(780px, 100%); max-height: 88vh; overflow: auto; padding: var(--dd-s5) var(--dd-s6) var(--dd-s5) calc(var(--dd-s6) + 4px);
  border-left: 16px solid var(--dd-cuir); border-radius: var(--dd-r-s) var(--dd-r-l) var(--dd-r-l) var(--dd-r-s);
  background: linear-gradient(90deg, color-mix(in srgb, var(--dd-cuir) 16%, transparent), transparent 22px), var(--dd-papier);
  box-shadow: var(--dd-ombre-forte); transform-origin: left center; animation: dd-page-tourne .7s var(--dd-courbe); }
.dd-carnet-passage__fermer { position: absolute; top: var(--dd-s3); right: var(--dd-s3); width: 28px; height: 28px; border: 0; border-radius: var(--dd-r-s); background: none; color: var(--dd-texte-muet); font-size: 20px; line-height: 1; cursor: pointer; }
.dd-carnet-passage__fermer:hover { background: var(--dd-or-pale); color: var(--dd-texte); }
.dd-carnet-passage__tete { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--dd-s2) var(--dd-s4); align-items: center; padding-right: var(--dd-s5); }
.dd-carnet-passage__sceau { grid-row: span 3; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; color: var(--dd-encre);
  background: radial-gradient(circle at 35% 30%, var(--dd-or-clair), var(--dd-or) 72%); font: 400 44px / 1 var(--dd-font-affiche);
  box-shadow: 0 0 0 3px var(--dd-papier), 0 0 0 5px var(--dd-or), var(--dd-ombre); animation: dd-sceau .9s var(--dd-courbe) .35s both; }
.dd-carnet-passage .dd-affiche { color: var(--dd-texte-fort); }
.dd-carnet-passage__bilan { margin: var(--dd-s3) 0 0; font-size: var(--dd-t-petit); line-height: 1.5; }
.dd-carnet-passage__rite { display: grid; gap: var(--dd-s2); margin-top: var(--dd-s4); padding: var(--dd-s4) var(--dd-s5); border-radius: var(--dd-r-m); color: var(--dd-sombre-texte);
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--dd-or) 22%, transparent), transparent 70%), var(--dd-sombre); }
.dd-carnet-passage__rite .dd-surtitre, .dd-carnet-passage__rite .dd-note { color: var(--dd-sombre-muet); }
.dd-carnet-passage__rite .dd-titre-boite { font: 400 26px / 1.15 var(--dd-font-affiche); color: var(--dd-or-clair); }
.dd-carnet-passage__rite p { margin: 0; line-height: 1.5; }
.dd-carnet-passage__choix { display: grid; gap: var(--dd-s2); margin-top: var(--dd-s1); }
.dd-carnet-passage__rite .dd-choix { background: color-mix(in srgb, var(--dd-creme) 6%, transparent); color: var(--dd-creme); border-color: color-mix(in srgb, var(--dd-creme) 30%, transparent); }
.dd-carnet-passage__rite .dd-choix[aria-pressed="true"] { background: color-mix(in srgb, var(--dd-or) 18%, transparent); border-color: var(--dd-or); }
.dd-carnet-passage__suite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dd-s3) var(--dd-s5); margin-top: var(--dd-s5); }
.dd-carnet-passage__suite > h3 { grid-column: 1 / -1; margin: 0; font: 400 var(--dd-t-titre-boite) / 1.2 var(--dd-font-affiche); color: var(--dd-texte-fort); }
.dd-carnet-passage__suite .dd-surtitre { margin-bottom: var(--dd-s1); }
.dd-carnet-passage__suite ul + .dd-surtitre, .dd-carnet-passage__suite p + .dd-surtitre { margin-top: var(--dd-s3); }
.dd-carnet-passage__suite ul + .dd-note { margin-top: var(--dd-s2); }
.dd-carnet-passage__suite .dd-lignes > li { justify-content: flex-start; padding: 6px 0; }
.dd-carnet-passage__pied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dd-s2) var(--dd-s4); margin-top: var(--dd-s5); padding-top: var(--dd-s4); border-top: 1px solid var(--dd-filet); }
.dd-carnet-passage__pied .dd-btn--or { margin-left: auto; }
@keyframes dd-page-tourne { 0% { opacity: 0; transform: perspective(1400px) rotateY(-70deg); } 100% { opacity: 1; transform: none; } }
@keyframes dd-sceau { 0% { opacity: 0; transform: scale(.4) rotate(-25deg); } 60% { opacity: 1; transform: scale(1.12) rotate(4deg); } 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .dd-carnet-passage, .dd-carnet-passage__sceau { animation: none; }
}
@media (max-width: 640px) {
  .dd-carnet-passage { padding: var(--dd-s4) var(--dd-s4) var(--dd-s4) var(--dd-s5); }
  .dd-carnet-passage__suite { grid-template-columns: 1fr; }
}

/* ========================================================================== */
/* Téléphone                                                                  */
/* ========================================================================== */

.dd-mobile-haut { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 var(--dd-s3); background: var(--dd-sombre); color: var(--dd-sombre-texte); font-size: var(--dd-t-note); }
.dd-mobile-haut img { height: 24px; width: auto; }

@media (max-width: 720px) {
  .dd-barre-haute { gap: var(--dd-s2); overflow-x: auto; }
  .dd-gazette__colonnes { column-count: 1; }
  .dd-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Compte : médaillon de la barre haute, ouvre un menu */
.dd-compte { position: relative; flex: none; }
.dd-compte__bouton { display: inline-flex; align-items: center; gap: 4px; padding: 2px; border: 0; border-radius: var(--dd-pill); background: none; color: var(--dd-sombre-texte); cursor: pointer; }
.dd-compte__bouton:hover .dd-medaillon, .dd-compte__bouton[aria-expanded="true"] .dd-medaillon { box-shadow: 0 0 0 2px var(--dd-or); }
.dd-compte__fleche { width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; margin-top: 4px; }
.dd-compte__bouton[aria-expanded="true"] .dd-compte__fleche { transform: rotate(180deg); margin-top: -4px; }
.dd-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; min-width: 250px; padding: var(--dd-s2) 0;
  background: var(--dd-creme); color: var(--dd-encre); border: 1px solid var(--dd-filet-or); border-radius: var(--dd-r-m); box-shadow: var(--dd-ombre-forte); white-space: normal; }
.dd-menu[hidden] { display: none; }
.dd-menu::before { content: ""; position: absolute; right: 18px; bottom: 100%; border: 7px solid transparent; border-bottom-color: var(--dd-creme); }
.dd-menu__entete { display: flex; align-items: center; gap: var(--dd-s3); padding: var(--dd-s2) var(--dd-s4) var(--dd-s3); border-bottom: 1px solid var(--dd-filet); margin-bottom: var(--dd-s1); }
.dd-menu a { display: block; padding: 8px var(--dd-s4); color: var(--dd-encre); text-decoration: none; font-size: var(--dd-t-petit); }
.dd-menu a:hover, .dd-menu a:focus-visible { background: rgba(212, 160, 23, .16); color: var(--dd-indigo); outline: none; }
.dd-menu hr { border: 0; border-top: 1px solid var(--dd-filet); margin: var(--dd-s1) 0; }
.dd-barre-haute .dd-menu a { color: var(--dd-encre); }

/* Aucun bouton ne s'arrête sous la frise ni sous la barre haute : quand la page défile vers un élément (focus au
   clavier, lien, scrollIntoView), elle garde libres la hauteur de la barre en haut et celle de la frise en bas
   (rapports des tests joueurs du 3 novembre 2026, au téléphone et sur les écrans de hauteur moyenne). */
html:has(.dd-frise) { scroll-padding-top: calc(var(--dd-barre-haute) + var(--dd-s2)); scroll-padding-bottom: calc(var(--dd-frise) + var(--dd-s3)); }

/* Téléphone (tests joueurs du 3 novembre 2026) : la frise garde ses lieux. Les trois objets (lettres, carnet, besace)
   se font compacts à droite, la météo se range, et la rue des lieux défile du doigt dans la place qui reste. Les
   fenêtres du carnet et de la besace, et les félicitations d'un niveau, tiennent dans la largeur de l'écran. */
@media (max-width: 760px) {
  .dd-tableau, .dd-frise { --dd-sac-place: 168px; }
  .dd-sac, .dd-carnet, .dd-lettres { width: 54px; right: var(--dd-s2); }
  .dd-carnet { right: calc(var(--dd-s2) + 56px); }
  .dd-lettres { right: calc(var(--dd-s2) + 112px); }
  .dd-sac > img, .dd-carnet > img { height: 40px; margin-bottom: 6px; }
  .dd-lettres > img { height: 34px; margin-bottom: 10px; }
  .dd-sac__touche, .dd-carnet__touche, .dd-lettres__touche { display: none; }
  .dd-frise__meteo { display: none; }
  .dd-frise__rue { left: 0; right: calc(var(--dd-s2) + var(--dd-sac-place)); gap: var(--dd-s3); padding: 0 var(--dd-s2); scroll-snap-type: x mandatory; }
  .dd-sac-fenetre, .dd-carnet-fenetre { position: fixed; left: var(--dd-s2); right: var(--dd-s2); width: auto; max-width: none;
    bottom: calc(var(--dd-frise) + var(--dd-s2)); max-height: calc(100dvh - var(--dd-frise) - var(--dd-barre-haute) - var(--dd-s4)); overflow-y: auto; }
  .dd-sac-fenetre::after { display: none; }
  .dd-voile-modal { padding: var(--dd-s2); }
  .dd-carnet-passage { width: 100%; max-height: calc(100dvh - 2 * var(--dd-s2)); padding: var(--dd-s4) var(--dd-s3) var(--dd-s4) var(--dd-s4); border-left-width: 8px; }
}

/* Téléphone (quatrième passage des joueurs) : le menu du compte s'ouvre en feuille sous la barre haute, sur toute la
   largeur, au-dessus des parchemins ; « Se déconnecter » reste toujours dans l'écran. */
@media (max-width: 760px) {
  :is(.lieu-barre, .dd-barre-haute):has(.dd-menu:not([hidden]), .dd-tiroir__fenetre:not([hidden])) { z-index: 950; }
  /* Le panneau du corps (faim, sommeil, santé) aussi : en feuille sous la barre, « Manger ta ration » toujours visible */
  .dd-barre-haute .dd-tiroir__fenetre { position: fixed; top: calc(var(--dd-barre-haute, 56px) + var(--dd-s1)); left: var(--dd-s2); right: var(--dd-s2);
    width: auto; max-width: none; max-height: calc(100dvh - var(--dd-barre-haute, 56px) - var(--dd-s4)); overflow-y: auto; }
  .dd-barre-haute .dd-menu { position: fixed; top: calc(var(--dd-barre-haute, 56px) + var(--dd-s1)); left: var(--dd-s2); right: var(--dd-s2);
    min-width: 0; max-height: calc(100dvh - var(--dd-barre-haute, 56px) - var(--dd-s4)); overflow-y: auto; }
  .dd-barre-haute .dd-menu::before { display: none; }
  .dd-barre-haute .dd-menu a { min-height: 44px; display: flex; align-items: center; }
}

/* « Tu croises » sur un écran étroit : dans le flux, en tête de la colonne (commun/croisees.js), jamais posé sur un texte */
.dd-croisees.is-dedans { position: static; transform: none; width: auto; max-width: none; margin: 0; z-index: auto; }
.dd-croisees.is-dedans .dd-croise { width: 100%; }

/* Un portrait en pied dans un médaillon : commun/medaillon-visage.js le cadre sur la tête */
.dd-medaillon.is-portrait { position: relative; overflow: hidden; }

/* « Tu croises » en liste (cinquième passage des joueurs) : toutes les personnes présentes, jusqu'à ce qu'on replie */
.dd-croisees--liste .dd-croisees__carte { display: grid; gap: var(--dd-s2); width: min(360px, 100%); padding: var(--dd-s2) var(--dd-s3);
  border: 1px solid rgba(196, 163, 90, .6); border-radius: var(--dd-r-l); background: rgba(20, 15, 10, .9); color: var(--dd-sombre-texte); box-shadow: var(--dd-ombre); }
.dd-croisees.is-dedans .dd-croisees__carte { width: 100%; }
.dd-croisees__tete { display: flex; align-items: center; gap: var(--dd-s2); }
.dd-croisees__tete .dd-note { color: var(--dd-sombre-muet); margin-right: auto; }
.dd-croisees__tete .dd-btn--lien { color: var(--dd-or-clair); }
.dd-croisees__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--dd-s1); max-height: min(44vh, 360px); overflow-y: auto; }
.dd-croisees--liste .dd-croise { border: 0; box-shadow: none; background: rgba(239, 232, 214, .06); justify-content: space-between; }
.dd-croisees__ouvrir { background: rgba(20, 15, 10, .88); color: var(--dd-sombre-texte); border-color: rgba(196, 163, 90, .6); }

/* Où l'on est (commun/jeu.js, vue ma_presence) : « Tu es à la foire », ou de loin, avec de quoi y aller */
.dd-ici { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dd-s2) var(--dd-s3); margin: 0 0 var(--dd-s3); padding: var(--dd-s2) var(--dd-s3);
  border-left: 3px solid var(--dd-ocre); }
.dd-ici.is-ici { border-left-color: var(--dd-or); }
.dd-ici__texte { margin: 0; flex: 1 1 16rem; font-size: var(--dd-t-petit); line-height: 1.4; }
.dd-ici__gestes { display: flex; flex-wrap: wrap; gap: var(--dd-s2); }
.dd-ici__gestes .dd-btn { min-height: 44px; }

/* Toute barre haute, celle des pages de lieu comme celles écrites dans une page (criée, fiche, boutique) : les mêmes
   retraits que commun/lieu.css, pour que le bouton du compte reste dans l'écran (quatrième passage, tablette 768 px). */
@media (max-width: 1500px) { .dd-barre-haute .dd-live { display: none; } }
@media (max-width: 1100px) { .dd-barre-haute .dd-barre-haute__date { display: none; } }
@media (max-width: 960px) { .dd-barre-haute .dd-presents, .dd-barre-haute .dd-barre-haute__ville { display: none; } }
@media (max-width: 760px) { .dd-barre-haute .dd-avance { display: none; } }
@media (max-width: 480px) { .dd-barre-haute .dd-barre-haute__rdv { display: none; } }