/* Palette « Prune ». Contrastes vérifiés sur les trois usages qui comptent :
   le texte sur le fond, le gris du pied de page sur le fond, et l'accent sur
   le fond — l'accent sert aussi à des textes petits (les compteurs, le message
   « Lien copié »), il lui faut donc 4.5 et pas seulement les 3 des grands
   titres. Clair : 16.4 / 5.5 / 5.3. Sombre : 16.5 / 6.9 / 9.9.
   L'accent est repris tel quel dans favicon.svg, qui ne peut pas lire ce
   fichier. */
:root {
  color-scheme: light dark;
  --bg: #faf6fa;
  --fg: #221426;
  --muted: #715f75;
  --accent: #7c3aed;
  --trait: #ebe2ec;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1a1220; --fg: #f7f2f8; --muted: #a99bad; --accent: #c4b5fd; --trait: #2e2338; }
}

* { box-sizing: border-box; }

/* Indispensable : une règle d'auteur qui pose `display` l'emporte sur la
   feuille du navigateur, donc sur [hidden] { display: none }. Sans ceci,
   .compte { display: grid } rend visible un élément marqué hidden — et une
   panne de JavaScript se déguise en page à moitié affichée. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  padding: 32px 16px 20px;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: center;
}

main { width: 100%; max-width: 640px; align-self: center; }

/* L'icône du site, en tête de page. Sur l'accueil elle est décorative ;
   ailleurs elle est enveloppée dans un lien qui y ramène. */
.logo {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
}

.logo-lien {
  display: inline-block;
  line-height: 0;
  border-radius: 12px;
  transition: opacity .15s ease;
}
.logo-lien:hover { opacity: .8; }

/* Le sablier se retourne quand le lien part dans le presse-papiers. Un
   demi-tour suffit : la marque est symétrique par rotation, elle retombe donc
   exactement sur elle-même — comme un vrai sablier qu'on retourne, et sans
   état final à nettoyer. */
@keyframes retourner-sablier {
  from { transform: rotate(0deg); }
  to { transform: rotate(180deg); }
}
.logo.tourne { animation: retourner-sablier .55s cubic-bezier(.45, 0, .2, 1); }

/* Une animation décorative n'est jamais indispensable : si le système demande
   moins de mouvement, on n'en joue aucune. La copie reste signalée par son
   message, qui, lui, ne dépend d'aucun réglage. */
@media (prefers-reduced-motion: reduce) {
  .logo.tourne { animation: none; }
}
.logo-lien:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

h1 {
  font-size: clamp(1.4rem, 5vw, 2.4rem);
  margin: 0 0 1.5rem;
  font-weight: 650;
  letter-spacing: -.02em;
}

.reponse {
  font-size: clamp(2.25rem, 11vw, 4.5rem);
  margin: 0 0 2rem;
  color: var(--accent);
  font-weight: 750;
  line-height: 1.1;
  text-wrap: balance;
}

/* Les messages d'attente vont de dix à quatre-vingt-cinq signes ; à taille fixe, les
   plus longs déborderaient sur quatre lignes en téléphone. Le palier est posé
   par afficherReponse() dans app.js, d'après la longueur du texte. Sans
   JavaScript, l'attribut est absent et la taille d'origine s'applique. */
.reponse[data-taille="2"] { font-size: clamp(1.75rem, 8vw, 3.25rem); }
.reponse[data-taille="3"] { font-size: clamp(1.5rem, 6.5vw, 2.6rem); }
.reponse[data-taille="4"] { font-size: clamp(1.25rem, 5.5vw, 2.1rem); }
.reponse[data-taille="5"] { font-size: clamp(1.125rem, 4.75vw, 1.8rem); }

/* Sur l'accueil, le message se remplace toutes les sept secondes : il s'efface,
   le texte change hors de vue, il revient. Seule l'opacité est animée — le
   corps du texte varie d'un palier à l'autre, et l'animer ferait danser la
   page. accueil.js relit cette durée plutôt que de la recopier.
   L'annulation pour mouvement réduit doit suivre la règle qu'elle annule : un
   bloc @media ne pèse rien de plus dans le calcul de spécificité, seul l'ordre
   des règles les départage. */
.reponse { transition: opacity .35s ease; }
.reponse.efface { opacity: 0; }

/* La place du plus haut message est réservée par accueil.js, qui la mesure et
   pose min-height ici. Le texte se centre dedans : sans cela, les messages
   courts laisseraient un trou au-dessus du bouton au lieu de rester au milieu.
   La classe n'est posée que sur l'accueil — ailleurs, le message ne change
   qu'au passage d'une période à l'autre, et rien ne justifie d'immobiliser la
   page. */
.reponse.reserve { display: grid; align-content: center; }

@media (prefers-reduced-motion: reduce) {
  .reponse { transition: none; }
}

.bouton {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.bouton.secondaire { background: transparent; color: var(--accent); }
.bouton:disabled { opacity: .5; cursor: default; }

/* Colonne de largeur explicite : sans elle, la colonne implicite de la grille
   se cale sur le contenu, le width: 100% des champs n'a plus de référence, et
   sur ordinateur ils retombent à leur largeur naturelle (~210 px). min()
   garde la colonne dans l'écran sur téléphone. */
form {
  display: grid;
  grid-template-columns: min(100%, 440px);
  justify-content: center;
  justify-items: center;
  gap: 16px;
}
label { font-weight: 600; }
/* Un libellé et son champ : serrés l'un contre l'autre, et séparés du couple
   suivant par l'espace plus large de la grille du formulaire. */
.champ { display: grid; gap: 6px; width: 100%; }
input[type="datetime-local"],
input[type="text"]#titre {
  font: inherit;
  padding: 12px;
  width: 100%;
  border: 1px solid var(--trait);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
}

.aide { color: var(--muted); font-size: .875rem; margin: 0; }
#titre::placeholder { color: var(--muted); opacity: .8; }
#titre { text-overflow: ellipsis; }

/* Le titre d'une soirée remplace la question du compte à rebours : il est
   saisi par quelqu'un, peut donc être long et contenir un mot sans espace. */
h1 { overflow-wrap: anywhere; text-wrap: balance; }
/* Le temps que le titre arrive du service (au plus 1,5 s) : la place reste
   réservée, rien ne saute quand il apparaît. */
h1.attente { visibility: hidden; }
.erreur { color: #dc2626; font-size: .9rem; margin: 0; }
@media (prefers-color-scheme: dark) { .erreur { color: #f87171; } }

.compte {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 1.5rem;
}
.compte div {
  border: 1px solid var(--trait);
  border-radius: 12px;
  padding: 14px 4px;
}
.compte strong {
  display: block;
  font-size: clamp(1.4rem, 7vw, 2.4rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.compte span {
  font-size: .7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
}

.quand { color: var(--muted); margin: 0 0 1.5rem; }

/* Le libellé est à gauche du champ, et passe au-dessus quand la largeur ne
   suffit plus — c'est-à-dire sur téléphone, où la ligne serait illisible. */
.partage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}
.partage-libelle { font-weight: 600; white-space: nowrap; }
.partage .copie { grid-column: 1 / -1; text-align: center; }

@media (max-width: 560px) {
  .partage { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .partage .copie { grid-column: auto; }
}
.partage input {
  font: inherit;
  font-size: .9rem;
  text-align: center;
  padding: 12px;
  width: 100%;
  border: 1px solid var(--trait);
  border-radius: 10px;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}
.partage input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Hauteur réservée : le message apparaît sans décaler la page. */
.copie { min-height: 1.3em; margin: 0; font-size: .85rem; font-weight: 600; color: var(--accent); }

footer {
  display: grid;
  gap: 4px;
  justify-items: center;
  font-size: .75rem;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, monospace;
}

/* Frise de temps : passé, aujourd'hui, à venir. Discret par construction —
   même taille que le numéro de version, ce sont des notes de bas de page. */
.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 14px;
  margin: 0;
}
.stats span:not(:last-child)::after {
  content: "·";
  margin-left: 14px;
  color: var(--trait);
}
.stats strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 10px;
  margin: 0;
  opacity: .75;
}
.meta > :not(:last-child)::after { content: "·"; margin-left: 10px; color: var(--trait); display: inline-block; text-decoration: none; }

/* Bandeau d'environnement : voir la section « dev et prod » du README. */
.env {
  position: fixed;
  top: 12px;
  right: 12px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font: 600 .7rem/1 ui-monospace, SFMono-Regular, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* Lien discret du pied de page, vers /confidentialite : même teinte que le
   numéro de version, souligné pour se lire comme un lien. */
.meta a { color: inherit; text-underline-offset: 2px; }
.meta a:hover { color: var(--accent); }
.meta a[aria-current="page"] { text-decoration: none; }

/* Page de texte suivi (/confidentialite) : alignée à gauche, pour se lire,
   avec le sablier et le titre centrés comme partout ailleurs. */
.texte { text-align: left; }
.texte .logo-lien { display: block; width: max-content; margin: 0 auto; }
.texte h1 { text-align: center; }
.texte h2 { font-size: 1.1rem; font-weight: 650; margin: 2rem 0 .5rem; color: var(--accent); }
.texte p, .texte li { margin: 0 0 .75rem; text-wrap: pretty; }
.texte ul { padding-left: 1.25rem; margin: 0 0 .75rem; }
.texte address { font-style: normal; margin: 0 0 .75rem; }
.texte a { color: var(--accent); text-underline-offset: 2px; }
.texte .chapeau { color: var(--muted); font-size: 1.05rem; text-align: center; }