/*
 * map.lemanida.ch, page d'attente : une seule feuille, aucune ressource externe (ni police, ni image, ni @import).
 * Couleurs, rythme et boutons repris de app/vitrine/css/base.css (variables et règles utiles seulement) ;
 * polices système à la place des polices de la vitrine, qui sont des binaires.
 */
:root {
  --nuit: #12162a;
  --nuit-deep: #0b0e1c;
  --lac-nuit: #102330;
  --peche: #f8c28b;
  --saumon: #ef9c9c;
  --mauve: #aa93c4;
  --ivoire: #ede2c8;
  --ink: #f7efdf;
  --prose: #d9d5cd;
  --muted: #aaaeb6;
  --line: rgba(237, 226, 200, .19);
  --trait: rgba(237, 226, 200, .055);
  --horizon: linear-gradient(100deg, var(--peche), var(--saumon) 56%, var(--mauve));
  --font-title: Impact, Haettenschweiler, 'Arial Black', sans-serif;
  --font-text: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --gutter: clamp(24px, 5.6vw, 88px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* Un titre en capitales dont la ligne suivante porte un È ou un É : l'accent monte à 1.10em au-dessus de la ligne de base. */
  --leading-accent: calc(1.1em + 4px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--nuit); color: var(--prose); font: 400 17px/1.6 var(--font-text); overflow-x: clip; -webkit-font-smoothing: antialiased; }
h1, p { margin: 0; padding: 0; }
a { color: inherit; }
a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--peche); outline-offset: 6px; }
::selection { background: var(--saumon); color: var(--nuit); }

/* La scène : un plan de ville au crayon fin, un coucher de soleil sur le lac. */
.scene {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  padding: max(28px, env(safe-area-inset-top)) var(--gutter) max(28px, env(safe-area-inset-bottom));
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 90% 42% at 50% 108%, rgba(248, 194, 139, .5), rgba(239, 156, 156, .24) 42%, rgba(170, 147, 196, 0) 72%),
    linear-gradient(to top, var(--lac-nuit), rgba(16, 35, 48, 0) 26%),
    var(--nuit);
}
.scene::before {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: -1;
  transform: rotate(-11deg);
  background:
    repeating-linear-gradient(0deg, transparent 0 71px, var(--trait) 71px 72px),
    repeating-linear-gradient(90deg, transparent 0 71px, var(--trait) 71px 72px);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 46%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 60% 50% at 50% 46%, #000 20%, transparent 78%);
}

.marque p { color: var(--ink); font: 400 clamp(22px, 3vw, 30px)/1 var(--font-title); letter-spacing: .06em; text-transform: uppercase; }

main { align-self: center; width: 100%; max-width: 46rem; padding-block: 56px; }

.eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 26px; color: var(--peche); font: 400 12px/1.5 var(--font-mono); letter-spacing: .13em; text-transform: uppercase; }
.repere { position: relative; flex: 0 0 18px; width: 18px; height: 18px; background: radial-gradient(circle, var(--peche) 0 5px, transparent 5.5px); }
.repere::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--peche); border-radius: 50%; opacity: .55; }

h1 { margin-bottom: 28px; color: var(--ink); font: 400 clamp(44px, 10.5vw, 96px)/var(--leading-accent) var(--font-title); letter-spacing: -.005em; text-transform: uppercase; text-wrap: balance; }
.horizon { color: var(--peche); background: var(--horizon); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.texte { max-width: 36rem; margin-bottom: 40px; font-size: clamp(17px, 2.1vw, 20px); text-wrap: pretty; }

.actions { display: flex; flex-wrap: wrap; gap: 14px; }
.pill { min-height: 56px; display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border: 1px solid transparent; border-radius: 2px; background: var(--peche); color: var(--nuit); font: 600 17px/1.2 var(--font-text); letter-spacing: .05em; text-decoration: none; text-transform: uppercase; transition: background-color .2s, color .2s, transform .35s var(--ease); }
.pill:hover { background: var(--ivoire); transform: translateY(-3px); }
.pill:active { transform: translateY(0); }
.pill-line { background: transparent; border-color: rgba(237, 226, 200, .55); color: var(--ink); }
.pill-line:hover { color: var(--nuit); }

.pied p { color: var(--prose); font: 400 12px/1.5 var(--font-mono); letter-spacing: .11em; }

@media (max-width: 520px) {
  .actions { flex-direction: column; }
  .pill { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .repere::after { animation: repere 2.6s var(--ease) infinite; }
  @keyframes repere {
    0% { transform: scale(.6); opacity: .8; }
    80%, 100% { transform: scale(1.5); opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .pill { transition: none; }
  .pill:hover { transform: none; }
}