/*
  Une seule feuille pour les trois pages. Pas de CDN, pas de police distante : ces pages sont lues
  par un examinateur Google Play et par quelqu'un qui veut supprimer son compte — les deux
  méritent qu'elles s'affichent, y compris derrière un réseau qui filtre.
*/
:root {
  --fond: #fdfaff;
  --texte: #1c1b1f;
  --doux: #49454f;
  --accent: #592adf;
  --carte: #f2edf7;
  --bord: #e2dbe9;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #141218;
    --texte: #e6e0e9;
    --doux: #cac4d0;
    --accent: #b69dfa;
    --carte: #1f1b24;
    --bord: #2f2a36;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 2.5rem 1.25rem 5rem;
  background: var(--fond);
  color: var(--texte);
  font: 1rem/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

main { max-width: 44rem; margin: 0 auto; }

h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 .5rem; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 .5rem; }
p, li { color: var(--doux); }
a { color: var(--accent); }

.chapeau { font-size: 1.1rem; color: var(--doux); margin-top: 0; }
.date { font-size: .85rem; color: var(--doux); }

.carte {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: .9rem;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}

.carte p:last-child, .carte ul:last-child { margin-bottom: 0; }
.carte p:first-child { margin-top: 0; }

nav { margin-bottom: 2rem; font-size: .9rem; }
nav a { margin-right: 1rem; }

footer {
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--bord);
  font-size: .85rem;
  color: var(--doux);
}

table { border-collapse: collapse; width: 100%; margin: 1rem 0; }
th, td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--bord); vertical-align: top; }
th { color: var(--texte); font-weight: 600; }
td { color: var(--doux); }

/* Page d'invitation (invitation.html, servie sous /join/<code>, TASK-42). */
  .invitation { text-align: left; }
  .invitation .chapeau { font-size: 1.2rem; }
  .actions { display: flex; flex-direction: column; gap: .75rem; margin: 1.5rem 0 .5rem; }
  .bouton {
    display: block; width: 100%; padding: .9rem 1.25rem; border-radius: 999px;
    font: inherit; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer;
    border: 1px solid var(--accent);
  }
  .bouton-plein { background: var(--accent); color: var(--fond); }
  .bouton-contour { background: transparent; color: var(--accent); }
  .bouton:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .copie { min-height: 1.5rem; font-size: .9rem; margin: 0; }
  /* Emplacement du futur bouton Play Store (masqué tant que l'app n'est pas publique). */
  .acces-public { display: none; }

  /* Téléphone ou ordinateur : on se fie aux capacités du pointeur, pas à la largeur ni au user agent.
     Une souris précise avec survol = ordinateur ; un doigt = téléphone ou tablette. */
  .ordinateur-seulement { display: none; }
  @media (hover: hover) and (pointer: fine) {
    .ordinateur-seulement { display: block; }
    .telephone-seulement { display: none; }
    .actions { flex-direction: row; }
    .bouton { width: auto; }
  }