/*
  Site getpibot.com : pages statiques, sans police, script ni ressource externe.
  Reprend la coque de l'app (DESIGN.md) : police du système, couleurs proches des couleurs sémantiques
  d'iOS, accent bleu de laque comme seule couleur empruntée, plat et sans ombre.
*/
:root {
  color-scheme: light dark;
  --fond: #F2F2F7;            /* systemGroupedBackground */
  --carte: #FFFFFF;           /* secondarySystemGroupedBackground */
  --texte: #17161C;           /* encre-clair */
  --texte-2: #55555B;         /* secondaire, 7:1 sur la carte et le fond */
  --filet: rgba(60, 60, 67, 0.22);
  --accent: #2D4BC8;          /* bleu de laque */
  --marque-fond: #FFF4CC;     /* marqueur [À COMPLÉTER] : étincelle lavée */
  --marque-bord: #F2B705;
  --marque-texte: #5C4300;
  --icone-fond: #FF5A5F;      /* icône de l'app, version claire */
  --icone-corps: #FFFFFF;
  --icone-encre: #17161C;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #000000;
    --carte: #1C1C1E;
    --texte: #FFFFFF;
    --texte-2: #AEAEB2;
    --filet: rgba(84, 84, 88, 0.65);
    --accent: #7D93F2;        /* accent-sombre éclairci pour un lien lisible (≥ 4,5:1 sur la carte) */
    --marque-fond: #3A2E00;
    --marque-bord: #FFC62E;
    --marque-texte: #FFE08A;
    --icone-fond: #17161C;    /* icône de l'app, version sombre */
    --icone-corps: #FF5A5F;
    --icone-encre: #FFFFFF;
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;       /* 17 pt, comme le corps de texte d'iOS */
  line-height: 1.5;
}

/* Sur iPhone, le texte suit la taille choisie dans Réglages (Dynamic Type), comme dans l'app. */
@supports (font: -apple-system-body) {
  body { font: -apple-system-body; line-height: 1.5; }
}

main {
  max-width: 40rem;
  margin: 0 auto;
  padding: max(2rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
           max(2rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

.entete {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
  color: inherit;
  text-decoration: none;
}

.icone {
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
}
.icone .fond { fill: var(--icone-fond); }
.icone .b { fill: var(--icone-corps); }
.icone .i { fill: var(--icone-encre); }

h1 {
  font-size: 2em;             /* grand titre d'iOS, 34 pt pour un corps de 17 */
  line-height: 1.15;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 1.18em;
  line-height: 1.3;
  font-weight: 600;
  margin: 2rem 0 0.5rem;
}

p, ul, ol { margin: 0 0 0.875rem; }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: 0.375rem; }

a { color: var(--accent); text-underline-offset: 0.15em; }

.carte {
  background: var(--carte);
  border-radius: 14px;
  padding: 1rem 1.125rem;
  margin: 1.25rem 0;
}
.carte > :last-child { margin-bottom: 0; }
.carte > h2:first-child { margin-top: 0; }

.discret { color: var(--texte-2); font-size: 0.88em; }

/* Une information manque : bien visible, à remplir avant de publier. */
.a-completer {
  background: var(--marque-fond);
  color: var(--marque-texte);
  border: 1px dashed var(--marque-bord);
  border-radius: 6px;
  padding: 0 0.3em;
  font-weight: 600;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

footer {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--filet);
}
footer p { margin-bottom: 0.375rem; }