/**
 * Luc — page autonome. Palette du bureau (chalet sombre, cuir, laiton) :
 * fond #171411, texte #eee3d1, accent #cda56d, titres Georgia.
 *
 * Mobile d'abord : la scène occupe tout l'écran, le panneau de dialogue est
 * une feuille en bas. Sur grand écran, scène à gauche, panneau à droite.
 */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #171411; color: #eee3d1; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: #cda56d; }

.luc { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.luc-scene { position: fixed; inset: 0; background: #292019; }
.luc-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.luc-chargement {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: #c5a77e; font-size: 15px; text-align: center; padding: 20px;
}
.luc-chargement p { margin: 0; }
.luc[data-etat="pret"] .luc-chargement { display: none; }
.luc-spinner { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #3a2e24; border-top-color: #cda56d; animation: luc-tourne 1s linear infinite; }
@keyframes luc-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .luc-spinner { animation: none; } }

.luc-entete {
  position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 16px 10px; text-shadow: 0 2px 10px #000;
}
.luc-retour { text-decoration: none; font-size: 13px; color: #eee3d1; opacity: .85; white-space: nowrap; }
.luc-titre { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #c5a77e; }
.luc-titre strong { font: 20px Georgia, serif; letter-spacing: 0; text-transform: none; color: #fff0d9; margin-left: 6px; }
/* « Qui est Luc Cavaletti ? » : sous le titre, discret ; s'ouvre dans un nouvel onglet pour ne pas perdre le questionnaire. */
.luc-qui { display: block; margin-top: 4px; text-align: right; font-size: 12px; letter-spacing: 0; text-transform: none; color: #cda56d; text-decoration: underline; text-underline-offset: 3px; }
.luc-qui:hover { color: #eee3d1; }
/* Mode capture (?capture=1) : la scène seule, pleine largeur, pour l'image de la carte « Nos univers ». */
.luc-capture .luc-entete, .luc-capture .luc-panneau, .luc-capture .luc-chargement { display: none !important; }
.luc-capture .luc-scene { right: 0 !important; }

.luc-panneau {
  position: relative; z-index: 2; margin-top: auto; display: flex; flex-direction: column; gap: 12px;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(23, 20, 17, 0) 0%, rgba(23, 20, 17, .92) 18%, #171411 100%);
  max-height: 62vh; max-height: 62dvh; overflow-y: auto;
}
.luc-parole { min-height: 3.2em; font: 19px/1.45 Georgia, serif; color: #fff0d9; cursor: pointer; }
.luc-parole-sr { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }
.luc-reponse { display: flex; flex-direction: column; gap: 8px; }
.luc-reponse[hidden] { display: none; }
.luc-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: #a99a86; }
.luc-lien { font-size: 12px; color: #c5a77e; }

/* Boutons et champs */
.luc-btn {
  cursor: pointer; border: 1px solid #725b3e; border-radius: 9px; padding: 12px 15px; background: #2a221a; color: #eee3d1;
  font: 15px system-ui, sans-serif; text-align: left; width: 100%;
}
.luc-btn:hover, .luc-btn:focus-visible { border-color: #cda56d; outline: none; }
.luc-btn.est-primaire { background: #cda56d; color: #19130d; border-color: #cda56d; font-weight: 700; text-align: center; }
.luc-btn.est-secondaire { background: transparent; text-align: center; }
.luc-btn[disabled] { opacity: .45; cursor: wait; }
.luc-btn.est-coche { border-color: #cda56d; background: #3a2d20; }
.luc-btn.est-coche::before { content: "✓ "; color: #cda56d; }
.luc-choix { display: grid; gap: 8px; }
@media (min-width: 560px) { .luc-choix.est-court { grid-template-columns: 1fr 1fr; } }
.luc-ligne { display: flex; gap: 8px; }
.luc-ligne .luc-btn { width: auto; flex: 1; }
.luc-champ { display: flex; flex-direction: column; gap: 5px; }
.luc-champ label { font-size: 13px; color: #c0b4a4; }
.luc-champ input, .luc-champ textarea {
  width: 100%; padding: 12px 13px; background: #100e0c; border: 1px solid #5a4936; border-radius: 9px; color: #f4e9d8;
  font: 16px system-ui, sans-serif;
}
.luc-champ input:focus, .luc-champ textarea:focus { outline: 2px solid #cda56d; border-color: #cda56d; }
.luc-champ textarea { min-height: 84px; resize: vertical; }
.luc-erreur { color: #f0a6a6; font-size: 13px; }
.luc-note { font-size: 12px; color: #a99a86; line-height: 1.45; }

/* Photos */
.luc-photo { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; }
.luc-photo-cadre {
  position: relative; aspect-ratio: 4 / 3; border: 2px dashed #5a4936; border-radius: 10px; background: #100e0c; overflow: hidden;
  background-size: cover; background-position: center;
}
.luc-photo-cadre.est-remplie { border-style: solid; border-color: #cda56d; }
.luc-photo-titre { font-weight: 700; }
.luc-photo-desc { font-size: 13px; color: #c0b4a4; }
.luc-photo-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.luc-photo-btns .luc-btn { width: auto; }
.luc-photo-btns input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.luc-btn-camera { display: none; }
@media (hover: none) and (pointer: coarse) { .luc-btn-camera { display: inline-block; } }
.luc-vignettes { display: flex; gap: 6px; flex-wrap: wrap; }
.luc-vignettes span { width: 52px; height: 40px; border-radius: 6px; background-size: cover; background-position: center; border: 1px solid #5a4936; }

/* Récapitulatif */
.luc-recap { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 14px; margin: 0; }
.luc-recap dt { color: #a99a86; }
.luc-recap dd { margin: 0; }
.luc-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: #c0b4a4; cursor: pointer; }
.luc-consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #cda56d; flex: none; }

/* Grand écran : scène à gauche, panneau à droite */
@media (min-width: 900px) {
  .luc { flex-direction: row; }
  .luc-scene { position: fixed; right: 420px; }
  .luc-entete { position: fixed; top: 0; left: 0; right: 420px; padding: 24px 30px; }
  .luc-panneau {
    position: fixed; top: 0; right: 0; bottom: 0; width: 420px; margin: 0; max-height: none;
    padding: 40px 34px; justify-content: center; gap: 18px;
    background: linear-gradient(130deg, #272019, #181513); border-left: 1px solid #2f261d;
  }
  .luc-parole { font-size: 23px; min-height: 4em; }
}