/* Charte de la borne : fond sombre, laiton, serif pour les titres. Aucune ressource extérieure (polices incluses). */
@font-face { font-family: "f-playfair"; src: url("fonts/playfair.ttf"); font-display: swap; }
@font-face { font-family: "f-josefin"; src: url("fonts/josefin.ttf"); font-display: swap; }
@font-face { font-family: "f-greatvibes"; src: url("fonts/greatvibes.ttf"); font-display: swap; }
@font-face { font-family: "f-dancing"; src: url("fonts/dancing.ttf"); font-display: swap; }
@font-face { font-family: "f-cormorant"; src: url("fonts/cormorant.ttf"); font-display: swap; }
@font-face { font-family: "f-cinzel"; src: url("fonts/cinzel.ttf"); font-display: swap; }
@font-face { font-family: "f-pacifico"; src: url("fonts/pacifico.ttf"); font-display: swap; }

:root {
  --fond: #14161c;
  --surface: #1c1f27;
  --surface-haute: #252935;
  --filet: #3a3f4d;
  --texte: #f1ebe0;
  --texte-doux: #b6b0a3;
  --accent: #d2ab62;
  --sur-accent: #1a1409;
  --alerte: #ef8f84;
  --ok: #8fd0a8;
  --attention: #e8c46a;
  --rayon: 14px;
  --police-texte: "f-josefin", system-ui, sans-serif;
  --police-titre: "f-playfair", Georgia, serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    --fond: #f6f2ea; --surface: #fffdf8; --surface-haute: #efe8d9; --filet: #d8cfbd;
    --texte: #2b2418; --texte-doux: #6b5f49; --accent: #8a6a24; --sur-accent: #fffdf8;
    --alerte: #a4352a; --ok: #2f7a4d; --attention: #8a6a14; color-scheme: light;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fond); color: var(--texte); font: 16px/1.5 var(--police-texte); min-height: 100vh; }
h1, h2, h3 { font-family: var(--police-titre); font-weight: 600; line-height: 1.2; margin: 0; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.35rem; } h3 { font-size: 1.1rem; }
button, input, select, textarea { font: inherit; color: inherit; }
.cache { display: none !important; }
.doux { color: var(--texte-doux); }
.petit { font-size: .88rem; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---------- connexion ---------- */
.connexion { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.connexion .carte { width: min(420px, 100%); display: grid; gap: 18px; padding: 32px; }
.connexion h1 { text-align: center; }
.filet-or { height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); border: 0; width: 100%; }

/* ---------- squelette ---------- */
.entete { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-bottom: 1px solid var(--filet); background: var(--surface); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.entete .marque { font-family: var(--police-titre); font-size: 1.25rem; color: var(--accent); margin-right: 8px; }
.onglets { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.onglet { background: none; border: 2px solid transparent; border-radius: 999px; padding: 8px 18px; cursor: pointer; color: var(--texte-doux); }
.onglet:hover { color: var(--texte); }
.onglet[aria-selected="true"] { border-color: var(--accent); color: var(--texte); background: var(--surface-haute); }
.contenu { max-width: 1180px; margin: 0 auto; padding: 24px; display: grid; gap: 20px; }
.titre-page { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.carte { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 20px; }
.grille { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ---------- boutons et champs ---------- */
.btn { background: transparent; border: 2px solid var(--accent); color: var(--texte); border-radius: 12px; padding: 9px 18px; cursor: pointer; min-height: 44px; }
.btn:hover { background: var(--surface-haute); }
.btn.plein { background: var(--accent); color: var(--sur-accent); font-weight: 700; }
.btn.plein:hover { filter: brightness(1.08); }
.btn.danger { border-color: var(--alerte); color: var(--alerte); }
.btn.petit { min-height: 36px; padding: 5px 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.champ { display: grid; gap: 6px; }
.champ > span { color: var(--texte-doux); font-size: .88rem; }
input[type=text], input[type=password], input[type=date], input[type=number], input[type=url], input[type=email], select, textarea {
  background: var(--fond); border: 1px solid var(--filet); border-radius: 10px; padding: 10px 12px; width: 100%; min-height: 44px;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.ligne { display: flex; gap: 12px; flex-wrap: wrap; align-items: start; }
input[type=file] { padding: 8px 0; max-width: 100%; }
.ligne > * { flex: 1 1 160px; }
.message { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--filet); background: var(--surface-haute); }
.message.erreur { border-color: var(--alerte); color: var(--alerte); }
.message.ok { border-color: var(--ok); color: var(--ok); }
.message.attention { border-color: var(--attention); color: var(--attention); }

/* ---------- évènements ---------- */
/* Liseré gauche coloré selon le statut de l'évènement. */
.statut-a_preparer { border-left-color: #9aa3b5 !important; }
.statut-pret { border-left-color: var(--ok) !important; }
.statut-en_cours { border-left-color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 22%, var(--surface-haute)) !important; }
.statut-termine { border-left-color: #6d7385 !important; opacity: .8; }
.statut-medias_recuperes { border-left-color: #5aa7e0 !important; opacity: .8; }
.statut-annule { border-left-color: var(--alerte) !important; opacity: .6; }
.statut-annule strong { text-decoration: line-through; }   /* le nom seulement, pas les boutons */

.liste-evenements { display: grid; gap: 8px; }
.ligne-evenement { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 14px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--filet); border-left: 4px solid var(--filet); }
.ligne-evenement .actions { margin-top: 0; }
.ligne-evenement .badge { justify-self: start; }
.ligne-evenement .retour-commande { grid-column: 1 / -1; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; border: 1px solid var(--filet); }
/* Choix d'une tablette (« Mettre sur… ») : un grand bouton par tablette. */
.dlg-corps.choix-liste { gap: 8px; }
.btn.choix { display: grid; gap: 2px; text-align: left; width: 100%; }

/* ---------- fiche (boîte de dialogue) ---------- */
dialog { background: var(--surface); color: var(--texte); border: 1px solid var(--accent); border-radius: 18px; padding: 0; width: min(920px, calc(100vw - 24px)); max-height: calc(100vh - 24px); }
dialog::backdrop { background: rgba(0,0,0,.65); }
.dlg-tete { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--filet); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.dlg-corps { padding: 20px 22px; display: grid; gap: 20px; }
.dlg-pied { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid var(--filet); position: sticky; bottom: 0; background: var(--surface); }
.dlg-pied .gauche { margin-right: auto; }
fieldset { border: 1px solid var(--filet); border-radius: 12px; padding: 16px; margin: 0; display: grid; gap: 14px; }
legend { padding: 0 8px; color: var(--accent); font-family: var(--police-titre); }
.deux { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) {
  .entete { padding: 10px 14px; gap: 8px; } .onglets { order: 3; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; } .onglet { white-space: nowrap; padding: 8px 14px; } .contenu { padding: 14px; } .deux { grid-template-columns: 1fr; } .ligne-evenement { grid-template-columns: 1fr; } }
.pastilles-couleur { display: flex; flex-wrap: wrap; gap: 8px; }
.teinte { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--filet); cursor: pointer; padding: 0; background: var(--c); }
.teinte[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--fond), 0 0 0 4px var(--accent); }
.teinte.cadre { background: repeating-conic-gradient(#999 0 25%, #ddd 0 50%) 50% / 12px 12px; }

/* aperçus de ce que verront les invités */
.apercus { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.apercu { border-radius: 12px; border: 1px solid var(--filet); overflow: hidden; display: grid; place-items: center; min-height: 168px; padding: 14px; text-align: center; }
.apercu.photo { background: #101218; align-content: end; gap: 8px; }
.apercu.photo .image { width: 78%; aspect-ratio: 4/3; background: linear-gradient(135deg, #2b3140, #161922); border-radius: 4px; }
.apercu.photo .bandeau { width: 78%; background: #f3ead9; padding: 8px 6px; font-size: 1.15rem; color: var(--c-texte, #2b2418); border-radius: 0 0 4px 4px; margin-top: -8px; overflow-wrap: anywhere; }
.apercu.accueil { background: radial-gradient(circle at 50% 40%, #232733, #12141a); gap: 6px; align-content: center; }
.apercu.accueil .texte { font-size: 1.2rem; color: var(--c-accent, var(--accent)); overflow-wrap: anywhere; }
.apercu.accueil .invite { font-family: var(--police-titre); font-size: .95rem; }
.apercu small { color: var(--texte-doux); }
.f-playfair { font-family: "f-playfair"; } .f-josefin { font-family: "f-josefin"; } .f-greatvibes { font-family: "f-greatvibes"; font-size: 1.4em; }
.f-dancing { font-family: "f-dancing"; } .f-cormorant { font-family: "f-cormorant"; } .f-cinzel { font-family: "f-cinzel"; } .f-pacifico { font-family: "f-pacifico"; }

/* ---------- tablettes et versions ---------- */
.etat { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .92rem; }
.etat dt { color: var(--texte-doux); } .etat dd { margin: 0; }
.voyant { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; background: var(--c, #777); }
.voyant.en-ligne { --c: var(--ok); } .voyant.hors-ligne { --c: var(--alerte); } .voyant.jamais { --c: #777; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
/* Carte de la tablette : son évènement, puis les évènements créés hors ligne à rattacher. */
.evenement-actif { font-weight: 600; }
.a-rattacher { border: 1px solid var(--attention); border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; display: grid; gap: 10px; }
.a-rattacher h4 { margin: 0; font-family: var(--police-titre); font-weight: 600; color: var(--attention); }
.ligne-hors-ligne { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; }
.ligne-hors-ligne .actions { margin-top: 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--filet); vertical-align: top; }
th { color: var(--texte-doux); font-weight: 500; font-size: .85rem; }
.defile { overflow-x: auto; }
code, .mono { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; word-break: break-all; }
.code-appairage { background: var(--fond); border: 1px dashed var(--accent); border-radius: 10px; padding: 18px; font-size: 2rem; letter-spacing: .08em; text-align: center; word-break: normal; white-space: nowrap; }

/* Commandes à distance */
.commandes { display: grid; gap: 8px; }
.rangee-commande { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 8px 12px; border: 1px solid var(--filet); border-radius: 10px; background: var(--surface-haute); }
.rangee-commande .nom-commande { flex: 1 1 220px; }
.rangee-commande input, .rangee-commande select { flex: 0 1 180px; }
.rangee-commande input.court { flex-basis: 90px; }
.retour-commande { flex-basis: 100%; }
.retour-commande:empty { display: none; }
dialog.question { width: min(440px, calc(100vw - 24px)); }
dialog.question p { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.liste-commandes { display: grid; gap: 8px; }
.ligne-commande { display: grid; grid-template-columns: 1fr 14rem auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--filet); border-radius: 10px; }
.ligne-commande.statut-faite { border-color: var(--ok); }
.ligne-commande.statut-echec, .ligne-commande.statut-refusee { border-color: var(--alerte); }
.attention-texte { color: var(--attention); }
@media (max-width: 640px) { .ligne-commande { grid-template-columns: 1fr; } }