/* ==================================================================
 * Plan de table — thème « Papeterie » : ivoire, or champagne et eucalyptus.
 *
 * ▸ TOUTES les couleurs du projet sont dans le bloc :root ci-dessous,
 *   y compris celles du plan SVG (app.js ne contient plus un seul code
 *   hexadécimal). Pour recolorer l'application, il n'y a que ce bloc à
 *   toucher.
 *
 * Mise en page : .app est une grille qui occupe exactement la hauteur
 * visible. Rien ne scrolle au niveau de la page ; seuls le panneau des
 * invités et la vue Liste ont leur propre ascenseur. C'est ce qui évite le
 * « rebond » iOS pendant l'accueil.
 *
 *   iPhone / iPad portrait (< 1000 px) : en-tête / plan / tiroir en bas.
 *   iPad paysage (>= 1000 px)          : en-tête, puis plan à gauche et
 *                                        panneau des invités à droite.
 * ================================================================== */

:root {
  /* --- La salle ---------------------------------------------------- */
  --room: #efe6d8;        /* au-delà des murs */
  --outside: #fdfaf4;     /* l'ouverture de la porte */
  --floor-a: #fdf8ef;     /* centre de la piste */
  --floor-b: #f8f1e3;
  --floor-c: #efe3ce;     /* contre les murs */
  --stage: #f7efe1;       /* estrade du chanteur */

  /* --- Les tables -------------------------------------------------- */
  --plate-a: #ffffff;     /* nappe, côté éclairé */
  --plate-b: #f6efe1;     /* nappe, côté ombre */
  --plate-hi: #ffffff;    /* nappe de la table sélectionnée */
  --plate-line: #d5be91;  /* liseré du plateau */
  --plate-ink: #3a322a;   /* texte posé sur la nappe */
  --plate-ink-2: #8d7c63;
  --seat: #ece0cb;        /* chaises */
  --seat-line: #cdb68c;
  --shadow: #6b543a;

  /* --- L'or champagne ---------------------------------------------- */
  --gold: #bfa062;
  --gold-hi: #d8bd83;
  --gold-deep: #96793f;   /* or sombre, lisible sur la nappe blanche */

  /* --- Botanique --------------------------------------------------- */
  --sage: #9aa694;        /* tiges et guirlandes — sage grisé */
  --sage-2: #cfd8c9;      /* remplissage très pâle des feuilles */
  --petal: #e9d1cf;       /* le corps des roses — rose poudré */
  --petal-line: #c98f99;  /* le cœur des roses */

  /* --- Accents ----------------------------------------------------- */
  --blush: #cf8f9c;       /* l'esperluette, les fiancés */
  --ok: #6f9377;          /* invité arrivé */

  /* --- Interface --------------------------------------------------- */
  --panel: #fdfaf5;
  --panel-2: #f9f3e9;
  --card: #fffdfa;
  --field: #fffdfa;
  --ink: #332c26;         /* texte principal */
  --ink-2: #6f6358;
  --ink-3: #a3968a;

  /* Filets et bordures : de l'or très dilué. */
  --line: #bfa0623d;
  --line-strong: #bfa06280;

  --shadow-s: 0 1px 2px #6b543a1f;
  --shadow-m: 0 8px 22px -8px #6b543a52;

  --display: "Didot", "Bodoni 72", "Hoefler Text", "Playfair Display", Georgia, "Times New Roman", serif;
  --script: "Snell Roundhand", "Apple Chancery", "Segoe Script", "Brush Script MT", cursive;
  --ui: "Optima", "Avenir Next", "Gill Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;

  color-scheme: light;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* app.js bascule Plan/Liste avec l'attribut `hidden` : il doit gagner
   contre les règles de display qui suivent (.plan { display: block }). */
[hidden] {
  display: none !important;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--ui);
  color: var(--ink);
  background-color: var(--room);
  /* Lueur chaude au centre, coins qui s'éteignent : un éclairage de salle. */
  background-image:
    radial-gradient(120% 85% at 50% -5%, #fffdf8, #0000 58%),
    radial-gradient(95% 65% at 50% 112%, #e6d7c0a6, #0000 60%);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: 100%;
}

/* Grain de pellicule, en overlay non cliquable. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.3;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input {
  font: inherit;
  color: inherit;
}

/* ------------------------------------------------------------------ *
 * Ossature
 * ------------------------------------------------------------------ */

.app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  /* 100dvh suit la barre d'URL de Safari sans une ligne de JavaScript. */
  height: 100dvh;
  padding:
    env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.app > * {
  min-width: 0;
}

/* ------------------------------------------------------------------ *
 * En-tête
 * ------------------------------------------------------------------ */

.header {
  display: grid;
  /* La marque garde toujours la place d'écrire « EMIE & ANDRÉ » en entier ;
     c'est la recherche qui cède en premier. */
  grid-template-columns: minmax(300px, 1fr) minmax(240px, 480px) auto;
  grid-template-areas: "brand search right";
  align-items: center;
  gap: 18px;
  padding: 12px 26px 13px;
  background: linear-gradient(var(--panel-2), var(--panel));
  border-bottom: 1px solid var(--line-strong);
}

.brand {
  grid-area: brand;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-rings {
  flex: none;
  color: var(--gold);
}

.brand-text {
  min-width: 0;
}

.brand-title {
  font-family: var(--display);
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* L'esperluette en anglaise : le seul ornement de l'en-tête. */
.brand-title .amp {
  font-family: var(--script);
  font-size: 1.35em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--blush);
  margin: 0 0.04em;
  vertical-align: -0.06em;
}

.brand-sub {
  margin-top: 3px;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.search {
  grid-area: search;
  display: flex;
  align-items: center;
  position: relative;
}

.search svg {
  position: absolute;
  left: 18px;
  color: var(--gold);
  pointer-events: none;
}

.search input {
  width: 100%;
  height: 52px;
  padding: 0 52px 0 48px;
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  outline: none;
  box-shadow: inset 0 1px 2px #6b543a17;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search input::placeholder {
  color: var(--ink-3);
  font-style: italic;
}

.search input:focus {
  border-color: var(--gold);
  box-shadow: inset 0 1px 2px #6b543a17, 0 0 0 4px #bfa0622e;
}

/* Safari (iPad/iPhone) ajoute sa propre croix dans un input[type=search].
   On a déjà la nôtre, .search-clear : sans ça, deux croix côte à côte. */
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.search-clear {
  position: absolute;
  right: 8px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-3);
  border-radius: 50%;
}

.search-clear:active {
  background: #bfa06224;
}

.header-right {
  grid-area: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.tally {
  text-align: right;
  line-height: 1.1;
}

.tally-num {
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--gold-deep);
}

.tally-num em {
  font-size: 16px;
  font-style: normal;
  color: var(--ink-3);
}

.tally-label {
  margin-top: 2px;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Pastille « hors ligne prêt » : grise et clignotante tant que le cache
   n'est pas constitué, verte fixe une fois l'appli utilisable sans réseau. */
.offline {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-3);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.offline::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: pulse-dot 1.6s ease-in-out infinite;
}

.offline[data-state="ready"] {
  color: var(--ok);
  background: #6f93771a;
  border-color: #6f937752;
}

.offline[data-state="ready"]::before {
  background: var(--ok);
  animation: none;
}

@keyframes pulse-dot {
  50% {
    opacity: 0.3;
  }
}

.seg {
  display: flex;
  padding: 3px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.seg button {
  min-width: 62px;
  height: 34px;
  padding: 0 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}

.seg button[data-on="true"] {
  background: var(--ink);
  color: var(--panel);
  box-shadow: var(--shadow-s);
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--ink-2);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 50%;
}

.layout-btn {
  display: none;
}

.icon-btn:active {
  background: #bfa06224;
}

/* ------------------------------------------------------------------ *
 * Scène (plan ou liste)
 * ------------------------------------------------------------------ */

.stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 14px 22px;
}

.plan {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
}

/* ------------------------------------------------------------------ *
 * La salle dessinée
 * ------------------------------------------------------------------ */

.room-bg {
  fill: var(--room);
}

.floor {
  fill: url(#g-floor);
}

/* Les dégradés du SVG prennent leurs couleurs ici. */
.stop-floor-a { stop-color: var(--floor-a); }
.stop-floor-b { stop-color: var(--floor-b); }
.stop-floor-c { stop-color: var(--floor-c); }
.stop-plate-a { stop-color: var(--plate-a); }
.stop-plate-b { stop-color: var(--plate-b); }
.stop-honor-a { stop-color: var(--gold-hi); stop-opacity: 0.34; }
.stop-honor-b { stop-color: var(--gold); stop-opacity: 0.13; }
.stop-honor-c { stop-color: var(--gold); stop-opacity: 0; }

.honor-glow {
  fill: url(#g-honor);
}

/* --- Ornements art déco ------------------------------------------- */

.deco-rule {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.1;
  opacity: 0.6;
}

.deco-hair {
  fill: none;
  stroke: var(--gold);
  stroke-width: 0.55;
  opacity: 0.34;
}

.deco-gem {
  fill: var(--gold);
  opacity: 0.5;
}

/* --- Guirlandes, roses et allée ----------------------------------- */

.swag-stem {
  fill: none;
  stroke: var(--sage);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.65;
}

/* Feuille gravée : aplat très pâle, contour et nervure à l or fin. */
.leaf-blade {
  fill: var(--sage-2);
  stroke: var(--gold);
  stroke-width: 0.7;
  opacity: 0.92;
}

.leaf-vein {
  fill: none;
  stroke: var(--gold);
  stroke-width: 0.5;
  opacity: 0.5;
}

.berry {
  fill: var(--gold);
  opacity: 0.75;
}

.rose-body {
  fill: var(--petal);
  stroke: var(--gold);
  stroke-width: 0.8;
}

.rose-swirl {
  fill: none;
  stroke: var(--gold-deep);
  stroke-width: 0.85;
  stroke-linecap: round;
  opacity: 0.7;
}

/* --- Scène et entrée ---------------------------------------------- */

.stage-plate {
  fill: var(--stage);
  stroke: var(--gold);
  stroke-width: 1;
  opacity: 0.9;
}

.door-gap {
  fill: var(--outside);
}

.door-jamb {
  stroke: var(--gold);
  stroke-width: 1.6;
}

.door-swing {
  fill: none;
  stroke: var(--gold);
  stroke-width: 0.9;
  stroke-dasharray: 3 4;
  opacity: 0.5;
}

.door-arrow {
  fill: var(--gold-deep);
}

.room-label {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.3em;
  fill: var(--ink-3);
  text-anchor: middle;
}

.room-label.door {
  font-size: 14px;
  letter-spacing: 0.36em;
  fill: var(--gold-deep);
}

.room-glyph {
  font-family: var(--ui);
  font-size: 22px;
  fill: var(--gold-deep);
  text-anchor: middle;
  dominant-baseline: central;
}

/* ------------------------------------------------------------------ *
 * Tables sur le plan
 * ------------------------------------------------------------------ */

.tbl {
  cursor: pointer;
  animation: table-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes table-in {
  0% {
    opacity: 0;
    transform: translateY(7px) scale(0.94);
  }
}

/* Cible tactile large et invisible : on vise une table au doigt, pas au pixel. */
.tbl-hit {
  fill: transparent;
}

.tbl-top {
  transform-box: fill-box;
  transform-origin: 50%;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.tbl:active .tbl-top {
  transform: scale(0.96);
}

.tbl-shadow {
  fill: var(--shadow);
  opacity: 0.11;
  filter: blur(2.5px);
}

.tbl-seat {
  fill: var(--seat);
  stroke: var(--seat-line);
  stroke-width: 0.7;
}

.tbl-disc {
  fill: url(#g-plate);
  stroke: var(--plate-line);
  stroke-width: 1;
  transition: fill 0.25s, stroke 0.25s, stroke-width 0.25s;
}

.tbl-inlay {
  fill: none;
  stroke: var(--gold);
  stroke-width: 0.8;
  opacity: 0.45;
}

.tbl-ring {
  fill: none;
  stroke: var(--gold-deep);
  stroke-width: 3;
  stroke-linecap: round;
}

.tbl-num {
  font-family: var(--display);
  fill: var(--plate-ink);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  transition: fill 0.25s;
}

.tbl-count {
  font-family: var(--ui);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  fill: var(--plate-ink-2);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

/* « VIP » écrit dans l'épaisseur des croissants. */
.tbl-vip {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: 0.34em;
  fill: var(--plate-ink-2);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.tbl-honor-caption {
  font-family: var(--ui);
  font-size: 9px;
  letter-spacing: 0.34em;
  fill: var(--plate-ink-2);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.tbl-honor-names {
  font-family: var(--script);
  font-size: 28px;
  fill: var(--gold-deep);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}

.tbl[data-state="selected"] .tbl-disc {
  fill: var(--plate-hi);
  stroke: var(--gold-deep);
  stroke-width: 2.5px;
}

.tbl[data-state="selected"] .tbl-num {
  fill: var(--gold-deep);
}

.tbl[data-state="dim"] {
  opacity: 0.3;
}

.tbl-halo {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2px;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50%;
}

.tbl[data-state="selected"] .tbl-halo {
  animation: halo 1.9s ease-out infinite;
}

@keyframes halo {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.28);
  }
}

/* ------------------------------------------------------------------ *
 * Panneau des invités (tiroir en bas par défaut)
 * ------------------------------------------------------------------ */

.drawer {
  background: linear-gradient(var(--panel-2), var(--panel));
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -14px 34px -22px #6b543a3d;
}

.drawer-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  padding: 0 22px;
}

.drawer-back {
  display: flex;
  flex: none;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px 0 9px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.drawer-back:active {
  background: #bfa06224;
}

.drawer-title {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.drawer-host {
  margin-left: -4px;
  font-family: var(--display);
  font-size: 18px;
  font-style: italic;
  color: var(--gold-deep);
  white-space: nowrap;
}

.drawer-host::before {
  content: "· ";
  color: var(--ink-3);
  font-style: normal;
}

.drawer-meta {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

/* Filet doré qui mange l'espace restant et pousse le chevron à droite. */
.rule {
  flex: 1;
  min-width: 20px;
  height: 1px;
  background: linear-gradient(90deg, #0000, var(--line-strong), #0000);
}

.drawer-toggle {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--ink-2);
  border-radius: 50%;
}

.drawer-toggle svg {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.drawer[data-open="false"] .drawer-toggle svg {
  transform: rotate(180deg);
}

.drawer-body {
  height: 258px;
  padding: 0 22px 18px;
  overflow: hidden auto;
  -webkit-overflow-scrolling: touch;
  transition: height 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
}

.drawer[data-open="false"] .drawer-body {
  height: 0;
  padding-bottom: 0;
  opacity: 0;
  overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * Invités d'une table
 * ------------------------------------------------------------------ */

.guests {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.guests > *,
.overview > *,
.results > * {
  min-width: 0;
}

.guest {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 50px;
  padding: 7px 14px 7px 10px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-s);
  transition: background 0.2s, border-color 0.2s, transform 0.12s;
}

.guest:active {
  transform: scale(0.985);
}

.guest[data-arrived="true"] {
  background: #6f93771a;
  border-color: #6f937752;
}

.guest[data-focus="true"] {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px #bfa06240;
}

.guest-tick {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #0000;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.guest[data-arrived="true"] .guest-tick {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--panel);
}

.guest-name {
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guest[data-generic="true"] .guest-name {
  color: var(--ink-2);
  font-style: italic;
}

.guest-x {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 17px;
  color: var(--ink-3);
  border-radius: 50%;
}

.ghost {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 50px;
  padding: 7px 14px 7px 10px;
  font-size: 13px;
  font-style: italic;
  color: var(--ink-3);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-m);
}

.ghost-plus {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 15px;
  font-style: normal;
  border: 1.5px dashed var(--line-strong);
  border-radius: 50%;
}

.add-guest {
  color: var(--gold-deep);
}

.add-guest:active {
  background: #bfa06224;
}

/* ------------------------------------------------------------------ *
 * Vue d'ensemble des tables (panneau au repos)
 * ------------------------------------------------------------------ */

.overview {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 9px;
}

.ov {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 60px;
  padding: 8px 12px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-s);
  transition: transform 0.12s, border-color 0.2s;
}

.ov:active {
  border-color: var(--gold);
  transform: scale(0.985);
}

.ov[data-done="true"] {
  background: #6f93771a;
  border-color: #6f937752;
}

.ov-num {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  font-family: var(--display);
  font-size: 19px;
  line-height: 1;
  color: var(--gold-deep);
  background: var(--field);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}

.ov-body {
  flex: 1;
  min-width: 0;
}

.ov-host {
  display: block;
  font-family: var(--display);
  font-size: 14.5px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ov-count {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

.ov[data-done="true"] .ov-count {
  color: var(--ok);
}

/* ------------------------------------------------------------------ *
 * Résultats de recherche
 * ------------------------------------------------------------------ */

.results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.result {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 62px;
  padding: 10px 14px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-s);
  transition: transform 0.12s, border-color 0.2s;
}

.result:active {
  border-color: var(--gold);
  transform: scale(0.985);
}

.result[data-arrived="true"] {
  background: #6f93771a;
  border-color: #6f937752;
}

.badge {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  background: var(--field);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
}

.badge span {
  font-family: var(--display);
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--gold-deep);
  /* Le span est aussi large que « TABLE » ; sans ça le chiffre hériterait
     du `text-align: left` de .result et se collerait à gauche, alors que le
     libellé au-dessus est centré. */
  text-align: center;
}

.badge small {
  display: block;
  margin-bottom: 1px;
  font-family: var(--ui);
  font-size: 7px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-3);
}

.result-body {
  display: block;
  flex: 1;
  min-width: 0;
}

.result-name {
  display: block;
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-with {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-flag {
  flex: none;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ok);
}

.hint {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  height: 100%;
  min-height: 150px;
  text-align: center;
  color: var(--ink-3);
}

.hint-inner {
  max-width: 620px;
}

.hint p {
  margin: 0;
  font-family: var(--display);
  font-size: 19px;
  font-style: italic;
  color: var(--ink-2);
}

.hint small {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.note {
  margin: 0 0 12px;
  padding: 9px 14px;
  font-size: 12.5px;
  color: var(--ink-2);
  background: #bfa0621a;
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--r-s) var(--r-s) 0;
}

.note.warn {
  color: #96552a;
  background: #c17a4514;
  border-left-color: #c17a45;
}

/* ------------------------------------------------------------------ *
 * Vue Liste
 * ------------------------------------------------------------------ */

.list-view {
  width: 100%;
  height: 100%;
  padding: 16px 26px 26px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Le nombre de colonnes se règle tout seul sur la largeur disponible : la
   scène est large en plein écran, étroite quand le panneau des invités
   occupe la droite, et fait une colonne sur iPhone. Pas de media query. */
.list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.tcard {
  padding: 13px 15px 15px;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-m);
  transition: transform 0.14s, border-color 0.2s;
}

.tcard:active {
  transform: scale(0.99);
}

.tcard[data-done="true"] {
  background: #6f937712;
  border-color: #6f937752;
}

/* Alignement au centre, et pas sur la ligne de base : `.tcard-host` porte
   `overflow: hidden` pour son ellipse, et un élément flex qui masque son
   débordement voit sa ligne de base synthétisée sur son bord inférieur. Le
   nom remontait donc de quelques pixels, alors que le compteur à droite —
   sans `overflow` — gardait la vraie ligne de base. Centrer aligne les trois
   de façon fiable, et c'est déjà ce que font toutes les autres cartes
   (.ov, .result, .guest). */
.tcard-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.tcard-num {
  font-family: var(--display);
  font-size: 31px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--gold-deep);
}

.tcard-host {
  min-width: 0;
  font-family: var(--display);
  font-size: 15px;
  font-style: italic;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tcard-count {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  white-space: nowrap;
}

/* Une carte sans liste d'invités (la table d'honneur) s'étire quand même à la
   hauteur de sa rangée : on centre sa note dans la place qui reste, plutôt
   que de la laisser en haut avec un grand vide dessous. */
.tcard:has(.tcard-empty) {
  display: flex;
  flex-direction: column;
}

.tcard-empty {
  flex: 1;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 4px 0 10px;
  font-size: 12.5px;
  font-style: italic;
  text-align: center;
  text-wrap: balance;
  color: var(--ink-3);
}

.tcard ul {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 12px;
}

.tcard li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  line-height: 1.62;
  color: var(--ink);
  break-inside: avoid;
}

.tcard li[data-arrived="true"] {
  color: var(--ok);
}

.tcard li[data-arrived="true"]::before {
  content: "✓";
  font-size: 10px;
}

.tcard li[data-arrived="false"]::before {
  content: "·";
  color: var(--ink-3);
}

.tcard li[data-generic="true"] {
  color: var(--ink-3);
  font-style: italic;
}

/* ==================================================================
 * Adaptations
 * ================================================================== */

/* iPad portrait et tablettes : la recherche passe sous la marque. */
@media (max-width: 999px) {
  .header {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand right"
      "search search";
    gap: 10px 14px;
    padding: 10px 16px 12px;
  }

  .brand-title {
    font-size: 21px;
  }

  .guests {
    grid-template-columns: repeat(3, 1fr);
  }

  .results,
  .overview {
    grid-template-columns: repeat(2, 1fr);
  }

  .drawer-body,
  .list-view {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* La pastille garde son point de couleur mais perd son libellé. */
  .offline {
    gap: 0;
    padding: 0 9px;
  }

  .offline span {
    display: none;
  }
}

/* iPad portrait : le tiroir peut prendre plus de place. */
@media (max-width: 999px) and (min-height: 900px) {
  .drawer-body {
    height: 36vh;
  }
}

/* iPhone portrait : le plan devient un rail horizontal à faire défiler,
   plutôt qu'un plan illisible écrasé sur 390 px de large. */
@media (max-width: 619px) {
  .app {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  /* Tiroir replie : sans ca sa rangee garderait 1fr et laisserait un grand
     vide en bas. On rend la place a la scene, le tiroir se reduit a sa barre. */
  .app:has(.drawer[data-open="false"]) {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .stage {
    place-items: center start;
    padding: 10px 0;
    overflow: auto hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .stage::-webkit-scrollbar {
    display: none;
  }

  .plan {
    flex: none;
    width: 560px;
    height: auto;
  }

  .list-view {
    padding-top: 12px;
  }

  .tcard ul {
    columns: 2;
  }

  .drawer {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .drawer-body {
    flex: auto;
    height: auto;
    min-height: 0;
  }

  .drawer[data-open="false"] .drawer-body {
    flex: 0 0 0;
  }

  .drawer-bar {
    gap: 9px;
    height: 52px;
    padding: 0 16px;
  }

  .drawer-meta,
  .brand-sub {
    display: none;
  }

  .drawer-title {
    font-size: 19px;
  }

  .guests,
  .results,
  .overview {
    grid-template-columns: 1fr;
  }

  .header {
    gap: 9px 10px;
    padding: 9px 12px 11px;
  }

  .brand {
    gap: 8px;
  }

  .brand-rings {
    width: 26px;
    height: 26px;
  }

  .brand-title {
    font-size: 17px;
    letter-spacing: 0.12em;
  }

  .header-right {
    gap: 8px;
  }

  .tally-label,
  .offline {
    display: none;
  }

  .tally-num {
    font-size: 20px;
  }

  .seg button {
    min-width: 52px;
    padding: 0 11px;
    font-size: 9.5px;
    letter-spacing: 0.1em;
  }

  .icon-btn {
    width: 36px;
    height: 36px;
  }

  /* Le plan étant réduit, le compteur sous le numéro doit grossir. */
  .tbl-count {
    font-size: 17px;
  }

  .guest,
  .ghost {
    min-height: 54px;
  }

  .result,
  .ov {
    min-height: 66px;
  }
}

/* iPhone en paysage : très peu de hauteur, on comprime tout. */
@media (max-height: 620px) and (min-width: 620px) and (max-width: 999px) {
  .header {
    grid-template-columns: auto minmax(190px, 1fr) auto;
    grid-template-areas: "brand search right";
    gap: 14px;
    padding: 7px 14px 8px;
  }

  .tally-label,
  .offline span,
  .brand-sub {
    display: none;
  }

  .brand-title {
    font-size: 19px;
  }

  .search input,
  .drawer-bar {
    height: 44px;
  }

  .drawer-body {
    height: 110px;
  }

  .guest,
  .ghost {
    min-height: 44px;
  }

  .result,
  .ov {
    min-height: 54px;
  }

  .stage {
    padding: 8px 16px;
  }
}

/* iPad paysage et ordinateurs : le plan à gauche, pleine hauteur ; le
   panneau des invités devient une colonne à droite. */
@media (min-width: 1000px) {
  /* Le choix de disposition n a de sens que quand il y a la place. */
  .layout-btn {
    display: grid;
  }

  /* Disposition « noms en bas » : le tiroir se fait discret pour rendre au
     plan le maximum de hauteur. Le chevron le replie completement. */
  /* Cible l etat DEPLIE seulement : sinon cette regle, de meme
     specificite mais plus bas dans le fichier, ecraserait le repli
     .drawer[data-open="false"] .drawer-body { height: 0 }. */
  .app[data-layout="bottom"] .drawer[data-open="true"] .drawer-body {
    height: 170px;
  }

  .app[data-layout="bottom"] .stage {
    padding: 6px 16px 8px;
  }

  .app[data-layout="bottom"] .drawer-bar {
    height: 48px;
  }

  .app[data-layout="side"] {
    grid-template-columns: minmax(0, 1fr) 390px;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "header header"
      "stage drawer";
  }

  .app[data-layout="side"] .header {
    grid-area: header;
  }

  .app[data-layout="side"] .stage {
    grid-area: stage;
    padding: 16px 18px 18px 22px;
  }

  .app[data-layout="side"] .drawer {
    grid-area: drawer;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-top: none;
    border-left: 1px solid var(--line-strong);
    box-shadow: -14px 0 34px -22px #6b543a3d;
  }

  .app[data-layout="side"] .drawer-bar {
    flex: none;
    flex-wrap: wrap;
    align-content: center;
    row-gap: 4px;
    column-gap: 10px;
    height: auto;
    min-height: 56px;
    padding: 14px 18px 10px;
    border-bottom: 1px solid var(--line);
  }

  .app[data-layout="side"] .drawer-meta {
    flex-basis: 100%;
  }

  /* En colonne, le panneau est toujours ouvert : plus rien à replier. */
  .app[data-layout="side"] .rule,
  .app[data-layout="side"] .drawer-toggle {
    display: none;
  }

  .app[data-layout="side"] .drawer-body,
  .app[data-layout="side"] .drawer[data-open="false"] .drawer-body {
    flex: 1;
    height: auto;
    min-height: 0;
    padding: 14px 18px 18px;
    opacity: 1;
    overflow: hidden auto;
  }

  .app[data-layout="side"] .guests,
  .app[data-layout="side"] .results {
    grid-template-columns: 1fr;
  }

  .app[data-layout="side"] .overview {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}