/* ─────────────────────────────────────────────────────────────────────────
   Feuille de style du site — lue par tool/build_site.js et écrite telle
   quelle dans site/style.<empreinte>.css.

   Direction « Almanach des prénoms » (refonte D3, octobre 2026) : archétype
   Editorial Minimalism du kit ux-ui-agent-skills, maquette de référence dans
   design-system/prenom-bebe/proposition-editoriale/.

   - Le prénom est le héros typographique (Fraunces, auto-hébergée).
   - Filets et blancs séparent les blocs ; pas d'ombre sur chaque boîte.
   - Un seul accent, le framboise de l'application (lib/core/theme/app_theme.dart) :
     la continuité site → fiche Play → appli sert l'intention d'installation.

   Contrastes mesurés (WCAG 2.2) : toutes les paires texte ≥ 4,8:1, en clair
   comme en sombre.
   ───────────────────────────────────────────────────────────────────────── */

/* Fraunces variable (axes graisse + taille optique), sous-ensemble latin,
   copiée depuis @fontsource-variable/fraunces par build_site.js. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/fraunces-latin-opsz-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/fraunces-latin-opsz-italic.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper: #faf5ef;          /* fond de page, papier chaud */
  --paper-raised: #fffcf8;   /* liste de résultats, menu */
  --paper-sunken: #f3ebe2;   /* bandeau appli, encart */
  --ink: #1e1a18;            /* 15,9:1 sur paper */
  --ink-muted: #6a5f59;      /* 5,7:1 sur paper, 5,2:1 sur sunken */
  --rule: #e6dad0;
  --rule-strong: #cbbcb0;
  --accent: #b8344d;         /* 5,3:1 sur paper, 4,9:1 sur sunken */
  --accent-soft: #f8e7e6;    /* accent dessus : 4,8:1 */
  --on-accent: #fffaf6;      /* 5,6:1 sur accent */

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", sans-serif;

  --s-1: 4px; --s-2: 8px; --s-3: 16px; --s-4: 24px;
  --s-5: 40px; --s-6: 72px; --s-7: 128px;

  --r-s: 10px; --r-m: 16px; --r-pill: 999px;

  /* Une seule élévation, pour ce qui flotte (résultats, menu). */
  --raise: 0 2px 16px rgba(30, 26, 24, 0.07);
  --dur-fast: 160ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --measure: 65ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #15110f;        /* ink 15,9:1, muted 7,0:1, accent 7,4:1 */
    --paper-raised: #1f1916;
    --paper-sunken: #1f1916; /* muted 6,5:1, accent 6,8:1 */
    --ink: #f2ebe5;
    --ink-muted: #a99b93;
    --rule: #2f2723;
    --rule-strong: #4a3e38;
    --accent: #f08098;
    --accent-soft: #2a1b1e;  /* accent dessus : 6,5:1 */
    --on-accent: #1a1011;    /* 7,3:1 sur accent */
    --raise: 0 2px 16px rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, html { overflow-x: clip; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: transparent; }

/* Ne jamais retirer l'anneau de focus : règle d'accessibilité prioritaire. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 1180px; margin: 0 auto; padding-inline: var(--s-4); }
@media (max-width: 640px) { .wrap { padding-inline: var(--s-3); } }

/* Intitulés en petites capitales espacées : jamais de pastille colorée. */
.kicker {
  display: block; font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 600;
  margin: 0 0 var(--s-3);
}

/* ── Typographie de base (pages de liste, confidentialité, 404) ────────── */
h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.04;
  letter-spacing: -0.03em; margin: var(--s-5) 0 var(--s-3); max-width: 20ch;
  font-variation-settings: "opsz" 144;
}
h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem); line-height: 1.15;
  letter-spacing: -0.02em; margin: var(--s-6) 0 var(--s-3); max-width: 30ch;
}
h3 {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: 1.3rem; margin: 0 0 var(--s-3); color: var(--ink-muted);
}
p, main > ul, main > ol { max-width: var(--measure); }
.lede { color: var(--ink-muted); font-size: 1.1rem; margin: 0 0 var(--s-4); max-width: 56ch; }

/* ── En-tête ────────────────────────────────────────────────────────────── */
.top { border-bottom: 1px solid var(--rule); position: relative; z-index: 40; }
.top .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); min-height: 64px;
}
.brand {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 600;
  color: var(--ink); text-decoration: none; letter-spacing: -0.01em;
  /* Cible tactile de 44 px : le lien de marque est le plus utilisé du site. */
  display: inline-flex; align-items: center; min-height: 44px;
}
.brand i { margin-left: 0.18em; font-style: italic; font-weight: 400; color: var(--accent); }
.nav { display: flex; gap: var(--s-1); }
.nav a {
  color: var(--ink); text-decoration: none; font-size: 0.93rem;
  padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* Menu mobile sans JavaScript : un <details> natif, clavier et lecteur
   d'écran compris. Masqué au-dessus de 720 px, où la barre suffit. */
.menu { display: none; position: relative; }
.menu summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: var(--s-2); min-height: 44px; padding: 0 var(--s-2);
  font-size: 0.93rem; font-weight: 600; color: var(--ink);
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 22px; height: 22px; }
.menu .nav {
  position: absolute; right: 0; top: calc(100% + var(--s-2));
  flex-direction: column; min-width: 200px; padding: var(--s-2);
  background: var(--paper-raised); border: 1px solid var(--rule);
  border-radius: var(--r-m); box-shadow: var(--raise);
}
.menu .nav a { border-bottom: 0; border-radius: var(--r-s); padding-inline: var(--s-3); }
.menu .nav a:hover { background: var(--accent-soft); }
@media (max-width: 720px) {
  .top > .wrap > .nav { display: none; }
  .menu { display: block; }
}

/* ── Boutons et liens d'action ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 52px;
  padding: 14px 26px; border-radius: var(--r-pill); font-weight: 600; font-size: 1rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast),
    transform var(--dur-fast) var(--ease-out);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: scale(0.98); }
.more {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px;
  font-weight: 600; color: var(--accent); text-decoration: none;
}
.more svg { width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-out); }
.more:hover svg { transform: translateX(3px); }

/* ── Recherche : champ souligné, sans boîte ni ombre ───────────────────── */
.search { position: relative; max-width: 560px; }
.search-field {
  display: flex; align-items: center; gap: var(--s-3);
  border-bottom: 2px solid var(--ink); padding-bottom: var(--s-1);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.search-field:focus-within { border-bottom-color: var(--accent); }
.search-field svg { width: 26px; height: 26px; color: var(--ink-muted); flex: none; }
.search-field input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: 400 clamp(1.5rem, 3vw, 2rem) var(--font-display); color: var(--ink);
  min-height: 56px; padding: 0; letter-spacing: -0.01em;
}
.search-field input::placeholder { color: var(--ink-muted); font-style: italic; }
.search-help { font-size: 0.9rem; color: var(--ink-muted); margin: var(--s-2) 0 0; }
.search-results {
  list-style: none; margin: var(--s-2) 0 0; padding: var(--s-1) 0;
  background: var(--paper-raised); border: 1px solid var(--rule);
  border-radius: var(--r-m); box-shadow: var(--raise);
  position: absolute; left: 0; right: 0; z-index: 30; max-height: 380px; overflow-y: auto;
}
.search-results:empty { display: none; }
.search-results a {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: 12px 18px; min-height: 44px; color: var(--ink); text-decoration: none;
}
.search-results a:hover, .search-results a:focus-visible { background: var(--accent-soft); }
.search-results b { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; }
.search-empty { padding: 12px 18px; color: var(--ink-muted); font-size: 0.95rem; }

/* ── Accueil : héros en partage asymétrique 7/5 ────────────────────────── */
.hero {
  display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-6);
  padding-block: var(--s-6); align-items: end;
}
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: var(--s-5); padding-block: var(--s-5); } }
.hero h1 {
  margin: 0 0 var(--s-4); max-width: 13ch;
  font-size: clamp(2.8rem, 7.4vw, 5.6rem); line-height: 1.02; letter-spacing: -0.035em;
}
.hero h1 em { display: block; font-style: italic; font-weight: 400; color: var(--accent); }
.hero .lede { font-size: 1.15rem; max-width: 46ch; margin-bottom: var(--s-5); }

/* Le prénom du jour : un article de dictionnaire, pas une carte. */
.entry { border-top: 2px solid var(--ink); padding-top: var(--s-4); }
.entry .word {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -0.03em;
  margin: 0; color: var(--ink); text-decoration: none;
  font-variation-settings: "opsz" 144;
}
.entry .word:hover { color: var(--accent); }
.entry .gram { margin: var(--s-2) 0 var(--s-3); font-size: 1.05rem; }
.entry .def { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.45; margin: 0 0 var(--s-4); max-width: 34ch; }
.entry dl { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--s-4); margin: 0 0 var(--s-3); font-size: 0.93rem; }
.entry dt { color: var(--ink-muted); }
.entry dd { margin: 0; }

/* ── Bande alphabétique pleine largeur ─────────────────────────────────── */
.alpha { border-block: 1px solid var(--rule); margin-inline: calc(50% - 50vw); }
.alpha ol {
  list-style: none; margin: 0 auto; padding: 0 var(--s-4); max-width: 1180px;
  display: grid; grid-template-columns: repeat(26, 1fr);
}
.alpha a {
  display: flex; align-items: center; justify-content: center; min-height: 64px;
  font-family: var(--font-display); font-size: 1.35rem; color: var(--ink);
  text-decoration: none; transition: color var(--dur-fast), background var(--dur-fast);
}
.alpha a:hover { color: var(--accent); background: var(--accent-soft); }
.alpha span { display: flex; align-items: center; justify-content: center; min-height: 64px; font-family: var(--font-display); font-size: 1.35rem; color: var(--rule-strong); }
@media (max-width: 760px) {
  .alpha ol { grid-template-columns: repeat(9, 1fr); padding-inline: var(--s-3); }
  .alpha a, .alpha span { min-height: 48px; font-size: 1.15rem; }
}

/* ── Sections de l'accueil ─────────────────────────────────────────────── */
.section { padding-block: var(--s-6); }
.section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-2) var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4);
}
.section-head h2 { margin: 0; font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.1; letter-spacing: -0.025em; }

/* Index éditorial : lignes à filets, compte en chiffres de texte. */
.index { list-style: none; margin: 0; padding: 0; max-width: none; border-top: 1px solid var(--rule-strong); }
.index li { border-bottom: 1px solid var(--rule); }
.index a {
  display: grid; grid-template-columns: 4.5rem 1fr minmax(0, 1.4fr) auto;
  align-items: baseline; gap: var(--s-4); padding: var(--s-4) var(--s-2);
  color: var(--ink); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.index a:hover { background: var(--accent-soft); }
.index a:hover .go { transform: translateX(4px); color: var(--accent); }
.index .n { font-family: var(--font-display); font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--accent); }
.index b { font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; letter-spacing: -0.015em; }
.index span { color: var(--ink-muted); }
.index .go { width: 22px; height: 22px; color: var(--ink-muted); transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast); }
@media (max-width: 760px) {
  .index a { grid-template-columns: 3.2rem 1fr auto; gap: var(--s-1) var(--s-3); padding: var(--s-3) 0; }
  .index .n { font-size: 1.5rem; }
  .index b { font-size: 1.3rem; }
  .index span { grid-column: 2 / 3; grid-row: 2; font-size: 0.93rem; }
  .index .go { grid-column: 3; grid-row: 1 / 3; align-self: center; }
}

/* Bandeau appli : pleine largeur, téléphone qui déborde du bloc. */
.app { background: var(--paper-sunken); margin-block: var(--s-5); margin-inline: calc(50% - 50vw); }
.app .wrap {
  display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-6); align-items: center;
  padding-block: var(--s-6);
}
@media (max-width: 860px) { .app .wrap { grid-template-columns: 1fr; gap: var(--s-5); } }
.device {
  width: min(300px, 78vw); justify-self: center; border-radius: 40px;
  border: 9px solid var(--ink); overflow: hidden; background: var(--paper-raised);
  margin-top: calc(-1 * var(--s-7)); box-shadow: var(--raise); transform: rotate(-3deg);
}
@media (max-width: 860px) { .device { margin-top: 0; transform: none; } }
.device img { display: block; width: 100%; height: auto; }
.app h2 { margin: 0 0 var(--s-4); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.06; letter-spacing: -0.03em; max-width: 16ch; }
.app ol { list-style: none; counter-reset: f; margin: 0 0 var(--s-5); padding: 0; max-width: var(--measure); }
.app li { counter-increment: f; display: grid; grid-template-columns: 2.4rem 1fr; padding: var(--s-3) 0; border-top: 1px solid var(--rule-strong); }
.app li::before { content: counter(f, decimal-leading-zero); font-family: var(--font-display); color: var(--accent); font-variant-numeric: tabular-nums; }
.app li b { display: block; font-weight: 600; }
.app li span { color: var(--ink-muted); }

/* ── Classements : grands chiffres, podium mis en avant ────────────────── */
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
@media (max-width: 760px) { .charts { grid-template-columns: 1fr; gap: var(--s-5); } }
.rank { list-style: none; margin: 0; padding: 0; max-width: none; counter-reset: r; border-top: 1px solid var(--rule-strong); }
.rank li { counter-increment: r; border-bottom: 1px solid var(--rule); }
.rank a {
  display: grid; grid-template-columns: 2.6rem 1fr; align-items: baseline; gap: var(--s-3);
  padding: 10px var(--s-2); min-height: 48px; color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-size: 1.2rem;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.rank a::before { content: counter(r); font-variant-numeric: tabular-nums; color: var(--ink-muted); font-size: 1rem; }
.rank li:nth-child(-n+3) a { font-size: 1.9rem; letter-spacing: -0.02em; padding-block: 14px; }
.rank li:nth-child(-n+3) a::before { color: var(--accent); font-size: 1.3rem; }
.rank a:hover { background: var(--accent-soft); color: var(--accent); }

/* ── Pages de liste et hubs : colonnes de mots à filets ────────────────── */
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  column-gap: var(--s-4); list-style: none; margin: 0; padding: 0; max-width: none;
  border-top: 1px solid var(--rule-strong);
}
.grid li { border-bottom: 1px solid var(--rule); }
.grid a {
  display: block; padding: 12px var(--s-2); min-height: 48px;
  font-family: var(--font-display); font-size: 1.2rem; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.grid a:hover { background: var(--accent-soft); color: var(--accent); }
.grid small {
  display: block; font-family: var(--font-body); color: var(--ink-muted);
  font-size: 0.85rem; letter-spacing: 0; margin-top: 2px;
}
/* L'index de A à Z : une lettre-repère par section. */
.letter { font-size: clamp(2.4rem, 5vw, 3.4rem); margin-top: var(--s-6); scroll-margin-top: var(--s-4); }

/* Appel à l'action des pages de liste : encart sobre, sans ombre. */
.cta {
  display: block; margin: var(--s-5) 0; padding: var(--s-4);
  background: var(--paper-sunken); border-radius: var(--r-m);
  border: 1px solid transparent; color: var(--ink); text-decoration: none;
  max-width: 720px; transition: border-color var(--dur-fast);
}
.cta:hover { border-color: var(--accent); }
.cta strong {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: 1.35rem; letter-spacing: -0.01em; margin-bottom: var(--s-1);
}
.cta span { display: block; color: var(--ink-muted); font-size: 0.95rem; }
.cta em { display: inline-block; margin-top: var(--s-2); font-style: normal; font-weight: 600; color: var(--accent); }

/* ════════════════════════════════════════════════════════════════════════
   Fiche prénom : un article de dictionnaire
   ════════════════════════════════════════════════════════════════════════ */
.crumbs { font-size: 0.88rem; color: var(--ink-muted); padding-top: var(--s-4); }
.crumbs a { color: var(--ink-muted); display: inline-flex; align-items: center; min-height: 32px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--rule-strong); }

.name-head { padding-block: var(--s-5); border-bottom: 1px solid var(--rule-strong); }
.name-head h1 {
  margin: 0; max-width: none; overflow-wrap: anywhere;
  font-size: clamp(3.4rem, 14vw, 10rem); line-height: 0.92; letter-spacing: -0.045em;
}
.gram { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--ink-muted); margin: var(--s-3) 0 0; }
.gram a { color: inherit; }
.etym {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.3; letter-spacing: -0.01em;
  margin: var(--s-5) 0 0; max-width: 32ch;
}
.etym::before { content: "« "; color: var(--accent); }
.etym::after { content: " »"; color: var(--accent); }

.name-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-6); padding-block: var(--s-5); }
@media (max-width: 900px) { .name-body { grid-template-columns: 1fr; gap: var(--s-2); } }
.name-body h2 { margin: var(--s-5) 0 var(--s-3); font-size: 1.6rem; }
.name-body > div > h2:first-child, .aside > h2:first-child { margin-top: 0; }
@media (max-width: 900px) { .aside > h2:first-child { margin-top: var(--s-5); } }
.name-body p { margin-top: 0; }

/* Carte d'identité : liste de définitions en deux colonnes, à filets. */
.idcard { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--rule-strong); }
.idcard div { display: flex; justify-content: space-between; gap: var(--s-3); padding: 12px 0; border-bottom: 1px solid var(--rule); }
.idcard div:nth-child(odd) { padding-right: var(--s-4); }
.idcard div:nth-child(even) { padding-left: var(--s-4); border-left: 1px solid var(--rule); }
.idcard dt { color: var(--ink-muted); }
.idcard dd { margin: 0; text-align: right; font-weight: 500; }
@media (max-width: 560px) {
  .idcard { grid-template-columns: 1fr; }
  .idcard div:nth-child(odd) { padding-right: 0; }
  .idcard div:nth-child(even) { padding-left: 0; border-left: 0; }
}

.notes { margin: 0; padding: 0; list-style: none; max-width: var(--measure); }
.notes li { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.notes strong {
  display: block; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: var(--s-1);
}

/* Prénoms proches et graphies : des mots, pas une grille de boîtes. */
.words { list-style: none; margin: 0; padding: 0; max-width: none; display: flex; flex-wrap: wrap; gap: 0 var(--s-4); }
.words a {
  display: inline-flex; align-items: center; min-height: 48px;
  font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.words a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tags a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px;
  border: 1px solid var(--rule-strong); border-radius: var(--r-pill);
  color: var(--ink); text-decoration: none; font-size: 0.93rem;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.tags a:hover { border-color: var(--accent); color: var(--accent); }

/* Colonne latérale : popularité en chiffres, puis l'appli. */
.aside { align-self: start; position: sticky; top: var(--s-4); }
@media (max-width: 900px) { .aside { position: static; } }
.ranks { list-style: none; margin: 0 0 var(--s-5); padding: 0; border-top: 2px solid var(--ink); }
.ranks li { display: grid; grid-template-columns: 5.5rem 1fr; align-items: baseline; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.ranks .num {
  font-family: var(--font-display); font-size: 2.6rem; line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums;
}
.ranks .num sup { font-size: 0.4em; vertical-align: 1.2em; margin-left: 1px; }
.ranks li:first-child .num { color: var(--accent); }
.ranks span { color: var(--ink-muted); font-size: 0.95rem; }
.ranks span b { color: var(--ink); font-weight: 600; display: block; font-size: 1rem; }

.plug { background: var(--paper-sunken); border-radius: var(--r-m); padding: var(--s-4); }
.plug p { margin: 0 0 var(--s-3); }
.plug .big { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.25; letter-spacing: -0.01em; }
.plug .small { color: var(--ink-muted); font-size: 0.93rem; }

/* ── Pied de page ──────────────────────────────────────────────────────── */
.foot { border-top: 2px solid var(--ink); margin-top: var(--s-6); padding-block: var(--s-5) var(--s-6); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); list-style: none; margin: 0 0 var(--s-5); padding: 0; max-width: none; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr 1fr; } }
.facts b {
  display: block; font-family: var(--font-display); font-weight: 500; font-size: 2.4rem;
  line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.facts span { color: var(--ink-muted); font-size: 0.92rem; }
.foot p { color: var(--ink-muted); font-size: 0.9rem; margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .device { transform: none; }
}

/* Fiche prénom : bouton « Partager ce prénom » (tool/site_partage.js). */
.pt-partage{margin:0 0 var(--s-5)}
.pt-partage .btn{font-family:inherit;background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.pt-partage .btn:hover{border-color:var(--accent);color:var(--accent)}
.pt-statut{min-height:1.6rem;color:var(--ink-muted);font-size:0.93rem;margin:var(--s-1) 0 0}