/* Ask Loecsen — aligné design site (haut2 / login modal) */
#ask-loecsen-root {
  --ask-newblue: var(--newblue, #29a9a4);
  --ask-blue2: #36a5a0;
  --ask-blue3: var(--blue3, #d6eaf5);
  --ask-ora: var(--ora, #fc7a4e);
  --ask-text: #444;
  --ask-muted: #888;
  --ask-radius: 16px;

  /* Coin bas-droit : même marge right / bottom (pas de safe-area : remonte le FAB pour rien) */
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 99990;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ask-text);
  box-sizing: border-box;
}

html[dir="rtl"] #ask-loecsen-root {
  right: auto;
  left: 12px;
}
html[dir="rtl"] #ask-loecsen-panel {
  right: auto;
  left: 0;
}

#ask-loecsen-root *,
#ask-loecsen-root *::before,
#ask-loecsen-root *::after {
  box-sizing: border-box;
  font-family: inherit;
}

/* Bouton flottant desktop — accent orange Loecsen */
#ask-loecsen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: #a171e2;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#ask-loecsen-btn .icon-bubbles {
  width: 28px;
  height: 28px;
  fill: currentColor;
  flex-shrink: 0;
}

#ask-loecsen-btn:hover {
  background: #8b5fcf;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* hidden attr écrasé par display:inline-flex / site-mobile — forcer le masquage (gate home). */
#ask-loecsen-root #ask-loecsen-btn[hidden],
#ask-loecsen-root #ask-loecsen-btn.ask-loecsen-btn--deferred {
  display: none !important;
}

#ask-loecsen-backdrop {
  display: none;
}

#ask-loecsen-panel {
  display: none;
  position: absolute;
  right: 0;
  left: auto;
  bottom: 72px;
  width: min(380px, calc(100vw - 24px));
  max-height: min(540px, calc(100vh - 100px));
  background: #fff;
  border: none;
  border-radius: var(--ask-radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  flex-direction: column;
}

#ask-loecsen-panel.is-open {
  display: flex;
}

.ask-loecsen-sheet-handle {
  display: none;
}

/* Header type .tra .titre / modal Loecsen */
#ask-loecsen-panel > header {
  padding: 0 12px 0 16px;
  min-height: 48px;
  background: var(--ask-blue2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 8px;
}

#ask-loecsen-panel > header strong {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: 1;
}

#ask-loecsen-panel > header button {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
  opacity: 0.9;
}

#ask-loecsen-panel > header button:hover {
  opacity: 1;
}

#ask-loecsen-body {
  padding: 16px 16px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

#ask-loecsen-body .ask-hint {
  color: var(--ask-newblue);
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
}

#ask-loecsen-body .ask-suggestions {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Espace ENTRE boutons (= margin), pas le padding interne — max 15px */
  gap: 8px;
}

#ask-loecsen-body .ask-suggestions li {
  margin: 0;
  max-width: 100%;
}

/* Chips suggestions — padding interne normal ; largeur bornée anti-débordement */
#ask-loecsen-body .ask-suggestions li button {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: #fff;
  border: none;
  border-radius: 14px;
  padding: 12px 14px;
  /* Annule margin global site (souvent 0 16px 20px) — l’écart = gap du ul seulement */
  margin: 0 !important;
  cursor: pointer;
  color: var(--ask-newblue);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: rgba(0, 0, 0, 0.05) 0 6px 18px 0, rgba(0, 0, 0, 0.08) 0 0 0 1px;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

#ask-loecsen-body .ask-suggestions li button:hover {
  background: #e5f3f2;
  box-shadow: rgba(0, 0, 0, 0.08) 0 8px 20px 0, rgba(41, 169, 164, 0.35) 0 0 0 1px;
}

/* Formulaire : input site + CTA bleu Loecsen */
#ask-loecsen-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

#ask-loecsen-form input {
  width: 100%;
  border: 1px solid #cfcfcf;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  color: #000;
  outline: none;
  background: #fff;
}

#ask-loecsen-form textarea {
  width: 100%;
  border: 1px solid #cfcfcf;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  color: #000;
  outline: none;
  background: #fff;
  resize: vertical;
  min-height: 72px;
  font-family: inherit;
  line-height: 1.4;
}

#ask-loecsen-form input:focus,
#ask-loecsen-form textarea:focus {
  border-color: var(--ask-newblue);
  box-shadow: 0 0 0 3px rgba(41, 169, 164, 0.18);
}

#ask-loecsen-form button[type="submit"],
#ask-loecsen-body .ask-btn-primary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 15px;
  padding: 12px 16px;
  background: var(--ask-newblue);
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

#ask-loecsen-form button[type="submit"]:hover,
#ask-loecsen-body .ask-btn-primary:hover {
  background: var(--ask-blue2);
  box-shadow: rgba(0, 0, 0, 0.2) 0 4px 12px;
}

/* CTA orange (connexion / secondaire fort) — style progress-bar-button */
#ask-loecsen-body .ask-btn-ora {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  padding: 12px 16px;
  min-height: 46px;
  background: var(--ask-ora);
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

#ask-loecsen-body .ask-btn-ora:hover {
  box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
  background: #e86a42;
}

.ask-answer-box {
  background: #e5f3f2;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}

.ask-answer-box .ask-q {
  font-weight: 700;
  color: var(--ask-newblue);
  margin: 0 0 8px;
  font-size: 15px;
}

.ask-answer-box .ask-a {
  margin: 0;
  white-space: pre-wrap;
  color: var(--ask-text);
  font-size: 14px;
  font-weight: 400;
}

.ask-answer-box .ask-a a {
  color: var(--ask-newblue);
  font-weight: 600;
  text-decoration: underline;
}

.ask-answer-box .ask-a a:hover {
  text-decoration: none;
}

.ask-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.ask-actions .ask-row {
  display: flex;
  gap: 8px;
}

.ask-actions .ask-row > * {
  flex: 1;
}

.ask-actions button,
.ask-actions a.ask-btn {
  border: none;
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  text-decoration: none;
  color: var(--ask-newblue);
  font-weight: 600;
  font-size: 14px;
  box-shadow: rgba(0, 0, 0, 0.05) 0 4px 14px 0, rgba(0, 0, 0, 0.08) 0 0 0 1px;
  text-align: center;
}

.ask-actions button:hover,
.ask-actions a.ask-btn:hover {
  background: #e5f3f2;
}

.ask-actions button.primary,
.ask-actions a.ask-btn.primary {
  background: var(--ask-newblue);
  color: #fff;
  box-shadow: none;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 15px;
  letter-spacing: 0.03em;
}

.ask-actions button.primary:hover,
.ask-actions a.ask-btn.primary:hover {
  background: var(--ask-blue2);
}

.ask-msg {
  margin: 0 0 14px;
  color: var(--ask-text);
  font-size: 15px;
  font-weight: 500;
}

body.ask-loecsen-noscroll {
  overflow: hidden;
  touch-action: none;
}

/* --- Player mobile : entrée footer (#navm ou pill fixe) --- */
#ask-loecsen-root.ask-loecsen--player-mobile {
  position: static;
  width: 0;
  height: 0;
  overflow: visible;
  z-index: auto;
}

#ask-loecsen-root.ask-loecsen--player-mobile #ask-loecsen-btn,
#ask-loecsen-root.ask-loecsen--player #ask-loecsen-btn[hidden] {
  display: none !important;
}

/* Player : jamais de pill flottant « Aide » — seulement #more_menu. */
.ask-loecsen-footer-btn:not(.ask-loecsen-footer-btn--in-more),
.ask-loecsen-footer-btn--fixed,
.ask-loecsen-footer-btn[hidden] {
  display: none !important;
}

.ask-loecsen-footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 44px;
  height: 44px;
  margin: 0 2px 6px;
  padding: 0 10px;
  border: none;
  border-radius: 50%;
  background: var(--ask-newblue);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.12) 0 2px 8px;
  vertical-align: top;
  float: right;
}

.ask-loecsen-footer-btn__label {
  display: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ask-loecsen-footer-btn:hover,
.ask-loecsen-footer-btn:focus-visible {
  background: var(--ask-blue2);
  outline: none;
}

.ask-loecsen-footer-btn--fixed {
  position: fixed;
  right: 16px;
  left: auto;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 100000;
  float: none;
  border-radius: 999px;
  min-width: auto;
  height: 36px;
  padding: 0 12px;
  background: #fff;
  color: var(--ask-newblue);
  border: 2px solid var(--ask-newblue);
  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 10px;
}

html[dir="rtl"] .ask-loecsen-footer-btn--fixed {
  right: auto;
  left: 16px;
}

.ask-loecsen-footer-btn--fixed .ask-loecsen-footer-btn__label {
  display: inline;
}

.ask-loecsen-footer-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.ask-loecsen-footer-btn__icon .icon-bubbles {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.ask-loecsen-footer-btn--fixed .ask-loecsen-footer-btn__icon .icon-bubbles {
  width: 18px;
  height: 18px;
}

body.unified-list:not(.pre-launch):not(.loading):not(.load-failed)
  .ask-loecsen-footer-btn--fixed {
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}

/* Arrivée player <899 : FAB au-dessus de #grd_pres (z-index 99999). */
@media screen and (max-width: 899px) {
  body.pre-launch #ask-loecsen-root:not(.ask-loecsen--player-mobile),
  body.loading #ask-loecsen-root:not(.ask-loecsen--player-mobile),
  body.load-failed #ask-loecsen-root:not(.ask-loecsen--player-mobile) {
    z-index: 100000;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    left: auto;
  }
  html[dir="rtl"] body.pre-launch #ask-loecsen-root:not(.ask-loecsen--player-mobile),
  html[dir="rtl"] body.loading #ask-loecsen-root:not(.ask-loecsen--player-mobile),
  html[dir="rtl"] body.load-failed #ask-loecsen-root:not(.ask-loecsen--player-mobile) {
    right: auto;
    left: 16px;
  }
}

#navm .ask-loecsen-footer-btn {
  margin-top: 2px;
}

body.unified-list #navm .ask-loecsen-footer-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0 0 0 4px;
  float: right;
}

/* Menu « plus » : même diamètre que les autres boutons #navm (43×43). */
#more_menu .ask-loecsen-footer-btn--in-more,
body.unified-list #navm #more_menu .ask-loecsen-footer-btn--in-more {
  display: flex;
  align-items: center;
  justify-content: center;
  float: none;
  width: 43px;
  min-width: 43px;
  height: 43px;
  margin: 6px auto;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #a171e2;
  color: #fff;
  box-shadow: none;
}

#more_menu .ask-loecsen-footer-btn--in-more:hover,
#more_menu .ask-loecsen-footer-btn--in-more:focus-visible,
body.unified-list #navm #more_menu .ask-loecsen-footer-btn--in-more:hover {
  background: #8d5ad0;
}

#more_menu .ask-loecsen-footer-btn--in-more .ask-loecsen-footer-btn__label {
  display: none;
}

#more_menu .ask-loecsen-footer-btn--in-more .ask-loecsen-footer-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  line-height: 0;
}

#more_menu .ask-loecsen-footer-btn--in-more .ask-loecsen-footer-btn__icon .icon,
#more_menu .ask-loecsen-footer-btn--in-more .ask-loecsen-footer-btn__icon .icon-bubbles,
body.unified-list #navm #more_menu .ask-loecsen-footer-btn--in-more .icon,
body.unified-list #navm #more_menu .ask-loecsen-footer-btn--in-more .icon-bubbles {
  width: 25px;
  height: 25px;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: block;
}

/* --- Mobile : bottom sheet + FAB site (look desktop 58×58) --- */
@media (max-width: 740px) {
  #ask-loecsen-root.ask-loecsen--mobile {
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    pointer-events: none;
  }

  #ask-loecsen-root.ask-loecsen--mobile #ask-loecsen-btn,
  #ask-loecsen-root.ask-loecsen--mobile .ask-loecsen-footer-btn {
    pointer-events: auto;
  }

  #ask-loecsen-root.ask-loecsen--site-mobile {
    right: 12px;
    bottom: 12px;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
  }

  html[dir="rtl"] #ask-loecsen-root.ask-loecsen--site-mobile {
    right: auto;
    left: 12px;
  }

  /* Home + pages site : même taille / look que le FAB desktop (58×58). */
  #ask-loecsen-root.ask-loecsen--site-mobile #ask-loecsen-btn {
    width: 58px;
    min-width: 58px;
    height: 58px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: #a171e2;
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    margin: 10px;
  }

  #ask-loecsen-root.ask-loecsen--site-mobile #ask-loecsen-btn .icon-bubbles {
    width: 28px;
    height: 28px;
  }

  #ask-loecsen-root.ask-loecsen--site-mobile #ask-loecsen-btn:hover {
    background: #8b5fcf;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  }

  #ask-loecsen-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 35, 40, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    pointer-events: none;
    z-index: 999990;
  }

  #ask-loecsen-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  #ask-loecsen-root.ask-loecsen--mobile #ask-loecsen-panel {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    max-width: 100%;
    max-height: min(90vh, 90dvh);
    margin: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.22);
    transform: translateY(calc(100% + 8px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.28s ease, opacity 0.28s ease, visibility 0.28s ease;
    z-index: 999991;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  #ask-loecsen-root.ask-loecsen--mobile #ask-loecsen-panel.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  #ask-loecsen-root.ask-loecsen--mobile #ask-loecsen-panel > header {
    position: relative;
    padding-top: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }

  #ask-loecsen-root.ask-loecsen--mobile .ask-loecsen-sheet-handle {
    display: block;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.65);
  }

  #ask-loecsen-root.ask-loecsen--mobile #ask-loecsen-panel > header strong {
    width: 100%;
    text-align: center;
    padding-bottom: 2px;
  }

  #ask-loecsen-root.ask-loecsen--mobile #ask-loecsen-panel > header button {
    position: absolute;
    inset-inline-end: 4px;
    inset-inline-start: auto;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
  }

  #ask-loecsen-body {
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
  }

  /* Mobile : même padding boutons ; seul l’écart (gap) reste serré ≤15px */
  #ask-loecsen-body .ask-suggestions {
    gap: 8px;
  }
}

@media (max-width: 480px) {
  #ask-loecsen-root:not(.ask-loecsen--player-mobile) {
    right: 12px;
    bottom: 12px;
  }

  html[dir="rtl"] #ask-loecsen-root:not(.ask-loecsen--player-mobile) {
    right: auto;
    left: 12px;
  }
}

/* Player desktop : footer fixe bas — éviter chevauchement bouton flottant */
#ask-loecsen-root.ask-loecsen--player:not(.ask-loecsen--player-mobile) {
  bottom: 20px;
}

@media (max-width: 740px) {
  #ask-loecsen-root.ask-loecsen--player:not(.ask-loecsen--player-mobile) {
    bottom: 20px;
  }

  #ask-loecsen-root.ask-loecsen--player:not(.ask-loecsen--player-mobile) #ask-loecsen-panel {
    bottom: 80px;
  }
}

/* Formulaire « Nous écrire un message » */
#ask-loecsen-body .ask-write-msg,
#ask-loecsen-body .ask-write-email {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid #cfd6e0;
  border-radius: 8px;
  font: inherit;
  color: var(--ask-text, #1a1a1a);
  background: #fff;
  resize: vertical;
}

#ask-loecsen-body .ask-write-msg:focus,
#ask-loecsen-body .ask-write-email:focus {
  outline: none;
  border-color: var(--ask-blue, #3a7bd5);
  box-shadow: 0 0 0 2px rgba(58, 123, 213, 0.15);
}

#ask-loecsen-body .ask-write-email-hint {
  margin: 0 0 10px;
  font-size: 13px;
  color: #667;
}

#ask-loecsen-body .ask-write-error {
  min-height: 1.2em;
  margin: 0 0 8px;
  font-size: 13px;
  color: #c0392b;
}

#ask-loecsen-body .ask-actions .ask-btn-secondary {
  background: #fff;
  color: var(--ask-blue, #3a7bd5);
  border: 1px solid var(--ask-blue, #3a7bd5);
}

#ask-loecsen-body .ask-actions .ask-btn-secondary:hover {
  background: rgba(58, 123, 213, 0.06);
}