/* Front Nine — pages d'assistance et de confidentialité.
   Aucune ressource externe : les polices de l'app (Goudy Bookletter 1911 pour les titres, Source Sans 3 pour le
   texte, licence OFL, fichiers de licence dans /fonts) sont servies par le site. Même habillage que l'accueil
   de l'app : le ciel jaune de la boîte et ses collines vertes en tête, puis la carte de score crème. Mode sombre :
   les couleurs sombres de l'app (ciel ambré, collines de nuit). */

@font-face {
  font-family: "Goudy Bookletter 1911";
  src: url("/fonts/GoudyBookletter1911.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/SourceSans3-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/SourceSans3-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #fbf8ee;
  --raised: #ffffff;
  --text: #2d3326;
  --strong: #1d2418;
  --secondary: #6b705f;
  --line: #e7e2d0;
  --title: #1d5b2c;
  --link: #1d6b33;
  --sky-top: #fdd936;
  --sky-bottom: #f4a81c;
  --on-sky: #2f4a22;
  --hill-1: #c9e04a;
  --hill-2: #a3cf3c;
  --hill-3: #7db83a;
  --chip: #1d5b2c;
  --chip-text: #ffffff;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12160f;
    --raised: #1d2219;
    --text: #e2e0d4;
    --strong: #f1efe6;
    --secondary: #a8a99d;
    --line: #313829;
    --title: #f5d24a;
    --link: #9cd067;
    --sky-top: #3b2b06;
    --sky-bottom: #2a2610;
    --on-sky: #e2e0d4;
    --hill-1: #3b5a1e;
    --hill-2: #31501a;
    --hill-3: #284516;
    --chip: #2c6e3d;
    --chip-text: #f1efe6;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 17px/1.6 "Source Sans 3", -apple-system, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Le ciel jaune de la boîte, et trois collines qui descendent vers la carte de score. */
.sky {
  position: relative;
  overflow: hidden;
  background: linear-gradient(175deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
  padding: 18px 16px 92px;
}

.sky::before,
.sky::after,
.hills {
  content: "";
  position: absolute;
  left: -10%;
  width: 120%;
  border-radius: 50% 50% 0 0;
}

.sky::before { bottom: -150px; height: 230px; background: var(--hill-1); transform: rotate(-3deg); }
.sky::after { bottom: -170px; height: 230px; background: var(--hill-2); transform: rotate(4deg); }
.hills { bottom: -196px; height: 240px; background: var(--hill-3); }

.top {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  font-size: 15px;
}

.top a {
  color: var(--on-sky);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 3px 12px;
  text-decoration: none;
  font-weight: 600;
}

.brand {
  position: relative;
  z-index: 1;
  max-width: 440px;
  margin: 18px auto 0;
  text-align: center;
}

.brand img {
  width: 80px;
  height: 80px;
  border-radius: 18px;
  box-shadow: 0 6px 16px rgba(60, 50, 0, 0.25);
}

.overline {
  display: block;
  margin: 14px 0 2px;
  font: 600 15px/1.2 "Source Sans 3", -apple-system, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-sky);
}

h1 {
  margin: 0 0 4px;
  font: 400 46px/1.05 "Goudy Bookletter 1911", Georgia, serif;
  letter-spacing: -0.01em;
  color: var(--title);
}

.tagline {
  margin: 0;
  color: var(--on-sky);
  font-size: 18px;
}

/* La carte de score, qui glisse sur les collines : coins arrondis en haut. */
main {
  position: relative;
  z-index: 1;
  max-width: 712px;
  margin: -40px auto 0;
  padding: 28px 16px 48px;
  background: var(--paper);
  border-radius: 22px 22px 0 0;
}

h2 {
  margin: 0 0 8px;
  font: 400 26px/1.2 "Goudy Bookletter 1911", Georgia, serif;
  color: var(--title);
}

section {
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  margin: 12px 0;
  box-shadow: 0 1px 2px rgba(40, 50, 20, 0.06);
}

section.summary { background: var(--paper); box-shadow: none; }

p { margin: 0 0 10px; }
p:last-child, ul:last-child, ol:last-child, table:last-child { margin-bottom: 0; }

ul { margin: 0 0 10px; padding-left: 20px; }
li { margin: 4px 0; }
strong { color: var(--strong); font-weight: 600; }

/* Tableau du décompte. */
table.points {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 0;
  font-size: 16px;
}

table.points td {
  padding: 7px 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
  color: var(--text);
}

table.points tr:first-child td { border-top: 0; }

table.points td.pts {
  width: 1%;
  padding-left: 16px;
  white-space: nowrap;
  text-align: right;
  font-weight: 600;
  color: var(--strong);
}

.muted { color: var(--secondary); }

a { color: var(--link); text-underline-offset: 3px; }

.date {
  text-align: center;
  color: var(--secondary);
  font-size: 15px;
  margin: 0 0 8px;
}

details { border-top: 1px solid var(--line); padding: 12px 0; }
details:first-of-type { border-top: 0; padding-top: 4px; }
details:last-of-type { padding-bottom: 0; }
summary { cursor: pointer; font-weight: 600; color: var(--strong); }
details p, details ul, details table { margin-top: 8px; }
details p, details li { color: var(--secondary); }

footer {
  margin-top: 28px;
  text-align: center;
  font-size: 15px;
  color: var(--secondary);
}

footer nav { margin-bottom: 10px; }
footer nav a { margin: 0 8px; }