/* The floating "Besoin d'aide" button and its panel, on every page (partials/help.blade.php, public/js/help.js).
   Self-contained: it sits outside the page frames, so it sets its own box sizing and font. Shown on desktop and on a
   tablet on its side; hidden where the phone layouts take over (they have their own bottom bars). */
.help { position: fixed; z-index: 10; right: 1em; bottom: 1em; pointer-events: none; font-family: Inter, "SF Pro", Roboto, -apple-system, system-ui, sans-serif; }
.help, .help * { box-sizing: border-box; }
.help button { font-family: inherit; }
.help a { text-decoration: none; }

/* The floating "Besoin d'aide" button (desktop): a pill with a green gradient, a "?" badge and a soft lifted shadow, so it reads as a button. */
.help { width: auto; text-align: right; }
.helpButton {
  display: inline-flex; align-items: center; gap: 10px; width: auto; height: 52px; padding: 0 22px 0 8px;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
  background: linear-gradient(135deg, #7fd24a 0%, #56b02a 48%, #3a8a1b 100%);
  box-shadow: 0 10px 22px -8px rgba(58, 138, 27, .75), 0 2px 5px rgba(20, 42, 32, .22), inset 0 1px 0 rgba(255, 255, 255, .45);
  color: #fff; font-size: 15px; font-weight: 600; letter-spacing: .1px; line-height: 1; text-shadow: 0 1px 1px rgba(20, 60, 10, .3);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.helpButton span {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .95); color: #3a8a1b; font-size: 20px; font-weight: 800; text-shadow: none;
  box-shadow: 0 1px 3px rgba(20, 60, 10, .3);
}
.helpButton:hover { transform: translateY(-2px); filter: brightness(1.06) saturate(1.05); box-shadow: 0 16px 28px -10px rgba(58, 138, 27, .8), 0 3px 7px rgba(20, 42, 32, .24), inset 0 1px 0 rgba(255, 255, 255, .5); }
.helpButton:active { transform: translateY(0) scale(.98); filter: brightness(.97); box-shadow: 0 5px 12px -6px rgba(58, 138, 27, .8), 0 1px 3px rgba(20, 42, 32, .25), inset 0 1px 2px rgba(20, 60, 10, .25); }
.helpButton:focus-visible { outline: 3px solid rgba(15, 132, 180, .55); outline-offset: 3px; }
.helpOpen .helpButton { background: linear-gradient(135deg, #ffc233 0%, #ffaa00 55%, #e08a00 100%); box-shadow: 0 10px 22px -8px rgba(224, 138, 0, .75), 0 2px 5px rgba(20, 42, 32, .22), inset 0 1px 0 rgba(255, 255, 255, .45); }
.helpOpen .helpButton span { color: #c47600; }
@media (prefers-reduced-motion: reduce) { .helpButton { transition: none; } .helpButton:hover, .helpButton:active { transform: none; } }

/* The help panel: opens above the button, a card with a green header and two contact tiles. */
.help { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.helpPanel {
  width: 330px; overflow: hidden; border: 1px solid rgba(20, 42, 32, .08); border-radius: 22px; background: #fff; color: #222;
  box-shadow: 0 24px 48px -16px rgba(20, 42, 32, .45), 0 4px 12px rgba(20, 42, 32, .12); pointer-events: auto; text-align: left;
  animation: helpIn .2s ease-out;
}
.helpPanel[hidden] { display: none; }
.helpPanel:focus { outline: none; }
@keyframes helpIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.helpHead { position: relative; display: flex; align-items: center; gap: 12px; padding: 18px 52px 18px 18px; background: linear-gradient(135deg, #7fd24a 0%, #56b02a 50%, #3a8a1b 100%); color: #fff; }
.helpHead h2 { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; text-shadow: 0 1px 1px rgba(20, 60, 10, .3); }
.helpBadge { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .95); color: #3a8a1b; font-size: 22px; font-weight: 800; box-shadow: 0 1px 3px rgba(20, 60, 10, .3); }
.helpClose { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .2); color: #fff; cursor: pointer; transition: background .15s; }
.helpClose:hover { background: rgba(255, 255, 255, .35); }
.helpBody { display: grid; gap: 10px; padding: 16px; }
.desktopPage .helpRow, .helpRow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #e3ebe5; border-radius: 16px; background: #fff; color: #222; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.helpRow:hover { border-color: #68c034; box-shadow: 0 8px 18px -10px rgba(58, 138, 27, .6); transform: translateY(-1px); }
.helpRow:focus-visible, .helpClose:focus-visible { outline: 3px solid rgba(15, 132, 180, .55); outline-offset: 2px; }
.helpRow i { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #eaf7e0, #d4efbf); color: #3a8a1b; }
.helpRow span { display: grid; flex: 1; min-width: 0; gap: 2px; }
.helpRow small { color: #6b7278; font-size: 12px; }
.helpRow b { overflow: hidden; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.helpRow > svg { flex: none; color: #a9b3ad; }
.helpNote { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 0; padding: 12px 14px; border-radius: 14px; background: #f3f8f5; color: #4d5a52; font-size: 13px; line-height: 1.45; }
.helpNote svg { flex: none; margin-top: 1px; color: #3a8a1b; }
.helpOpen .helpButton { background: linear-gradient(135deg, #7fd24a 0%, #56b02a 48%, #3a8a1b 100%); box-shadow: 0 10px 22px -8px rgba(58, 138, 27, .75), 0 2px 5px rgba(20, 42, 32, .22), inset 0 1px 0 rgba(255, 255, 255, .45); }
.helpOpen .helpButton span { color: #3a8a1b; font-size: 24px; }
@media (prefers-reduced-motion: reduce) { .helpPanel { animation: none; } .helpRow { transition: none; } }

/* Last, so it wins over the .help display above. */
@media screen and (max-width: 899px), screen and (max-width: 1040px) and (orientation: portrait), screen and (max-width: 1040px) and (max-height: 599px) { .help { display: none; } }