/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   devis-shared.css — NoemaWorks · Partagé entre toutes les pages devis
   Overlay doré léger · Animations d'entrée · Lecteur musical
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── FILTRE DORÉ AMBIENT ───────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 8%,  rgba(232,196,88,0.065) 0%, transparent 52%),
    radial-gradient(ellipse at 85% 92%, rgba(200,158,55,0.045) 0%, transparent 48%);
  pointer-events: none;
  z-index: 0;
}

/* ── ANIMATIONS D'ENTRÉE ─────────────────────────────── */
@keyframes devisIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes devisFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Page container fade */
.page,
.wrap { animation: devisFadeIn 0.5s ease both; }

/* Header */
.header { animation: devisIn 0.55s cubic-bezier(.2,.8,.2,1) 0.06s both; }

/* Navigation back */
.nav-back,
.nav { animation: devisIn 0.45s cubic-bezier(.2,.8,.2,1) 0.04s both; }

/* Hero bloc */
.hero,
.hero-block { animation: devisIn 0.55s cubic-bezier(.2,.8,.2,1) 0.1s both; }

/* Badge prestation */
.prestation-badge { animation: devisIn 0.45s cubic-bezier(.2,.8,.2,1) 0.14s both; }

/* Parties */
.parties { animation: devisIn 0.5s cubic-bezier(.2,.8,.2,1) 0.18s both; }

/* Objet */
.objet-block { animation: devisIn 0.45s cubic-bezier(.2,.8,.2,1) 0.22s both; }

/* Note TVA */
.note-block { animation: devisIn 0.4s cubic-bezier(.2,.8,.2,1) 0.26s both; }

/* Context / profil */
.context-block,
.profil-block,
.offert-block,
.forfaits-block { animation: devisIn 0.45s cubic-bezier(.2,.8,.2,1) 0.26s both; }

/* Table */
.table-wrap { animation: devisIn 0.5s cubic-bezier(.2,.8,.2,1) 0.3s both; }

/* Options section (configurateur) */
.options-panel,
.opts-section { animation: devisIn 0.45s cubic-bezier(.2,.8,.2,1) 0.2s both; }

/* Mensuel */
.mensuel-block { animation: devisIn 0.45s cubic-bezier(.2,.8,.2,1) 0.34s both; }

/* Totaux */
.totaux { animation: devisIn 0.45s cubic-bezier(.2,.8,.2,1) 0.36s both; }

/* Livrables */
.livrables { animation: devisIn 0.45s cubic-bezier(.2,.8,.2,1) 0.38s both; }

/* Conditions */
.conditions { animation: devisIn 0.45s cubic-bezier(.2,.8,.2,1) 0.42s both; }

/* Signatures */
.signatures { animation: devisIn 0.45s cubic-bezier(.2,.8,.2,1) 0.48s both; }

/* Footer */
.footer { animation: devisIn 0.4s cubic-bezier(.2,.8,.2,1) 0.54s both; }

/* Grid cards (devis-index.html) */
.grid { animation: devisIn 0.5s cubic-bezier(.2,.8,.2,1) 0.18s both; }
.also-block { animation: devisIn 0.4s cubic-bezier(.2,.8,.2,1) 0.28s both; }

/* ── TABLE : hover amélioré ────────────────────────────── */
.table-row {
  transition: background 0.2s ease, border-left-color 0.25s ease !important;
  border-left: 2px solid transparent !important;
}
.table-row:hover {
  background: rgba(232,196,88,0.04) !important;
  border-left-color: rgba(232,196,88,0.35) !important;
}

/* ── TOTAL BLOCK : shimmer doré ────────────────────────── */
.total-final {
  position: relative;
  overflow: hidden;
}
.total-final::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(232,196,88,0.07) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: goldShimmer 4s ease-in-out 1.2s infinite;
  pointer-events: none;
}
@keyframes goldShimmer {
  0%       { transform: translateX(-100%); }
  40%, 100% { transform: translateX(150%); }
}

/* ── SERVICE CARDS (devis-index.html) : entrée en cascade ── */
.card:nth-child(1) { animation: devisIn 0.5s cubic-bezier(.2,.8,.2,1) 0.20s both; }
.card:nth-child(2) { animation: devisIn 0.5s cubic-bezier(.2,.8,.2,1) 0.28s both; }
.card:nth-child(3) { animation: devisIn 0.5s cubic-bezier(.2,.8,.2,1) 0.36s both; }
.card:nth-child(4) { animation: devisIn 0.5s cubic-bezier(.2,.8,.2,1) 0.44s both; }

/* ── PARTIE-LABEL : trait doré animé ───────────────────── */
.partie-label,
.opts-title {
  position: relative;
}
.partie-label::after,
.opts-title::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: rgba(232,196,88,0.45);
  transition: width 0.4s ease;
}
.partie-label:hover::after,
.opts-title:hover::after {
  width: 100%;
}

/* ─── PREFERS-REDUCED-MOTION ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .page, .wrap, .header, .nav-back, .nav, .hero, .hero-block,
  .prestation-badge, .parties, .objet-block, .note-block,
  .context-block, .profil-block, .offert-block, .forfaits-block,
  .table-wrap, .options-panel, .opts-section, .mensuel-block,
  .totaux, .livrables, .conditions, .signatures, .footer,
  .grid, .also-block, .card { animation: none !important; }
  .total-final::after { animation: none !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LECTEUR MUSICAL — Réplique exacte du lecteur principal
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#dMusicPlayer {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px 10px 12px;
  background: linear-gradient(135deg, rgba(18,16,10,.92), rgba(12,11,8,.92));
  border: 1px solid rgba(232,200,74,.22);
  border-radius: 100px;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  box-shadow:
    0 0 0 1px rgba(232,200,74,.03),
    0 8px 28px rgba(0,0,0,.5),
    0 0 40px rgba(232,200,74,.04);
  font-family: 'DM Mono', 'Courier New', monospace;
  transition: all .4s cubic-bezier(.2,.8,.2,1);
  animation: mpFadeIn .9s cubic-bezier(.2,.8,.2,1) .8s backwards;
}

@keyframes mpFadeIn {
  from { opacity: 0; transform: translateY(20px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#dMusicPlayer:hover {
  border-color: rgba(232,200,74,.45);
  box-shadow:
    0 0 0 1px rgba(232,200,74,.08),
    0 12px 36px rgba(0,0,0,.55),
    0 0 50px rgba(232,200,74,.14);
  transform: translateY(-2px);
}

/* Bouton play/pause */
#dMusicBtn {
  all: unset;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(232,200,74,.08);
  border: 1px solid rgba(232,200,74,.3);
  color: #e8c458;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: all .3s cubic-bezier(.2,.8,.2,1);
}

#dMusicBtn:hover {
  background: rgba(232,200,74,.18);
  border-color: rgba(232,200,74,.55);
  transform: scale(1.08);
  box-shadow: 0 0 16px rgba(232,200,74,.35);
}

#dMusicPlayer.on #dMusicBtn {
  background: rgba(232,200,74,.22);
  border-color: rgba(232,200,74,.6);
  box-shadow: 0 0 14px rgba(232,200,74,.3);
}

#dMusicPlayer.on #dMusicBtn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(232,200,74,.5);
  animation: mpRing 2.2s ease-out infinite;
  pointer-events: none;
}

@keyframes mpRing {
  0%   { opacity: .8; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.6); }
}

/* Icônes play/pause */
#dMusicPlayer .d-play  { display: block; }
#dMusicPlayer .d-pause { display: none; }
#dMusicPlayer.on .d-play  { display: none; }
#dMusicPlayer.on .d-pause { display: block; }

/* EQ bars */
#dMusicPlayer .mp-eq {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
  width: 18px;
  flex-shrink: 0;
  opacity: .22;
  transition: opacity .4s;
}

#dMusicPlayer .mp-eq span {
  display: block;
  width: 2px;
  height: 40%;
  background: #e8c458;
  border-radius: 1px;
}

#dMusicPlayer.on .mp-eq { opacity: 1; }

#dMusicPlayer.on .mp-eq span {
  animation: mpEq 1s ease-in-out infinite;
}

#dMusicPlayer.on .mp-eq span:nth-child(1) { animation-delay: 0s; }
#dMusicPlayer.on .mp-eq span:nth-child(2) { animation-delay: .2s; }
#dMusicPlayer.on .mp-eq span:nth-child(3) { animation-delay: .4s; }
#dMusicPlayer.on .mp-eq span:nth-child(4) { animation-delay: .1s; }

@keyframes mpEq {
  0%, 100% { height: 25%; }
  50%      { height: 95%; }
}

/* Track info */
#dMusicPlayer .mp-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 130px;
  line-height: 1.2;
  overflow: hidden;
}

#dMusicPlayer .mp-title {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #f0efe8;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .3s;
}

#dMusicPlayer.on .mp-title { color: #e8c458; }

#dMusicPlayer .mp-sub {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 10px;
  letter-spacing: .02em;
  color: #7a7a8c;
  opacity: .8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Volume */
#dMusicPlayer .mp-vol {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #7a7a8c;
  padding-left: 10px;
  border-left: 1px solid rgba(232,200,74,.12);
}

#dMusicPlayer .mp-vol svg { flex-shrink: 0; opacity: .55; }

#dVolSlider {
  --vol-pct: 35%;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(90deg,
    #e8c458 0%,
    #e8c458 var(--vol-pct),
    rgba(232,196,88,0.12) var(--vol-pct),
    rgba(232,196,88,0.12) 100%
  );
  width: 80px;
  height: 3px;
  border-radius: 1.5px;
  cursor: pointer;
  outline: none;
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}
#dMusicPlayer:hover #dVolSlider { width: 120px; }

#dVolSlider::-webkit-slider-runnable-track { height: 3px; border-radius: 1.5px; }
#dVolSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #e8c458;
  box-shadow: 0 0 10px rgba(232,196,88,0.65), 0 0 3px rgba(232,196,88,0.9);
  cursor: pointer;
  margin-top: -4.5px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#dVolSlider::-webkit-slider-thumb:hover {
  transform: scale(1.5);
  box-shadow: 0 0 18px rgba(232,196,88,0.95), 0 0 5px rgba(232,196,88,1);
}
#dVolSlider::-moz-range-track {
  height: 3px; background: rgba(232,196,88,0.12); border-radius: 1.5px;
}
#dVolSlider::-moz-range-progress { height: 3px; background: #e8c458; border-radius: 1.5px; }
#dVolSlider::-moz-range-thumb {
  border: none; width: 12px; height: 12px;
  border-radius: 50%; background: #e8c458;
  box-shadow: 0 0 10px rgba(232,196,88,0.65); cursor: pointer;
}

/* Badge de volume partagé */
.vol-val {
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  color: rgba(232,196,88,0.3);
  min-width: 24px;
  text-align: left;
  transition: color 0.25s ease;
  user-select: none;
  pointer-events: none;
  flex-shrink: 0;
}
#dMusicPlayer .mp-vol:hover .vol-val { color: rgba(232,196,88,0.6); }
.vol-val.active { color: rgba(232,196,88,1) !important; transition: none; }

/* Responsive */
@media (max-width: 680px) {
  #dMusicPlayer {
    bottom: 12px;
    right: 12px;
    left: 12px;
    border-radius: 60px;
    gap: 10px;
    padding: 8px 14px 8px 10px;
  }
  #dMusicPlayer .mp-info { min-width: 80px; }
  #dMusicPlayer .mp-sub  { display: none; }
  #dVolSlider { width: 44px; }
  #dMusicPlayer:hover #dVolSlider { width: 60px; }
  #dVolVal { display: none; }
}

/* Print : cacher le player */
@media print {
  #dMusicPlayer { display: none !important; }
  body::after { display: none !important; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FINITIONS PREMIUM — Sélection · Scrollbar · Hover · Focus
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Sélection de texte dorée ── */
::selection { background: rgba(232,196,88,0.22); color: #f0efe8; }
::-moz-selection { background: rgba(232,196,88,0.22); color: #f0efe8; }

/* ── Scrollbar ultra-fine dorée ── */
::-webkit-scrollbar { width: 2px; background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, rgba(232,196,88,0.4), rgba(232,196,88,0.06));
  border-radius: 1px;
}
* { scrollbar-width: thin; scrollbar-color: rgba(232,196,88,0.18) transparent; }

/* ── Rendu typographique ── */
body {
  text-rendering: optimizeLegibility !important;
  font-feature-settings: 'kern' 1, 'liga' 1 !important;
}
p { text-wrap: pretty; }

/* ── Cards (devis-index) — lift au hover + glow ── */
.card {
  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    transform 0.38s cubic-bezier(0.16,1,0.3,1),
    box-shadow 0.38s ease !important;
}
.card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 50px rgba(0,0,0,0.42), 0 0 0 1px rgba(232,196,88,0.08) !important;
}

/* ── Focus states ── */
:focus-visible {
  outline: 2px solid rgba(232,196,88,0.6);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── Logo nav devis — hover ── */
.logo { transition: opacity 0.2s ease; }
.logo:hover { opacity: 0.7; }