/* ============================================================
   Perry Weather | Weather Station Configurator | styles
   (reformaté le 10/07 : une règle par ligne, fini la ligne unique)
   Les durées/courbes --pw-* sont pilotées par config.ui.motion.
   ============================================================ */
:root {
   --pw-dur-dd: 300ms;
   --pw-ease-dd: ease-out;
   --pw-dur-panel: 400ms;
   --pw-ease-panel: ease-in-out;
   --pw-dur-group: 350ms;
   --pw-ease-group: ease-in-out;
   --pw-dur-caret: 300ms;
   --pw-ease-caret: ease;
   --pw-dur-hero: 900ms;
   --pw-ease-hero: ease;
   --pw-dur-viewer: 1100ms;
   --pw-ease-viewer: ease;
   --pw-dur-notif: 500ms;
   --pw-ease-notif: cubic-bezier(.34, 1.56, .64, 1);
   --bg: #10171d;
   --card: #15202c;
   --card-border: #1c2a38;
   --chip: #28323d;
   --item: #28323d;
   --item-selected-bg: #0f151c;
   --accent-blue: #56a8cb;
   --accent-blue-border: #4687b3;
   --text: #ffffff;
   --text-dim: #8d94a0;
   --alert: #ee7064;
   --active: #dfe566;
   --all-clear: #68ac77;
   --seg-mint: #f3feee;
   --seg-yellow: #fcfdde;
   --glow-green: rgba(153, 207, 160, .4);
   --font: "Proxima Nova", "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;
   --font-ios: -apple-system, BlinkMacSystemFont, "SF Pro", "Helvetica Neue", sans-serif;
   --radius: 12px;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box
}

html,
body {
   background: var(--bg)
}

body {
   font-family: var(--font);
   color: var(--text);
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
}

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

a {
   color: inherit;
   text-decoration: none
}

.stage {
   position: relative;
   width: 100%;
   min-height: 100vh;
   min-width: 1180px;
   overflow: hidden;
}

.hero {
   position: absolute;
   inset: 0;
   overflow: hidden;
   pointer-events: none;
}

.hero-layer {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center 40%;
   opacity: 0;
   transition: opacity var(--pw-dur-hero) var(--pw-ease-hero);
   -webkit-mask-image: radial-gradient(115% 95% at 50% 45%, #000 55%, transparent 96%);
   mask-image: radial-gradient(115% 95% at 50% 45%, #000 55%, transparent 96%);
   pointer-events: none;
}

.hero-layer.visible {
   opacity: 1
}

.hero-layer video {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 40%;
   pointer-events: none;
}

.hero-vignette {
   position: absolute;
   inset: 0;
   background: linear-gradient(to top, var(--bg) 0%, rgba(16, 23, 29, .55) 7%, transparent 22%), linear-gradient(to bottom, rgba(16, 23, 29, .75) 0%, transparent 18%);
   pointer-events: none;
}

/* Zone 3D (QA client 10/07) : commence SOUS la nav (46+72=118px) et
   s'arrête au-dessus de la barre d'alertes (contrôles 54 + 13 + barre 69
   + bottom 40 ≈ 176px). Le modèle est auto-centré verticalement dans ce
   cadre par viewer3d.js : la machine est toujours au milieu, jamais
   derrière la nav. */
.viewer {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   top: 132px;
   bottom: 180px;
   width: min(46vw, 880px);
   z-index: 10;
   cursor: grab;
   opacity: 0;
   transition: opacity var(--pw-dur-viewer) var(--pw-ease-viewer);
}

.viewer.ready {
   opacity: 1
}

.viewer.failed {
   display: none
}

.viewer:active {
   cursor: grabbing
}

.viewer canvas {
   display: block;
   width: 100%;
   height: 100%
}

.nav {
   position: absolute;
   top: 46px;
   left: 50%;
   transform: translateX(-50%);
   width: min(1170px, calc(100% - 130px));
   height: 72px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 12px 12px 30px;
   background: var(--card);
   border: 1.4px solid var(--card-border);
   border-radius: 56px;
   box-shadow: 0 33px 94px rgba(0, 0, 0, .04), 0 14px 39px rgba(0, 0, 0, .03), 0 7px 21px rgba(0, 0, 0, .02), 0 4px 12px rgba(0, 0, 0, .02);
   z-index: 40;
}

.nav-logo img {
   height: 44px;
   width: auto;
   aspect-ratio: 190 / 44;
   display: block;
}

.nav-logo img.logo-pin {
   display: none;
}

.nav-links {
   display: flex;
   align-items: center;
}

.nav-link {
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 6px 16px;
   border-radius: 1000px;
   font-size: 16px;
   letter-spacing: -.15px;
   line-height: 24px;
   transition: background .2s;
}

.nav-link:hover {
   background: rgba(255, 255, 255, .06)
}

.nav-link svg {
   opacity: .8
}

.nav-actions {
   display: flex;
   align-items: center;
   gap: 8px;
}

.nav-login {
   padding: 12px 32px;
   border-radius: 36px;
   font-size: 16px;
   transition: background .2s;
}

.nav-login:hover {
   background: rgba(255, 255, 255, .06)
}

.btn-gradient {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 12px 24px;
   border-radius: 36px;
   background-image: url("../assets/btn-gradient.png");
   background-size: cover;
   background-position: center;
   color: #121a24;
   font-size: 16px;
   letter-spacing: -.15px;
   line-height: 24px;
   box-shadow: 0 8px 24px var(--glow-green);
   transition: transform .15s ease, box-shadow .2s ease;
}

.btn-gradient:hover {
   transform: translateY(-1px);
   box-shadow: 0 10px 28px var(--glow-green);
}

.btn-gradient:active {
   transform: translateY(0)
}

.col-left,
.col-right {
   position: absolute;
   top: 180px;
   bottom: 24px;
   z-index: 30;
   display: flex;
   flex-direction: column;
}

/* navbar masquée (brand.navbar, classe posée par app.js/renderNav) :
   les colonnes récupèrent la zone laissée libre en haut */
body.no-nav .col-left,
body.no-nav .col-right {
   top: 110px;
}

/* fenêtres basses : les colonnes défilent en interne ; la molette est
   active sur TOUT l'écran et entraîne les deux côtés à la fois
   (feedback 20260716 #5, app.js/bindGlobalScroll). Largeurs identiques
   gauche/droite (feedback #32). */
.col-left {
   left: clamp(24px, 5.6vw, 108px);
   width: 370px;
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: none;
   -ms-overflow-style: none;
}

.col-left::-webkit-scrollbar {
   display: none
}

.col-right {
   right: clamp(24px, 5.6vw, 108px);
   width: 370px;
   align-items: stretch;
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: none;
   -ms-overflow-style: none;
}

.col-right::-webkit-scrollbar {
   display: none
}

.col-left .panels {
   flex: 0 0 auto
}

/* QA client 10/07 : Specifications reste TOUJOURS directement sous le
   panneau Power + Connectivity, avec le même espacement que les panneaux
   (12px). L'ancien margin-top:auto la poussait en bas de colonne : écart
   variable selon la hauteur de fenêtre et rendu différent sous Safari. */
.col-left .specs-card {
   margin-top: 12px
}

.col-right .package-card {
   flex: 0 0 auto
}

.col-right .mobile-card {
   margin-top: 0;
   margin-bottom: 12px;
   flex: 0 0 auto;
   order: -1
}

.panels {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.panel {
   background: var(--card);
   border: 1px solid var(--card-border);
   border-radius: var(--radius);
   overflow: hidden;
}

.panel-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   padding: 29px 25px;
   text-align: left;
}

.panel-title {
   font-size: 24px;
   font-weight: 700;
   line-height: 1;
}

.chev {
   flex: 0 0 auto;
   transition: transform var(--pw-dur-caret) var(--pw-ease-caret);
   opacity: .9;
}

.panel.open .panel-header .chev {
   transform: rotate(180deg)
}

/* Accordéon en hauteur mesurée (app.js/slideToggle), plus en max-height :
   la hauteur réelle laisse passer l'overshoot élastique de la courbe
   (réf. PW-Menu-Animation-Sample : le bord dépasse de ~1,5 % puis se
   pose) ; max-height plafonnait la course et faussait le timing. */
.panel-body {
   height: 0;
   overflow: hidden;
   transition: height var(--pw-dur-panel) var(--pw-ease-panel);
}

.panel-list {
   margin: 0 8px 8px;
   padding: 6px;
   background: rgba(255, 255, 255, .03);
   border-radius: 15px;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.panel-list.row {
   flex-direction: row
}

.panel-list.row .opt {
   flex: 1
}

.opt {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   min-height: 46px;
   padding: 8px 14px;
   background: var(--item);
   border-radius: var(--radius);
   font-size: 15px;
   font-weight: 700;
   color: var(--text);
   text-align: left;
   transition: background .2s, color .2s;
}

.opt:hover {
   background: #303b47
}

.opt.selected {
   background: var(--item-selected-bg);
   color: var(--accent-blue);
}

.opt .chev {
   transition: transform var(--pw-dur-caret) var(--pw-ease-caret)
}

.opt.selected .chev {
   transform: rotate(180deg)
}

/* Cascade des items à l'ouverture d'un panneau (réf. vidéo PW-Menu-
   Animation-Sample) : chaque pastille se BALAYE de gauche à droite façon
   trim-path (clip-path sur le fond arrondi, moignon icône optionnel via
   --pw-item-stub), l'item N+1 démarre pendant le balayage de N (recouvrement
   réglé par config.ui.motion.items.overlap). Le texte de l'item glisse
   avec un rebond droite→gauche (back-out) vers sa place définitive.
   Délais par item posés en inline (--casc-d) par app.js. */
.panel.cascade .panel-list .opt,
.panel.cascade .sub-opts .sub-opt {
   animation: opt-wipe var(--pw-item-dur, 340ms) var(--pw-ease-item, ease-out) both;
   animation-delay: var(--casc-d, 0ms);
}

.panel.cascade .panel-list .opt>span,
.panel.cascade .sub-opts .sub-opt>span {
   display: inline-block;
   animation: opt-text var(--pw-item-text-dur, 380ms) var(--pw-ease-item-text, cubic-bezier(.34, 1.56, .64, 1)) both;
   animation-delay: calc(var(--casc-d, 0ms) + var(--pw-item-text-delay, 50ms));
}

@keyframes opt-wipe {
   0% {
      clip-path: inset(0 calc(100% - var(--pw-item-stub, 0px)) 0 0 round var(--radius));
      opacity: 0
   }

   10% {
      opacity: 1
   }

   26% {
      clip-path: inset(0 calc(100% - var(--pw-item-stub, 0px)) 0 0 round var(--radius))
   }

   100% {
      clip-path: inset(0 0 0 0 round var(--radius));
      opacity: 1
   }
}

@keyframes opt-text {
   from {
      transform: translateX(var(--pw-item-text-offset, -16px))
   }

   to {
      transform: none
   }
}

.sub-opts {
   display: flex;
   flex-direction: column;
   gap: 5px;
   padding-left: 21px;
}

.sub-opts.fold {
   height: 0;
   opacity: 0;
   overflow: hidden;
   transition: height var(--pw-dur-panel) var(--pw-ease-panel), opacity var(--pw-dur-panel) var(--pw-ease-panel);
}

.sub-opts.fold.unfolded {
   opacity: 1
}

.sub-opt {
   min-height: 44px;
   display: flex;
   align-items: center;
   padding: 8px 18px;
   background: var(--item-selected-bg);
   border-radius: 24px;
   font-size: 14px;
   font-weight: 700;
   color: rgba(86, 168, 203, .5);
   text-align: left;
   transition: color .2s;
}

.sub-opt:hover {
   color: rgba(86, 168, 203, .75)
}

.sub-opt.selected {
   color: var(--accent-blue)
}

/* replié, la carte Specifications a exactement la hauteur d'un panneau
   (feedback 20260716 #8) : même padding d'en-tête, même line-height */
.specs-card {
   background: var(--card);
   border: 1px solid var(--card-border);
   border-radius: var(--radius);
   padding: 0;
   overflow: hidden;
}

.specs-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   padding: 29px 25px;
   text-align: left;
}

.specs-card .specs-body {
   height: 0;
   overflow: hidden;
   transition: height var(--pw-dur-group) var(--pw-ease-group);
}

.specs-card.open .specs-head .chev {
   transform: rotate(180deg)
}

.specs-card .card-title {
   font-size: 24px;
   font-weight: 700;
   line-height: 1
}

.specs-grid {
   display: grid;
   grid-template-columns: max-content 1fr;
   column-gap: 17px;
   margin: 0 25px 22px;
}

.specs-label {
   font-size: 16px;
   font-weight: 700;
   letter-spacing: 2.08px;
   line-height: 33px;
   color: var(--text-dim);
}

.specs-value {
   font-size: 16px;
   line-height: 33px
}

.specs-note {
   font-size: 12px;
   line-height: 1.2;
   color: var(--text-dim)
}

.specs-notes {
   margin-top: 14px;
   font-size: 12px;
   line-height: 1.45;
   color: var(--text-dim);
}

.specs-flag {
   margin-top: 8px;
   font-size: 12px;
   line-height: 1.45;
   color: var(--active);
}

.package-card {
   background: var(--card);
   border: 1px solid var(--card-border);
   border-radius: var(--radius);
   padding: 24px 29px;
   display: flex;
   flex-direction: column;
   gap: 22px;
}

.package-title {
   font-size: 24px;
   font-weight: 700;
   line-height: 1.05;
   background-image: url("../assets/title-gradient.png");
   background-size: cover;
   background-position: center;
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
}

.pkg-group {
   display: flex;
   flex-direction: column;
   gap: 12px
}

.pkg-group-head {
   display: flex;
   align-items: center;
   gap: 10px;
   width: max-content;
}

.pkg-group-label {
   font-size: 16px;
   font-weight: 700;
   line-height: 1
}

.pkg-group.open .pkg-group-head .chev {
   transform: rotate(180deg)
}

.pkg-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
   height: 0;
   overflow: hidden;
   transition: height var(--pw-dur-group) var(--pw-ease-group);
}

.tag {
   padding: 6px 8px;
   background: var(--chip);
   border-radius: 143px;
   font-size: 12px;
   line-height: 1;
   white-space: nowrap;
}

.mobile-card {
   position: relative;
   margin-top: 13px;
   height: 305px;
   background: var(--card);
   border: 1px solid var(--card-border);
   border-radius: var(--radius);
   overflow: hidden;
}

.mobile-card .card-title {
   position: absolute;
   top: 30px;
   left: 31px;
   font-size: 24px;
   font-weight: 700;
   z-index: 2;
}

/* écran verrouillé : dégradé bleu conforme à la référence Figma
   (feedback 20260716 #27/#60 — contraste net avec la Dynamic Island) */
.phone {
   position: absolute;
   top: 82px;
   left: 50%;
   transform: translateX(-50%);
   width: 319px;
   height: 673px;
   background-image: url('../assets/mobile.png');
   background-repeat:no-repeat;
   /* background: linear-gradient(180deg, #2c4a6b 0%, #24405f 22%, #1a2f4a 48%, #101d31 78%, #0a1322 100%); */
   /* border: 8px solid #000; */
   /* border-radius: 50px; */
   overflow: hidden;
}

.phone-halos {
   display: none
}

.phone-island {
   /* position: absolute;
   top: 13px;
   left: 50%;
   transform: translateX(-50%);
   width: 96px;
   height: 26px;
   background: #000;
   border-radius: 33px;
   z-index: 3; */
}

.phone-clock {
   position: absolute;
   top: 52px;
   width: 100%;
   text-align: center;
   font-family: var(--font-ios);
   opacity: 0;
   transition: opacity .4s;
}

.phone-clock.visible {
   opacity: 1
}

.phone-date {
   margin-top: 10px;
   font-size: 14px;
   font-weight: 600;
   color: rgba(255, 255, 255, .88)
}

/* heure « type iPhone » (feedback 20260720) : spec Figma Bebas Neue
   117.188px / 51.563px (44 %) sur mock 500 px ≡ 75px / 33px sur notre
   phone de 319 px ; + dégradé gris, légère transparence et léger
   embossement demandés par le client */
   .phone-time {
      font-family: "Bebas Neue", var(--font-ios);
      font-size: 150px;
      font-weight: 400;
      line-height: 33px;
      padding: 50px 0 50px;
      margin-top: 15px;
      color: rgba(255, 255, 255, .61);
      background: linear-gradient(180deg, rgba(255, 255, 255, .72) 0%, rgba(140, 163, 196, 0.75) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 -1px 0 rgba(21, 24, 43, 0.185)) drop-shadow(0 1px 1px rgba(0, 0, 0, 2));
  }

.phone-widget {
   position: absolute;
   top: 74px;
   left: 13px;
   right: 13px;
   z-index: 2;
}

.notif {
   display: flex;
   gap: 10px;
   padding: 8px 9px 8px 14px;
   background: rgba(60, 65, 75, .55);
   backdrop-filter: blur(12px);
   border-radius: 13px;
   box-shadow: 0 5px 25px rgba(0, 0, 0, .21);
   font-family: var(--font-ios);
   animation: notif-in var(--pw-dur-notif) var(--pw-ease-notif);
}

@keyframes notif-in {
   from {
      opacity: 0;
      transform: translateY(-18px) scale(.96)
   }

   to {
      opacity: 1;
      transform: translateY(0) scale(1)
   }
}

.notif-icon {
   flex: 0 0 28px;
   width: 28px;
   height: 28px;
   /* centrée verticalement dans la bulle (feedback Figma 20260722,
      zone design : repères d'écarts inégaux au-dessus/au-dessous) */
   align-self: center;
   background: #121a24;
   border-radius: 5px;
   overflow: hidden;
}

.notif-icon img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.notif-content {
   flex: 1;
   min-width: 0
}

.notif-toprow {
   display: flex;
   justify-content: space-between;
   gap: 8px;
}

.notif-title {
   font-size: 12px;
   font-weight: 600;
   letter-spacing: -.18px
}

.notif-time {
   font-size: 11px;
   color: rgba(255, 255, 255, .5);
   white-space: nowrap
}

.notif-body {
   margin-top: 2px;
   font-size: 12px;
   line-height: 16px;
   letter-spacing: -.18px;
   color: rgba(255, 255, 255, .95);
   white-space: pre-line;
}

.status-card {
   padding: 10px 16px 8px;
   background: rgba(20, 26, 34, .82);
   backdrop-filter: blur(12px);
   border-radius: 13px;
   box-shadow: 0 5px 25px rgba(0, 0, 0, .21);
   font-family: var(--font-ios);
   text-align: center;
   animation: notif-in var(--pw-dur-notif) var(--pw-ease-notif);
}

.status-head {
   display: flex;
   justify-content: space-between;
   font-size: 11px;
   color: rgba(255, 255, 255, .6);
}

.status-head b {
   color: #fff;
   font-weight: 600
}

.status-icon {
   display: flex;
   justify-content: center;
   margin: 2px 0 0
}

.status-icon svg {
   width: 55px;
   height: 55px
}

.status-main {
   margin: 2px 0 0;
   font-size: 18px;
   font-weight: 500;
}

.status-meta {
   font-size: 12px;
   color: rgba(255, 255, 255, .6)
}

.alerts {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   bottom: 40px;
   width: 595px;
   z-index: 30;
}

.alerts-controls {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 17px;
   margin-bottom: 13px;
}

.alert-dropdown {
   position: relative
}

.alert-dd-btn {
   display: flex;
   align-items: center;
   gap: 18px;
   padding: 15px 21px;
   background: #17202c;
   border: 1px solid var(--accent-blue-border);
   border-radius: var(--radius);
   font-size: 16px;
   transition: background .2s;
}

.alert-dd-btn:hover {
   background: #1c2836
}

.alert-dd-btn .dd-caret {
   transition: transform var(--pw-dur-caret) var(--pw-ease-caret)
}

.alert-dropdown.open .dd-caret {
   transform: rotate(180deg)
}

.alert-dd-list {
   position: absolute;
   bottom: calc(100% + 8px);
   left: 0;
   min-width: 100%;
   list-style: none;
   background: #17202c;
   border: 1px solid var(--accent-blue-border);
   border-radius: var(--radius);
   padding: 6px;
   display: none;
   flex-direction: column;
   gap: 4px;
   z-index: 50;
}

.alert-dropdown.open .alert-dd-list {
   display: flex;
   animation: dd-list-in var(--pw-dur-panel) var(--pw-ease-panel);
}

@keyframes dd-list-in {
   from {
      opacity: 0;
      transform: translateY(10px) scale(.98)
   }
}

.alert-dd-list li {
   padding: 10px 14px;
   border-radius: 8px;
   font-size: 15px;
   white-space: nowrap;
   cursor: pointer;
   animation: opt-wipe var(--pw-item-dur, 340ms) var(--pw-ease-item, ease-out) both;
}

.alert-dd-list li>span {
   display: inline-block;
   animation: opt-text var(--pw-item-text-dur, 380ms) var(--pw-ease-item-text, cubic-bezier(.34, 1.56, .64, 1)) both;
   animation-delay: inherit;
}

@keyframes dd-in {
   to {
      opacity: 1;
      transform: translateY(0)
   }
}

.alert-dd-list li:hover {
   background: rgba(86, 168, 203, .12)
}

.alert-dd-list li.selected {
   color: var(--accent-blue)
}

.play-btn {
   border-radius: 43px;
   color: #000;
   background-image: url("../assets/icons/play-gradient.png");
}

.play-btn.playing {
   opacity: .85
}

.alerts-bar {
   position: relative;
   height: 69px;
   background: rgba(23, 32, 44, .7);
   backdrop-filter: blur(6px);
   border-radius: var(--radius);
   padding: 16px 23px 0;
}

.playbar {
   position: relative;
   height: 27px
}

.playbar-track {
   position: absolute;
   inset: 0
}

/* remplissage PAR SEGMENT (feedback 20260716 #47/#54) : la progression ne
   traverse plus les coupures ni les icônes de phase */
.pb-seg-fill {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 0;
   border-radius: 2px;
   background: var(--pb-fill, rgba(255, 255, 255, .35));
   transition: background-color .35s ease;
   box-shadow: 0 0 8px rgba(255, 255, 255, .15);
}

.playbar-head {
   /* retour client 24/07 : plus de point blanc ; la progression est
      portée par le remplissage (calé au pixel sur cette position), les
      marqueurs et les libellés. L'élément reste le référentiel de calcul
      de setPlaybarProgress, on ne le supprime pas du DOM. */
   display: none;
   position: absolute;
   top: 50%;
   left: 0;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: #fff;
   box-shadow: 0 0 12px rgba(255, 255, 255, .9);
   transform: translate(-50%, -50%);
   opacity: 0;
   transition: opacity .3s;
   z-index: 2
}

.playbar-head.visible {
   opacity: 1
}

.phase-labels {
   position: relative;
   height: 24px
}

.phase-label {
   position: absolute;
   transform: translateX(-50%);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1.2px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .5);
   transition: color .3s;
   white-space: nowrap;
}

.phase-label.lit-alert {
   color: var(--alert)
}

.phase-label.lit-active {
   color: var(--active)
}

.phase-label.lit-all-clear {
   color: var(--all-clear)
}

.pb-marker {
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 4
}

.pb-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   transition: transform .25s;
}

.pb-icon {
   display: none
}

.pb-marker.current .pb-dot {
   display: none
}

.pb-marker.current .pb-icon {
   display: block
}

.pb-seg {
   position: absolute;
   top: 50%;
   height: 3px;
   border-radius: 2px;
   transform: translateY(-50%);
   opacity: .85;
   z-index: 1;
}

.nav-burger {
   display: none
}

.m-config {
   display: none
}

@media (prefers-reduced-motion:reduce) {
   :root {
      --pw-dur-dd: 0ms;
      --pw-dur-panel: 0ms;
      --pw-dur-group: 0ms;
      --pw-dur-caret: 0ms;
      --pw-dur-hero: 0ms;
      --pw-dur-viewer: 0ms;
      --pw-dur-notif: 0ms;
      --pw-item-dur: 0ms;
      --pw-item-text-dur: 0ms;
      --pw-item-text-delay: 0ms
   }
}

@media (max-width:1500px) and (min-width:901px) {
   .col-left {
      width: 330px
   }

   .col-right {
      width: 330px
   }

   .panel-title,
   .specs-card .card-title,
   .mobile-card .card-title,
   .package-title {
      font-size: 21px
   }

   .nav {
      width: min(1170px, calc(100% - 90px))
   }
}

@media (max-height:860px) and (min-width:901px) {

   .col-left,
   .col-right {
      top: 150px
   }

   body.no-nav .col-left,
   body.no-nav .col-right {
      top: 96px
   }

   .nav {
      top: 28px
   }

   .alerts {
      bottom: 24px
   }

   .viewer {
      top: 112px;
      bottom: 164px
   }
}

/* fiche package mobile simplifiée (feedback 20260716 #53) ; retour client
   24/07 : la phrase tient sur UNE ligne, taille asservie à la largeur
   d'écran (2.3vw ≈ 8.6px sur 375pt) entre 7 et 13px */
.pkg-mobile-note {
   font-size: clamp(7px, 2.25vw, 13px);
   line-height: 1.5;
   white-space: nowrap;
   color: var(--text-dim);
   text-align: center;
   padding: 0 8px;
}

@media (max-width:900px) {
   html, body {
      height: 100vh;
      height: var(--pw-vh, 100vh);
      overflow-y: hidden;
   }

   @supports (height: 100lvh) {
      html, body {
         height: 100lvh
      }
   }

   .stage {
      min-width: 0;
      display: flex;
      flex-direction: column;
      /* dégagement bas = hauteur de la bottom sheet actuelle (contrôles
         seuls, ~141px) + marge ; l'ancien 360px datait de la sheet avec
         titre + note et laissait ~220px de sur-défilement à vide (la
         machine sortait de l'écran, retour client 24/07) */
      padding: 84px 12px 160px;
      gap: 14px;
      overflow: visible
   }

   /* feedback 20260728 #159 : « the background jumps up and down when
      scrolling … (noticed on android only) ». Cause : un fond fixed calé sur
      inset:0 suit la hauteur du viewport, que Chrome Android fait varier en
      repliant/dépliant sa barre d'URL au défilement | à chaque variation le
      cadrage « cover » sautait. On fige la hauteur sur le grand viewport
      (100lvh, insensible à la barre d'URL), avec repli sur --pw-vh mesuré au
      chargement pour les navigateurs sans unités dynamiques. */
   .hero {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: var(--pw-vh, 100vh);
      z-index: 0
   }

   @supports (height: 100lvh) {
      .hero {
         height: 100lvh
      }
   }

   .nav {
      position: fixed;
      top: 14px;
      width: calc(100% - 32px);
      height: 48px;
      padding: 0 6px 0 6px;
      border-radius: 56px;
      background: transparent;
      border: none;
      box-shadow: none
   }

   .nav-links,
   .nav-login {
      display: none
   }

   .nav-burger {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px
   }

   .nav-logo {
      position: absolute;
      left: 50%;
      transform: translateX(-50%)
   }

   .nav-logo img {
      display: none
   }

   .nav-logo img.logo-pin {
      display: block;
      height: 34px;
      width: auto;
      aspect-ratio: auto
   }

   .nav-cta {
      padding: 8px 14px;
      font-size: 14px
   }

   .m-config {
      display: flex;
      align-items: center;
      gap: 2px;
      order: 1;
      z-index: 20
   }

   .m-config-arrow {
      flex: 0 0 26px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      opacity: .85
   }

   .m-config-center {
      position: relative;
      flex: 1;
      min-width: 0
   }

   /* retour client 24/07 : barre un peu plus haute et nom de package
      complet sur une ligne (taille asservie à la largeur d'écran) */
   .m-config-pill {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 18px 12px;
      background: var(--card);
      border: .8px solid var(--card-border);
      border-radius: 8px;
      font-size: clamp(9.5px, 3.1vw, 14px);
      font-weight: 700;
      color: #fff
   }

   .m-config-pill span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
   }

   .m-config-pill .chev {
      flex: 0 0 auto;
      transition: transform var(--pw-dur-caret) var(--pw-ease-caret)
   }

   .m-config.open .m-config-pill .chev {
      transform: rotate(180deg)
   }

   .m-config-drawer {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      width: 76%;
      background: var(--card);
      border-radius: 0 0 8px 8px;
      padding: 0 5px;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height var(--pw-dur-panel) var(--pw-ease-panel), opacity var(--pw-dur-panel) var(--pw-ease-panel), padding var(--pw-dur-panel) var(--pw-ease-panel);
      z-index: 25
   }

   .m-config.open .m-config-drawer {
      max-height: 420px;
      opacity: 1;
      padding: 6px 5px
   }

   .m-config-drawer .wrap {
      background: rgba(255, 255, 255, .03);
      border-radius: 10px;
      padding: 4px 3px;
      display: flex;
      flex-direction: column;
      gap: 7px
   }

   .m-config-drawer .opt {
      min-height: 32px;
      padding: 7px 9px;
      border-radius: 8px;
      font-size: 12px
   }

   .m-config-drawer .sub-opts {
      padding-left: 12px
   }

   .m-config-drawer .sub-opt {
      min-height: 30px;
      padding: 6px 12px;
      font-size: 12px
   }

   .viewer {
      position: relative;
      order: 2;
      left: auto;
      transform: none;
      top: auto;
      bottom: auto;
      width: 100%;
      height: 42vh;
      min-height: 280px;
      z-index: 5
   }

   .col-right {
      position: static;
      order: 3;
      width: 100%;
      z-index: 10
   }

   .package-card {
      padding: 20px 10px;
      border-radius: 10px;
      gap: 16px
   }

   .package-title {
      font-size: 18px;
      text-align: center;
      align-self: center
   }

   .mobile-card {
      display: none
   }

   .pkg-tabs-row {
      display: flex;
      justify-content: space-between;
      padding: 0 6px
   }

   .pkg-tab {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 700;
      color: rgba(255, 255, 255, .5)
   }

   .pkg-tab.active {
      color: #fff
   }

   .pkg-tab .chev {
      transform: rotate(180deg)
   }

   .pkg-tab.active .chev {
      transform: rotate(0)
   }

   /* feedback 20260716 #58/#59 : Mounting, Power et Specifications n'existent
   pas sur mobile — la colonne gauche disparaît entièrement */
   .col-left {
      display: none
   }

   .panel-header {
      padding: 16px 18px;
      justify-content: center;
      gap: 10px
   }

   .panel-title {
      font-size: 16px
   }

   .panel.panel-configurations {
      display: none
   }

   .alerts {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      transform: none;
      width: auto;
      padding: 10px 16px 14px;
      background: linear-gradient(to top, rgba(16, 23, 29, .92) 65%, transparent);
      z-index: 40
   }

   .alerts-controls {
      margin-bottom: 10px
   }

   .alert-dd-btn {
      padding: 13px 16px;
      font-size: 15px
   }

   .play-btn {
      padding: 13px 18px;
      font-size: 15px
   }

   .alerts-bar {
      height: 56px;
      padding: 12px 14px 0;
      border-radius: 7px
   }

   .m-sheet {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 40;
      background: var(--card);
      border: 1px solid rgba(86, 168, 203, .4);
      border-bottom: none;
      border-radius: 18px 18px 0 0;
      padding: 14px 12px 10px;
      display: flex;
      flex-direction: column;
      gap: 12px
   }

   .m-sheet .package-card {
      background: none;
      border: none;
      padding: 0;
      gap: 12px;
      border-radius: 0
   }

   .pkg-mhead {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 0 2px
   }

   .pkg-mhead .package-title {
      font-size: 15px;
      text-align: left;
      align-self: auto;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
   }

   .pkg-fold {
      color: var(--text-dim);
      padding: 2px;
      display: flex
   }

   .m-sheet .alerts {
      position: static;
      transform: none;
      width: auto;
      padding: 0;
      background: none
   }

   .m-sheet .alerts-controls {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
      justify-content: stretch
   }

   .m-sheet .alert-dropdown {
      flex: 1
   }

   .m-sheet .alert-dd-btn {
      width: 100%;
      justify-content: space-between
   }

   /* retour client 24/07 : pas de boîte sombre autour de la playbar
      dans la sheet mobile */
   .m-sheet .alerts-bar {
      background: none;
      backdrop-filter: none
   }
}