/* ==========================================================================
   Orvantyx PWA — boutons, fenêtres, voile de transition
   ========================================================================== */

.orv-install {
  --orv-cyan: #00ABC5;
  --orv-ink: #062A33;
  --orv-line: #E1EBEE;

  background: #fff;
  border: 1px solid var(--orv-line);
  border-radius: 14px;
  padding: 22px;
  max-width: 520px;
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--orv-ink);
}

.orv-install__title { font-size: 17px; font-weight: 650; margin: 0 0 6px; }
.orv-install__text { margin: 0 0 16px; color: #6B818A; font-size: 14px; }

.orv-install__buttons { display: flex; gap: 10px; flex-wrap: wrap; }

.orv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  flex: 1 1 190px;
  /* 48px de haut : la cible tactile confortable sur téléphone. */
  min-height: 48px;
  padding: 12px 18px;
  font: inherit; font-size: 14.5px; font-weight: 600;
  border: 0; border-radius: 10px;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.orv-btn:active { transform: translateY(1px); }
.orv-btn:focus-visible { outline: 3px solid rgba(0, 171, 197, .5); outline-offset: 2px; }

.orv-btn--android { background: var(--orv-cyan); color: #fff; box-shadow: 0 4px 14px rgba(0,171,197,.3); }
.orv-btn--android:hover { background: #007086; }

.orv-btn--ios { background: var(--orv-ink); color: #fff; box-shadow: 0 4px 14px rgba(6,42,51,.26); }
.orv-btn--ios:hover { background: #0C3D48; }

.orv-ico { flex-shrink: 0; }

/* Une fois l'application lancée en mode installé, proposer l'installation
   n'aurait plus de sens. */
.orv-standalone .orv-install { display: none; }

/* --- Fenêtres ------------------------------------------------------------ */

.orv-modal {
  position: fixed; inset: 0; z-index: 99998;
  display: none; align-items: center; justify-content: center;
  padding: 18px;
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.orv-modal.is-open { display: flex; }

.orv-modal__veil { position: absolute; inset: 0; background: rgba(6, 42, 51, .62); }

.orv-modal__box {
  position: relative;
  background: #fff; color: #062A33;
  border-radius: 16px;
  padding: 26px 24px 24px;
  width: 100%; max-width: 430px;
  max-height: 88vh; overflow-y: auto;
  box-shadow: 0 24px 60px rgba(6, 42, 51, .34);
  animation: orv-monte .22s cubic-bezier(.2,.8,.3,1);
}
.orv-modal__box--small { max-width: 360px; }

@keyframes orv-monte {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.orv-modal__close {
  position: absolute; top: 10px; right: 12px;
  width: 34px; height: 34px;
  border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: #6B818A;
  border-radius: 8px;
}
.orv-modal__close:hover { background: #F0F6F8; color: #062A33; }

.orv-modal__title { font-size: 18px; font-weight: 650; margin: 0 0 6px; padding-right: 30px; }
.orv-modal__text { margin: 0 0 18px; color: #6B818A; font-size: 14px; }

.orv-modal__note {
  margin-top: 18px; padding: 11px 13px;
  background: #FCF2DF; border-left: 3px solid #E5920B;
  border-radius: 0 8px 8px 0;
  font-size: 12.5px; color: #6E4506;
}

/* --- Étapes -------------------------------------------------------------- */

.orv-steps { list-style: none; margin: 0; padding: 0; }
.orv-steps li { display: flex; gap: 13px; padding: 12px 0; border-bottom: 1px solid #F0F6F8; }
.orv-steps li:last-child { border-bottom: 0; }
.orv-steps li p { margin: 0; font-size: 14.5px; font-weight: 550; }

.orv-steps__n {
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: #00ABC5; color: #fff;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
}

.orv-steps__hint { display: block; margin-top: 3px; font-size: 12.5px; color: #6B818A; }

/* L'icône reproduite dans le texte : encadrée comme sur l'appareil, pour que
   l'utilisateur reconnaisse le bouton exact au lieu de deviner. */
.orv-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  margin: 0 2px; vertical-align: -9px;
  background: #EAF6F9; color: #007086;
  border: 1px solid #C9E7EF; border-radius: 8px;
}

/* --- Voile de transition ------------------------------------------------- */

.orv-loader {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  background: #062A33;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.orv-loader.is-on { opacity: 1; visibility: visible; }

.orv-loader__mark {
  width: 62px; height: 62px; border-radius: 16px;
  background: #00ABC5; color: #fff;
  display: grid; place-items: center;
  font: 700 28px/1 ui-sans-serif, system-ui, sans-serif;
  animation: orv-pulse 1.15s ease-in-out infinite;
}

@keyframes orv-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(0,171,197,.45); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 16px rgba(0,171,197,0); }
}

.orv-loader__bar {
  width: 132px; height: 3px; border-radius: 3px;
  background: rgba(255,255,255,.16); overflow: hidden;
}
.orv-loader__bar i {
  display: block; width: 40%; height: 100%;
  background: #00ABC5; border-radius: 3px;
  animation: orv-glisse 1.05s ease-in-out infinite;
}

@keyframes orv-glisse {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(330%); }
}

body.orv-noscroll { overflow: hidden; }

/* Un mouvement continu peut déclencher des troubles vestibulaires : on le
   retire pour qui l'a désactivé au niveau système, en gardant le voile. */
@media (prefers-reduced-motion: reduce) {
  .orv-loader__mark, .orv-loader__bar i, .orv-modal__box { animation: none; }
  .orv-loader { transition: none; }
}

/* ==========================================================================
   Barre de navigation basse

   Quatre entrées encadrent un bouton central en saillie. La barre porte une
   véritable encoche — découpée au masque, pas simulée par un cercle blanc
   posé dessus — de sorte que le bouton semble sortir de la barre plutôt que
   flotter au-dessus.
   ========================================================================== */

.orv-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
  display: none;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  font: 15px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Encoche elliptique : large pour dégager un liseré de fond autour du
     bouton, mais peu profonde pour que le libellé reste posé sur le blanc.
     Un disque assez large pour la largeur serait trop profond, et le mot
     « Menus » deviendrait illisible sur le fond de la page. */
  --orv-notch-x: 56px;
  --orv-notch-y: 30px;
  --orv-fab: 62px;     /* diamètre du bouton */
}

/* Le fond est un calque séparé, et non la barre elle-même.
   Un masque s'applique à tout le contenu de l'élément : posé sur la barre, il
   découperait aussi le bouton central, qui disparaîtrait dans son encoche. */
.orv-nav::before {
  content: "";
  position: absolute; inset: 0;
  background: #fff;
  /* L'encoche est un disque retiré du haut : le dégradé radial sert de
     masque, opaque partout sauf dans le disque. */
  -webkit-mask: radial-gradient(ellipse var(--orv-notch-x) var(--orv-notch-y) at 50% 0,
                transparent 99%, #000 100%);
          mask: radial-gradient(ellipse var(--orv-notch-x) var(--orv-notch-y) at 50% 0,
                transparent 99%, #000 100%);
  /* drop-shadow suit la forme découpée, contrairement à box-shadow qui
     dessinerait un rectangle et remplirait l'encoche. */
  filter: drop-shadow(0 -3px 14px rgba(6, 42, 51, .10));
}

/* Les entrées et le bouton passent au-dessus du calque de fond. */
.orv-nav__item, .orv-fab { position: relative; z-index: 1; }

@media (max-width: 900px) { .orv-nav { display: flex; } }
.orv-standalone .orv-nav { display: flex; }

.orv-nav__item {
  position: relative;
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  /* 56 px : au-dessus des 44 px recommandés, parce qu'on vise avec le pouce
     en bas de l'écran, la zone la moins précise. */
  min-height: 58px;
  padding: 9px 2px 7px;
  border: 0; background: none;
  color: #7A9099; text-decoration: none;
  font-size: 10.5px; font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .18s ease;
}

.orv-nav__item:focus-visible { outline: 2px solid #00ABC5; outline-offset: -3px; }

.orv-nav__ico {
  width: 23px; height: 23px; flex-shrink: 0;
  transition: transform .28s cubic-bezier(.34, 1.6, .5, 1);
}

.orv-nav__item:active .orv-nav__ico { transform: scale(.86); }

/* Entrée active : l'icône monte légèrement et un point apparaît sous le
   libellé. Plus discret qu'un aplat de couleur, et lisible quel que soit le
   thème installé. */
.orv-nav__item.is-on { color: #00ABC5; font-weight: 650; }
.orv-nav__item.is-on .orv-nav__ico { transform: translateY(-2px); }

.orv-nav__item.is-on::after {
  content: ""; position: absolute; bottom: 3px;
  width: 4px; height: 4px; border-radius: 50%; background: #00ABC5;
  animation: orv-point .3s cubic-bezier(.34, 1.6, .5, 1);
}

@keyframes orv-point { from { transform: scale(0); } to { transform: scale(1); } }

/* Réserve la largeur du bouton central dans le flux. */
.orv-nav__hole { flex: 0 0 var(--orv-fab); }

/* --- Badge du panier ----------------------------------------------------- */

.orv-nav__wrap { position: relative; display: inline-flex; }

.orv-nav__count {
  position: absolute; top: -6px; left: 13px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center;
  background: #E5920B; color: #fff;
  border: 2px solid #fff; border-radius: 10px;
  font-size: 10px; font-weight: 700; line-height: 1;
  animation: orv-badge .34s cubic-bezier(.34, 1.6, .5, 1);
}
.orv-nav__count.is-empty { display: none; }

@keyframes orv-badge {
  from { transform: scale(0) rotate(-25deg); }
  to   { transform: scale(1) rotate(0); }
}

/* --- Bouton central ------------------------------------------------------ */

.orv-fab {
  position: absolute; z-index: 2; left: 50%;
  /* Remonté pour que le disque déborde nettement de la barre, sans que le
     libellé n'entre dans l'encoche : au-delà, « Menus » redeviendrait
     illisible sur le fond de la page. */
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: var(--orv-fab);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 0; background: none; padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.orv-fab__disc {
  position: relative;
  width: var(--orv-fab); height: var(--orv-fab);
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #16C3DC 0%, #00ABC5 45%, #00879C 100%);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 171, 197, .42), 0 2px 5px rgba(6, 42, 51, .18);
  /* La courbe dépasse légèrement sa valeur cible avant de revenir : c'est ce
     rebond qui distingue un mouvement vivant d'une simple interpolation. */
  transition: transform .38s cubic-bezier(.34, 1.56, .5, 1),
              box-shadow .3s ease;
}

.orv-fab:active .orv-fab__disc { transform: scale(.93); }

.orv-fab__disc .orv-nav__ico {
  position: absolute;
  width: 25px; height: 25px;
  transition: opacity .26s ease, transform .38s cubic-bezier(.34, 1.56, .5, 1);
}

/* Croix masquée au repos : les deux icônes se croisent en tournant. */
.orv-fab__x { opacity: 0; transform: rotate(-90deg) scale(.6); }

.orv-fab__label {
  font-size: 10.5px; font-weight: 600; color: #7A9099;
  transition: color .18s ease;
}

/* --- État ouvert --------------------------------------------------------- */

.orv-nav.is-menu-open .orv-fab__disc {
  transform: rotate(135deg);
  box-shadow: 0 4px 12px rgba(0, 135, 156, .5);
}
.orv-nav.is-menu-open .orv-fab__disc > .orv-nav__ico:not(.orv-fab__x) {
  opacity: 0; transform: rotate(90deg) scale(.6);
}
.orv-nav.is-menu-open .orv-fab__x {
  /* Contre-rotation : le disque tourne de 135°, la croix doit rester droite. */
  opacity: 1; transform: rotate(-135deg) scale(1);
}
.orv-nav.is-menu-open .orv-fab__label { color: #00ABC5; }

/* Les quatre entrées s'effacent légèrement quand le menu s'ouvre : l'attention
   se porte sur le panneau qui monte. */
.orv-nav.is-menu-open .orv-nav__item { opacity: .45; transform: scale(.96); }
.orv-nav__item { transition: color .18s ease, opacity .22s ease, transform .22s ease; }

/* --- Onde au toucher ----------------------------------------------------- */

.orv-fab__ripple {
  position: absolute; top: 0; left: 50%;
  width: var(--orv-fab); height: var(--orv-fab);
  margin-left: calc(var(--orv-fab) / -2);
  border-radius: 50%;
  border: 2px solid #00ABC5;
  opacity: 0; pointer-events: none;
}

.orv-fab.is-ripple .orv-fab__ripple { animation: orv-onde .55s ease-out; }

@keyframes orv-onde {
  from { opacity: .55; transform: scale(1); }
  to   { opacity: 0;   transform: scale(2.1); }
}

/* --- Tiroir -------------------------------------------------------------- */

.orv-drawer {
  position: fixed; inset: 0; z-index: 9995;
  display: none;
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.orv-drawer.is-open { display: block; }

.orv-drawer__veil {
  position: absolute; inset: 0;
  background: rgba(6, 42, 51, .5);
  animation: orv-fondu .2s ease;
}

@keyframes orv-fondu { from { opacity: 0 } to { opacity: 1 } }

.orv-drawer__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 78vh; overflow-y: auto;
  background: #fff;
  border-radius: 18px 18px 0 0;
  padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  animation: orv-monte-tiroir .26s cubic-bezier(.2, .8, .3, 1);
  -webkit-overflow-scrolling: touch;
}

@keyframes orv-monte-tiroir {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

/* La poignée dit « ce panneau se ferme en le tirant vers le bas », sans
   qu'aucun texte n'ait à l'expliquer. */
.orv-drawer__grip {
  width: 38px; height: 4px; border-radius: 4px;
  background: #D6E4E8; margin: 0 auto 12px;
}

.orv-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 10px; border-bottom: 1px solid #F0F6F8;
}
.orv-drawer__head strong { font-size: 16px; color: #062A33; }

.orv-drawer__close {
  width: 34px; height: 34px;
  border: 0; background: none; cursor: pointer;
  font-size: 27px; line-height: 1; color: #6B818A; border-radius: 9px;
}
.orv-drawer__close:active { background: #F0F6F8; }

.orv-drawer__search { padding: 14px 0 4px; }
.orv-drawer__search input[type="search"],
.orv-drawer__search input[type="text"] {
  width: 100%; padding: 11px 13px; font: inherit;
  border: 1px solid #E1EBEE; border-radius: 10px; background: #F8FBFC;
}
.orv-drawer__search button { display: none; }

.orv-drawer__list { list-style: none; margin: 0; padding: 6px 0 0; }
.orv-drawer__list li { border-bottom: 1px solid #F4F9FA; }
.orv-drawer__list li:last-child { border-bottom: 0; }

.orv-drawer__list a {
  display: block; padding: 13px 2px;
  color: #062A33; text-decoration: none; font-size: 15.5px;
}

/* Les entrées arrivent en cascade plutôt que d'un bloc : le regard suit la
   liste au lieu de la découvrir d'un coup. */
.orv-drawer.is-open .orv-drawer__list > li {
  animation: orv-entree .32s cubic-bezier(.2, .8, .3, 1) backwards;
}
.orv-drawer.is-open .orv-drawer__list > li:nth-child(1) { animation-delay: .06s }
.orv-drawer.is-open .orv-drawer__list > li:nth-child(2) { animation-delay: .10s }
.orv-drawer.is-open .orv-drawer__list > li:nth-child(3) { animation-delay: .14s }
.orv-drawer.is-open .orv-drawer__list > li:nth-child(4) { animation-delay: .18s }
.orv-drawer.is-open .orv-drawer__list > li:nth-child(5) { animation-delay: .22s }
.orv-drawer.is-open .orv-drawer__list > li:nth-child(6) { animation-delay: .26s }
.orv-drawer.is-open .orv-drawer__list > li:nth-child(n+7) { animation-delay: .30s }

@keyframes orv-entree {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.orv-drawer__list a:active { color: #00ABC5; }

/* Sous-niveaux : décalés et allégés, pour que la hiérarchie se lise. */
.orv-drawer__list .sub-menu,
.orv-drawer__list .children {
  list-style: none; margin: 0; padding: 0 0 6px 16px;
}
.orv-drawer__list .sub-menu a,
.orv-drawer__list .children a {
  padding: 9px 2px; font-size: 14px; color: #6B818A;
}

.orv-drawer__list .current-menu-item > a,
.orv-drawer__list .current_page_item > a { color: #00ABC5; font-weight: 600; }

/* Une fois installée, l'application n'a plus besoin des boutons
   d'installation, mais garde évidemment sa barre de navigation. */
.orv-standalone .orv-nav { display: flex; }

@media (prefers-reduced-motion: reduce) {
  .orv-drawer__panel, .orv-drawer__veil,
  .orv-drawer.is-open .orv-drawer__list > li,
  .orv-nav__count, .orv-nav__item.is-on::after { animation: none; }
  .orv-fab__disc, .orv-fab__disc .orv-nav__ico, .orv-nav__ico { transition: none; }
}