/* ═══════════════════════════════════════════════════════════════════════════
   Epitome — la feuille de style du site

   Les couleurs sont celles de l'application, reprises de
   `app/src/main/java/com/epitomeapp/ui/theme/Color.kt`. Si la palette change
   la-bas, elle change ici : c'est la meme marque.

   Aucune ressource exterieure. Pas de Google Fonts, pas de CDN, pas de script
   d'analyse. Une page qui explique ce qu'on ne collecte pas ne peut pas se
   permettre d'envoyer l'adresse IP de ses visiteurs a un tiers pour afficher
   une police.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fraunces, la police de l'application. `swap` : le texte s'affiche tout de
   suite dans une serif systeme, et bascule quand les 349 Ko sont arrives.
   Jamais de page blanche en attendant. */
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fraunces.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #FAF8F4;          /* bone white */
  --surface: #F2EDE4;     /* beige sable */
  --outline: #D8D1C3;
  --ink: #1A1916;
  --muted: #4A4740;       /* pierre */
  --soft: #7D786D;        /* gris chaud */
  --accent: #6B7A4F;      /* olive */
  --accent-soft: #E8EBDD;

  /* Ce qu'on ecrit *sur* l'accent, et non a cote. Blanc, comme le `onPrimary`
     de l'application : 4,6 pour 1 sur l'olive, au-dessus du seuil de 4,5.
     `--muted` ou `--ink` poses la-dessus tomberaient sous le seuil. */
  --on-accent: #FFFFFF;
  --accent-hover: #5C6B42;

  /* La meme largeur de lecture que l'application : au-dela de 640, l'oeil
     perd la ligne en revenant a gauche. Voir README, § Conventions. */
  --reading: 640px;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #13110E;        /* warm black */
    --surface: #1C1A15;
    --outline: #35302A;
    --ink: #F5F0E5;
    --muted: #B7B1A2;
    --soft: #7D786D;
    --accent: #93A472;
    --accent-soft: #23271C;

    /* L'olive du mode sombre est eclairci pour rester lisible en texte : du
       blanc pose dessus ne donnerait plus que 2,7 pour 1. C'est donc le fond
       de page qui passe sur le bouton -- 7 pour 1, et le bouton ressort. */
    --on-accent: #13110E;
    --accent-hover: #A6B586;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: var(--reading);
  margin: 0 auto;
  padding: 0 24px;
}

/* ── L'en-tete ─────────────────────────────────────────────────────── */

header.site {
  border-bottom: 1px solid var(--outline);
  padding: 18px 0;
}

header.site .wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 900px;
}

header.site img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

header.site .name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
}

/* Le selecteur de langue, pousse a droite. Incompressible pour la meme raison
   que le bouton : compresse, il empile FR sur EN. */
.lang {
  margin-left: auto;
  font-size: 15px;
  flex: none;
  white-space: nowrap;
}

.lang a {
  color: var(--soft);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
}

.lang a:hover { color: var(--ink); background: var(--surface); }
.lang a[aria-current='true'] { color: var(--ink); background: var(--surface); font-weight: 600; }

/* ── L'accueil ─────────────────────────────────────────────────────── */

.hero {
  text-align: center;
  padding: 72px 0 56px;
}

.hero img.banner {
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--outline);
  margin-bottom: 36px;
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 7vw, 50px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.hero p.tagline {
  font-size: 19px;
  color: var(--muted);
  margin: 0 auto 34px;
  max-width: 30em;
}

/* ── Le bouton du Play Store ───────────────────────────────────────── */

/* Le seul appel a l'action du site, et il remplace l'ancien badge
   « Bientot disponible » : l'application est publiee.

   Dessine plutot qu'importe. Le badge officiel « Disponible sur Google Play »
   est une image servie par Google : la poser ici enverrait l'adresse IP de
   chaque visiteur chez lui, sur la page meme qui explique qu'on ne collecte
   rien -- et `_headers` l'interdit deja (`img-src 'self'`). La fleche
   ci-dessous est un simple telechargement, pas une marque deposee. */
.get {
  /* Sans cela, la hauteur de ligne du corps de page ajoute quelques pixels
     au-dessus et en dessous du bouton, qui est une boite en ligne. */
  line-height: 1;
  margin: 0 0 20px;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 15px 30px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  /* Dans l'en-tete, le bouton est un element flex, donc compressible par
     defaut : sans ces deux lignes il se laisse retrecir et « Play Store »
     passe a la ligne au milieu de la pastille. */
  flex: none;
  white-space: nowrap;
  /* Le doigt vise une cible d'au moins 48 px de haut, comme dans
     l'application. Le remplissage ci-dessus y suffit, mais un plancher
     explicite survit a une retouche de la taille du texte. */
  min-height: 48px;
}

.cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Le contour du clavier ne peut pas etre l'accent : il serait invisible sur le
   bouton, qui en est deja rempli. */
.cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.cta svg {
  width: 19px;
  height: 19px;
  flex: none;
}

/* Le meme bouton, en petit, dans l'en-tete de chaque page. C'est le seul
   endroit qui soit vraiment « en haut » : celui de l'accueil n'arrive qu'apres
   la banniere et le titre, donc sous la ligne de flottaison d'un portable. */
.cta.compact {
  gap: 7px;
  padding: 8px 15px;
  font-size: 15px;
  min-height: 38px;
}

.cta.compact svg { width: 16px; height: 16px; }

/* ── Le corps des pages legales ────────────────────────────────────── */

main { padding: 44px 0 72px; }

h1.page {
  font-family: var(--serif);
  font-size: clamp(30px, 6vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

p.updated {
  color: var(--soft);
  font-size: 15px;
  margin: 0 0 40px;
}

h2 {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 44px 0 12px;
  padding-top: 12px;
  border-top: 1px solid var(--outline);
}

h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 28px 0 8px;
}

p, li { color: var(--muted); }
li { margin-bottom: 8px; }
strong { color: var(--ink); font-weight: 600; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Un encadre pour ce qui compte plus que le reste. */
.note {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 24px 0;
}

.note p { margin: 0; }
.note p + p { margin-top: 10px; }

/* Les tableaux debordent plutot que d'ecraser la page sur telephone. */
.scroll { overflow-x: auto; margin: 20px 0; }

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
  min-width: 460px;
}

th, td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--outline);
  vertical-align: top;
}

th { color: var(--ink); font-weight: 600; background: var(--surface); }
td { color: var(--muted); }

/* ── Le pied de page ───────────────────────────────────────────────── */

footer.site {
  border-top: 1px solid var(--outline);
  padding: 30px 0 46px;
  font-size: 15px;
  color: var(--soft);
}

footer.site .wrap { max-width: 900px; }

footer.site nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-bottom: 14px;
}

footer.site a { color: var(--soft); text-decoration: none; }
footer.site a:hover { color: var(--ink); text-decoration: underline; }
footer.site p { color: var(--soft); margin: 0; font-size: 14px; }

/* ── La presentation de l'application (accueil) ──────────────── */

/* La ligne qui remplace l'ancien badge « Bientot disponible ». */
.hero p.facts {
  font-size: 15px;
  color: var(--soft);
  margin: 0;
}

/* Les sections a deux colonnes debordent la largeur de lecture : un visuel et
   son texte cote a cote ne tiennent pas dans 640 px. Le texte, lui, reste a
   une largeur d'oeil raisonnable -- c'est la colonne qui grandit, pas la
   ligne. */
.wrap.features { max-width: 980px; }

.feature {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 0 56px;
  align-items: center;
  padding: 64px 0;
  border-top: 1px solid var(--outline);
}

/* Une section sur deux renvoie le visuel a droite. Le HTML garde l'image en
   premier : sur telephone, tout se remet en colonne et on veut la voir avant
   de lire. */
.feature.reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
.feature.reverse .shot { grid-column: 2; grid-row: 1; }
.feature.reverse .say  { grid-column: 1; grid-row: 1; }

.shot { margin: 0; }

/* Le fond des captures est exactement --bg en mode clair : sans le filet, le
   telephone flotterait sur rien. */
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--outline);
  border-radius: 20px;
}

/* Le meme surtitre en italique que les ecrans de l'application. */
.feature .eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--soft);
  margin: 0 0 4px;
}

/* Les h2 des pages legales portent un filet et une grosse marge : ici, le
   filet est celui de la section. */
.feature h2, .more h2 {
  border-top: none;
  padding-top: 0;
  margin: 0 0 14px;
}

.feature h2 { font-size: clamp(23px, 3.4vw, 28px); }

.feature p { margin: 0 0 14px; }
.feature p:last-of-type { margin-bottom: 0; }

/* Le detail de chaque ecran : une ligne par point, filets compris. */
.specs {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--outline);
}

.specs li {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--outline);
}

.specs b { color: var(--ink); font-weight: 600; }
.specs i { color: var(--ink); font-style: italic; }

/* Les deux raccourcis de saisie, / et !, se citent comme des touches. */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--surface);
  border: 1px solid var(--outline);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--ink);
}

/* ── Ce qui n'a pas de capture ──────────────────────────── */

.more {
  border-top: 1px solid var(--outline);
  padding: 60px 0 0;
}

.more h2 { margin-bottom: 28px; }

.more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 40px;
}

.more-grid h3 { margin: 0 0 6px; }

.more-grid p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
}

/* ── Telephone et tablette ────────────────────────────── */

@media (max-width: 860px) {
  /* `.feature.reverse` porte aussi ses colonnes : il faut le renommer ici,
     sinon sa specificite l'emporte et la mise en colonne ne s'applique qu'a
     une section sur deux. */
  .feature, .feature.reverse {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    padding: 48px 0;
  }
  /* On annule l'alternance : le visuel repasse au-dessus de son texte. */
  .feature .shot, .feature.reverse .shot { grid-column: 1; grid-row: 1; }
  .feature .say,  .feature.reverse .say  { grid-column: 1; grid-row: 2; }

  .shot img { max-width: 320px; margin: 0 auto; }

  .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .more-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

/* Sur telephone, l'en-tete porte quatre choses de front — le logo, le nom, le
   selecteur de langue et le bouton — et il leur faut 381 px sur une ligne, la
   ou un Android courant en offre 360. Le bouton prend donc sa propre rangee,
   en pleine largeur.

   Plutot que de le laisser retrecir, ce que faisait le flex par defaut :
   « Play Store » se coupait en deux au milieu de la pastille. Et plutot que de
   l'effacer sous une certaine largeur : c'est sur telephone qu'il sert le
   plus, puisque c'est de la que l'application s'installe. */
@media (max-width: 460px) {
  header.site .wrap { flex-wrap: wrap; row-gap: 12px; }
  header.site .cta.compact { width: 100%; justify-content: center; }
}

/* Le bouton de l'accueil, lui, porte une phrase entiere : « Telecharger sur
   Google Play » demande 305 px a lui seul, et le plancher d'Android est a 320.
   Il prend donc toute la colonne, d'un cran plus petit. `normal` est la
   soupape : si une traduction plus longue arrivait, elle passerait a la ligne
   au lieu de pousser la page entiere vers la droite. */
@media (max-width: 400px) {
  .hero .cta {
    display: flex;
    width: 100%;
    justify-content: center;
    white-space: normal;
    padding: 15px 18px;
    font-size: 16px;
  }
}