/* Safran Naval — interface reproduisant l'application Unity (scène de référence 1920×1080) */

@font-face { font-family: "DIN"; src: url("../assets/fonts/DINCond-Light.otf"); font-weight: 300; }
@font-face { font-family: "DIN"; src: url("../assets/fonts/DINCond-Regular.otf"); font-weight: 400; }
@font-face { font-family: "DIN"; src: url("../assets/fonts/DINCond-Medium.otf"); font-weight: 500; }
@font-face { font-family: "DIN"; src: url("../assets/fonts/DINCond-Bold.otf"); font-weight: 700; }
@font-face { font-family: "DIN Engschrift"; src: url("../assets/fonts/DIN-EngschriftStd.otf"); }

:root {
  --white: #ffffff;
  --text: #e9edf2;
  --muted: #b7bec8;
  --heading: #c4cad3;
  --label-bg: rgba(46, 56, 70, 0.86);
  --label-bg-hover: rgba(70, 84, 102, 0.95);
  --green: #64e95b;
  --hud-bg: rgba(30, 40, 54, 0.78);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2b3440; }
body { font-family: "DIN", "Arial Narrow", sans-serif; color: var(--text); user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { -webkit-user-drag: none; }

#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; }

/* scène d'interface : unités d'une maquette 1920×1080, mais taille = fenêtre (voir fitStage) : les éléments
   s'ancrent aux bords quel que soit le format (16:9, iPad 4:3…) */
#stage {
  position: fixed; left: 0; top: 0; width: 1920px; height: 1080px;
  transform-origin: 0 0; pointer-events: none;
}
#stage > * { pointer-events: auto; }
#stage > #leaders, #stage > #labels { pointer-events: none; }

/* ---------- HUD ---------- */
#logo { position: absolute; left: 32px; top: 18px; height: 58px; }
#logo img { height: 100%; display: block; }
#stage[data-view="overview"] > #logo { cursor: default; }
.hud-btn {
  position: absolute; top: 25px; width: 84px; height: 56px; background: var(--hud-bg);
  display: grid; place-items: center; transition: background .2s;
}
.hud-btn img { width: 42px; height: 42px; }
.hud-btn:hover, .hud-btn.active { background: rgba(70, 88, 112, 0.92); }
.hud-btn.active { box-shadow: inset 0 0 0 2px rgba(255,255,255,.75); }
#btn-env { right: 25px; }

/* ---------- Vues : vue d'ensemble (choix de la plateforme) ou plateforme ---------- */
#stage[data-view="overview"] > :is(#side, #chain),
#stage.no-chain > #chain, #stage:not(.chain-on) > #chain { opacity: 0; pointer-events: none; }
#stage:not(.chain-on) > #chain { transform: translateY(40px); }
#stage > #chain { transition: opacity .35s, transform .35s; }
#stage > #platforms { transition: opacity .5s, visibility .5s; }
/* hors vue d'ensemble, les étiquettes de choix sont masquées ET inactives (visibility : leurs boutons sont en
   pointer-events: auto et resteraient cliquables sous les étiquettes d'équipements) */
#stage:not([data-view="overview"]) > #platforms { opacity: 0; visibility: hidden; }
#platforms { position: absolute; inset: 0; pointer-events: none; }
.pick {
  position: absolute; left: 0; top: 0; padding: 14px 26px 12px; pointer-events: auto;
  font-size: 34px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: #fff;
  background: var(--label-bg); transition: background .2s; will-change: transform;
}
.pick::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 70px; background: rgba(255,255,255,.85); }
.pick:hover { background: var(--label-bg-hover); }
.pick .corner { width: 18px; height: 18px; }
.pick .corner.tl { border-left-width: 3px; border-top-width: 3px; }
.pick .corner.br { border-right-width: 3px; border-bottom-width: 3px; }

/* panneau réglages (haut droite) : sections titrées, boutons en grille de 2 */
#env-panel {
  position: absolute; right: 25px; top: 25px; width: 232px; padding: 34px 12px 12px;
  background: rgba(78, 90, 106, 0.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.12);
}
#env-panel[hidden] { display: none; }
#env-panel section + section { margin-top: 10px; }
#env-panel section[hidden] { display: none; }
#env-panel section.off { opacity: .4; pointer-events: none; }
#env-panel h4 { margin: 0 0 5px 2px; font-weight: 400; font-size: 15px; color: rgba(255,255,255,.85); }
.env-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#env-close { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; opacity: .85; }
#env-close::before, #env-close::after { content: ""; position: absolute; left: 3px; right: 3px; top: 12px; height: 2px; background: #fff; transform: rotate(45deg); }
#env-close::after { transform: rotate(-45deg); }
.env-btn {
  height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 16px; color: #fff; background: rgba(55, 66, 82, 0.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  transition: background .2s, box-shadow .2s;
}
.env-btn img { width: 30px; height: 30px; opacity: .9; }
.env-btn:hover { background: rgba(80, 94, 114, 0.7); }
.env-btn.active { background: rgba(120, 136, 156, 0.55); box-shadow: inset 0 0 0 2px rgba(210,230,250,.85); }
#stage:has(#env-panel:not([hidden])) > #btn-env { opacity: 0; pointer-events: none; }

/* ---------- Menu gauche : plateformes (onglets verticaux) et missions ---------- */
#side { position: absolute; left: 48px; top: 50%; transform: translateY(-48%); display: flex; gap: 14px; align-items: stretch; }
#side .col { display: flex; flex-direction: column; }
#side h3 { margin: 0 0 18px; font-weight: 300; font-size: 19px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.8); text-align: center; }
#platform-tabs { flex: 1; display: flex; gap: 10px; }
.tab {
  width: 50px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(150,164,184,.55), rgba(80,96,120,.55));
  box-shadow: inset 2px 0 0 rgba(120,150,210,.6), inset -2px 0 0 rgba(120,150,210,.6);
  opacity: .8; transition: opacity .25s, background .25s;
}
.tab span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 26px; letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.tab:hover { opacity: 1; }
.tab.active { opacity: 1; background: linear-gradient(180deg, rgba(70,86,110,.85), rgba(40,52,72,.85)); box-shadow: inset 0 0 0 2px rgba(220,235,255,.8); }
#missions { width: 212px; display: flex; flex-direction: column; gap: 10px; }
.mission {
  position: relative; min-height: 62px; width: 212px; padding: 6px 10px 6px 18px;
  background: url("../assets/ui/button_unselected.png") center/100% 100% no-repeat;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left;
  opacity: .82; transition: opacity .25s, filter .25s;
}
.mission:hover { opacity: 1; }
.mission.active { background-image: url("../assets/ui/button_selected.png"); opacity: 1; }
.mission .abbr { font-size: 26px; font-weight: 500; line-height: 1; letter-spacing: .02em; color: #fff; }   /* même police que les étiquettes (DIN condensé) */
.mission .full { font-size: 14px; line-height: 1.1; letter-spacing: .01em; text-transform: uppercase; color: #eef1f5; margin-top: 4px; }

/* ---------- Chaîne (bas d'écran) ---------- */
#chain { position: absolute; left: 56px; right: 56px; bottom: 26px; }
#steps { display: flex; height: 76px; }
.step {
  position: relative; flex: 1; height: 76px; margin-right: -2px;
  font-size: 25px; letter-spacing: .01em; color: #f1f3f6; padding-left: 70px;
}
.step::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../assets/ui/button_arrow_unselected.png") center/100% 100% no-repeat;
  opacity: .42; transition: opacity .25s;
}
.step:hover::before { opacity: .65; }
.step.active::before { background-image: url("../assets/ui/button_arrow_selected.png"); opacity: 1; }
/* flou de la scène sous les boutons, découpé à la forme du chevron (opacité portée par ::before
   pour ne pas atténuer le flou) */
.step::after, .footer-bar::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  backdrop-filter: blur(14px) brightness(.88); -webkit-backdrop-filter: blur(14px) brightness(.88);
}
.step::after { clip-path: polygon(0 3.5%, 93.8% 3.5%, 100% 50%, 93.8% 96.5%, 0 96.5%, 6.1% 50%); }
#steps { isolation: isolate; }
.footer-bar {
  position: relative; isolation: isolate; display: block; width: 100%; height: 42px; margin-top: 12px;
  font-size: 23px; color: #f1f3f6;
}
.footer-bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("../assets/ui/footer_bar_unselected.png") center/100% 100% no-repeat;
  opacity: .85; transition: opacity .25s;
}
.footer-bar + .footer-bar { margin-top: 14px; }
.footer-bar:hover::before { opacity: 1; }
.footer-bar.active::before { background-image: url("../assets/ui/footer_bar_selecetd.png"); opacity: 1; }
.footer-bar.active { box-shadow: 0 -1px 0 rgba(150,190,240,.7), 0 1px 0 rgba(150,190,240,.7); }

/* ---------- Étiquettes des équipements ---------- */
#leaders { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
#leaders line { stroke: rgba(255,255,255,.92); stroke-width: 3; filter: drop-shadow(0 0 2px rgba(0,0,0,.35)); }
#leaders circle { fill: #fff; }
#leaders .green line, #leaders line.green { stroke: rgba(210,255,205,.95); }
#labels { position: absolute; inset: 0; }
.label {
  position: absolute; left: 0; top: 0; padding: 9px 12px 8px; white-space: nowrap;
  font-size: 23px; line-height: 1; color: #fff; background: var(--label-bg);
  pointer-events: none; cursor: default; opacity: 0; transition: opacity .35s var(--ease), background .2s;
  will-change: transform;
}
.label.show { opacity: 1; pointer-events: auto; }
.label.safran { cursor: pointer; }
.label.safran::before, .label.safran::after {
  content: ""; position: absolute; inset: -4px; pointer-events: none;
  background:
    linear-gradient(#fff,#fff) left top / 12px 2.5px, linear-gradient(#fff,#fff) left top / 2.5px 12px,
    linear-gradient(#fff,#fff) right top / 12px 2.5px, linear-gradient(#fff,#fff) right top / 2.5px 12px,
    linear-gradient(#fff,#fff) left bottom / 12px 2.5px, linear-gradient(#fff,#fff) left bottom / 2.5px 12px,
    linear-gradient(#fff,#fff) right bottom / 12px 2.5px, linear-gradient(#fff,#fff) right bottom / 2.5px 12px;
  background-repeat: no-repeat;
}
.label.safran::after { display: none; }
.label.safran:hover { background: var(--label-bg-hover); }
.label .g { color: var(--green); }

/* ---------- Fiche produit ---------- */
#stage.ds-open > :is(#logo, .hud-btn, #env-panel, #side, #depth-panel, #chain, #labels, #leaders) { opacity: 0; pointer-events: none; }
#stage > :is(#logo, .hud-btn, #side, #depth-panel, #labels, #leaders) { transition: opacity .35s; }
#datasheet {
  position: absolute; left: calc(50% - 900px); top: calc(50% - 479px); width: 1800px; height: 958px;
  background: url("../assets/ui/t_datasheet_background.png") center/100% 100% no-repeat, rgba(58, 66, 78, .35);
  backdrop-filter: blur(18px) brightness(.9); -webkit-backdrop-filter: blur(18px) brightness(.9);
  opacity: 0; transform: scale(calc(var(--ds-fit, 1) * .985)); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
#datasheet.open { opacity: 1; transform: scale(var(--ds-fit, 1)); }   /* --ds-fit : fiche réduite si la fenêtre est trop étroite (portrait) */
#datasheet[hidden] { display: none; }
.corner { position: absolute; width: 44px; height: 44px; border: 0 solid #fff; pointer-events: none; }
.corner.tl { left: -2px; top: -2px; border-left-width: 4px; border-top-width: 4px; }
.corner.tr { right: -2px; top: -2px; border-right-width: 4px; border-top-width: 4px; }
.corner.bl { left: -2px; bottom: -2px; border-left-width: 4px; border-bottom-width: 4px; }
.corner.br { right: -2px; bottom: -2px; border-right-width: 4px; border-bottom-width: 4px; }
#ds-close {
  position: absolute; right: 22px; top: 22px; width: 54px; height: 54px; z-index: 3;
  background: url("../assets/ui/button_close.png") center/100% 100% no-repeat; opacity: .85;
}
#ds-close:hover { opacity: 1; }
#datasheet header { position: absolute; left: 80px; top: 44px; width: 900px; }
#ds-title { margin: 0; font-weight: 700; font-size: 66px; line-height: 1.05; letter-spacing: .01em; color: #fff; }
#ds-title .g { color: var(--green); }
#ds-subtitle { margin: 14px 0 0 12px; font-weight: 300; font-size: 27px; color: var(--muted); }

#ds-media { position: absolute; left: 80px; top: 200px; width: 880px; height: 700px; }
#ds-viewer { position: absolute; left: 0; top: 0; width: 880px; height: 540px; display: grid; place-items: center; }
#ds-viewer canvas { width: 100% !important; height: 100% !important; cursor: grab; }
#ds-viewer canvas:active { cursor: grabbing; }
#ds-viewer > img, #ds-viewer .slide img { max-width: 100%; max-height: 520px; object-fit: contain; filter: drop-shadow(0 12px 24px rgba(0,0,0,.35)); }
#ds-viewer video { width: 100%; max-height: 520px; background: #000; box-shadow: 0 16px 40px rgba(0,0,0,.45); }   /* ombre portée par la vidéo : disparaît avec elle */
#ds-viewer .slide { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 100%; }
#ds-viewer .slide img { max-height: 470px; }
.slide-nav { display: flex; justify-content: center; align-items: center; gap: 70px; font-size: 22px; }
.slide-nav button { width: 40px; height: 40px; font-size: 34px; line-height: 1; opacity: .85; }
.slide-nav button:hover { opacity: 1; }
.slide-full { position: absolute; right: 70px; bottom: 6px; width: 34px; height: 34px; }
.slide-full svg { width: 100%; height: 100%; }

#ds-strip-wrap { position: absolute; left: 0; top: 590px; width: 880px; }
#ds-strip { display: flex; gap: 40px; overflow-x: auto; scrollbar-width: none; padding: 0 0 18px 0; }
#ds-strip::-webkit-scrollbar { display: none; }
.thumb { flex: 0 0 auto; width: 148px; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: .75; transition: opacity .2s; }
.thumb:hover, .thumb.active { opacity: 1; }
.thumb .pic { position: relative; width: 148px; height: 96px; display: grid; place-items: center; }
.thumb .pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.thumb .pic.cover img { width: 100%; height: 100%; object-fit: cover; }
.thumb .play { position: absolute; right: 10px; top: 50%; width: 34px; height: 34px; transform: translateY(-50%); border-radius: 50%; background: rgba(255,255,255,.9); }
.thumb .play::after { content: ""; position: absolute; left: 13px; top: 9px; border-left: 12px solid #556; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.thumb span { font-size: 22px; max-width: 160px; overflow: hidden; text-overflow: clip; white-space: nowrap; }
#ds-strip-bar { position: relative; height: 4px; width: 100%; }
#ds-strip-bar span { position: absolute; left: 0; top: 0; height: 4px; background: #fff; border-radius: 2px; transition: left .2s, width .2s; }

#ds-text { position: absolute; left: 994px; top: 168px; width: 784px; height: 752px; border-left: 4px solid rgba(255,255,255,.9); }
#ds-scroll { height: 100%; overflow-y: auto; padding: 0 36px 30px 34px; scrollbar-width: thin; scrollbar-color: #fff transparent; }
#ds-scroll::-webkit-scrollbar { width: 4px; }
#ds-scroll::-webkit-scrollbar-thumb { background: #fff; border-radius: 2px; }
#ds-scroll h2 { margin: 6px 0 14px; font-weight: 700; font-size: 29px; letter-spacing: .02em; color: var(--heading); text-transform: uppercase; }
#ds-scroll h2:not(:first-child) { margin-top: 48px; }
#ds-scroll p { margin: 0; font-size: 23px; line-height: 1.3; color: var(--text); }
#ds-scroll p + p { margin-top: 2px; }
#ds-scroll p.spacer { height: 20px; }
#ds-scroll .sub { margin-top: 18px; }
#ds-scroll ul { margin: 6px 0 0; padding: 0 0 0 22px; }
#ds-scroll li { font-size: 23px; line-height: 1.3; }
#ds-scroll li::marker { font-size: 18px; }
.links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.link-btn {
  min-width: 160px; height: 52px; padding: 0 20px; font-size: 22px;
  background: url("../assets/ui/button_datasheet_links.png") center/100% 100% no-repeat;
}
.link-btn:hover { filter: brightness(1.2); }

#lightbox { position: absolute; inset: 0; background: rgba(10,14,20,.9); display: grid; place-items: center; z-index: 10; }
#lightbox[hidden] { display: none; }
#lightbox img { max-width: 1760px; max-height: 1000px; }
#lightbox .lb-close, #ds-close { cursor: pointer; }
#lightbox .lb-close { position: absolute; right: 30px; top: 30px; width: 54px; height: 54px; background: url("../assets/ui/button_close.png") center/100% 100% no-repeat; }

/* ---------- Chargement : illustration, logo, avancement global et détail par élément ---------- */
#loader {
  position: fixed; inset: 0; z-index: 50; background: #0d141d; transition: opacity 1s;
  font-family: "DIN", "Arial Narrow", sans-serif; color: #e9edf2;
}
#loader .splash {
  position: absolute; inset: 0; background: url("../assets/ui/splash.webp") center/cover no-repeat;
  animation: splash-drift 24s ease-out both;
}
#loader .splash::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,13,20,.92) 0%, rgba(8,13,20,.72) 32%, rgba(8,13,20,0) 62%),
              linear-gradient(0deg, rgba(8,13,20,.7) 0%, rgba(8,13,20,0) 35%);
}
@keyframes splash-drift { from { transform: scale(1.08); } to { transform: scale(1); } }
#loader .panel { position: absolute; left: 6vw; top: 50%; transform: translateY(-50%); width: min(460px, 80vw); }
#loader .panel img { width: 240px; }
#loader h1 { margin: 22px 0 34px; font-weight: 300; font-size: 44px; letter-spacing: .14em; text-transform: uppercase; }
#loader .bar { height: 3px; background: rgba(255,255,255,.18); }
#loader .bar span { display: block; height: 100%; width: 0; background: #fff; transition: width .3s; }
#loader-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 9px; }
#loader-list li { display: grid; grid-template-columns: 1fr auto 90px 38px; align-items: center; gap: 12px; font-size: 17px; letter-spacing: .04em; opacity: .7; transition: opacity .3s; }
#loader-list li.done { opacity: 1; }
#loader-list .size { color: #9aa6b4; font-size: 15px; }
#loader-list i { height: 2px; background: rgba(255,255,255,.15); }
#loader-list i b { display: block; height: 100%; width: 0; background: #7fd6ff; transition: width .25s; }
#loader-list li.done i b { background: #fff; }
#loader-list .pct { text-align: right; font-size: 15px; }
#loader .error { color: #fff; font-size: 20px; }
#loader.done { opacity: 0; pointer-events: none; }

/* ---------- Sous-marin : profondeur et vue périscope (haut droite) ---------- */
#depth-panel { position: absolute; right: 125px; top: 25px; width: 84px; display: flex; flex-direction: column; gap: 16px; }
#stage:not(.has-depth) > #depth-panel, #stage[data-view="overview"] > #depth-panel { opacity: 0; pointer-events: none; }
#depth-panel .depth-group { display: flex; flex-direction: column; gap: 2px; }
.depth-btn {
  width: 84px; height: 56px; display: grid; place-items: center; background: var(--hud-bg);
  transition: background .2s, box-shadow .2s;
}
.depth-btn img { width: 34px; height: 34px; object-fit: contain; }
.depth-btn img.wide { width: 62px; height: 26px; }
.depth-btn:hover { background: rgba(70, 88, 112, 0.92); }
.depth-btn.active { background: rgba(150, 160, 172, 0.55); box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
#stage.periscope > :is(#labels, #leaders) { opacity: 0; }