/* ==========================================================================
   Qu'est-ce qu'on mange ? : application installable (PWA)
   - invitation à installer (téléphone et tablette)
   - marche à suivre sur iPhone / iPad
   - bandeau « Hors connexion » sur une page servie depuis sa copie
   - application ouverte depuis l'écran d'accueil, bords d'écran (encoche)
   ========================================================================== */

.ksc-appli-invite,
.ksc-appli-aide,
.ksc-appli-copie {
  --kap-accent: #E8650F;
  --kap-accent-fort: #B4470A;
  --kap-accent-doux: #FDEBDD;
  --kap-encre: #1F2421;
  --kap-encre-douce: #5C635E;
  --kap-fond: #F5F3EE;
  --kap-ligne: #E6E1D8;
  --kap-ease: cubic-bezier(.22, .8, .24, 1);
  box-sizing: border-box;
  font-family: var(--e-global-typography-text-font-family, Roboto), system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--kap-encre);
  text-align: left;
}
.ksc-appli-invite *,
.ksc-appli-aide *,
.ksc-appli-copie * { box-sizing: border-box; }

.ksc-appli-invite .ksc-ico,
.ksc-appli-aide .ksc-ico,
.ksc-appli-copie .ksc-ico {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}

/* Remise à zéro des boutons (le thème stylise button) */
.ksc-appli-invite button,
.ksc-appli-aide button,
.ksc-appli-copie button {
  -webkit-appearance: none; appearance: none;
  margin: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none;
  color: inherit; font: inherit; line-height: 1;
  letter-spacing: normal; text-transform: none;
  min-height: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ksc-appli-invite :focus-visible,
.ksc-appli-aide :focus-visible,
.ksc-appli-copie :focus-visible { outline: 2px solid var(--kap-accent-fort); outline-offset: 3px; }

.ksc-appli-sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Pastille de marque (forme organique, comme la navigation) */
.ksc-appli-invite__sceau,
.ksc-appli-aide__sceau {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 46% 54% 52% 48% / 54% 44% 56% 46%;
  background: linear-gradient(145deg, var(--kap-accent) 20%, var(--kap-accent-fort) 100%);
  color: #fff;
  box-shadow: 0 10px 20px -10px rgb(180 71 10 / .7), inset 0 1px 0 rgb(255 255 255 / .35);
}

/* ==========================================================================
   Invitation à installer
   ========================================================================== */
.ksc-appli-invite {
  position: fixed;
  z-index: 990;
  left: 12px;
  right: 12px;
  bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  max-width: 520px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "sceau texte" "actions actions";
  align-items: center;
  gap: 12px;
  padding: 14px 12px 12px 14px;
  border-radius: 24px;
  background: rgb(255 255 255 / .86);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgb(255 255 255 / .85);
  box-shadow: 0 26px 52px -24px rgb(40 26 12 / .48), 0 1px 2px rgb(74 46 20 / .06), inset 0 1px 0 rgb(255 255 255 / .9);
  opacity: 0;
  transform: translateY(18px) scale(.98);
  transition: opacity .35s ease, transform .55s var(--kap-ease);
}
.ksc-appli-invite.is-visible { opacity: 1; transform: none; }

/* Page sans barre d'onglets en bas */
body:not(:has(.ksc-nav__menu)) .ksc-appli-invite { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

.ksc-appli-invite__sceau { grid-area: sceau; width: 48px; height: 48px; }
.ksc-appli-invite__sceau .ksc-ico { width: 24px; height: 24px; stroke-width: 1.9; }

.ksc-appli-invite__texte { grid-area: texte; display: grid; gap: 2px; margin: 0 !important; min-width: 0; }
.ksc-appli-invite__texte strong { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.ksc-appli-invite__texte span { font-size: .875rem; line-height: 1.35; color: var(--kap-encre-douce); }

.ksc-appli-invite__actions {
  grid-area: actions;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}

.ksc-appli-invite .ksc-appli-invite__ok {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px 0 16px;
  border-radius: 999px;
  background: var(--kap-accent-fort);
  color: #fff;
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 10px 22px -12px rgb(180 71 10 / .9), inset 0 1px 0 rgb(255 255 255 / .22);
  transition: transform .3s var(--kap-ease), box-shadow .3s var(--kap-ease), filter .3s;
}
.ksc-appli-invite .ksc-appli-invite__ok:hover {
  color: #fff;
  filter: brightness(.92);
  transform: translateY(-1px);
  box-shadow: 0 16px 28px -14px rgb(180 71 10 / .95), inset 0 1px 0 rgb(255 255 255 / .22);
}
.ksc-appli-invite .ksc-appli-invite__ok:active { transform: scale(.97); }
.ksc-appli-invite .ksc-appli-invite__ok .ksc-ico { width: 18px; height: 18px; transition: transform .35s var(--kap-ease); }
.ksc-appli-invite .ksc-appli-invite__ok:hover .ksc-ico { transform: translateY(1px); }

.ksc-appli-invite .ksc-appli-invite__plus-tard {
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--kap-encre-douce);
  font-size: .95rem;
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease;
}
.ksc-appli-invite .ksc-appli-invite__plus-tard:hover { background: var(--kap-fond); color: var(--kap-encre); }

@media (max-width: 339.98px) {
  .ksc-appli-invite { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texte" "actions"; }
  .ksc-appli-invite__sceau { display: none; }
}

@media (min-width: 768px) {
  .ksc-appli-invite { left: auto; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); width: 420px; }
}

/* ==========================================================================
   Marche à suivre sur iPhone / iPad
   ========================================================================== */
dialog.ksc-appli-aide {
  position: fixed;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: min(100%, 480px);
  max-width: 100%;
  max-height: calc(100% - 24px);
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
dialog.ksc-appli-aide::backdrop {
  background: rgb(31 36 33 / .36);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.ksc-appli-aide__boite {
  margin: 0 8px calc(8px + env(safe-area-inset-bottom, 0px));
  padding: 26px 20px 20px;
  border-radius: 28px;
  background: rgb(255 255 255 / .95);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgb(255 255 255 / .9);
  box-shadow: 0 -10px 40px -20px rgb(40 26 12 / .35), 0 30px 60px -30px rgb(40 26 12 / .45);
  animation: ksc-appli-monte .55s var(--kap-ease) both;
}

.ksc-appli-aide__sceau { width: 56px; height: 56px; margin-bottom: 14px; }
.ksc-appli-aide__sceau .ksc-ico { width: 28px; height: 28px; stroke-width: 1.9; }

.ksc-appli-aide .ksc-appli-aide__titre {
  margin: 0 0 16px;
  font-family: var(--e-global-typography-primary-font-family, inherit), system-ui, sans-serif;
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--kap-encre);
}

.ksc-appli-aide__etapes {
  list-style: none;
  margin: 0 0 20px !important;
  padding: 0 !important;
  display: grid;
  gap: 8px;
}
.ksc-appli-aide__etapes li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 12px 10px 10px;
  border-radius: 18px;
  background: var(--kap-fond);
  font-size: .95rem;
  line-height: 1.4;
  animation: ksc-appli-monte .55s var(--kap-ease) both;
}
.ksc-appli-aide__etapes li:nth-child(2) { animation-delay: .06s; }
.ksc-appli-aide__etapes li:nth-child(3) { animation-delay: .12s; }
.ksc-appli-aide__etapes strong { font-weight: 700; }

.ksc-appli-aide__ico {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 14px;
  background: #fff;
  color: var(--kap-accent-fort);
  box-shadow: 0 1px 2px rgb(74 46 20 / .06), 0 6px 14px -8px rgb(74 46 20 / .25);
}

.ksc-appli-aide .ksc-appli-aide__ok {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border-radius: 999px;
  background: var(--kap-accent-fort);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 12px 24px -12px rgb(180 71 10 / .9), inset 0 1px 0 rgb(255 255 255 / .22);
  transition: filter .3s, transform .3s var(--kap-ease);
}
.ksc-appli-aide .ksc-appli-aide__ok:hover { color: #fff; filter: brightness(.92); }
.ksc-appli-aide .ksc-appli-aide__ok:active { transform: scale(.98); }

@media (min-width: 600px) {
  dialog.ksc-appli-aide { top: 0; bottom: 0; height: fit-content; margin: auto; }
  .ksc-appli-aide__boite { margin: 0; padding: 30px 26px 24px; }
}

/* ==========================================================================
   Page servie sans réseau
   ========================================================================== */
.ksc-appli-copie {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 12px auto 0;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  background: rgb(255 255 255 / .82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--kap-ligne);
  box-shadow: 0 1px 2px rgb(74 46 20 / .05), 0 10px 24px -16px rgb(74 46 20 / .3);
  animation: ksc-appli-monte .5s var(--kap-ease) both;
}
.ksc-appli-copie > .ksc-ico { color: var(--kap-accent-fort); }
.ksc-appli-copie__texte { display: grid; min-width: 0; line-height: 1.25; }
.ksc-appli-copie__texte strong { font-size: .9rem; font-weight: 700; }
.ksc-appli-copie__texte span { font-size: .8125rem; color: var(--kap-encre-douce); }

.ksc-appli-copie .ksc-appli-copie__bouton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 16px 0 14px;
  border-radius: 999px;
  background: var(--kap-accent-doux);
  color: var(--kap-accent-fort);
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease, transform .3s var(--kap-ease);
}
.ksc-appli-copie .ksc-appli-copie__bouton .ksc-ico { width: 18px; height: 18px; transition: transform .5s var(--kap-ease); }
.ksc-appli-copie .ksc-appli-copie__bouton:hover .ksc-ico { transform: rotate(120deg); }
.ksc-appli-copie.is-en-ligne > .ksc-ico { color: #2F6B4F; }
.ksc-appli-copie.is-en-ligne .ksc-appli-copie__bouton { background: var(--kap-accent-fort); color: #fff; }

/* ==========================================================================
   Application ouverte depuis l'écran d'accueil
   ========================================================================== */
html.ksc-appli { background-color: #F5F3EE; }
@media (display-mode: standalone) {
  html { background-color: #F5F3EE; }
  /* Le bouton d'installation n'a plus d'objet */
  [data-ksc-installer] { display: none !important; }
}

/* Bords d'écran (encoche de l'iPhone en paysage) : le contenu reste dans la zone sûre */
body {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

@keyframes ksc-appli-monte {
  from { opacity: 0; transform: translateY(16px); }
}

@media (prefers-reduced-motion: reduce) {
  .ksc-appli-invite,
  .ksc-appli-invite *,
  .ksc-appli-aide *,
  .ksc-appli-copie,
  .ksc-appli-copie * {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}