.mbar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

.toTop { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 861px) { .toTop { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } }

@media (max-width: 860px) {

  #toTop { right: calc(14px + env(safe-area-inset-right, 0px)); width: 44px; height: 44px; }
  footer > .wrap { padding-right: calc(66px + env(safe-area-inset-right, 0px)); }
  footer { padding-bottom: calc(var(--h-barre) + 64px + env(safe-area-inset-bottom, 0px)); }
}

.mpanel { padding-top: env(safe-area-inset-top, 0px); }
.mpanel .sign { padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)); }

.octx .st.on { color: var(--vert-fond2); }
.octx .st.off { color: var(--alerte-fond); }

.plein-ecran { min-height: 100vh; min-height: 100dvh; }
.modal { max-height: 88vh; max-height: 88dvh; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }

  .hero, .hero-bg, .hero::before { animation: none !important; transform: none !important; }
}

input, select, textarea { font-size: max(16px, 1em); }

a, button, input, select, textarea, [tabindex] { scroll-margin-bottom: 96px; }

img, video, svg, iframe, table { max-width: 100%; }

p, li, td, h1, h2, h3, h4, dd, figcaption { overflow-wrap: break-word; }

:focus-visible {

  outline: 2px solid var(--gold-txt, #9C7529);
  outline-offset: 2px;
  border-radius: 4px;
}

header :focus-visible, footer :focus-visible, .mpanel :focus-visible, .mbar :focus-visible {
  outline-color: var(--gold2, #DEBE74);
  box-shadow: 0 0 0 5px rgba(24, 19, 20, .9);
}

@media (max-height: 460px) and (orientation: landscape) {
  body > header { position: static; }
  .catbar { position: static; }
  .mbar a { min-height: 44px; padding: 8px 6px; font-size: 14px; }
  .mpanel nav a { min-height: 46px; padding: 10px 20px; font-size: 16px; }
  .mpanel-tel a { min-height: 46px; }
}

@media (max-width: 400px) {
  .nav { gap: 5px; padding: 7px 20px; }
  .brand { min-width: 0; flex: 0 1 auto; gap: 8px; }
  .brand img { width: 34px; height: 29px; }
  .bt { min-width: 0; }
  .bt b { font-size: 15px; white-space: nowrap; }

  .bt span { font-size: 12px; letter-spacing: .08em; white-space: nowrap; }
  .nav > .btn { padding: 9px 9px; font-size: 14px; min-height: 44px; }
}

@media (max-width: 360px) {
  .bt span { display: none; }
  .bt b { line-height: 1.15; }
}

@media (min-width: 861px) {
  .items:not(:has(.ph)) .it {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px;
    grid-template-rows: 56px 1fr auto;
    grid-template-areas: "titre logo" "description description" "prix prix";
    align-content: start;
  }
  .items:not(:has(.ph)) .it .phE { grid-area: logo; width: 56px; height: 56px; aspect-ratio: 1; }
  .items:not(:has(.ph)) .it .phE::after { background-size: 34px; }
  .items:not(:has(.ph)) .it .l1 { grid-area: titre; align-self: center; }
  .items:not(:has(.ph)) .it .d { grid-area: description; }
  .items:not(:has(.ph)) .it .l2 { grid-area: prix; align-self: end; }
}