/* NoMiss · Liquid Glass
   Couche commune à toutes les pages : glass.js pose les classes sur les panneaux,
   cartes et boutons existants (fond translucide clair, panneaux sombres, cartes claires). */

@property --mx { syntax: '<percentage>'; inherits: false; initial-value: 18%; }
@property --my { syntax: '<percentage>'; inherits: false; initial-value: -12%; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 145deg; }
@property --shine { syntax: '<number>'; inherits: false; initial-value: 0.16; }

html { background: #120E0C; }
html.lg-on body { background: transparent !important; }
.lg-clear { background: transparent !important; background-color: transparent !important; }

/* ---------- lumière chaude sous le verre ---------- */
.lg-orbs { position: fixed; inset: -10%; z-index: -1; pointer-events: none; overflow: hidden;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0); transition: transform 1.8s cubic-bezier(.2,.8,.2,1); }
.lg-orbs i { position: absolute; display: block; border-radius: 50%; }
.lg-orbs .o1 { left: 48%; top: 2%; width: 46vw; height: 46vw; max-width: 760px; max-height: 760px;
  background: radial-gradient(circle at 40% 40%, rgba(217,174,142,.40), rgba(217,174,142,0) 68%); filter: blur(30px);
  animation: lg-drift-a 28s ease-in-out infinite alternate; }
.lg-orbs .o2 { left: 70%; top: 34%; width: 32vw; height: 32vw; max-width: 520px; max-height: 520px;
  background: radial-gradient(circle, rgba(184,106,66,.38), rgba(184,106,66,0) 70%); filter: blur(36px);
  animation: lg-drift-b 34s ease-in-out infinite alternate; }
.lg-orbs .o3 { left: -6%; top: 52%; width: 44vw; height: 36vw; max-width: 720px; max-height: 600px;
  background: radial-gradient(circle, rgba(217,174,142,.26), rgba(217,174,142,0) 70%); filter: blur(40px);
  animation: lg-drift-c 40s ease-in-out infinite alternate; }
.lg-orbs .o4 { left: 36%; top: 78%; width: 40vw; height: 30vw; max-width: 640px; max-height: 480px;
  background: radial-gradient(circle, rgba(52,210,123,.10), rgba(52,210,123,0) 70%); filter: blur(46px);
  animation: lg-drift-b 46s ease-in-out infinite alternate-reverse; }
@keyframes lg-drift-a { to { transform: translate3d(-70px, 60px, 0) scale(1.08); } }
@keyframes lg-drift-b { to { transform: translate3d(60px, -50px, 0) scale(.92); } }
@keyframes lg-drift-c { to { transform: translate3d(90px, 30px, 0) scale(1.06); } }

/* ---------- le verre ---------- */
.lg {
  isolation: isolate;
  background: linear-gradient(160deg, rgba(255,244,236,.13), rgba(255,244,236,.04) 46%, rgba(255,244,236,.07)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  backdrop-filter: blur(22px) saturate(175%);
  border-color: rgba(255,240,230,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(255,255,255,.04),
    inset 0 -22px 34px -22px rgba(217,174,142,.20), 0 26px 60px -20px rgba(0,0,0,.6) !important;
  transition: --mx .5s cubic-bezier(.2,.8,.2,1), --my .5s cubic-bezier(.2,.8,.2,1), --ang .6s cubic-bezier(.2,.8,.2,1),
    --shine .5s ease, transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, background-color .3s ease;
}
.lg.lg-deep { /* panneaux sombres pleins (#1C1614, #201916) : verre plus épais */
  background: linear-gradient(160deg, rgba(48,38,34,.62), rgba(30,24,21,.52)) !important;
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
}
.lg.lg-light {
  background: linear-gradient(170deg, rgba(248,243,239,.90), rgba(226,216,209,.78)) !important;
  border-color: rgba(255,255,255,.6) !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -12px 26px -12px rgba(140,96,66,.28), 0 34px 80px -22px rgba(0,0,0,.7) !important;
}
.lg.lg-accent {
  background: linear-gradient(160deg, rgba(217,174,142,.22), rgba(217,174,142,.07)) !important;
  border-color: rgba(217,174,142,.35) !important;
}
.lg-fx::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(70% 60% at var(--mx) var(--my), rgba(255,255,255,var(--shine)), rgba(255,255,255,0) 62%); }
.lg-fx::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(var(--ang), rgba(255,255,255,.6), rgba(255,255,255,.07) 30%, rgba(255,255,255,0) 55%, rgba(217,174,142,.42) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.lg-light.lg-fx::before { background: radial-gradient(70% 60% at var(--mx) var(--my), rgba(255,255,255,.95), rgba(255,255,255,0) 62%); }
.lg-tilt { will-change: transform; }
.lg-tilt.lg-hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -22px 34px -22px rgba(217,174,142,.26), 0 40px 80px -22px rgba(0,0,0,.72) !important; }
.lg-light.lg-tilt.lg-hover { box-shadow: inset 0 1px 0 #fff, inset 0 -12px 26px -12px rgba(140,96,66,.28), 0 44px 90px -22px rgba(0,0,0,.75) !important; }

/* ---------- cartes ajoutées à la main (class="lg-card") ---------- */
.lg-card { padding: 28px !important; border-radius: 28px !important; border: 1px solid transparent; }
.lg-card.lg-step { padding: 46px 28px 30px !important; }
.lg-card.lg-step > span[aria-hidden]:first-child { left: 28px !important; right: 28px !important; top: 24px !important; }
ul:has(> .lg-card), ol:has(> .lg-card) { gap: 20px !important; }
.lg-panel { box-sizing: border-box; width: calc(100% - 64px); padding: 56px !important; border-radius: 40px !important; margin: 40px auto 140px !important; border: 1px solid transparent; }
.lg-panel .nm-stat { margin-top: 56px !important; }
/* le chiffre clé dans sa propre plaque de verre, centré */
.lg-card.lg-statcard { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center;
  gap: 18px !important; max-width: 520px; padding: 44px 36px 40px !important; border-radius: 32px !important; }
.lg-card.lg-statcard p { margin: 0 !important; max-width: 24rem; }
.lg-statcard.lg { background: linear-gradient(160deg, rgba(255,244,236,.16), rgba(255,244,236,.05) 50%, rgba(255,244,236,.09)) !important; }
/* ordinateur : le texte à gauche, la plaque du chiffre à droite (comme la maquette) */
@media (min-width: 900px) {
  .lg-panel:has(> .lg-statcard) { display: grid !important; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr);
    column-gap: 56px; align-items: center; padding: 64px !important; }
  .lg-panel:has(> .lg-statcard) > :not(.lg-statcard) { grid-column: 1; }
  .lg-panel:has(> .lg-statcard) > p:first-child { align-self: end; }
  .lg-panel:has(> .lg-statcard) > p:not(:first-child) { align-self: start; }
  .lg-panel:has(> .lg-statcard) > p:not(:first-child) { font-size: clamp(32px, 3.3vw, 46px) !important; line-height: 1.12 !important; }
  .lg-panel > .lg-statcard { grid-column: 2; grid-row: 1 / span 2; margin: 0 !important; max-width: none; align-self: center;
    padding: 40px 30px 36px !important; }
  .lg-panel > .lg-statcard .lg-num { font-size: clamp(96px, 8.6vw, 132px) !important; }
  .lg-panel > .lg-statcard p { font-size: 16px !important; line-height: 1.5 !important; }
}
.lg-num { display: inline-block; transform-origin: 50% 85%; will-change: transform; }
@media (max-width: 760px) { .lg-card.lg-statcard { max-width: none; padding: 34px 22px 30px !important; border-radius: 26px !important; } }
@media (max-width: 760px) { .lg-panel { width: calc(100% - 32px); padding: 28px 22px !important; border-radius: 30px !important; margin: 24px auto 96px !important; } }

/* ---------- barre de navigation flottante ---------- */
.lg-bar { position: sticky !important; top: 12px; z-index: 25 !important; box-sizing: border-box;
  width: calc(100% - 32px); max-width: 1160px !important; margin: 14px auto 18px !important;
  padding: 8px 10px 8px 22px !important; border-radius: 999px; border: 1px solid transparent; }
/* espace client sur téléphone : le détail d'un appel est une page plein écran, au-dessus de la barre, et opaque */
@media (max-width: 860px) { #detail { z-index: 40 !important; } #detail.lg { background: linear-gradient(160deg, rgba(34,27,24,.97), rgba(20,16,14,.97)) !important; } }
@media (max-width: 760px) { .lg-bar { border-radius: 26px; padding: 8px 10px 8px 16px !important; width: calc(100% - 20px); } }

/* ---------- boutons ---------- */
.lg-drop { background: linear-gradient(180deg, #FBF8F6 0%, #E1D6CE 100%) !important; color: #1A1412 !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 8px rgba(120,84,60,.22), 0 10px 26px -8px rgba(0,0,0,.55) !important;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease !important; }
.lg-drop:hover { transform: translateY(-2px);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 8px rgba(120,84,60,.22), 0 18px 36px -8px rgba(0,0,0,.6), 0 0 0 6px rgba(233,228,224,.10) !important; }
.lg-gold { background: linear-gradient(180deg, #E8C5AA 0%, #CC9C78 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -3px 8px rgba(110,62,30,.28), 0 10px 26px -8px rgba(0,0,0,.55) !important;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease !important; }
.lg-gold:hover { transform: translateY(-2px); }
.lg-ghost { background: linear-gradient(160deg, rgba(255,244,236,.11), rgba(255,244,236,.03)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border-color: rgba(255,240,230,.20) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 10px 24px -14px rgba(0,0,0,.55) !important;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background-color .2s ease !important; }
.lg-ghost:hover { transform: translateY(-2px); }
.lg-drop:active, .lg-gold:active, .lg-ghost:active { transform: scale(.96); transition-duration: .1s !important; }

/* ---------- apparition « matière » au défilement ---------- */
.lg-rv { opacity: 0; transform: translateY(26px) scale(.97); filter: blur(10px); }
.lg-rv.lg-in { opacity: 1; transform: none; filter: none;
  transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1), filter .9s cubic-bezier(.2,.8,.2,1), --mx .5s, --my .5s, --ang .6s, --shine .5s !important; }

/* ---------- accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  .lg-orbs, .lg-orbs i { animation: none !important; transition: none !important; }
  .lg, .lg-drop, .lg-gold, .lg-ghost { transition: none !important; }
  .lg-rv { transform: none; filter: none; }
  .lg-rv.lg-in { transition: opacity .3s ease !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .lg, .lg.lg-deep, .lg-ghost { background: #241C19 !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .lg.lg-light { background: #EFE8E3 !important; }
  .lg-orbs { display: none; }
}
@media (prefers-contrast: more) {
  .lg, .lg-ghost { background: #1C1614 !important; border-color: rgba(243,237,233,.5) !important; }
}
@media print { .lg-orbs { display: none; } .lg, .lg-ghost { -webkit-backdrop-filter: none; backdrop-filter: none; } }