/* Styles propres à Grèce antique, par-dessus assets/css/app.css.

   Parti pris : c'est une appli de LECTURE. Tout le reste — barre, sommaire,
   filtres — se range dès qu'on ouvre un récit, et la colonne de texte reste
   seule, à une largeur qui se lit sans fatigue.

   Deux polices s'ajoutent à Manrope, et uniquement pour l'identité de cette
   appli : Cinzel pour les titres, dessiné pour les capitales romaines — les
   titres du recueil sont tous en capitales, ils tombent juste — et EB Garamond
   pour le corps des récits, une garalde faite pour les longs textes. Manrope
   reste la police de l'interface, comme partout ailleurs dans le hub.

   L'accent terre cuite remplace le lilas du hub sur cette appli seulement.
   Ses couleurs ne sont pas ici : chaque thème a son fichier, sur le modèle de
   CarbuRadar — themes/light/light.css et themes/dark/dark.css, avec leurs
   relevés de contraste.                                                       */

:root {
  --titre: Cinzel, 'Trajan Pro', Georgia, 'Times New Roman', serif;
  --lire: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;

  --pile: 1.5rem;
  --pile-serree: 0.75rem;
  --colonne: 34rem;           /* largeur de lecture confortable */
}

a.btn, a.btn:hover { text-decoration: none; }

/* ------------------------------------------------------------ accessibilité */

.saut {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: 0.6rem 1rem;
  border-radius: 0 0 12px 0;
  background: var(--brand-fill);
  color: var(--brand-ink);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

.saut:focus { left: 0; }

#contenu:focus { outline: none; }

/* ------------------------------------------------------------------ en-tête

   Collée en haut : dans une appli où l'on fait défiler beaucoup, le retour au
   sommaire doit rester à portée de pouce. Le retrait système (encoche, barre
   d'état) passe par env(), sinon le titre se glisse dessous sur téléphone.   */

.barre {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

/* Le filet court sur toute la largeur de l'écran, le contenu reste dans la
   colonne : même découpage que la topbar du hub. */
.barre__dedans {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: calc(env(safe-area-inset-top, 0px) + 0.625rem)
           calc(env(safe-area-inset-right, 0px) + var(--gutter))
           0.625rem
           calc(env(safe-area-inset-left, 0px) + var(--gutter));
}

.barre__marque { flex: 0 0 auto; display: block; border-radius: 10px; line-height: 0; }
.barre__marque:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.barre__icone { width: 2.125rem; height: 2.125rem; border-radius: 10px; }

.barre h1 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--titre);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------- le dépliant */

.voile {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(10, 8, 18, 0.5);
  backdrop-filter: blur(2px);
  animation: fondu 0.18s ease;
}

.voile[hidden] { display: none !important; }

@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }

.depliant {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 41;
  width: min(20rem, 86vw);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  translate: -102% 0;
  transition: translate 0.24s cubic-bezier(0.22, 0.8, 0.3, 1);
}

.depliant.est-ouvert { translate: 0 0; }

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

.depliant__tete {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: calc(env(safe-area-inset-top, 0px) + 0.875rem) 0.875rem 0.75rem 1.125rem;
  border-bottom: 1px solid var(--line);
}

/* Le retour au menu principal : le seul lien au-dessus du sommaire. Le choix
   de la section se fait sur le menu, jamais dans le dépliant. */
.depliant__menu {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2.5rem;
  padding: 0 0.625rem 0 0.375rem;
  margin-left: -0.375rem;
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.depliant__menu svg { width: 1.125rem; height: 1.125rem; color: var(--brand); flex: 0 0 auto; }
.depliant__menu:active { background: var(--surface-2); }

@media (hover: hover) {
  .depliant__menu:hover { color: var(--brand); }
}

.depliant__corps {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.875rem 0.75rem 1rem;
}

.depliant__pied {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.625rem 1.125rem calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
  border-top: 1px solid var(--line);
}

.depliant__pied a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.depliant__pied a:hover { color: var(--brand); }

.depliant h2 {
  margin: 1.25rem 0 0.5rem;
  padding: 0 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.depliant h2:first-child { margin-top: 0; }

.lien {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.625rem 0.625rem;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.lien svg { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; color: var(--ink-2); }
.lien__texte { flex: 1 1 auto; min-width: 0; }
.lien__sous { display: block; font-size: 0.75rem; color: var(--ink-2); }

.lien__compte {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.lien.est-actif { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.lien.est-actif svg { color: var(--brand); }
.lien:active { background: var(--surface-2); }

@media (hover: hover) {
  .lien:hover { background: var(--surface-2); }
  .lien.est-actif:hover { background: var(--brand-soft); }
}

.lien--rayon { padding-left: 0.75rem; }

.lien--rayon .puce {
  width: 0.5rem;
  height: 0.5rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--teinte, var(--accent));
}

.lien--chantier { color: var(--ink-2); }

.balise {
  flex: 0 0 auto;
  padding: 0.0625rem 0.4375rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ bandeau */

.hero { margin: 1.5rem 0 var(--pile); }

.hero__eyebrow {
  margin: 0 0 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
}

.hero h2 {
  margin: 0 0 0.5rem;
  max-width: 22ch;
  font-family: var(--titre);
  font-size: clamp(1.5rem, 7vw, 2rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: 0.005em;
}

.hero__lede {
  margin: 0 0 1rem;
  max-width: var(--colonne);
  font-family: var(--lire);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.hero__lede em { font-style: italic; }

/* --------------------------------------------------------------- avancement */

.jauge {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 var(--pile);
  padding: 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Deux lignes franches plutôt qu'un flex qui se replie au petit bonheur : la
   progression d'un côté, les deux entrées dans la lecture de l'autre. */
.jauge__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }

.jauge__titre {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.est-achevee .jauge__titre { color: var(--brand); }
.est-achevee .jauge__part { background: var(--brand); }

.jauge__mot {
  margin: -0.125rem 0 0;
  font-family: var(--lire);
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--ink-2);
}

/* Destructif et rare : un lien discret, pas un troisième bouton. La
   confirmation fait le reste. */
.jauge__raz {
  justify-self: end;
  min-height: 2rem;
  padding: 0 0.25rem;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}

.jauge__raz:hover { color: var(--brand); text-decoration-color: var(--brand); }
.jauge__boutons { display: flex; gap: 0.5rem; }
.jauge__boutons .btn { flex: 1 1 auto; min-height: 2.75rem; }

.jauge__barre {
  flex: 1 1 auto;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.jauge__part {
  height: 100%;
  border-radius: 999px;
  background: var(--brand-fill);
  transition: width 0.3s ease;
}

.jauge__chiffre {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}


/* ------------------------------------------------------------ la recherche */

.chercher { margin: 0 0 var(--pile-serree); }

.chercher .search { margin: 0 0 0.625rem; }

.portees {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  min-height: 2rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip.est-actif {
  border-color: transparent;
  background: var(--brand-fill);
  color: var(--brand-ink);
}

.chip:active { transform: scale(0.97); }

@media (hover: hover) {
  .chip:hover { border-color: var(--brand); color: var(--brand); }
  .chip.est-actif:hover { color: var(--brand-ink); border-color: transparent; }
}

/* Le filtre par rayon est replié : douze pastilles ouvertes en permanence
   mangent un écran de téléphone entier avant le premier récit. */
.affiner { border-top: 1px solid var(--line); padding-top: 0.625rem; }

.affiner > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.affiner > summary::-webkit-details-marker { display: none; }
.affiner > summary::after { content: ' ▾'; }
.affiner[open] > summary::after { content: ' ▴'; }
.affiner > summary:hover { color: var(--brand); }
.affiner { margin-bottom: 0.25rem; padding-bottom: 0.375rem; }

.affiner__corps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.75rem;
}

.compte {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--ink-2);
}

.compte b { color: var(--ink); font-variant-numeric: tabular-nums; }

.compte button {
  border: 0;
  background: transparent;
  color: var(--brand);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 0;
}

/* ---------------------------------------------------------------- les rayons */

.rayon { margin: 0 0 1.75rem; scroll-margin-top: 5.5rem; }

.rayon__tete {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
  padding-bottom: 0.4375rem;
  border-bottom: 1px solid var(--line);
}

.rayon__tete h2 {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--titre);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.rayon__sous {
  display: block;
  font-family: var(--lire);
  font-size: 0.9375rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-2);
}

.rayon__compte {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.liste { list-style: none; margin: 0; padding: 0; }

.item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.8125rem 0.5rem 0.8125rem 0.375rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.liste li:last-child .item { border-bottom: 0; }

.item__n {
  flex: 0 0 auto;
  width: 2rem;
  padding-top: 0.0625rem;
  font-family: var(--titre);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

.item__texte { flex: 1 1 auto; min-width: 0; }

.item__sujet {
  display: block;
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.item__accroche {
  display: block;
  margin-top: 0.1875rem;
  font-family: var(--titre);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.045em;
  color: var(--ink-2);
}

.item__extrait {
  display: block;
  margin-top: 0.375rem;
  padding-left: 0.625rem;
  border-left: 2px solid var(--line-strong);
  font-family: var(--lire);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-2);
}

/* En flux normal, pas en flex : dans un conteneur flex, chaque bout de texte
   et chaque <span> devient un élément à part, et l'écart du flex s'insérait
   au milieu de « 351 av. J.-C. », entre le texte et le bloc insécable. */
.item__meta {
  display: block;
  margin-top: 0.375rem;
  line-height: 1.7;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* « Nouveau » : la seule pastille pleine de la liste, pour qu'un récit ajouté
   se repère d'un coup d'œil dans un rayon qu'on croyait connaître. */
.item__nouveau {
  display: inline-block;
  margin-right: 0.125rem;
  padding: 0 0.4375rem;
  line-height: 1.6;
  border-radius: 999px;
  background: var(--brand-fill);
  color: var(--brand-ink);
  letter-spacing: 0.05em;
}

.item__marques { flex: 0 0 auto; display: grid; gap: 0.25rem; padding-top: 0.25rem; }

.item__marques span {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.est-lu .item__marques .lu { background: var(--line-strong); }
.est-favori .item__marques .fav { background: var(--brand); }

.item:active { background: var(--surface-2); }

@media (hover: hover) {
  .item:hover { background: var(--brand-soft); }
  .item:hover .item__sujet { color: var(--brand); }
}

mark {
  border-radius: 3px;
  padding: 0 0.1em;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  color: inherit;
}

/* ------------------------------------------------------------------ le récit

   Le seul écran où la largeur est bridée pour de bon : au-delà d'une
   soixantaine de signes par ligne, l'œil perd le début de la ligne suivante. */

.recit { max-width: var(--colonne); margin: 0 auto; }

.recit__retour { margin: 1rem 0 1.25rem; }

.recit__fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand);
}

.recit__fil span::before { content: '·'; margin-right: 0.5rem; color: var(--line-strong); }
.recit__fil span:first-child::before { content: none; margin: 0; }

.recit h2 {
  margin: 0 0 0.5rem;
  font-family: var(--titre);
  font-size: clamp(1.375rem, 6.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0.01em;
}

.recit__accroche {
  margin: 0 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.05em;
  color: var(--ink-2);
}

.corps {
  font-family: var(--lire);
  font-size: 1.1875rem;
  line-height: 1.68;
  color: var(--ink);
}

.corps p { margin: 0 0 1.125rem; }

/* Chapeau : le premier paragraphe un cran plus grand et à l'encre pleine.
   Un seuil visuel qui dit qu'on quitte l'interface et qu'on entre dans le
   texte — sans lettrine, dont le ::first-letter avalerait le guillemet
   ouvrant des récits qui commencent par une citation. */
.corps > p:first-child { font-size: 1.3125rem; line-height: 1.55; }

.corps b, .corps strong { font-weight: 600; }

.corps ul { list-style: none; margin: 0 0 1.125rem; padding: 0; }

.corps li {
  position: relative;
  margin: 0 0 1rem;
  padding: 0 0 0 1.125rem;
}

.corps li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 1px;
  rotate: 45deg;
  background: var(--brand);
}

.corps li p { margin: 0 0 0.625rem; }
.corps li p:last-child { margin-bottom: 0; }

.etiquette {
  font-family: var(--titre);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--brand);
}

.etiquette::after { content: ' — '; color: var(--ink-2); }
.etiquette--seule::after { content: ' '; }

/* Renvoi « voir n°14 » : cliquable, discret, souligné seulement au survol. */
.renvoi {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 35%, transparent);
}

.renvoi:hover { border-bottom-color: var(--brand); }

.recit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.recit__actions .btn { flex: 1 1 8rem; min-height: 2.75rem; }
.btn.est-actif { background: var(--brand-fill); color: var(--brand-ink); border-color: transparent; }

.voisins {
  display: grid;
  gap: 0.5rem;
  margin-top: 1rem;
}

.voisin {
  display: block;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

.voisin small {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.voisin b {
  display: block;
  margin-top: 0.1875rem;
  font-family: var(--titre);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}

@media (hover: hover) {
  .voisin:hover { border-color: var(--brand); }
  .voisin:hover b { color: var(--brand); }
}

@media (min-width: 30rem) {
  .voisins { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------------ la frise */

.siecle { margin: 0 0 1.75rem; }

.siecle__tete {
  position: sticky;
  top: 3.75rem;
  z-index: 5;
  padding: 0.375rem 0;
  margin-bottom: 0.25rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
  font-family: var(--titre);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--brand);
}

.frise { list-style: none; margin: 0; padding: 0 0 0 0.5rem; }

.frise li {
  position: relative;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid var(--line);
}

.frise li::before {
  content: '';
  position: absolute;
  left: -0.3125rem;
  top: 1.1rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--teinte, var(--accent));
  outline: 3px solid var(--bg);
}

.frise .item { padding-left: 0; border-bottom: 0; }
.frise .item__n { width: auto; min-width: 4.25rem; font-size: 0.8125rem; }

/* ------------------------------------------------------------------- états */

.vide {
  margin: 2rem 0;
  padding: 2rem 1.25rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--ink-2);
}

.vide h3 {
  margin: 0 0 0.375rem;
  font-family: var(--titre);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}

.vide p { margin: 0 auto; max-width: 26rem; font-size: 0.9375rem; }
.vide .btn { margin-top: 1rem; }

/* ---------------------------------------------------------------- à propos */

.prose { max-width: var(--colonne); }

.prose h3 {
  margin: 1.75rem 0 0.5rem;
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.prose p {
  margin: 0 0 0.875rem;
  font-family: var(--lire);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.prose p strong, .prose li strong { color: var(--ink); font-weight: 600; }

.prose ul { margin: 0 0 1rem; padding-left: 1.125rem; }

.prose li {
  margin-bottom: 0.4375rem;
  font-family: var(--lire);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0 0 var(--pile);
  padding: 0;
  list-style: none;
}

.chiffres li { font-size: 0.875rem; color: var(--ink-2); }

.chiffres b {
  display: block;
  font-family: var(--titre);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ la passerelle

   Le pont entre les deux recherches. Elle ne s'affiche que quand la requête est
   le début du nom d'un thème : sans cette condition, elle apparaîtrait sur
   presque toutes les frappes et deviendrait du bruit qu'on apprend à ignorer. */

.passerelle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
  border-radius: var(--radius);
  background: var(--brand-soft);
  color: var(--ink);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

a.passerelle { text-decoration: none; }
.passerelle--nouveau { margin-bottom: var(--pile); }

.passerelle svg { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; color: var(--brand); }
.passerelle__texte { flex: 1 1 auto; }
.passerelle b { color: var(--brand); font-weight: 700; }
.passerelle__fleche { flex: 0 0 auto; color: var(--brand); font-weight: 700; }
.passerelle:active { background: var(--surface-2); }

@media (hover: hover) {
  .passerelle:hover { border-color: var(--brand); }
}

/* ---------------------------------------------------------------- thèmes */

.famille { margin: 0 0 1.5rem; }

.famille__tete {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin-bottom: 0.625rem;
  padding-bottom: 0.4375rem;
  border-bottom: 1px solid var(--line);
}

.famille__tete h2 {
  margin: 0;
  font-family: var(--titre);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.famille__sous { font-size: 0.75rem; color: var(--ink-2); }

/* Les pastilles s'enroulent : douze thèmes sur une ligne qui défile
   horizontalement obligeraient à balayer pour découvrir ce qui existe. */
.themes { display: flex; flex-wrap: wrap; gap: 0.4375rem; }

.theme {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 2.125rem;
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.theme b {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.theme.est-actif { border-color: transparent; background: var(--brand-fill); color: var(--brand-ink); }
.theme.est-actif b { color: var(--brand-ink); opacity: 0.7; }
.theme:active { background: var(--surface-2); }

@media (hover: hover) {
  .theme:hover { border-color: var(--brand); color: var(--brand); }
  .theme:hover b { color: var(--brand); }
}

.recit__themes {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.recit__themes h3 {
  margin: 0 0 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* La pastille de portée « Par thème » porte un pictogramme : il la distingue
   des trois autres, qui cherchent des mots. */
.chip svg { width: 0.875rem; height: 0.875rem; flex: 0 0 auto; }

/* ------------------------------------------------------------ message bref */

.bulle {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
  translate: -50% 0;
  z-index: 50;
  margin: 0;
  max-width: 90vw;
  background: var(--surface);
  box-shadow: var(--shadow-2);
}

/* -------------------------------------------------------- le menu principal

   Une tuile par section. Celle qui a du contenu montre sa barre d'avancement :
   on voit d'un coup d'œil où l'on en est, section par section. Les autres sont
   estompées sans être grisées — elles mènent quelque part, à la page qui dit ce
   qu'elles contiendront.                                                      */

.hero--accueil h2 { max-width: 16ch; }

.tuiles { display: grid; gap: 0.625rem; margin: 0 0 1.5rem; }

.tuile {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 0.9375rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.tuile__icone {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: 0 0 auto;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand);
}

.tuile__icone svg { width: 1.5rem; height: 1.5rem; }

.tuile__corps { flex: 1 1 auto; min-width: 0; display: grid; gap: 0.1875rem; }

.tuile__titre {
  font-family: var(--titre);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

/* Sur la tuile : combien de récits neufs attendent. C'est la première chose
   qu'on voit en ouvrant l'appli après une livraison. */
.tuile__neufs {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0 0.4375rem;
  border-radius: 999px;
  background: var(--brand-fill);
  color: var(--brand-ink);
  font-family: Manrope, system-ui, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.6;
  vertical-align: 0.15em;
}

.tuile__sous { font-size: 0.8125rem; line-height: 1.4; color: var(--ink-2); }

.tuile__avance {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.4375rem;
}

.tuile__avance .jauge__barre { flex: 1 1 auto; height: 0.3125rem; }
.tuile__avance.est-achevee .jauge__part { background: var(--brand); }

.tuile__chiffre {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.tuile__avance.est-achevee .tuile__chiffre { color: var(--brand); }

.tuile__fleche { flex: 0 0 auto; color: var(--brand); font-weight: 700; font-size: 1.125rem; }

.tuile--chantier .tuile__icone { background: var(--surface-2); color: var(--ink-2); }
.tuile--chantier .tuile__titre { color: var(--ink-2); }

.tuile:active { transform: scale(0.99); background: var(--surface-2); }

@media (hover: hover) {
  .tuile:hover { border-color: var(--brand); }
  .tuile:hover .tuile__titre { color: var(--brand); }
}

@media (prefers-reduced-motion: reduce) {
  .tuile, .tuile:active { transition: none; transform: none; }
}

.accueil__liens { margin: 0 0 1.5rem; }

.lien-discret {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.lien-discret svg { width: 1.125rem; height: 1.125rem; }
.lien-discret:hover { color: var(--brand); }

/* ------------------------------------------------------------ confirmation */

.confirmer__titre {
  margin: 0 0 0.5rem;
  font-family: var(--titre);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

/* ------------------------------------------------------------- typographie

   Exposants des ordinaux — XVII<sup>e</sup> siècle, Cléomène I<sup>er</sup> —
   sans toucher à l'interligne : un <sup> brut repousse sa ligne vers le haut. */

sup { font-size: 0.68em; line-height: 0; vertical-align: 0.42em; }

/* Ce qui ne doit jamais se couper en fin de ligne : « J.-C. ». */
.insec { white-space: nowrap; }

/* ---------------------------------------------------------------- panthéon

   Une fiche se lit en deux temps : l'essentiel d'un coup d'œil — filiation,
   unions, enfants, attributs — dans une liste de définitions, puis les mythes
   en texte suivi. Sur téléphone, chaque intitulé passe au-dessus de sa valeur :
   pas de colonnes qui débordent.                                             */

.item--dieu { padding-left: 0.5rem; }

.item__grec {
  margin-left: 0.5rem;
  font-family: var(--lire);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-2);
}

.dieu__grec {
  margin: -0.25rem 0 0.5rem;
  font-family: var(--lire);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--brand);
}

/* L'image de la fiche, venue de Wikipédia. Hauteur bornée : une statue en pied
   est bien plus haute que large, et repoussait le texte hors de l'écran. Le
   cadre garde une hauteur minimale pendant la recherche, pour que le texte ne
   saute pas quand l'image arrive. */
.dieu-image {
  margin: 0 0 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  overflow: hidden;
}

.dieu-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 58svh;
  object-fit: contain;
}

.dieu-image[data-etat="cherche"] { min-height: 9rem; }

.dieu-image__etat {
  margin: 0;
  padding: 1.25rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  text-align: center;
  color: var(--ink-2);
}

.dieu-image[data-etat="cherche"] .dieu-image__etat { padding-top: 3.5rem; }

.dieu-image__source {
  padding: 0.5rem 0.875rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.75rem;
  line-height: 1.4;
}

.dieu-image__source a { color: var(--ink-2); text-decoration-color: var(--line-strong); }

.fiche {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line);
}

.fiche > div { display: grid; gap: 0.375rem; }

.fiche dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.fiche dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  font-family: var(--lire);
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* Une version de la filiation par ligne : parents, précision, source. */
.variante {
  flex: 1 1 100%;
  display: grid;
  gap: 0.25rem;
  padding: 0.5rem 0 0.5rem 0.75rem;
  border-left: 2px solid var(--line-strong);
}

.variante + .variante { margin-top: 0.25rem; }
.variante__qui { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.variante__note { font-style: italic; color: var(--ink-2); }

.variante__source {
  font-family: Manrope, system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-2);
}

.theme--externe {
  border-style: dashed;
  color: var(--ink-2);
  font-weight: 500;
}

/* Un humain : pastille pleine, aux angles presque droits, comme sa case dans l'arbre. */
.theme--humain { border-style: solid; border-radius: 0.25rem; font-style: italic; }

.epicleses, .membres {
  flex: 1 1 100%;
  display: grid;
  gap: 0.3125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.epicleses b { font-weight: 600; color: var(--brand); }

.fiche__titre, .sources h3 {
  margin: 1.75rem 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.sources ul { margin: 0; padding-left: 1.125rem; }

.sources li {
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.romains { list-style: none; margin: 0; padding: 0; }

.romains li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.25rem;
  border-bottom: 1px solid var(--line);
}

.romains a {
  flex: 0 0 auto;
  color: var(--ink);
  font-family: var(--titre);
  font-weight: 600;
  text-decoration: none;
}

.romains a:hover { color: var(--brand); }

.romains span {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--lire);
  font-size: 1.0625rem;
  text-align: right;
  color: var(--ink-2);
}

/* Le médaillon du panthéon : l'initiale grecque, dans la couleur de la
   famille. Il tient la place du numéro des anecdotes. Encre sombre sur
   pastille claire : lisible dans les deux thèmes. */
.item__n--dieu {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  align-self: start;
  border-radius: 50%;
  background: var(--teinte);
  color: #1d1a2b;
  font-family: var(--lire);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1;
}

.rayon[id^="famille-"] .rayon__tete h2 {
  padding-left: 0.625rem;
  border-left: 4px solid var(--teinte);
}

.fiche__arbre { margin: 0.75rem 0 0; }

/* ------------------------------------------------------------------ l'arbre

   Une carte : on s'y déplace et on zoome. De loin, seules les pastilles
   restent ; toucher une divinité éclaire sa lignée et estompe le reste.      */

.arbre__tete { margin: 1.25rem 0 0.75rem; }
.arbre__tete .hero__eyebrow { margin-bottom: 0.625rem; }

.carte {
  position: relative;
  height: calc(100dvh - 16rem);
  min-height: 22rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.carte__svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.carte__svg:active { cursor: grabbing; }
.carte__svg:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.arete { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.arete--variante { stroke-dasharray: 6 6; }

.noeud > rect:first-child { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1; }
.noeud__bande { fill: var(--teinte); }
.noeud--externe > rect:first-child { fill: transparent; stroke-dasharray: 4 4; }
.noeud--externe .noeud__bande { display: none; }
.noeud__nom { fill: var(--ink); font: 600 15px var(--titre); text-anchor: middle; }
.noeud__grec { fill: var(--ink-2); font: 14px var(--lire); text-anchor: middle; }
.noeud--externe .noeud__nom { fill: var(--ink-2); font-weight: 500; }
/* Un humain : case sans fond, trait plein, angles droits, nom en italique. */
.noeud--humain > rect:first-child { fill: transparent; stroke: var(--ink-2); stroke-width: 1.25; }
.noeud--humain .noeud__bande { display: none; }
.noeud--humain .noeud__nom { fill: var(--ink-2); font-weight: 500; font-style: italic; }

.carte--loin text { display: none; }

.carte--focus .noeud { opacity: 0.16; }
.carte--focus .arete { opacity: 0.07; }
.carte--focus .noeud.est-lie, .carte--focus .noeud.est-conjoint { opacity: 1; }
.carte--focus .arete.est-lie { opacity: 1; stroke: var(--brand); stroke-width: 2; }
.noeud.est-conjoint > rect:first-child { stroke: var(--brand); stroke-dasharray: 3 3; stroke-width: 2; }
.noeud.est-choisi > rect:first-child { stroke: var(--brand); stroke-width: 3; stroke-dasharray: none; }

.carte__outils { position: absolute; top: 0.625rem; right: 0.625rem; display: grid; gap: 0.375rem; }

.carte__outils button {
  width: 2.625rem;
  height: 2.625rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
}

.carte__outils button:hover { border-color: var(--brand); color: var(--brand); }

.carte__fiche {
  position: absolute;
  left: 0.625rem;
  right: 0.625rem;
  bottom: 0.625rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.carte__fiche-texte { display: grid; gap: 0.125rem; min-width: 0; }
.carte__fiche-texte b { font-family: var(--titre); font-size: 1.0625rem; }
.carte__fiche-texte span { font-size: 0.8125rem; color: var(--ink-2); }
.carte__fiche-actions { display: flex; gap: 0.5rem; }

.carte__aide { margin: 0.75rem 0; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-2); }

.carte__legende { margin: 0.25rem 0 1.5rem; }
.carte__legende-titre { margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 700; color: var(--ink-2); }
.carte__legende-note { margin: 0 0 0.75rem; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-2); }
.carte__legende summary { cursor: pointer; font-size: 0.8125rem; font-weight: 700; color: var(--ink-2); }
.carte__legende ul { display: grid; gap: 0.375rem; margin: 0 0 0.75rem; padding: 0; list-style: none; }
.carte__legende details ul { margin-top: 0.625rem; }
.carte__legende .case { width: 1.75rem; height: 1.125rem; border-radius: 0.375rem; flex: 0 0 auto; box-sizing: border-box; }
.carte__legende .case--divine { background: var(--surface-2); border: 1px solid var(--line-strong); box-shadow: inset 4px 0 0 var(--brand); }
.carte__legende .case--externe { border: 1.5px dashed var(--ink-2); }
.carte__legende .case--humain { border: 1.25px solid var(--ink-2); border-radius: 0.125rem; }
.carte__legende .trait { width: 1.75rem; flex: 0 0 auto; border-top: 1.5px solid var(--line-strong); }
.carte__legende .trait--variante { border-top-style: dashed; }
.carte__legende li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.carte__legende .puce { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--teinte); flex: 0 0 auto; }
.carte__legende .puce--externe { background: transparent; border: 1.5px dashed var(--ink-2); }

/* Les boutons de la fiche vers l'arbre et le comparateur */
.fiche__arbre { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Une pastille de divinité, avec la couleur de sa famille en point. */
.theme--dieu::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.375rem;
  border-radius: 50%;
  background: var(--teinte);
  flex: 0 0 auto;
}

/* ------------------------------------------------------ l'ordre d'apparition */

.comparateur {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 2rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.comparateur h3 {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.comparateur__suggestions, .comparateur__choisis { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.comparateur__suggestions:empty, .comparateur__choisis:empty { display: none; }
.comparateur__vide { margin: 0; font-size: 0.875rem; color: var(--ink-2); }
.comparateur__exemples { margin: 0; font-size: 0.8125rem; color: var(--ink-2); }
.comparateur__exemples .lien-discret { min-height: 2rem; font-size: 0.8125rem; }

.comparateur__ordre { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }

.comparateur__ordre > li:not(.comparateur__verdict) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 12px;
  border-left: 4px solid var(--teinte);
  background: var(--surface-2);
}

.comparateur__ordre a {
  color: var(--ink);
  font-family: var(--titre);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}

.comparateur__gen {
  display: grid;
  min-width: 4.5rem;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--brand);
}

.comparateur__gen small { font-size: 0.6875rem; font-weight: 600; color: var(--ink-2); }

.comparateur__verdict { margin: 0 0 0 1.75rem; padding: 0.5rem 0 0.5rem 0.875rem; border-left: 2px dashed var(--line-strong); }
.comparateur__verdict p { margin: 0; font-size: 0.875rem; line-height: 1.5; }
.comparateur__nuance { margin-top: 0.375rem !important; font-style: italic; color: var(--brand); }
.comparateur__source { margin-top: 0.25rem !important; font-size: 0.75rem !important; color: var(--ink-2); }

.generation { margin: 0 0 1.75rem; }

.generation__tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin: 0 0 0.75rem;
  padding: 0 0 0.5rem;
  border-bottom: 1px solid var(--line);
}

.generation__tete h2 { margin: 0; font-size: 1.1875rem; }
.generation__rang { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-2); }

@media (min-width: 34rem) {
  .hero__lede { font-size: 1.1875rem; }
  .siecle__tete { top: 4rem; }
}