/* ====================================================================
   app-shell.css — comportements "app native", source unique, linke sur
   toutes les pages : transitions entre pages, retour tactile immediat,
   suppression du chrome navigateur (flash gris au tap, rebond elastique
   du scroll). Complements anim.css (qui gere le hover desktop) plutot
   que doublon : ici on couvre le tactile, absent d'anim.css car gate
   derriere @media(hover:hover).
   ==================================================================== */

/* Transitions fluides entre pages (cross-document View Transitions).
   Progressive enhancement pur : ignore proprement sur les navigateurs
   qui ne le supportent pas (navigation classique inchangee, aucune
   regression possible). Remplace le flash blanc du rechargement complet
   par un fondu, a condition que cette regle soit presente sur la page
   de depart ET la page d'arrivee — d'ou le link sur toutes les pages. */
@view-transition {
  navigation: auto;
}

html {
  overscroll-behavior-y: contain;
}
body {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

/* Retour tactile immediat au press. anim.css anime deja le survol
   (souris), mais tout est gate derriere @media(hover:hover) — sur
   ecran tactile, la vraie cible de la PWA, aucun retour visuel
   n'existait au tap. */
@media (prefers-reduced-motion: no-preference) {
  a[href], button, [role="button"], input[type="submit"], input[type="button"], summary {
    transition: transform .1s ease, opacity .1s ease;
  }
  a[href]:active, button:active, [role="button"]:active,
  input[type="submit"]:active, input[type="button"]:active, summary:active {
    transform: scale(0.97);
  }
}
@media (prefers-reduced-motion: reduce) {
  a[href]:active, button:active, [role="button"]:active,
  input[type="submit"]:active, input[type="button"]:active {
    opacity: 0.7;
  }
}

/* Skeleton loaders : prefigure la forme du contenu reel (notices,
   signalements...) pendant un chargement reseau, au lieu d'un texte
   "Chargement…" ou d'un vide vite lu comme un site casse. */
.sos-skeleton {
  background: linear-gradient(90deg, rgba(20,30,50,0.07) 25%, rgba(20,30,50,0.13) 37%, rgba(20,30,50,0.07) 63%);
  background-size: 400% 100%;
  border-radius: 6px;
  display: block;
  animation: sosSkeletonShimmer 1.6s ease-in-out infinite;
}
[data-theme="dark"] .sos-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.06) 63%);
  background-size: 400% 100%;
}
@keyframes sosSkeletonShimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .sos-skeleton, [data-theme="dark"] .sos-skeleton {
    animation: none;
    background: rgba(20,30,50,0.09);
  }
  [data-theme="dark"] .sos-skeleton { background: rgba(255,255,255,0.09); }
}

/* Apparition douce du vrai contenu qui remplace un squelette : sans elle,
   le passage squelette -> contenu se fait d'un coup sec. */
@keyframes sosFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.sos-fadein { animation: sosFadeIn .32s cubic-bezier(.2,.7,.2,1) backwards; }
@media (prefers-reduced-motion: reduce) {
  .sos-fadein { animation: none; }
}