/* =====================================================================================
   HUD « Opticien Simulator » : panneaux bleu nuit translucides, accents cyan lumineux,
   cartes séparées (marque / étape / compteurs), tâche actuelle, inventaire, aide des touches.
   ===================================================================================== */
:root {
  --hud-fond: rgba(14, 24, 38, 0.84);
  --hud-fond2: rgba(22, 36, 56, 0.72);
  --hud-bord: rgba(120, 214, 255, 0.20);
  --cyan: #35d6f0;
  --cyan-glow: 0 0 0 1px rgba(53, 214, 240, .55), 0 0 18px rgba(53, 214, 240, .35);
  --bleu: #2f8cff;
  --vert: #3ddc84;
}
#bandeau { display: none; }
.carte-hud, #consigne, #inventaire, #aide-touches, .pastille, #barre-poste {
  background: var(--hud-fond); border: 1px solid var(--hud-bord); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
}

/* ------------------------------------------------------------------ marque */
#carte-marque { position: fixed; top: 10px; left: 12px; z-index: 20; display: flex; align-items: center; gap: 14px;
  padding: 10px 26px 10px 12px; border-radius: 16px; min-width: 300px; }
.logo-carre { width: 58px !important; height: 58px !important; padding: 10px; border-radius: 14px; color: #fff;
  background: linear-gradient(140deg, #2f8cff, #26c6da); box-shadow: 0 4px 18px rgba(47, 140, 255, .5); }
#carte-marque b { display: block; font-size: 20px; line-height: 1.08; letter-spacing: .04em; font-weight: 800; }
#carte-marque small { display: block; margin-top: 3px; color: #c8d6ea; font-size: 15px; }

/* ------------------------------------------------------------------ étape + frise */
#carte-etape { position: fixed; top: 6px; left: 50%; transform: translateX(-50%); z-index: 20; padding: 10px 22px 12px;
  border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 9px; max-width: 46vw; }
.etape-titre { display: flex; gap: 14px; align-items: baseline; white-space: nowrap; }
#etape-num { font-size: 17px; font-weight: 800; color: var(--cyan); letter-spacing: .04em; }
#etape-nom { font-size: 19px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; max-width: 32vw; }
#frise { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
#frise li { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--hud-fond2);
  border: 1px solid var(--hud-bord); color: #d6e2f2; position: relative; transition: all .3s; transform: none; box-shadow: none; }
#frise li span { width: 24px; height: 24px; }
#frise li:not(:last-child)::after { content: ""; position: absolute; right: -17px; top: 50%; width: 12px; height: 2px; border-radius: 2px; background: rgba(200, 220, 240, .35); }
#frise li.faite { color: var(--cyan); border-color: rgba(53, 214, 240, .45); background: rgba(53, 214, 240, .1); }
#frise li.faite:not(:last-child)::after { background: var(--cyan); }
#frise li.courante { background: var(--bleu); border-color: #8fc0ff; color: #fff; transform: none; box-shadow: 0 0 16px rgba(47, 140, 255, .6); }
#frise li.drapeau { color: #fff; }
#frise.dense { gap: 9px; }
#frise.dense li { width: 32px; height: 32px; border-radius: 9px; }
#frise.dense li span { width: 19px; height: 19px; }
#frise.dense li:not(:last-child)::after { right: -8px; width: 6px; }
#frise li .infobulle { top: 46px; }

/* ------------------------------------------------------------------ compteurs */
#compteurs { position: fixed; top: 16px; right: 14px; z-index: 20; display: flex; gap: 10px; align-items: center; }
.pastille { display: flex; gap: 9px; align-items: center; height: 46px; padding: 0 18px; border-radius: 13px; color: #fff; }
.pastille b { font-size: 21px; font-variant-numeric: tabular-nums; font-weight: 700; }
.pastille [data-picto] { width: 26px; height: 26px; color: var(--bleu); }
.pastille .jaune { color: #ffc93c; }
.pastille.argent b, .pastille.argent [data-picto] { color: var(--vert); }
.pastille.bouton { width: 46px; padding: 0; justify-content: center; cursor: pointer; font: inherit; }
.pastille.bouton [data-picto] { color: #fff; width: 22px; height: 22px; }
.pastille.bouton:hover { border-color: var(--cyan); }

/* ------------------------------------------------------------------ tâche actuelle */
#consigne { top: 112px; left: 18px; bottom: auto; height: auto; width: 420px; max-height: calc(100vh - 186px); overflow: hidden !important; overflow: auto; padding: 0 0 16px; border-radius: 18px;
  border-color: rgba(53, 214, 240, .35); box-shadow: 0 0 0 1px rgba(53, 214, 240, .12), 0 12px 40px rgba(0, 0, 0, .4); }
#consigne::-webkit-scrollbar { width: 6px; } #consigne::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }
.tache-tete { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: rgba(255, 255, 255, .05); border-bottom: 1px solid var(--hud-bord); }
.tache-tete [data-picto] { width: 28px; height: 28px; color: var(--cyan); }
.tache-tete b { font-size: 20px; }
#mission-titre { margin: 16px 24px 10px; font-size: 27px; font-weight: 800; line-height: 1.15; }
.mission-barre { margin: 0 24px 14px; height: 5px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.mission-barre i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #26c6da, #35d6f0); box-shadow: 0 0 10px var(--cyan); transition: width .5s; }
.etape-sous { display: flex; align-items: center; gap: 8px; margin: 0 20px 4px; color: var(--cyan); font-size: 14.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.etape-sous #consigne-picto { width: 18px; height: 18px; display: inline-flex; }
#consigne-titre { margin: 0; font-size: 14.5px; }
#consigne-texte { margin: 4px 20px 12px; color: #e3ebf6; font-size: 16.5px; line-height: 1.45; }
#objectifs { list-style: none; margin: 0 14px 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#objectifs li { display: flex; gap: 12px; align-items: center; font-size: 16.5px; line-height: 1.3; color: #e6eefa; padding: 6px 10px; border-radius: 10px; border: 1px solid transparent; }
#objectifs li::before { width: 24px; height: 24px; flex: none; border-radius: 5px; border: 2px solid #b8c7da; margin: 0; }
#objectifs li.fait { color: #9fb0c8; text-decoration: line-through; text-decoration-color: rgba(220, 230, 240, .5); }
#objectifs li.fait::before { background-color: var(--vert); border-color: var(--vert); background-size: 15px; }
#objectifs li.courant { border-color: rgba(53, 214, 240, .75); background: rgba(53, 214, 240, .08); box-shadow: var(--cyan-glow); }
.consigne-pied { display: flex; gap: 8px; margin: 0 20px; flex-wrap: wrap; justify-content: flex-start; }
.consigne-pied .btn-mini { font-size: 15.5px; padding: 9px 14px; border-radius: 11px; gap: 9px; }
.consigne-pied .btn-mini [data-picto] { width: 21px; height: 21px; }
.consigne-pied kbd { font-size: 12.5px; }
.indice { margin: 10px 20px 0 !important; font-size: 15px !important; }
.objectif-tete { display: flex; align-items: center; gap: 10px; margin: 12px 20px 8px; padding-top: 10px; border-top: 1px solid var(--hud-bord); }
.objectif-tete [data-picto] { width: 26px; height: 26px; color: var(--cyan); }
.objectif-tete b { font-size: 19px; }
.objectif-carte { margin: 0 18px; display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 14px; background: var(--hud-fond2); border: 1px solid var(--hud-bord); }
.objectif-illu { width: 92px !important; height: 60px !important; flex: none; color: #e9f1fb; }
.objectif-carte p { margin: 0; font-size: 16px; line-height: 1.4; color: #e6eefa; }
.ref-notice { display: block; margin: 10px 20px 0; text-align: left; }

/* ------------------------------------------------------------------ bulle d'action (reliée à l'objet) */
#bulle { position: fixed; left: 0; top: 0; transform: none; z-index: 15; pointer-events: none; background: none; border: 0; padding: 0; }
#bulle-trait { position: absolute; left: 0; top: 0; overflow: visible; width: 1px; height: 1px; }
#bulle-trait line { stroke: var(--cyan); stroke-width: 2; filter: drop-shadow(0 0 4px var(--cyan)); }
#bulle-trait circle { fill: var(--cyan); filter: drop-shadow(0 0 6px var(--cyan)); }
.bulle-boite { position: absolute; display: flex; align-items: center; gap: 12px; padding: 11px 18px 11px 12px; border-radius: 14px; white-space: nowrap;
  background: var(--hud-fond); border: 1.5px solid rgba(53, 214, 240, .8); box-shadow: 0 0 18px rgba(53, 214, 240, .35); color: #fff; font-size: 18px; font-weight: 650; }
.bulle-boite [data-picto] { width: 30px; height: 30px; color: #fff; }
#viseur.survol i { border-color: var(--cyan); box-shadow: 0 0 12px var(--cyan); }

/* ------------------------------------------------------------------ inventaire */
#inventaire { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); z-index: 22; display: flex; gap: 12px; align-items: stretch; padding: 12px 14px; border-radius: 18px; }
#inventaire.replie #inv-cases { display: none; }
.inv-tete { display: flex; gap: 9px; align-items: flex-start; padding: 4px 14px 0 4px; border-right: 1px solid var(--hud-bord); min-width: 118px; }
.inv-tete [data-picto] { width: 24px; height: 24px; color: var(--cyan); }
.inv-tete b { font-size: 18px; white-space: nowrap; }
#inv-cases { display: flex; gap: 10px; }
.inv-case { width: 118px; height: 106px; border-radius: 12px; background: var(--hud-fond2); border: 1px solid var(--hud-bord); color: #e8f0fb; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; padding: 6px 6px 8px; font: 600 14px/1.15 "Segoe UI", sans-serif; text-align: center; transition: all .15s; }
.inv-case img { width: 84px; height: 54px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); }
.inv-case:hover { border-color: rgba(53, 214, 240, .6); transform: translateY(-2px); }
.inv-case.actif { border: 1.5px solid var(--cyan); box-shadow: var(--cyan-glow); background: rgba(53, 214, 240, .1); }
.inv-case.vide { border-style: dashed; justify-content: center; color: #9fb0c8; cursor: default; }
.inv-case.vide [data-picto] { width: 26px; height: 26px; }
.inv-case.tenu { border-color: rgba(61, 220, 132, .7); }
.inv-case small { display: block; color: var(--vert); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }

/* ------------------------------------------------------------------ aide des touches */
#aide-touches { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 14; display: flex; gap: 0; align-items: center;
  padding: 9px 6px; border-radius: 14px; font-size: 15.5px; color: #e6eefa; white-space: nowrap; }
#aide-touches .touche { display: inline-flex; align-items: center; gap: 7px; padding: 0 16px; border-right: 1px solid var(--hud-bord); }
#aide-touches .touche:last-child { border-right: 0; }
#aide-touches [data-picto] { width: 22px; height: 22px; }
#aide-touches kbd { font-size: 14px; padding: 4px 8px; background: transparent; border-color: rgba(230, 240, 250, .7); }
#aide-touches .reprendre { color: var(--cyan); font-weight: 700; padding: 0 16px; }
body.poste #aide-touches { display: none; }

/* ------------------------------------------------------------------ postes, outils de l'atelier, toasts */
#barre-poste { top: 112px; bottom: auto; border-radius: 14px; }
#barre-outils, #en-main { display: none !important; }
#toasts { top: 112px; }
body.poste #toasts { top: 168px; }
.toast { background: var(--hud-fond); border-color: var(--hud-bord); font-size: 16.5px; padding: 13px 18px; }

/* ------------------------------------------------------------------ modales plus grandes */
.modale-carte { max-width: min(980px, 94vw); padding: 34px; border-radius: 22px; border: 1px solid rgba(53, 214, 240, .35); box-shadow: 0 0 0 1px rgba(53,214,240,.12), 0 30px 90px rgba(0,0,0,.6); }
.modale-carte h2 { font-size: 28px; }
.modale-carte p { font-size: 16.5px; line-height: 1.5; }
.modale-carte .btn { font-size: 16px; padding: 12px 22px; }

#barre-poste { font-size: 16px; } #poste-vues button, #btn-quitter-poste { font-size: 15px; padding: 8px 14px; }
@media (max-width: 1280px) {
  #consigne { width: 350px; }
  #consigne-texte, #objectifs li { font-size: 15px; }
  #mission-titre { font-size: 21px; }
  #aide-touches { font-size: 12.5px; }
  #aide-touches .touche { padding: 0 10px; }
  .inv-case { width: 92px; }
}

/* ------------------------------------------------------------------ démonstration (pilote) */
#curseur-demo { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; width: 30px; height: 30px; margin: -3px 0 0 -3px; }
#curseur-demo svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
#curseur-demo path { fill: #fff; stroke: #0b1a2a; stroke-width: 1.4; stroke-linejoin: round; }
#curseur-demo .onde { position: absolute; left: -16px; top: -16px; width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--cyan); opacity: 0; }
#curseur-demo.clic .onde { animation: onde-demo .5s ease-out; }
@keyframes onde-demo { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
#bandeau-demo { position: fixed; top: 112px; right: 14px; z-index: 30; padding: 10px 16px; border-radius: 12px; font-size: 16px;
  background: rgba(38, 208, 168, .18); border: 1px solid rgba(38, 208, 168, .6); color: #dffaf2; backdrop-filter: blur(8px); }
.demo-survol { border-color: var(--cyan) !important; box-shadow: var(--cyan-glow) !important; }

/* ------------------------------------------------------------------ fiche de travail : hauteur du contenu, tient à l'écran sans ascenseur */
.modale-carte.fiche-ouverte { max-height: 96vh; overflow: hidden; padding: 16px 22px 18px; }
.modale-carte.fiche-ouverte .actions { margin-top: 12px; }
.fiche { width: min(820px, 92vw); aspect-ratio: auto; height: auto; overflow: visible;
  font-size: clamp(11px, 1.62vh, 16px); padding: 1.3em 1.7em 1.2em; }
.fiche h3 { font-size: 1.3em; }
.fiche .tampon { top: 3.2em; right: 3.5em; font-size: 1.1em; }
.fiche table { font-size: 1.05em; margin: .7em 0; }
.fiche td, .fiche th { padding: .35em .5em; }
.fiche th { font-size: .78em; }
.fiche .ligne { font-size: 1.02em; margin: .35em 0; gap: 1.3em; }
.fiche h4 { font-size: .88em; margin: 1em 0 .45em; padding-bottom: .2em; }
.fiche .controle { font-size: .95em; gap: .4em 1.2em; }
.fiche .note { font-size: .95em !important; margin-top: .6em; }
.fiche ol { font-size: 1em !important; margin: .3em 0; }
.fiche p { margin: .9em 0 0 !important; }

/* panneau de tâche resserré quand la place manque (jamais d'ascenseur ni de débordement) */
#consigne.compact #mission-titre { font-size: 22px; margin: 12px 20px 8px; }
#consigne.compact #consigne-texte { font-size: 14.5px; margin-bottom: 8px; }
#consigne.compact #objectifs li { font-size: 14.5px; padding: 4px 8px; }
#consigne.compact #objectifs { gap: 3px; }
#consigne.compact .tache-tete { padding: 10px 18px; }
#consigne.compact .ref-notice { display: none; }
#consigne.serre .objectif-tete, #consigne.serre .objectif-carte { display: none; }
#consigne.serre { padding-bottom: 12px; }
#consigne.mini #mission-titre { font-size: 19px; }
#consigne.mini #consigne-texte { font-size: 13px; line-height: 1.35; }
#consigne.mini #objectifs li { font-size: 13px; padding: 3px 6px; }
#consigne.mini #objectifs li::before { width: 18px; height: 18px; }
#consigne.mini .consigne-pied .btn-mini { font-size: 13.5px; padding: 6px 10px; }
#consigne.mini .etape-sous { font-size: 12.5px; }

/* ------------------------------------------------------------------ aide : bulle sous les boutons du bandeau ; pas de sélection de texte */
#indice.indice { position: fixed; top: 76px; right: 14px; z-index: 31; width: min(420px, 40vw); margin: 0 !important; padding: 14px 16px 14px 46px;
  border-radius: 14px; font-size: 16px !important; line-height: 1.45; cursor: pointer; background: rgba(40, 32, 8, .9); border: 1px solid rgba(255, 201, 60, .55);
  color: #ffeab0 !important; box-shadow: 0 12px 34px rgba(0,0,0,.4); }
#indice.indice::before { content: "💡"; position: absolute; left: 14px; top: 13px; font-size: 20px; }
.consigne-pied.vide { display: none; }
body, #hud, .plein, #modale, #consigne, .bulle-boite, #inventaire, #aide-touches { -webkit-user-select: none; user-select: none; }
input, textarea, .ec input { -webkit-user-select: text; user-select: text; }