/* =============================================================
   Pawa Fixed Bar — Frontend CSS  v1.0.0
   ============================================================= */

:root {
  --pawafb-bg:            #0d1520;
  --pawafb-color:         #ffffff;
  --pawafb-btn-bg:        #e8402a;
  --pawafb-btn-color:     #ffffff;
  --pawafb-btn-hover:     #c93320;
  --pawafb-item-bg:       #6c47ff;
  --pawafb-item-active-bg:#8a6dff;
  --pawafb-item-color:    #ffffff;
  --pawafb-radius:        10px;
  --pawafb-font-size:     13px;
  --pawafb-font-family:   'Inter', system-ui, sans-serif;
  --pawafb-height:        80px;
  --pawafb-shadow:        0 -4px 24px rgba(0,0,0,.5);
}

/* ── Body padding ─────────────────────────────────────────────── */
body.pawafb-bar-bottom { padding-bottom: var(--pawafb-height) !important; }
body.pawafb-bar-top    { padding-top:    var(--pawafb-height) !important; }
body.pawafb-locked     { overflow: hidden !important; }

/* ══════════════════════════════════════════════════════════════
   BARRE FIXE
══════════════════════════════════════════════════════════════ */
#pawafb-bar {
  position:        fixed;
  left:            0;
  right:           0;
  height:          var(--pawafb-height);
  background:      var(--pawafb-bg);
  display:         flex;
  align-items:     center;
  z-index:         99998;
  font-family:     var(--pawafb-font-family);
  color:           var(--pawafb-color);
  box-shadow:      var(--pawafb-shadow);
}
#pawafb-bar.pawafb-pos-bottom { bottom: 0; }
#pawafb-bar.pawafb-pos-top    { top: 0; box-shadow: 0 4px 24px rgba(0,0,0,.5); }

/* CTA col */
.pawafb-cta-col {
  flex:            0 0 26%;
  max-width:       26%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         8px 6px 8px 10px;
  box-sizing:      border-box;
}

.pawafb-btn-cta {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             4px;
  width:           100%;
  height:          calc(var(--pawafb-height) - 14px);
  min-height:      52px;
  padding:         6px 8px;
  background:      var(--pawafb-btn-bg);
  color:           var(--pawafb-btn-color);
  border:          none;
  border-radius:   var(--pawafb-radius);
  font-family:     var(--pawafb-font-family);
  font-size:       11px;
  font-weight:     700;
  line-height:     1.3;
  text-align:      center;
  cursor:          pointer;
  transition:      background .2s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.pawafb-btn-cta svg { flex-shrink: 0; }
.pawafb-btn-cta:hover  { background: var(--pawafb-btn-hover); }
.pawafb-btn-cta:active { transform: scale(.96); }
.pawafb-btn-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Divider */
.pawafb-divider {
  width:       1px;
  height:      52%;
  background:  rgba(255,255,255,.22);
  flex-shrink: 0;
}

/* Slide col */
.pawafb-slide-col {
  flex:            1;
  min-width:       0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  height:          100%;
  padding-bottom:  4px;
  overflow:        hidden;
}

.pawafb-slide-viewport {
  width:       100%;
  overflow:    hidden;
  flex:        1;
  display:     flex;
  align-items: center;
  padding:     0 4px;
  box-sizing:  border-box;
}

.pawafb-slide-track {
  display:    flex;
  align-items: center;
  will-change: transform;
}

/* Chaque item — largeur calculée en JS */
.pawafb-slide-item {
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         6px 14px;
  margin:          0 5px;
  height:          calc(var(--pawafb-height) - 22px);
  min-height:      44px;
  background:      var(--pawafb-item-bg);
  border:          none;
  border-radius:   10px;
  cursor:          pointer;
  font-family:     var(--pawafb-font-family);
  font-size:       12px;
  font-weight:     700;
  letter-spacing:  .06em;
  text-transform:  uppercase;
  color:           var(--pawafb-item-color);
  white-space:     normal;
  text-align:      center;
  line-height:     1.25;
  overflow:        hidden;
  opacity:         .65;
  transition:      opacity .3s, background .3s, transform .2s;
  -webkit-tap-highlight-color: transparent;
}
.pawafb-slide-item.is-active {
  background: var(--pawafb-item-active-bg);
  opacity:    1;
  transform:  scale(1.04);
}
.pawafb-slide-item:hover { opacity: .85; }
.pawafb-slide-name {
  display:    block;
  overflow:   hidden;
  max-height: 2.7em; /* max 2 lignes */
}

/* Dots */
.pawafb-dots {
  display:     flex;
  gap:         5px;
  padding:     0 0 6px;
}
.pawafb-dot {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    rgba(255,255,255,.3);
  transition:    background .3s, transform .3s;
}
.pawafb-dot.is-active {
  background: #fff;
  transform:  scale(1.3);
}

/* ══════════════════════════════════════════════════════════════
   MODAL (bottom-sheet)
══════════════════════════════════════════════════════════════ */
.pawafb-modal {
  position:       fixed;
  inset:          0;
  z-index:        99990;
  display:        flex;
  align-items:    flex-end;
  pointer-events: none;
}
.pawafb-modal:not([hidden]) { pointer-events: all; }

/* Collé directement sur la barre */
.pawafb-modal.pawafb-pos-bottom { bottom: var(--pawafb-height); top: 0; }
.pawafb-modal.pawafb-pos-top    { top: var(--pawafb-height); bottom: 0; align-items: flex-start; }

/* Overlay */
.pawafb-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(5,12,24,.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity:    0;
  transition: opacity .3s ease;
}
.pawafb-modal.is-open .pawafb-overlay { opacity: 1; }

/* Sheet */
.pawafb-sheet {
  position:        relative;
  z-index:         1;
  width:           100%;
  background:      #ffffff;
  border-radius:   22px 22px 0 0;
  padding:         0 18px 32px;
  max-height:      85vh;
  overflow-y:      auto;
  -webkit-overflow-scrolling: touch;
  box-shadow:      0 -8px 40px rgba(0,0,0,.2);
  transform:       translateY(110%);
  transition:      transform .38s cubic-bezier(.4,0,.2,1);
}
.pawafb-modal.is-open .pawafb-sheet { transform: translateY(0); }

.pawafb-modal.pawafb-pos-top .pawafb-sheet {
  border-radius: 0 0 22px 22px;
  transform:     translateY(-110%);
}
.pawafb-modal.pawafb-pos-top.is-open .pawafb-sheet { transform: translateY(0); }

/* Handle */
.pawafb-handle {
  width:         38px;
  height:        4px;
  border-radius: 2px;
  background:    #d0d5dd;
  margin:        12px auto 8px;
}

/* Bouton fermer (X) */
.pawafb-close {
  position:        absolute;
  top:             12px;
  right:           14px;
  width:           30px;
  height:          30px;
  border-radius:   50%;
  border:          none;
  background:      #f0f2f5;
  color:           #444;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0;
  transition:      background .2s;
  z-index:         2;
}
.pawafb-close:hover { background: #e2e5ea; }

/* Entête titre */
.pawafb-sheet-head { text-align: center; padding: 10px 0 18px; }

.pawafb-sheet-title {
  font-family:    var(--pawafb-font-family);
  font-size:      20px;
  font-weight:    800;
  color:          #0d1520;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin:         0 0 10px;
  line-height:    1.3;
}

.pawafb-sheet-line {
  display:       block;
  width:         44px;
  height:        3px;
  border-radius: 2px;
  background:    var(--pawafb-btn-bg);
  margin:        0 auto;
}

/* ── Champs du formulaire ─────────────────────────────────────── */
.pawafb-msg {
  border-radius: 10px;
  padding:       12px 14px;
  margin-bottom: 12px;
  font-size:     14px;
  font-weight:   500;
}
.pawafb-msg.is-success { background: #e7f9ef; color: #1a6b47; border: 1px solid #9fdfbe; }
.pawafb-msg.is-error   { background: #fff0f0; color: #c0392b; border: 1px solid #f5b7b1; }

.pawafb-field {
  display:       flex;
  align-items:   center;
  gap:           10px;
  background:    #f1f3f7;
  border:        1.5px solid #e5e9f0;
  border-radius: 12px;
  padding:       0 14px;
  min-height:    52px;
  margin-bottom: 10px;
  transition:    border-color .2s, background .2s;
}
.pawafb-field:focus-within {
  border-color: var(--pawafb-btn-bg);
  background:   #fff;
}
.pawafb-field--textarea {
  align-items: flex-start;
  padding:     13px 14px;
  min-height:  90px;
}

.pawafb-field-ico {
  color:       #9aa3b2;
  flex-shrink: 0;
  display:     flex;
  align-items: center;
}
.pawafb-field-ico--top { align-self: flex-start; margin-top: 2px; }

.pawafb-field input,
.pawafb-field textarea {
  flex:        1;
  border:      none;
  background:  transparent;
  font-family: var(--pawafb-font-family);
  font-size:   15px;
  color:       #0d1520;
  outline:     none;
  padding:     0;
  min-width:   0;
  resize:      none;
}
.pawafb-field input[readonly] {
  color:  #555;
  cursor: default;
}
.pawafb-field input::placeholder,
.pawafb-field textarea::placeholder { color: #bbc2ce; }

/* Honeypot */
.pawafb-hp {
  position: absolute !important;
  left:     -9999px !important;
  opacity:  0 !important;
  height:   0 !important;
}

/* Bouton submit */
.pawafb-submit {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  width:           100%;
  padding:         16px;
  margin-top:      8px;
  background:      var(--pawafb-btn-bg);
  color:           #fff;
  border:          none;
  border-radius:   14px;
  font-family:     var(--pawafb-font-family);
  font-size:       16px;
  font-weight:     700;
  letter-spacing:  .02em;
  cursor:          pointer;
  transition:      background .2s, transform .15s;
}
.pawafb-submit:hover  { background: var(--pawafb-btn-hover); }
.pawafb-submit:active { transform: scale(.98); }
.pawafb-submit:disabled { opacity: .65; cursor: not-allowed; }

.pawafb-submit-spin {
  width:           18px;
  height:          18px;
  border:          2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius:   50%;
  animation:       pawafb-spin .7s linear infinite;
  flex-shrink:     0;
}

/* ══════════════════════════════════════════════════════════════
   MODAL SERVICE — contenu AJAX
══════════════════════════════════════════════════════════════ */
.pawafb-svc-emoji {
  font-size:   64px;
  line-height: 1;
  text-align:  center;
  padding:     20px 0 14px;
  display:     block;
}

.pawafb-svc-img {
  width:         100%;
  max-height:    200px;
  object-fit:    cover;
  border-radius: 14px;
  margin:        16px 0 14px;
  display:       block;
}

.pawafb-svc-title {
  font-family:    var(--pawafb-font-family);
  font-size:      20px;
  font-weight:    800;
  color:          #0d1520;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin:         0 0 10px;
}

.pawafb-svc-desc {
  font-size:   14px;
  color:       #555;
  line-height: 1.65;
  margin:      0 0 22px;
}

/* Boutons service — côte à côte */
.pawafb-svc-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     10px;
  margin-bottom: 8px;
}

.pawafb-svc-btn {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             5px;
  padding:         13px 8px;
  border:          none;
  border-radius:   12px;
  font-family:     var(--pawafb-font-family);
  font-size:       13px;
  font-weight:     700;
  line-height:     1.3;
  text-align:      center;
  cursor:          pointer;
  text-decoration: none;
  transition:      opacity .2s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.pawafb-svc-btn:active { transform: scale(.96); }

.pawafb-svc-btn--devis {
  background: var(--pawafb-btn-bg);
  color:      #fff;
}
.pawafb-svc-btn--devis:hover { opacity: .88; }

.pawafb-svc-btn--wa {
  background: #25D366;
  color:      #fff;
}
.pawafb-svc-btn--wa:hover { opacity: .88; color: #fff; }

/* Loader */
.pawafb-loader {
  display:         flex;
  justify-content: center;
  padding:         40px 0;
}
.pawafb-spinner {
  width:            32px;
  height:           32px;
  border:           3px solid #e8ebf0;
  border-top-color: var(--pawafb-btn-bg);
  border-radius:    50%;
  animation:        pawafb-spin .7s linear infinite;
}

@keyframes pawafb-spin { to { transform: rotate(360deg); } }

/* ── Desktop ──────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .pawafb-cta-col     { flex: 0 0 22%; max-width: 22%; }
  .pawafb-sheet       { max-width: 500px; margin: 0 auto; border-radius: 22px 22px 0 0; }
  .pawafb-slide-item  { font-size: 13px; }
}
@media (min-width: 1024px) {
  .pawafb-sheet { max-width: 540px; }
}