/* Pages légales de tideal.re : mêmes couleurs et polices que l'appli (src/theme).
   Polices servies par le site lui-même, pour ne pas envoyer l'adresse IP des visiteurs à Google. */
@font-face { font-family: 'Baloo 2'; font-weight: 800; font-display: swap; src: url('fonts/Baloo2_800ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Figtree'; font-weight: 400; font-display: swap; src: url('fonts/Figtree_400Regular.ttf') format('truetype'); }
@font-face { font-family: 'Figtree'; font-weight: 700; font-display: swap; src: url('fonts/Figtree_700Bold.ttf') format('truetype'); }
:root {
  --bg: #ffffff;
  --surface: #eaf4f4;
  --ink: #12303a;
  --ink-soft: #4f6b73;
  --line: #dcebec;
  --lagoon: #0b7a86;
  --on-lagoon: #ffffff;
  --yellow: #f5b700;
  --yellow-edge: #c28f00;
  --band: #0b7a86;
  --on-band: #ffffff;
  --label: #075860;
  --lambrequin: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cg%20fill%3D%22%230B7A86%22%3E%3Crect%20width%3D%2240%22%20height%3D%224.2%22/%3E%3Cpath%20d%3D%22M19.4%204%20L38.5%204%20C39.5%206.5%2039.5%2010%2037%2012%20C35.5%2013%2034%2013%2033.5%2012%20C32.5%2014%2033%2016%2034%2017%20C33.5%2020%2031%2022.5%2028.5%2024%20L29%2026.5%20C26%2029%2023%2032.5%2020%2038%20L19.4%2037%20L19.4%204%20Z%22/%3E%3Cpath%20d%3D%22M19.4%204%20L38.5%204%20C39.5%206.5%2039.5%2010%2037%2012%20C35.5%2013%2034%2013%2033.5%2012%20C32.5%2014%2033%2016%2034%2017%20C33.5%2020%2031%2022.5%2028.5%2024%20L29%2026.5%20C26%2029%2023%2032.5%2020%2038%20L19.4%2037%20L19.4%204%20Z%22%20transform%3D%22matrix%28-1%200%200%201%2040%200%29%22/%3E%3C/g%3E%3Cg%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M17.2%206%20L22.8%206%20L20%209.6%20Z%22/%3E%3Cg%20transform%3D%22translate%280%20-1.6%29%22%3E%3Cpath%20d%3D%22M21.2%2019.8%20C22%2015%2024.5%2010.5%2028.5%209.8%20C31.5%209.3%2032.3%2013%2030.6%2015%20C29.6%2016.1%2027.6%2015.8%2027.7%2014.3%20C27.8%2013.4%2028.6%2013.1%2029.2%2013.3%20C28.4%2012.2%2026.2%2012.6%2025%2014.6%20C23.8%2016.6%2022.6%2018.6%2021.2%2019.8%20Z%22/%3E%3Cpath%20d%3D%22M21.2%2019.8%20C22%2015%2024.5%2010.5%2028.5%209.8%20C31.5%209.3%2032.3%2013%2030.6%2015%20C29.6%2016.1%2027.6%2015.8%2027.7%2014.3%20C27.8%2013.4%2028.6%2013.1%2029.2%2013.3%20C28.4%2012.2%2026.2%2012.6%2025%2014.6%20C23.8%2016.6%2022.6%2018.6%2021.2%2019.8%20Z%22%20transform%3D%22matrix%28-1%200%200%201%2040%200%29%22/%3E%3C/g%3E%3Cpath%20d%3D%22M20%2023.5%20L22.3%2027.5%20L20%2031.5%20L17.7%2027.5%20Z%22/%3E%3C/g%3E%3C/svg%3E");
  --font-display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0e1f25;
    --surface: #163039;
    --ink: #e4eff1;
    --ink-soft: #a3bcc2;
    --line: #24414a;
    --lagoon: #5cc3cd;
    --on-lagoon: #0e1f25;
    --band: #0b6670;
    --on-band: #ffffff;
    --label: #9fdde3;
    --lambrequin: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cg%20fill%3D%22%230B6670%22%3E%3Crect%20width%3D%2240%22%20height%3D%224.2%22/%3E%3Cpath%20d%3D%22M19.4%204%20L38.5%204%20C39.5%206.5%2039.5%2010%2037%2012%20C35.5%2013%2034%2013%2033.5%2012%20C32.5%2014%2033%2016%2034%2017%20C33.5%2020%2031%2022.5%2028.5%2024%20L29%2026.5%20C26%2029%2023%2032.5%2020%2038%20L19.4%2037%20L19.4%204%20Z%22/%3E%3Cpath%20d%3D%22M19.4%204%20L38.5%204%20C39.5%206.5%2039.5%2010%2037%2012%20C35.5%2013%2034%2013%2033.5%2012%20C32.5%2014%2033%2016%2034%2017%20C33.5%2020%2031%2022.5%2028.5%2024%20L29%2026.5%20C26%2029%2023%2032.5%2020%2038%20L19.4%2037%20L19.4%204%20Z%22%20transform%3D%22matrix%28-1%200%200%201%2040%200%29%22/%3E%3C/g%3E%3Cg%20fill%3D%22%230E1F25%22%3E%3Cpath%20d%3D%22M17.2%206%20L22.8%206%20L20%209.6%20Z%22/%3E%3Cg%20transform%3D%22translate%280%20-1.6%29%22%3E%3Cpath%20d%3D%22M21.2%2019.8%20C22%2015%2024.5%2010.5%2028.5%209.8%20C31.5%209.3%2032.3%2013%2030.6%2015%20C29.6%2016.1%2027.6%2015.8%2027.7%2014.3%20C27.8%2013.4%2028.6%2013.1%2029.2%2013.3%20C28.4%2012.2%2026.2%2012.6%2025%2014.6%20C23.8%2016.6%2022.6%2018.6%2021.2%2019.8%20Z%22/%3E%3Cpath%20d%3D%22M21.2%2019.8%20C22%2015%2024.5%2010.5%2028.5%209.8%20C31.5%209.3%2032.3%2013%2030.6%2015%20C29.6%2016.1%2027.6%2015.8%2027.7%2014.3%20C27.8%2013.4%2028.6%2013.1%2029.2%2013.3%20C28.4%2012.2%2026.2%2012.6%2025%2014.6%20C23.8%2016.6%2022.6%2018.6%2021.2%2019.8%20Z%22%20transform%3D%22matrix%28-1%200%200%201%2040%200%29%22/%3E%3C/g%3E%3Cpath%20d%3D%22M20%2023.5%20L22.3%2027.5%20L20%2031.5%20L17.7%2027.5%20Z%22/%3E%3C/g%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #0e1f25;
  --surface: #163039;
  --ink: #e4eff1;
  --ink-soft: #a3bcc2;
  --line: #24414a;
  --lagoon: #5cc3cd;
  --on-lagoon: #0e1f25;
  --band: #0b6670;
  --on-band: #ffffff;
  --label: #9fdde3;
  --lambrequin: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cg%20fill%3D%22%230B6670%22%3E%3Crect%20width%3D%2240%22%20height%3D%224.2%22/%3E%3Cpath%20d%3D%22M19.4%204%20L38.5%204%20C39.5%206.5%2039.5%2010%2037%2012%20C35.5%2013%2034%2013%2033.5%2012%20C32.5%2014%2033%2016%2034%2017%20C33.5%2020%2031%2022.5%2028.5%2024%20L29%2026.5%20C26%2029%2023%2032.5%2020%2038%20L19.4%2037%20L19.4%204%20Z%22/%3E%3Cpath%20d%3D%22M19.4%204%20L38.5%204%20C39.5%206.5%2039.5%2010%2037%2012%20C35.5%2013%2034%2013%2033.5%2012%20C32.5%2014%2033%2016%2034%2017%20C33.5%2020%2031%2022.5%2028.5%2024%20L29%2026.5%20C26%2029%2023%2032.5%2020%2038%20L19.4%2037%20L19.4%204%20Z%22%20transform%3D%22matrix%28-1%200%200%201%2040%200%29%22/%3E%3C/g%3E%3Cg%20fill%3D%22%230E1F25%22%3E%3Cpath%20d%3D%22M17.2%206%20L22.8%206%20L20%209.6%20Z%22/%3E%3Cg%20transform%3D%22translate%280%20-1.6%29%22%3E%3Cpath%20d%3D%22M21.2%2019.8%20C22%2015%2024.5%2010.5%2028.5%209.8%20C31.5%209.3%2032.3%2013%2030.6%2015%20C29.6%2016.1%2027.6%2015.8%2027.7%2014.3%20C27.8%2013.4%2028.6%2013.1%2029.2%2013.3%20C28.4%2012.2%2026.2%2012.6%2025%2014.6%20C23.8%2016.6%2022.6%2018.6%2021.2%2019.8%20Z%22/%3E%3Cpath%20d%3D%22M21.2%2019.8%20C22%2015%2024.5%2010.5%2028.5%209.8%20C31.5%209.3%2032.3%2013%2030.6%2015%20C29.6%2016.1%2027.6%2015.8%2027.7%2014.3%20C27.8%2013.4%2028.6%2013.1%2029.2%2013.3%20C28.4%2012.2%2026.2%2012.6%2025%2014.6%20C23.8%2016.6%2022.6%2018.6%2021.2%2019.8%20Z%22%20transform%3D%22matrix%28-1%200%200%201%2040%200%29%22/%3E%3C/g%3E%3Cpath%20d%3D%22M20%2023.5%20L22.3%2027.5%20L20%2031.5%20L17.7%2027.5%20Z%22/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font-body);
}
.band {
  background: var(--band);
  color: var(--on-band);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 18px 6px;
}
.lambrequin {
  height: 36px;
  background: var(--lambrequin) repeat-x 0 0 / 36px 36px;
}
.wrap {
  max-width: 42rem;
  margin: 0 auto;
}
.brand {
  font: 800 1.75rem/1 var(--font-display);
  color: inherit;
  text-decoration: none;
}
.brand span {
  color: var(--yellow);
}
.hang {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: -10px 0 8px;
}
.string {
  width: 2px;
  height: 26px;
  background: var(--ink-soft);
}
.tag {
  max-width: 100%;
  box-sizing: border-box;
  padding: 18px 28px 16px;
  border-radius: 0 0 16px 16px;
  background: var(--yellow);
  color: #12303a;
  text-align: center;
  clip-path: polygon(16% 0, 84% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
  box-shadow: inset 0 -5px 0 var(--yellow-edge);
  transform: rotate(-2deg);
}
.hole {
  display: block;
  width: 12px;
  height: 12px;
  margin: -6px auto 8px;
  border-radius: 50%;
  background: var(--bg);
}
.tag h1 {
  margin: 0;
  font: 800 clamp(1.7rem, 6vw, 2.3rem) / 1.1 var(--font-display);
  text-wrap: balance;
}
.tag p {
  margin: 4px 0 0;
  font-size: 0.9rem;
}
main {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 8px 48px;
}
h2 {
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin: 40px 0 10px;
  padding: 2px 16px 2px 22px;
  background: var(--surface);
  color: var(--label);
  font: 800 1.3rem/1.3 var(--font-display);
  text-wrap: balance;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
}
h3 {
  margin: 20px 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
}
p,
ul {
  margin: 0 0 12px;
}
ul {
  padding-left: 1.2rem;
}
li + li {
  margin-top: 6px;
}
a {
  color: var(--lagoon);
}
a:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}
.summary h2 {
  margin-top: 16px;
}
.table {
  overflow-x: auto;
  margin: 12px 0 16px;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
th,
td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
th {
  font-weight: 700;
  color: var(--ink-soft);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.muted {
  color: var(--ink-soft);
}
footer {
  border-top: 1px solid var(--line);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 20px 32px;
  color: var(--ink-soft);
  font-size: 0.9rem;
}