/* ==========================================================================
   meetDo — les composants du site
   ==========================================================================
   Ne définit AUCUNE couleur : tout vient des variables d'`aurora.css`, qui est
   la seule source. Une valeur littérale ici ne basculerait pas en mode sombre,
   et le défaut ne se verrait qu'en capture d'écran.

   Deux principes de mise en page, et ils expliquent l'essentiel du fichier :

   1. **Rien ne dépasse à 320 px.** C'est la borne basse que le harnais
      responsive du dépôt Flutter (`expectNoOverflowAcrossSizes`) cherche, et
      c'est aussi la largeur d'un iPhone SE en texte agrandi. Les grilles
      passent donc par `auto-fit`/`minmax` plutôt que par un nombre de
      colonnes figé, et les longs mots allemands par `hyphens`.
   2. **Le mouvement est décoratif, donc désactivable.** Chaque animation est
      sous `@media (prefers-reduced-motion: no-preference)`. C'est l'inverse de
      l'usage habituel (animer, puis couper) et c'est délibéré : oublier la
      requête `reduce` laisse l'animation active, oublier celle-ci laisse le
      site immobile — le second défaut est infiniment moins grave.
   ========================================================================== */

/* ── Socle ───────────────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font: var(--fs-body)/1.65 var(--font);
  color: var(--text-primary);
  background: var(--bg);
  /* Le fond porte deux halos de marque très dilués. C'est la signature
     visuelle d'Aurora : le fond n'est jamais plat, et jamais blanc. */
  background-image:
    radial-gradient(1200px 600px at 12% -8%, color-mix(in srgb, var(--violet) 14%, transparent), transparent 70%),
    radial-gradient(900px 500px at 92% 4%, color-mix(in srgb, var(--coral) 10%, transparent), transparent 72%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* `color-mix` est largement soutenu, mais un navigateur qui l'ignore
   n'afficherait aucun halo — acceptable, c'est décoratif. En revanche il ne
   doit pas afficher un dégradé cassé : le repli met un fond uni. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  body { background-image: none; }
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--violet-cta-end); text-decoration: none; }
a:hover { text-decoration: underline; }

/* La bague de focus est visible et teintée : une bague retirée « parce
   qu'elle est moche » rend le site inutilisable au clavier. */
:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 {
  margin: 0 0 .4em;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 800;
  /* L'allemand compose des mots de vingt-cinq lettres (« Gemeinschaftsgarten »,
     « Nachbarschaftshilfe ») : sans césure, ils débordent d'un titre à 320 px. */
  hyphens: auto;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 750; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: min(100% - (2 * var(--gutter)), var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - (2 * var(--gutter)), var(--wrap-narrow)); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Le lien d'évitement : invisible jusqu'au focus, puis franchement visible. */
.skip {
  position: absolute; inset-inline-start: var(--gutter); top: -100px;
  z-index: 100; padding: 12px 18px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-primary);
  box-shadow: var(--sh-2); font-weight: 700;
  transition: top var(--t-page) var(--ease);
}
.skip:focus { top: 12px; }

/* ── En-tête ─────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}
@supports not (backdrop-filter: blur(1px)) {
  /* Sans flou, la transparence rendrait le texte illisible par-dessus une
     carte : on repasse en fond opaque plutôt qu'en fond translucide. */
  .site-header { background: var(--bg); }
}

.site-header > .wrap {
  display: flex; align-items: center; gap: 14px;
  min-height: 66px; padding-block: 10px;
}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand svg, .brand img { width: 30px; height: 30px; }

/* ⚠️ `flex-shrink: 0` n'est pas décoratif. Les deux enveloppes du logo sont
   des `<span>` sans largeur propre dans un conteneur flex : à 320 px, le flex
   les comprimait à zéro et **le symbole disparaissait purement et simplement**
   — le site s'affichait avec le seul mot « meetDo », sur la largeur où la
   marque compte le plus. Défaut trouvé en capture, pas en relisant le HTML. */
.brand .logo-light, .brand .logo-dark { flex: 0 0 30px; line-height: 0; }
.brand span { font-size: 1.125rem; color: var(--text-primary); }

.site-nav { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.site-nav a {
  padding: 9px 12px; border-radius: var(--r-pill);
  color: var(--text-secondary); font-size: var(--fs-small); font-weight: 650;
  white-space: nowrap;
  transition: background var(--t-page) var(--ease), color var(--t-page) var(--ease);
}
.site-nav a:hover { background: var(--violet-tint); color: var(--violet-cta-end); text-decoration: none; }
.site-nav a[aria-current="page"] { background: var(--violet-tint-strong); color: var(--violet-cta-end); }

/* ⚠️ LA SPÉCIFICITÉ, ET UN DÉFAUT QUI NE SE VOYAIT QU'EN MODE CLAIR.
   `.site-nav a` (0,2,0) l'emporte sur `.btn` (0,1,0) : le bouton d'appel à
   l'action de la barre héritait donc de `--text-secondary` au lieu du blanc.
   En mode sombre `--text-secondary` est clair, donc le bouton paraissait
   correct ; en mode clair son texte était **gris sur violet**, sur le seul
   bouton que le site veut faire cliquer. D'où cette règle, et d'où
   l'importance de relire les deux thèmes en capture. */
.site-nav a.btn { color: #fff; }
.site-nav a.btn:hover { color: #fff; background: var(--grad-violet-cta); }

.header-tools { display: flex; align-items: center; gap: 8px; }

.lang-switch { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: var(--bg-2); }
.lang-switch a {
  padding: 5px 9px; border-radius: var(--r-pill);
  font-size: var(--fs-caption); font-weight: 750; text-transform: uppercase;
  color: var(--text-tertiary); letter-spacing: .02em;
}
.lang-switch a[aria-current="true"] { background: var(--surface); color: var(--violet-cta-end); box-shadow: var(--sh-1); }
.lang-switch a:hover { text-decoration: none; color: var(--text-primary); }

.icon-btn {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text-secondary);
  font-size: 1rem; cursor: pointer;
  transition: transform var(--t-page) var(--ease), border-color var(--t-page) var(--ease);
}
.icon-btn:hover { transform: translateY(-1px); border-color: var(--border-strong); }

/* Le menu se replie sous 900 px. `:has()` n'est pas requis : la case est
   masquée et la navigation commandée par l'attribut `data-open` posé en JS,
   avec un repli sans JS — la navigation reste alors simplement visible. */
/* ── La barre aux largeurs extrêmes ───────────────────────────────────────
   À 320 px — la borne basse que cherche le harnais responsive du dépôt
   Flutter, et la largeur d'un iPhone SE en texte agrandi — la rangée
   symbole + « meetDo » + trois langues + thème + menu dépasse de 29 px.
   Le mot part, le symbole reste : c'est lui qui identifie le site, et le nom
   est de toute façon répété dans le titre de la page et le pied. */
@media (max-width: 380px) {
  .brand span:not([class]) { display: none; }
  .lang-switch a { padding: 5px 7px; }
  .site-header > .wrap { gap: 8px; }
}

.nav-toggle { display: none; }
@media (max-width: 900px) {
  .nav-toggle { display: grid; }
  .site-nav {
    position: fixed; inset: 66px 0 auto; flex-direction: column; align-items: stretch;
    gap: 2px; padding: 14px var(--gutter) 22px;
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: var(--sh-3);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity var(--t-page) var(--ease), transform var(--t-page) var(--ease);
  }
  .site-nav a { padding: 13px 14px; font-size: var(--fs-body); }
  body[data-nav="open"] .site-nav { transform: none; opacity: 1; pointer-events: auto; }
  /* Sans JavaScript, `data-nav` n'existe jamais : la barre resterait
     inatteignable. La règle ci-dessous la rend statique dans ce cas. */
  html.no-js .site-nav { position: static; inset: auto; opacity: 1; transform: none;
    pointer-events: auto; box-shadow: none; padding: 0; background: none; border: 0;
    flex-direction: row; overflow-x: auto; }
}

/* ── Sections ────────────────────────────────────────────────────────────── */

section { padding-block: clamp(48px, 7vw, 92px); }
section.tint { background: color-mix(in srgb, var(--violet) 5%, var(--bg)); }
@supports not (background: color-mix(in srgb, red 10%, white)) {
  section.tint { background: var(--bg-2); }
}

.head { max-width: 62ch; margin-bottom: clamp(24px, 3vw, 40px); }
.head.center { margin-inline: auto; text-align: center; }
.kicker {
  display: inline-block; margin-bottom: 12px;
  font-size: var(--fs-overline); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--violet-cta-end);
}
.lede { font-size: var(--fs-lead); color: var(--text-secondary); line-height: 1.55; }

/* ── Grilles ─────────────────────────────────────────────────────────────── */

.grid { display: grid; gap: clamp(14px, 1.6vw, 22px); }
.grid.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

/* ── Cartes ──────────────────────────────────────────────────────────────── */

.card {
  padding: clamp(18px, 2vw, 26px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform var(--t-element) var(--ease), box-shadow var(--t-element) var(--ease);
}
.card h3 { margin-bottom: .35em; }
.card p { color: var(--text-secondary); font-size: var(--fs-small); }
.card p:last-child { margin-bottom: 0; }

/* Une carte n'est surélevée que si elle est cliquable — une carte inerte qui
   se soulève au survol promet une action qui n'existe pas. */
a.card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); text-decoration: none; }
a.card { display: block; color: inherit; }
a.card h3 { color: var(--text-primary); }

/* La pastille d'accent. `--accent` est posé en ligne par le gabarit, à partir
   de `data/activities.php` : c'est la seule couleur qu'un gabarit écrit, et
   elle vient toujours de la palette catégorielle Aurora. */
.ic {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 14px;
  border-radius: var(--r-md);
  font-size: 1.35rem; line-height: 1;
  background: linear-gradient(135deg, var(--accent, var(--violet)), var(--accent-2, var(--violet-dark)));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent, var(--violet)) 34%, transparent);
}

/* ── Boutons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 13px 24px;
  border: 0; border-radius: var(--r-pill);
  font: 650 var(--fs-body)/1 var(--font);
  color: #fff; background: var(--grad-violet-cta);
  box-shadow: var(--sh-violet);
  cursor: pointer; text-align: center;
  transition: transform var(--t-element) var(--ease-back), box-shadow var(--t-element) var(--ease);
}
.btn:hover { transform: translateY(-2px); text-decoration: none; color: #fff; }
.btn:active { transform: translateY(0); }

.btn.ghost {
  color: var(--text-primary); background: var(--surface);
  border: 1px solid var(--border-strong); box-shadow: var(--sh-1);
}
.btn.ghost:hover { color: var(--text-primary); border-color: var(--violet); }

.btn[aria-disabled="true"] {
  background: var(--bg-2); color: var(--text-tertiary);
  box-shadow: none; cursor: not-allowed; pointer-events: none;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 22px; }

/* ── Pastilles et étiquettes ─────────────────────────────────────────────── */

.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border);
  font-size: var(--fs-caption); font-weight: 650; color: var(--text-secondary);
  box-shadow: var(--sh-1);
}
a.pill:hover { border-color: var(--violet); color: var(--violet-cta-end); text-decoration: none; }
.pill em { font-style: normal; font-size: 1rem; }

.tag {
  display: inline-block; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--violet-tint); color: var(--violet-cta-end);
  font-size: var(--fs-caption); font-weight: 700;
}
.tag.mint { background: var(--success-tint); color: var(--success-text); }
.tag.amber { background: var(--warning-tint); color: var(--warning-text); }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero { padding-block: clamp(40px, 6vw, 84px) clamp(48px, 7vw, 92px); }
.hero h1 { font-size: var(--fs-display); max-width: 20ch; }
.hero .g {
  background: var(--grad-hero);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Un navigateur sans `background-clip: text` rendrait un titre invisible —
   le pire défaut possible sur la première ligne du site. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero .g { -webkit-text-fill-color: currentColor; color: var(--violet-cta-end); background: none; }
}
.hero .lede { max-width: 56ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border);
  font-size: var(--fs-caption); font-weight: 650; color: var(--text-secondary);
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mint); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mint) 24%, transparent);
}
.note { font-size: var(--fs-caption); color: var(--text-tertiary); }

/* ── Étapes numérotées ───────────────────────────────────────────────────── */

.steps { counter-reset: etape; }
.steps .card { position: relative; padding-top: 30px; }
.steps .card::before {
  counter-increment: etape; content: counter(etape);
  position: absolute; top: -14px; inset-inline-start: clamp(18px, 2vw, 26px);
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--grad-violet-cta); color: #fff;
  font-weight: 800; font-size: var(--fs-small);
  box-shadow: var(--sh-violet);
}

/* ── Liste de définitions (le refus, la confiance) ───────────────────────── */

.stack { display: grid; gap: 12px; }
.stack .row {
  display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start;
  padding: 16px 18px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
}
.stack .row .mark {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--error-tint); color: var(--error-text); font-weight: 800; font-size: var(--fs-small);
}
.stack .row.oui .mark { background: var(--success-tint); color: var(--success-text); }
.stack .row b { display: block; margin-bottom: 3px; }
.stack .row p { margin: 0; font-size: var(--fs-small); color: var(--text-secondary); }

/* ── Fil d'Ariane ────────────────────────────────────────────────────────── */

.breadcrumb { padding-block: 18px 0; font-size: var(--fs-caption); color: var(--text-tertiary); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li + li::before { content: "›"; margin-inline-end: 8px; color: var(--border-strong); }
.breadcrumb a { color: var(--text-secondary); }

/* ── Questions ───────────────────────────────────────────────────────────── */

details.faq {
  padding: 4px 18px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
}
details.faq + details.faq { margin-top: 10px; }
details.faq summary {
  padding: 15px 0; font-weight: 700; cursor: pointer;
  list-style: none; display: flex; gap: 12px; align-items: baseline;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; margin-inline-start: auto; color: var(--violet-cta-end);
  font-weight: 800; font-size: 1.2rem; line-height: 1;
}
details.faq[open] summary::after { content: "−"; }
details.faq > p { padding-bottom: 16px; margin: 0; color: var(--text-secondary); font-size: var(--fs-small); }

/* ── Pied de page ────────────────────────────────────────────────────────── */

.site-footer {
  padding-block: clamp(40px, 5vw, 64px) 28px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--violet) 4%, var(--bg));
  font-size: var(--fs-small);
}
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .site-footer { background: var(--bg-2); }
}
.site-footer .cols {
  display: grid; gap: clamp(22px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  margin-bottom: 30px;
}
.site-footer h4 {
  margin-bottom: 12px; font-size: var(--fs-overline); font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-tertiary);
}
.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.site-footer a { color: var(--text-secondary); }
.site-footer a:hover { color: var(--violet-cta-end); }
.site-footer .bar {
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between;
  padding-top: 22px; border-top: 1px solid var(--border);
  color: var(--text-tertiary); font-size: var(--fs-caption);
}

/* ── Bandeau final ───────────────────────────────────────────────────────── */

.closer {
  padding: clamp(32px, 4vw, 54px);
  border-radius: var(--r-xl);
  background: var(--grad-hero);
  color: #fff; text-align: center;
  box-shadow: var(--sh-3);
}
.closer h2 { color: #fff; }
.closer p { color: color-mix(in srgb, #fff 88%, transparent); font-size: var(--fs-lead); }
.closer .btn { background: #fff; color: var(--violet-cta-end); box-shadow: var(--sh-2); }
.closer .btn:hover { color: var(--violet-cta-end); }
.closer .cta-row { justify-content: center; margin-bottom: 0; }

/* ── Apparitions ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--t-pop) var(--ease), transform var(--t-pop) var(--ease); }
  .reveal.seen { opacity: 1; transform: none; }
  /* Sans JavaScript, `.seen` n'est jamais posé : le contenu resterait
     invisible. C'est le défaut classique de ce procédé, et la règle
     ci-dessous l'annule. */
  html.no-js .reveal { opacity: 1; transform: none; }
}

/* ── Impression ──────────────────────────────────────────────────────────── */

@media print {
  .site-header, .site-footer, .closer, .cta-row, .skip { display: none; }
  body { background: #fff; color: #000; }
  .card { border: 1px solid #ccc; box-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ── Réel contre virtuel ──────────────────────────────────────────────────
   Les deux colonnes de la section « Physical Social Network ».

   POURQUOI PAS UN TABLEAU
   -----------------------
   Ce n'est pas de la donnée tabulaire : il n'y a pas de correspondance
   ligne à ligne à lire dans les deux sens, seulement deux listes qu'on
   oppose. Un `<table>` obligerait un lecteur d'écran à annoncer « colonne 1,
   ligne 3 » pour une phrase qui se lit seule. Deux listes le disent mieux.

   ⚠️ La colonne « virtuel » n'est PAS barrée en CSS mais en contenu : le
   `text-decoration: line-through` sur une phrase entière est annoncé par
   certains lecteurs d'écran et pas par d'autres, donc la moitié des
   utilisateurs lirait l'inverse du message. C'est la teinte et l'icône qui
   portent l'opposition, et les titres de colonne qui la nomment
   explicitement — ce qui marche pour tout le monde. */

.versus {
  display: grid;
  gap: clamp(14px, 1.6vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.versus-col {
  padding: clamp(18px, 2vw, 26px);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--sh-1);
}

.versus-col h3 {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-small); font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}

.versus-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.versus-col li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
  font-size: var(--fs-small);
}
.versus-col li::before {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  font-size: var(--fs-caption); font-weight: 800;
}

/* La colonne « ordinaire » : teinte éteinte, texte secondaire. */
.versus-col.virtuel { background: var(--bg-2); border-style: dashed; box-shadow: none; }
.versus-col.virtuel h3 { color: var(--text-tertiary); }
.versus-col.virtuel li { color: var(--text-tertiary); }
.versus-col.virtuel li::before { content: "○"; background: transparent; color: var(--text-tertiary); }

/* La colonne meetDo : teinte de marque, texte plein. */
.versus-col.reel { border-color: color-mix(in srgb, var(--violet) 40%, var(--border)); }
.versus-col.reel h3 { color: var(--violet-cta-end); }
.versus-col.reel li::before { content: "✓"; background: var(--success-tint); color: var(--success-text); }

@supports not (border-color: color-mix(in srgb, red 40%, blue)) {
  .versus-col.reel { border-color: var(--violet-light); }
}

/* ── Les deux variantes du logo ───────────────────────────────────────────
   Les fichiers officiels existent en deux versions — `meetdo-symbol.svg`
   (fond sombre : halo, anneau, étincelle blanc rosé) et
   `meetdo-symbol-light.svg` (fond clair : pas de halo, étincelle violette,
   parce que « le blanc rosé de la variante sombre disparaîtrait sur le canvas
   clair », dit le commentaire du fichier).

   L'application choisit d'après `Theme.of(context).brightness`
   (`aurora_logo.dart:160`). Le site doit faire pareil, et les deux sont donc
   inlinés dans la page, l'une masquée. C'est douze lignes de SVG en trop dans
   le HTML — moins cher qu'une requête, et surtout sans clignotement : une
   bascule en JavaScript ferait apparaître le mauvais logo pendant le premier
   rendu, exactement le défaut que le script de thème en ligne évite.

   Les trois sélecteurs suivent la même logique qu'`aurora.css` : préférence
   système, puis choix explicite, et le `:not([data-theme="light"])` protège
   le choix « clair » sur une machine réglée en sombre. */

.logo-dark { display: none; }
.logo-light { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-dark { display: block; }
  :root:not([data-theme="light"]) .logo-light { display: none; }
}

:root[data-theme="dark"] .logo-dark { display: block; }
:root[data-theme="dark"] .logo-light { display: none; }