/* Base : remise à zéro, gabarit de l'appli, structure commune des écrans. */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  color: var(--color-ink);
  background: var(--color-stage);
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

img {
  display: block;
}

/* ---- Interactions : survol, appui, focus ------------------------------------------------
   Tout élément cliquable réagit : léger soulèvement ou teinte au survol, légère réduction quand on appuie,
   anneau net au focus clavier. On utilise les propriétés `scale` et `translate` (indépendantes de `transform`)
   pour ne pas gêner les éléments déjà positionnés avec `transform`. */
button,
a,
summary {
  transition:
    scale var(--duration-fast) var(--ease-move),
    translate var(--duration-fast) var(--ease-move),
    background-color var(--duration-fast) var(--ease-move),
    box-shadow var(--duration-fast) var(--ease-move),
    filter var(--duration-fast) var(--ease-move),
    opacity var(--duration-fast) var(--ease-move);
}

button img {
  transition: scale var(--duration-fast) var(--ease-move);
}

:focus-visible {
  outline: var(--focus-ring) solid var(--color-ink);
  outline-offset: var(--space-0-5);
}

/* Pas d'effet d'échelle sur les repères de la carte : MapLibre les place avec un `transform: translate(...)`,
   et `scale` s'appliquerait après cette translation, ce qui les déplacerait de plusieurs pixels sous le doigt. */
button:active:not(:disabled):not([aria-disabled="true"]):not(.maplibregl-marker) {
  scale: var(--press-scale);
}

@media (hover: hover) {
  /* Boutons de contenu : teinte jaune, sans mouvement */
  .chip:not([aria-pressed="true"]):hover,
  .list-row:hover,
  .button-outline:hover,
  .avatar:hover,
  .rep-action:hover .rep-action__disc {
    background-color: var(--color-hover-tint);
  }

  /* Lignes du Menu : fond pâle qui déborde un peu de la ligne, sans rien déplacer */
  :is(.menu-row, .menu-setting):hover {
    background-color: var(--color-hover-tint);
    box-shadow: 0 0 0 var(--space-1) var(--color-hover-tint);
    border-radius: var(--radius-sm);
  }

  .chip[aria-pressed="true"]:hover {
    filter: brightness(0.97);
  }

  /* Boutons d'action : même couleur en plus pâle */
  .cta:hover {
    background-color: var(--color-cta-hover);
  }

  .demo-fill:hover {
    background-color: var(--color-hover-tint);
  }

  .filters__cta:hover:not(:disabled) {
    background-color: var(--color-filters-cta-hover);
  }

  .pill:hover:not(:disabled) {
    filter: brightness(1.04);
  }

  /* Icônes : léger grossissement */
  :is(.like, .pin, .tabbar__item, .menu-row):hover :is(img, .tabbar__icon, .menu-row__icon) {
    scale: var(--hover-scale-icon);
  }

  /* Boutons ronds */
  :is(.map-filter, .round-close, .mapfilters__confirm, .slot-picker__close, .filters__close):hover {
    scale: var(--hover-scale-round);
  }

  /* Repère de carte : un liseré jaune, sans changer sa taille ni sa position (voir la note sur `scale` plus haut). */
  .map-pin:hover {
    z-index: 1;
    box-shadow: inset 0 0 0 var(--pin-border) var(--color-surface), 0 0 0 var(--pin-hover-ring) var(--color-yellow), var(--shadow-float);
  }

  :is(.filters__reset, .filters-link, .filters__link, .range__end, .screen__back, .bell):hover {
    opacity: 0.7;
  }
}

/* ---- Gabarit : 414 × 896 sur ordinateur, plein écran sur téléphone ------- */
.device {
  position: relative;
  width: min(100vw, var(--screen-width));
  height: min(100dvh, var(--screen-height));
  overflow: hidden;
  isolation: isolate;
  background: var(--color-sky);
  border-radius: var(--screen-radius);
}

@media (max-width: 430px) {
  .device {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
  }

  /* Sans barre d'état factice : tout l'écran remonte de la hauteur de cette barre (la partie qui sort est rognée). */
  .device .statusbar {
    display: none;
  }

  .device .screens,
  .device .overlay-layer {
    inset: calc(-1 * var(--statusbar-height)) 0 0;
  }
}

.screens {
  position: absolute;
  inset: 0;
}

/* ---- Filet : occupe 0 px de hauteur, trait de 1 px centré sur sa position -- */
.rule {
  position: relative;
  height: 0;
  border: 0;
  overflow: visible; /* un <hr> masque par défaut ce qui dépasse : le trait est dessiné hors de sa boîte */
}

.rule::before {
  content: "";
  position: absolute;
  inset: var(--hairline-half) 0 auto;
  height: var(--hairline);
  background: var(--rule-color, var(--color-line));
}

.rule--medium { --rule-color: var(--color-line-medium); }
.rule--strong { --rule-color: var(--color-line-strong); }

.rule--thin::before {
  inset-block-start: calc(var(--hairline-thin) / -2);
  height: var(--hairline-thin);
}

/* ---- Écran : en-tête jaune + corps défilant ------------------------------ */
.screen {
  position: absolute;
  inset: 0;
  z-index: var(--z-screen);
  display: flex;
  flex-direction: column;
  background: var(--color-sky);
}

.screen__header {
  position: relative;
  flex: none;
  height: var(--header-height);
  background: var(--color-yellow);
}

.screen__header::after {
  content: "";
  position: absolute;
  inset: var(--header-line-top) 0 auto;
  height: 1px;
  background: var(--color-line-strong);
}

.screen__title {
  position: absolute;
  inset: var(--header-title-top) 0 auto;
  pointer-events: none; /* le titre couvre toute la largeur : il ne doit pas capter le clic de la flèche de retour */
  padding-inline: calc(var(--touch-target) + var(--space-2)); /* laisse la place de la flèche de retour et de la cloche ; un titre trop long est abrégé */
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--header-title-leading);
}

/* Réglages d'accessibilité du Menu : animations coupées, contraste des textes et filets renforcé. */
.device.reduce-motion {
  --duration-move: 0ms;
  --duration-fast: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-move: 0ms;
    --duration-fast: 0ms;
  }
}

.device.high-contrast {
  --color-ink: var(--color-black);
  --color-line: rgb(0 0 0 / 40%);
  --color-line-medium: rgb(0 0 0 / 50%);
}

/* Transitions d'entrée des écrans (durée = token --duration-move). */
@keyframes enter-fade {
  from { opacity: 0; }
}

@keyframes enter-slide-right {
  from { transform: translateX(100%); }
}

.screen.enter-fade { animation: enter-fade var(--duration-move) var(--ease-move); }
.screen.enter-slide-right { animation: enter-slide-right var(--duration-move) var(--ease-move); }

/* L'écran quitté reste sous le nouveau le temps de la transition, sans réagir au toucher. */
.screen.is-leaving {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .screen.enter-fade,
  .screen.enter-slide-right { animation: none; }
}

/* Variante mesurée dans Figma : filet d'en-tête léger (Découvrir). */
.screen__header--soft::after {
  background: var(--color-line);
}

.screen__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--content-inset) var(--clearance-tabbar);
  scrollbar-width: none;
}

.screen__body::-webkit-scrollbar {
  display: none;
}