/* Page de liens — verre sombre.

   Elle s'ouvre depuis une story Snap, donc sur un telephone, en pleine
   lumiere ou dans le noir, et l'on decide en une seconde si l'on clique.
   D'ou le parti pris: fond sombre pour ne pas eblouir la nuit, cibles
   larges, texte gros, et rien d'autre a lire que les liens eux-memes.

   Polices du systeme, aucune requete externe: une page qui charge une police
   distante annonce sa visite a un tiers, et perd une demi-seconde. */

:root {
  --nuit: #0e1116;
  --nuit-clair: #161b23;
  --verre: rgba(255, 255, 255, 0.07);
  --verre-fort: rgba(255, 255, 255, 0.12);
  --arete: rgba(255, 255, 255, 0.16);
  --texte: #f2f5f9;
  --murmure: #98a2b3;
  --vif: #5b8cff;
  --chaud: #ff7a59;

  --corps: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --rond: 18px;
  --souple: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--nuit);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 20px calc(32px + env(safe-area-inset-bottom));
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--corps);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- fond ---------------------------------------------------------- */
.fond {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.fond__halo {
  position: absolute;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}

.fond__halo--a {
  top: -32vmax;
  left: -22vmax;
  background: radial-gradient(circle, var(--vif), transparent 68%);
  animation: derive 26s var(--souple) infinite alternate;
}

.fond__halo--b {
  bottom: -34vmax;
  right: -24vmax;
  background: radial-gradient(circle, var(--chaud), transparent 68%);
  animation: derive 32s var(--souple) infinite alternate-reverse;
}

@keyframes derive {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6vmax, 4vmax, 0) scale(1.14); }
}

/* Un fond qui bouge sans arret peut gener; on le fige si le systeme le
   demande. */
@media (prefers-reduced-motion: reduce) {
  .fond__halo { animation: none; }
}

/* --- carte --------------------------------------------------------- */
.carte {
  position: relative;
  z-index: 1;
  width: min(100%, 460px);
  padding: 30px 24px 26px;
  background: var(--verre);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  border: 1px solid var(--arete);
  border-radius: 26px;
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.8),
              inset 0 1px 0 rgba(255, 255, 255, 0.14);
  text-align: center;
}

.profil { text-align: center; margin-bottom: 22px; }

/* La photo ancre la page: on sait tout de suite chez qui on est. Cercle,
   bordure claire qui la detache du verre, et une taille qui reste nette
   sur un ecran de telephone sans peser au chargement. */
.profil__photo {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  margin-bottom: 14px;
  display: inline-block;
}

.titre {
  margin: 0;
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.accroche {
  margin: 8px 0 26px;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--murmure);
}

.accroche:empty { display: none; }

/* --- liens --------------------------------------------------------- */
.liens { display: flex; flex-direction: column; gap: 11px; }

/* Cible confortable au pouce: 62 px de haut, bien au-dela des 44 px
   recommandes, parce qu'on clique ici en marchant. */
.lien {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 12px 18px;
  border: 1px solid var(--arete);
  border-radius: var(--rond);
  background: var(--verre-fort);
  color: var(--texte);
  text-decoration: none;
  text-align: left;
  transition: transform 0.2s var(--souple), background 0.2s var(--souple),
              border-color 0.2s var(--souple);
}

.lien:hover, .lien:focus-visible {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Le clic s'enfonce franchement puis rebondit: c'est ce creux, plus la
   vibration, qui donne la sensation d'un vrai bouton. */
.lien:active { transform: scale(0.95); transition-duration: 0.08s; }

/* Le lien mis en avant se voit avant qu'on lise: plus haut, colore, une
   pastille qui attire l'oeil. C'est la ou l'on veut diriger le clic. */
.lien--vedette {
  background: linear-gradient(135deg, var(--vif), var(--chaud));
  border-color: transparent;
  min-height: 68px;
  box-shadow: 0 10px 30px -10px rgba(91, 140, 255, 0.7);
}

.lien--vedette .lien__titre { font-size: 1.08rem; }
.lien--vedette .lien__marque { background: rgba(255, 255, 255, 0.22); }
.lien--vedette:hover, .lien--vedette:focus-visible {
  background: linear-gradient(135deg, var(--vif), var(--chaud));
  filter: brightness(1.08);
}

.lien__marque {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 1.18rem;
  line-height: 1;
}

.lien__texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.lien__titre {
  font-size: 1rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.lien__note {
  font-size: 0.78rem;
  color: var(--murmure);
  overflow-wrap: anywhere;
}

.vide { color: var(--murmure); font-size: 0.9rem; }

/* --- avant-gouts --------------------------------------------------- */
.apercus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 22px;
}

.apercu {
  position: relative;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: var(--verre-fort);
}

.apercu__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Le flou est fort et ne se retire qu'au toucher: rien d'explicite n'est
     lisible au chargement, ni par un oeil ni par un lecteur d'images. */
  filter: blur(26px);
  transform: scale(1.1);          /* le flou deborde, on cache les bords */
  transition: filter 0.25s var(--souple);
}

.apercu__voile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(14, 17, 22, 0.35);
  transition: opacity 0.25s var(--souple);
}

.apercu__age {
  font: 700 0.95rem/1 var(--corps);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #131926;
}

.apercu__mot { font-size: 0.72rem; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }

/* Devoile: le flou tombe, le voile s'efface. Jamais mémorisé -- au
   rechargement, tout est de nouveau couvert. */
.apercu--nu .apercu__img { filter: none; }
.apercu--nu .apercu__voile { opacity: 0; pointer-events: none; }

/* Certains navigateurs de story affichent la page en clair: on garde le
   contraste dans les deux cas plutot que d'imposer un theme. */
@media (prefers-color-scheme: light) {
  :root {
    --nuit: #f4f6fa;
    --verre: rgba(255, 255, 255, 0.7);
    --verre-fort: rgba(255, 255, 255, 0.86);
    --arete: rgba(16, 22, 34, 0.1);
    --texte: #131926;
    --murmure: #5b6577;
  }

  .carte { box-shadow: 0 24px 60px -26px rgba(16, 22, 34, 0.35); }
  .lien:hover, .lien:focus-visible { background: #fff; }
  .lien__marque { background: rgba(16, 22, 34, 0.06); }
}